From 663f4641f3a5584d5dc9ab4e2273a80b5f81322f Mon Sep 17 00:00:00 2001 From: natjms Date: Sat, 27 Mar 2021 09:16:35 -0300 Subject: [PATCH] Add settings page --- assets/eva-icons/close.png | Bin 0 -> 7829 bytes assets/eva-icons/plus.png | Bin 0 -> 7411 bytes src/App.js | 2 + src/components/pages/profile.js | 35 +-- src/components/pages/profile/settings.js | 295 +++++++++++++++++++++++ src/interface/rendering.js | 4 + 6 files changed, 319 insertions(+), 17 deletions(-) create mode 100644 assets/eva-icons/close.png create mode 100644 assets/eva-icons/plus.png create mode 100644 src/components/pages/profile/settings.js diff --git a/assets/eva-icons/close.png b/assets/eva-icons/close.png new file mode 100644 index 0000000000000000000000000000000000000000..e85d20a9a6714666530c3ae3f7ca6cebabd08ded GIT binary patch literal 7829 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 literal 0 HcmV?d00001 diff --git a/assets/eva-icons/plus.png b/assets/eva-icons/plus.png new file mode 100644 index 0000000000000000000000000000000000000000..3a7e1478be10a06eafa69a8467421b92c200d524 GIT binary patch literal 7411 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 ps}X&10-3rt_STC3L}kd]*>/ig, ""); -} - function getMutuals(yours, theirs) { // Where yours and theirs are arrays of followers, as returned by the oAPI @@ -164,19 +161,24 @@ const ProfileDisplayJsx = ({navigation}) => { let profileButton; if (state.own) { profileButton = ( - + { + navigation.navigate("Settings"); + } + }> - Edit profile + Settings - + ); } else { profileButton = ( - + Follow - + ) } @@ -201,11 +203,11 @@ const ProfileDisplayJsx = ({navigation}) => { { state.own ? - + - + : { { state.profile.statuses_count } posts •  - { const context = state.own ? "People following you" @@ -228,8 +229,8 @@ const ProfileDisplayJsx = ({navigation}) => { }> { state.own ? - "View followers" - :state.mutuals.length + " mutuals" + <>View followers + : <>{state.mutuals.length + " mutuals"} } diff --git a/src/components/pages/profile/settings.js b/src/components/pages/profile/settings.js new file mode 100644 index 0000000..81b86fd --- /dev/null +++ b/src/components/pages/profile/settings.js @@ -0,0 +1,295 @@ +import React, { useState, useEffect } from "react"; + +import { + SafeAreaView, + View, + TextInput, + Text, + Image, + TouchableOpacity, + Dimensions, +} from "react-native"; + +import { withoutHTML } from "src/interface/rendering"; + +import { ScreenWithBackBarJsx } from "src/components/navigation/navigators"; + +const TEST_IMAGE = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg"; +const TEST_PROFILE = { + username: "njms", + acct: "njms", + display_name: "Nat🔆", + locked: false, + bot: false, + note: "Yeah heart emoji.", + avatar: TEST_IMAGE, + followers_count: "1 jillion", + statuses_count: 334, + fields: [ + { + name: "Blog", + value: "https://njms.ca", + verified_at: "some time" + }, + { + name: "Github", + value: "https://github.com/natjms", + verified_at: null + } + ] +}; + +const SettingsJsx = (props) => { + const [state, setState] = useState({ + // Use Context to get this stuff eventually + profile: TEST_PROFILE, + newProfile: TEST_PROFILE, + }); + + useEffect(() => { console.log(state) }); + + const fields = state.newProfile.fields; + + return ( + + + + + + Change profile photo + + + + + Display name + { + setState({...state, + newProfile: {...state.newProfile, display_name: value} + }); + } + }/> + + User name + { + setState({...state, + newProfile: {...state.newProfile, username: value} + }); + } + }/> + + Bio + { + setState({...state, + newProfile: {...state.newProfile, note: value} + }); + } + }/> + { + fields.map((field, i) => + + { + let newFields; + if (fields.length == 1) { + newFields = [{ name: "", value: "" }]; + } else { + newFields = state.newProfile.fields; + newFields.splice(i, 1); + } + + setState({...state, + newProfile: {...state.newProfile, + fields: newFields, + }, + }); + } + }> + + + + Name + { + let newFields = fields; + newFields[i] = {...newFields[i], + name: text, + }; + + setState({...state, + newProfile: {...state.newProfile, + fields: newFields, + }, + }); + } + } /> + + + Value + { + let newFields = fields; + newFields[i] = {...newFields[i], + value: text, + }; + + setState({...state, + newProfile: {...state.newProfile, + fields: newFields, + }, + }); + } + } /> + + + ) + } + { + setState({...state, + newProfile: {...state.newProfile, + fields: state.newProfile.fields.concat({ name: "", value: ""}), + }, + }); + } + }> + + + + Save Profile + + + Log out + + + + ); +}; + +const SCREEN_WIDTH = Dimensions.get("window").width; +const styles = { + label: { + paddingTop: 10, + fontWeight: "bold", + color: "#888", + }, + bar: { + borderBottomWidth: 1, + borderBottomColor: "#888", + padding: 10, + }, + avatar: { + container: { + paddingTop: 10, + paddingBottom: 10, + flex: 1, + alignItems: "center", + }, + image: { + width: SCREEN_WIDTH / 5, + height: SCREEN_WIDTH / 5, + borderRadius: SCREEN_WIDTH / 10, + marginBottom: 10, + }, + change: { + fontSize: 18, + color: "#888", + }, + }, + input: { + container: { + padding: 10, + }, + }, + fields: { + container: { + flex: 1, + flexDirection: "row", + alignItems: "flex-end", + }, + cross: { + width: 30, + height: 30, + marginRight: 10, + marginBottom: 10, + }, + plus: { + width: 30, + height: 30, + marginLeft: "auto", + marginRight: "auto", + marginTop: 10, + }, + subContainer: { + flexGrow: 0.5, + }, + cell: { + width: SCREEN_WIDTH / 2.5, + }, + }, + largeButton: { + width: SCREEN_WIDTH / 1.2, + padding: 15, + marginTop: 10, + marginBottom: 5, + marginLeft: "auto", + marginRight: "auto", + borderWidth: 1, + borderColor: "#888", + borderRadius: 5, + textAlign: "center", + }, + textWarning: { + fontWeight: "bold", + textDecorationLine: "underline", + }, +}; + +export default SettingsJsx; diff --git a/src/interface/rendering.js b/src/interface/rendering.js index 6dee69e..ff2774d 100644 --- a/src/interface/rendering.js +++ b/src/interface/rendering.js @@ -1,3 +1,7 @@ +export function withoutHTML(string) { + return string.replaceAll(/<[^>]*>/ig, ""); +} + export function pluralize(n, singular, plural) { if (n < 2) { return singular;