From 57749610f8eb0fc9eae88dde420bb2cc2601b2bc Mon Sep 17 00:00:00 2001 From: balzack Date: Sat, 9 Sep 2023 00:35:03 -0700 Subject: [PATCH] building out refactored profile screen --- .../ios/Databag.xcodeproj/project.pbxproj | 29 +++--- app/mobile/src/constants/Colors.js | 3 + app/mobile/src/constants/Strings.js | 36 +++++++ app/mobile/src/session/profile/Profile.jsx | 61 +++++++++--- .../src/session/profile/Profile.styled.js | 97 ++++++++++++++++++- .../src/session/profile/useProfile.hook.js | 20 +++- app/mobile/src/session/settings/Settings.jsx | 2 + .../src/session/settings/Settings.styled.js | 4 + 8 files changed, 221 insertions(+), 31 deletions(-) diff --git a/app/mobile/ios/Databag.xcodeproj/project.pbxproj b/app/mobile/ios/Databag.xcodeproj/project.pbxproj index 49fc8aa5..a6fe6d36 100644 --- a/app/mobile/ios/Databag.xcodeproj/project.pbxproj +++ b/app/mobile/ios/Databag.xcodeproj/project.pbxproj @@ -74,15 +74,15 @@ 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = Databag/Images.xcassets; sourceTree = ""; }; 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = Databag/Info.plist; sourceTree = ""; }; 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = Databag/main.m; sourceTree = ""; }; - 22A26F2AA8024E1088D9E0F0 /* Roboto-LightItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-LightItalic.ttf"; path = "../assets/fonts/Roboto-LightItalic.ttf"; sourceTree = ""; }; - 362E7074D5874C16A31B62FE /* Roboto-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Regular.ttf"; path = "../assets/fonts/Roboto-Regular.ttf"; sourceTree = ""; }; + 22A26F2AA8024E1088D9E0F0 /* Roboto-LightItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-LightItalic.ttf"; path = "../assets/fonts/Roboto-LightItalic.ttf"; sourceTree = ""; }; + 362E7074D5874C16A31B62FE /* Roboto-Regular.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Regular.ttf"; path = "../assets/fonts/Roboto-Regular.ttf"; sourceTree = ""; }; 3B4392A12AC88292D35C810B /* Pods-Databag.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Databag.debug.xcconfig"; path = "Target Support Files/Pods-Databag/Pods-Databag.debug.xcconfig"; sourceTree = ""; }; - 534B4A5F74BC47BA8A24CA77 /* Roboto-BoldItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-BoldItalic.ttf"; path = "../assets/fonts/Roboto-BoldItalic.ttf"; sourceTree = ""; }; + 534B4A5F74BC47BA8A24CA77 /* Roboto-BoldItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-BoldItalic.ttf"; path = "../assets/fonts/Roboto-BoldItalic.ttf"; sourceTree = ""; }; 5709B34CF0A7D63546082F79 /* Pods-Databag.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Databag.release.xcconfig"; path = "Target Support Files/Pods-Databag/Pods-Databag.release.xcconfig"; sourceTree = ""; }; - 5B470EE70F4B40FA93CE1ED6 /* Roboto-Italic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Italic.ttf"; path = "../assets/fonts/Roboto-Italic.ttf"; sourceTree = ""; }; + 5B470EE70F4B40FA93CE1ED6 /* Roboto-Italic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Italic.ttf"; path = "../assets/fonts/Roboto-Italic.ttf"; sourceTree = ""; }; 5B7EB9410499542E8C5724F5 /* Pods-Databag-DatabagTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Databag-DatabagTests.debug.xcconfig"; path = "Target Support Files/Pods-Databag-DatabagTests/Pods-Databag-DatabagTests.debug.xcconfig"; sourceTree = ""; }; - 5F30ED55DB1949EAB4C68C0E /* Roboto-BlackItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-BlackItalic.ttf"; path = "../assets/fonts/Roboto-BlackItalic.ttf"; sourceTree = ""; }; - 680D48DE60574F0082B2AA56 /* Roboto-Light.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Light.ttf"; path = "../assets/fonts/Roboto-Light.ttf"; sourceTree = ""; }; + 5F30ED55DB1949EAB4C68C0E /* Roboto-BlackItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-BlackItalic.ttf"; path = "../assets/fonts/Roboto-BlackItalic.ttf"; sourceTree = ""; }; + 680D48DE60574F0082B2AA56 /* Roboto-Light.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Light.ttf"; path = "../assets/fonts/Roboto-Light.ttf"; sourceTree = ""; }; 7B13A773299E21170048D0DD /* GoogleService-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = "GoogleService-Info.plist"; sourceTree = ""; }; 7B4A533A29F39E250036F3ED /* Sharing.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = Sharing.appex; sourceTree = BUILT_PRODUCTS_DIR; }; 7B4A533C29F39E250036F3ED /* ShareViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareViewController.swift; sourceTree = ""; }; @@ -91,15 +91,15 @@ 7B4A534929F39ED90036F3ED /* Sharing.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = Sharing.entitlements; sourceTree = ""; }; 7B6135A429B68A7B0094A6E7 /* Databag.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = Databag.entitlements; path = Databag/Databag.entitlements; sourceTree = ""; }; 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = Databag/LaunchScreen.storyboard; sourceTree = ""; }; - 81D33AA1ED5E4DA196301306 /* Roboto-Thin.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Thin.ttf"; path = "../assets/fonts/Roboto-Thin.ttf"; sourceTree = ""; }; + 81D33AA1ED5E4DA196301306 /* Roboto-Thin.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Thin.ttf"; path = "../assets/fonts/Roboto-Thin.ttf"; sourceTree = ""; }; 89C6BE57DB24E9ADA2F236DE /* Pods-Databag-DatabagTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Databag-DatabagTests.release.xcconfig"; path = "Target Support Files/Pods-Databag-DatabagTests/Pods-Databag-DatabagTests.release.xcconfig"; sourceTree = ""; }; 9462C028F47F083241BB7941 /* Pods_Databag.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Databag.framework; sourceTree = BUILT_PRODUCTS_DIR; }; - B95DE2563CFF4F6994482640 /* Roboto-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Bold.ttf"; path = "../assets/fonts/Roboto-Bold.ttf"; sourceTree = ""; }; - D6B3F198900D438990E3E250 /* Roboto-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Medium.ttf"; path = "../assets/fonts/Roboto-Medium.ttf"; sourceTree = ""; }; - DD10764B06034C9DBFF48B6A /* Roboto-ThinItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-ThinItalic.ttf"; path = "../assets/fonts/Roboto-ThinItalic.ttf"; sourceTree = ""; }; - ECFB49329806460281EC8695 /* Roboto-Black.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Black.ttf"; path = "../assets/fonts/Roboto-Black.ttf"; sourceTree = ""; }; + B95DE2563CFF4F6994482640 /* Roboto-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Bold.ttf"; path = "../assets/fonts/Roboto-Bold.ttf"; sourceTree = ""; }; + D6B3F198900D438990E3E250 /* Roboto-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Medium.ttf"; path = "../assets/fonts/Roboto-Medium.ttf"; sourceTree = ""; }; + DD10764B06034C9DBFF48B6A /* Roboto-ThinItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-ThinItalic.ttf"; path = "../assets/fonts/Roboto-ThinItalic.ttf"; sourceTree = ""; }; + ECFB49329806460281EC8695 /* Roboto-Black.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-Black.ttf"; path = "../assets/fonts/Roboto-Black.ttf"; sourceTree = ""; }; ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; - F942FA23DB5E41CF8FA13489 /* Roboto-MediumItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-MediumItalic.ttf"; path = "../assets/fonts/Roboto-MediumItalic.ttf"; sourceTree = ""; }; + F942FA23DB5E41CF8FA13489 /* Roboto-MediumItalic.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Roboto-MediumItalic.ttf"; path = "../assets/fonts/Roboto-MediumItalic.ttf"; sourceTree = ""; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -233,7 +233,6 @@ DD10764B06034C9DBFF48B6A /* Roboto-ThinItalic.ttf */, ); name = Resources; - path = ""; sourceTree = ""; }; BBD78D7AC51CEA395F1C20DB /* Pods */ = { @@ -679,7 +678,7 @@ "$(inherited)", "@executable_path/Frameworks", ); - MARKETING_VERSION = 1.21; + MARKETING_VERSION = 1.22; OTHER_LDFLAGS = ( "$(inherited)", "-ObjC", @@ -713,7 +712,7 @@ "$(inherited)", "@executable_path/Frameworks", ); - MARKETING_VERSION = 1.21; + MARKETING_VERSION = 1.22; OTHER_LDFLAGS = ( "$(inherited)", "-ObjC", diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js index eda61b29..9a7d086c 100644 --- a/app/mobile/src/constants/Colors.js +++ b/app/mobile/src/constants/Colors.js @@ -48,6 +48,7 @@ const LightColors = { disabledIndicator: '#eeeeee', disconnectedIndicator: '#aa0000', sliderGrip: '#eeeeee', + areaBorder: '#ffffff', }; const DarkColors = { @@ -98,6 +99,7 @@ const DarkColors = { disabledIndicator: '#eeeeee', disconnectedIndicator: '#aa0000', sliderGrip: '#eeeeee', + areaBorder: '#ffffff', }; function getColor(label) { @@ -152,6 +154,7 @@ export const Colors = { disabledIndicator: getColor('disabledIndicator'), disconnectedIndicator: getColor('disconnectedIndicator'), sliderGrip: getColor('sliderGrip'), + areaBorder: getColor('areaBorder'), background: '#8fbea7', primary: '#448866', diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js index dc6717d3..28cb814c 100644 --- a/app/mobile/src/constants/Strings.js +++ b/app/mobile/src/constants/Strings.js @@ -72,6 +72,15 @@ const Strings = [ noBlockedTopics: 'No Blocked Topics', noBlockedMessages: 'No Blocked Messages', restore: 'Restore', + + //profile page + edit: 'Edit', + name: 'Name', + location: 'Location', + description: 'Description', + registryVisible: 'Visible in Registry', + editImage: 'Edit Image', + editDetails: 'Edit Details', }, { visibleRegistry: 'Visible dans le Registre', @@ -141,6 +150,15 @@ const Strings = [ noBlockedTopics: 'Aucun Sujet Bloqué', noBlockedMessages: 'Aucun Message Bloqué', restore: 'Restaurer', + + //profile page + edit: 'Modifier', + name: 'Nom', + location: 'Emplacement', + description: 'Description', + registryVisible: 'Visible dans le Registre', + editImage: 'Éditer l\'Image', + editDetails: 'Modifier les Détails', }, { visibleRegistry: 'Visible en el Registro', @@ -210,6 +228,15 @@ const Strings = [ noBlockedTopics: 'No Hay Temas Bloqueados ', noBlockedMessages: 'No Hay Mensajes Bloqueados', restore: 'Restaurar', + + //profile page + edit: 'Editar', + name: 'Nombre', + location: 'Ubicación', + description: 'Descripción', + registryVisible: 'Visible en el Registro', + editImage: 'Editar Imagen', + editDetails: 'Editar Detalles', }, { visibleRegistry: 'Sichtbar in der Registrierung', @@ -279,6 +306,15 @@ const Strings = [ noBlockedTopics: 'Keine Blockierten Themen', noBlockedMessages: 'Keine Blockierten Nachrichten', restore: 'Wiederherstellen', + + //profile page + edit: 'Bearbeiten', + name: 'Name', + location: 'Standort', + description: 'Beschreibung', + registryVisible: 'Sichtbar in der Registrierung', + editImage: 'Bild Bearbeiten', + editDetails: 'Details bearbeiten', } ]; diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx index 33cf046f..8faccfbf 100644 --- a/app/mobile/src/session/profile/Profile.jsx +++ b/app/mobile/src/session/profile/Profile.jsx @@ -1,5 +1,5 @@ import { ActivityIndicator, KeyboardAvoidingView, Image, Modal, View, Switch, Text, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native'; -import Ionicons from 'react-native-vector-icons/AntDesign'; +import AntIcons from 'react-native-vector-icons/AntDesign'; import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import ImagePicker from 'react-native-image-crop-picker' import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; @@ -30,8 +30,8 @@ export function Profile() { catch (err) { console.log(err); Alert.alert( - 'Account Update Failed', - 'Please try again.' + state.strings.error, + state.strings.tryAgain, ); } } @@ -44,29 +44,66 @@ export function Profile() { catch (err) { console.log(err); Alert.alert( - 'Failed to Save Details', - 'Please try again.' + state.strings.error, + state.strings.tryAgain, ) } } - console.log(state.imageSource); - - return ( - + - Edit - + { state.strings.edit } + - + { state.name && ( + { state.name } + )} + { !state.name && ( + { state.strings.name } + )} + + { state.username } + + + + + { state.location && ( + { state.location } + )} + { !state.location && ( + Location + )} + + + + + { state.location && ( + { state.description } + )} + { !state.description && ( + Description + )} + + + + + + + { state.strings.visibleRegistry } + + + + + ); } diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js index 161f94ac..c5a935c2 100644 --- a/app/mobile/src/session/profile/Profile.styled.js +++ b/app/mobile/src/session/profile/Profile.styled.js @@ -11,17 +11,21 @@ export const styles = StyleSheet.create({ details: { width: '100%', position: 'relative', - top: -16, + top: -32, minHeight: 32, backgroundColor: 'yellow', borderTopRightRadius: 32, borderTopLeftRadius: 32, backgroundColor: Colors.screenBase, + borderLeftWidth: 1, + borderRightWidth: 1, + borderTopWidth: 2, + borderColor: Colors.areaBorder, }, control: { position: 'absolute', width: '100%', - top: -16, + top: -24, display: 'flex', alignItems: 'center', }, @@ -36,13 +40,100 @@ export const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', + borderLeftWidth: 1, + borderRightWidth: 1, + borderTopWidth: 2, + borderColor: Colors.areaBorder, }, editLabel: { color: Colors.text, paddingLeft: 8, paddingRight: 8, - fontSize: 12, + paddingTop: 2, + fontSize: 16, fontFamily: 'roboto', + color: Colors.linkText, + }, + nameSet: { + color: Colors.text, + fontFamily: 'roboto', + fontSize: 48, + paddingTop: 16, + paddingLeft: 16, + paddingRight: 16, + }, + nameUnset: { + color: Colors.inputPlaceholder, + fontFamily: 'roboto', + fontSize: 48, + paddingTop: 8, + paddingLeft: 16, + fontStyle: 'italic', + }, + username: { + color: Colors.text, + fontFamily: 'roboto', + fontSize: 18, + paddingLeft: 16, + paddingBottom: 16, + }, + group: { + marginLeft: 16, + marginRight: 16, + backgroundColor: Colors.areaBase, + borderRadius: 8, + marginTop: 16, + }, + divider: { + width: '100%', + height: 2, + backgroundColor: Colors.screenBase, + }, + entry: { + width: '100%', + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + padding: 4, + height: 48, + }, + icon: { + paddingLeft: 8, + paddingRight: 8, + }, + locationSet: { + fontSize: 16, + color: Colors.text, + fontFamily: 'roboto', + }, + locationUnset: { + fontSize: 16, + color: Colors.inputPlaceholder, + fontFamily: 'roboto', + fontStyle: 'italic', + }, + descriptionSet: { + fontSize: 16, + color: Colors.text, + fontFamily: 'roboto', + }, + descriptionUnset: { + fontSize: 16, + color: Colors.inputPlaceholder, + fontFamily: 'roboto', + fontStyle: 'italic', + }, + visibleLabel: { + fontSize: 16, + color: Colors.text, + fontFamily: 'roboto', + }, + track: { + false: Colors.idleFill, + true: Colors.activeFill, + }, + visibleSwitch: { + transform: [{ scaleX: .6 }, { scaleY: .6 }], }, }); diff --git a/app/mobile/src/session/profile/useProfile.hook.js b/app/mobile/src/session/profile/useProfile.hook.js index e73f8d26..102a0362 100644 --- a/app/mobile/src/session/profile/useProfile.hook.js +++ b/app/mobile/src/session/profile/useProfile.hook.js @@ -1,17 +1,26 @@ import { useState, useEffect, useRef, useContext } from 'react'; import { useWindowDimensions } from 'react-native'; import { useNavigate } from 'react-router-dom'; +import { getLanguageStrings } from 'constants/Strings'; import { ProfileContext } from 'context/ProfileContext'; +import { AccountContext } from 'context/AccountContext'; import avatar from 'images/avatar.png'; export function useProfile() { const [state, setState] = useState({ + strings: getLanguageStrings(), + searchable: null, imageSource: null, + name: null, + username: null, + location: null, + description: null, }); const dimensions = useWindowDimensions(); const profile = useContext(ProfileContext); + const account = useContext(AccountContext); const updateState = (value) => { setState((s) => ({ ...s, ...value })); @@ -27,13 +36,22 @@ export function useProfile() { } }, [dimensions]); + useEffect(() => { + const { searchable } = account.state.status; + updateState({ searchable }); + }, [account.state]); + useEffect(() => { const { name, handle, node, location, description, image } = profile.state.identity; const imageSource = image ? { uri: profile.state.imageUrl } : avatar; - updateState({ name, handle, node, location, description, imageSource }); + const username = `${handle} / ${node}` + updateState({ name, username, location, description, imageSource }); }, [profile.state]); const actions = { + setVisible: async (searchable) => { + await account.actions.setSearchable(searchable); + }, }; return { state, actions }; diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx index 791bddf1..9bda4502 100644 --- a/app/mobile/src/session/settings/Settings.jsx +++ b/app/mobile/src/session/settings/Settings.jsx @@ -322,6 +322,8 @@ export function Settings() { + +