From 9010078489eae77c620a3bf4802ff6b417ea31f9 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Wed, 7 Sep 2022 16:00:25 -0500 Subject: [PATCH] Add EditProfile modal --- src/state/lib/api.ts | 11 +++ src/state/models/profile-view.ts | 8 ++ src/state/models/shell.ts | 24 ++++- src/view/com/modals/EditProfile.tsx | 123 +++++++++++++++++++++++++ src/view/com/modals/Modal.tsx | 8 ++ src/view/com/profile/ProfileHeader.tsx | 5 +- src/view/com/util/ErrorMessage.tsx | 1 - src/view/lib/styles.ts | 2 +- todos.txt | 3 +- 9 files changed, 177 insertions(+), 8 deletions(-) create mode 100644 src/view/com/modals/EditProfile.tsx diff --git a/src/state/lib/api.ts b/src/state/lib/api.ts index 64a88cde..3324525b 100644 --- a/src/state/lib/api.ts +++ b/src/state/lib/api.ts @@ -124,6 +124,17 @@ export async function unfollow( return numDels > 0 } +export async function updateProfile( + adx: AdxClient, + user: string, + profile: bsky.Profile.Record, +) { + return await adx + .repo(user, true) + .collection('blueskyweb.xyz:Profiles') + .put('Profile', 'profile', {$type: 'blueskyweb.xyz:Profile', ...profile}) +} + type WherePred = (_record: GetRecordResponseValidated) => Boolean async function deleteWhere( coll: AdxRepoCollectionClient, diff --git a/src/state/models/profile-view.ts b/src/state/models/profile-view.ts index 89c8a75d..42c3737e 100644 --- a/src/state/models/profile-view.ts +++ b/src/state/models/profile-view.ts @@ -89,6 +89,14 @@ export class ProfileViewModel implements bsky.ProfileView.Response { } } + async updateProfile(profile: bsky.Profile.Record) { + if (this.did !== this.rootStore.me.did) { + throw new Error('Not your profile!') + } + await apilib.updateProfile(this.rootStore.api, this.did, profile) + await this.refresh() + } + // state transitions // = diff --git a/src/state/models/shell.ts b/src/state/models/shell.ts index c67b474b..2dddb9a3 100644 --- a/src/state/models/shell.ts +++ b/src/state/models/shell.ts @@ -1,4 +1,5 @@ import {makeAutoObservable} from 'mobx' +import {ProfileViewModel} from './profile-view' export class LinkActionsModel { name = 'link-actions' @@ -24,15 +25,34 @@ export class ComposePostModel { } } +export class EditProfileModel { + name = 'edit-profile' + + constructor(public profileView: ProfileViewModel) { + makeAutoObservable(this) + } +} + export class ShellModel { isModalActive = false - activeModal: LinkActionsModel | SharePostModel | ComposePostModel | undefined + activeModal: + | LinkActionsModel + | SharePostModel + | ComposePostModel + | EditProfileModel + | undefined constructor() { makeAutoObservable(this) } - openModal(modal: LinkActionsModel | SharePostModel | ComposePostModel) { + openModal( + modal: + | LinkActionsModel + | SharePostModel + | ComposePostModel + | EditProfileModel, + ) { this.isModalActive = true this.activeModal = modal } diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx new file mode 100644 index 00000000..72cbd411 --- /dev/null +++ b/src/view/com/modals/EditProfile.tsx @@ -0,0 +1,123 @@ +import React, {useState} from 'react' +import Toast from '../util/Toast' +import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' +import {ErrorMessage} from '../util/ErrorMessage' +import {useStores} from '../../../state' +import {ProfileViewModel} from '../../../state/models/profile-view' +import {s, colors, gradients} from '../../lib/styles' + +export const snapPoints = ['80%'] + +export function Component({profileView}: {profileView: ProfileViewModel}) { + const store = useStores() + const [error, setError] = useState('') + const [displayName, setDisplayName] = useState( + profileView.displayName || '', + ) + const [description, setDescription] = useState( + profileView.description || '', + ) + const onPressSave = async () => { + if (error) { + setError('') + } + try { + await profileView.updateProfile({ + displayName, + description, + }) + Toast.show('Profile updated', { + position: Toast.positions.TOP, + }) + store.shell.closeModal() + } catch (e: any) { + console.error(e) + setError( + 'Failed to save your profile. Check your internet connection and try again.', + ) + } + } + + return ( + + Edit my profile + + {error !== '' && ( + + + + )} + + Display Name + + + + Biography + + + + + Save Changes + + + + + ) +} + +const styles = StyleSheet.create({ + inner: { + padding: 14, + }, + group: { + marginBottom: 10, + }, + label: { + fontWeight: 'bold', + paddingHorizontal: 4, + paddingBottom: 4, + }, + textInput: { + borderWidth: 1, + borderColor: colors.gray3, + borderRadius: 6, + paddingHorizontal: 14, + paddingVertical: 10, + fontSize: 16, + }, + textArea: { + borderWidth: 1, + borderColor: colors.gray3, + borderRadius: 6, + paddingHorizontal: 12, + paddingTop: 10, + fontSize: 16, + height: 100, + textAlignVertical: 'top', + }, + btn: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + width: '100%', + borderRadius: 32, + padding: 10, + marginBottom: 10, + }, +}) diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 6e084600..73ac1446 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -10,6 +10,7 @@ import * as models from '../../../state/models/shell' import * as LinkActionsModal from './LinkActions' import * as SharePostModal from './SharePost.native' import * as ComposePostModal from './ComposePost' +import * as EditProfile from './EditProfile' export const Modal = observer(function Modal() { const store = useStores() @@ -50,6 +51,13 @@ export const Modal = observer(function Modal() { {...(store.shell.activeModal as models.ComposePostModel)} /> ) + } else if (store.shell.activeModal?.name === 'edit-profile') { + snapPoints = EditProfile.snapPoints + element = ( + + ) } else { return } diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 59af6b20..5ac16126 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -1,4 +1,4 @@ -import React, {useState, useEffect} from 'react' +import React from 'react' import {observer} from 'mobx-react-lite' import { ActivityIndicator, @@ -12,6 +12,7 @@ import LinearGradient from 'react-native-linear-gradient' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {ProfileViewModel} from '../../../state/models/profile-view' import {useStores} from '../../../state' +import {EditProfileModel} from '../../../state/models/shell' import {pluralize} from '../../lib/strings' import {s, gradients, colors} from '../../lib/styles' import {AVIS, BANNER} from '../../lib/assets' @@ -42,7 +43,7 @@ export const ProfileHeader = observer(function ProfileHeader({ ) } const onPressEditProfile = () => { - // TODO + store.shell.openModal(new EditProfileModel(view)) } const onPressMenu = () => { // TODO diff --git a/src/view/com/util/ErrorMessage.tsx b/src/view/com/util/ErrorMessage.tsx index 7c8670da..3acea1ca 100644 --- a/src/view/com/util/ErrorMessage.tsx +++ b/src/view/com/util/ErrorMessage.tsx @@ -35,7 +35,6 @@ export function ErrorMessage({ const styles = StyleSheet.create({ outer: { - flex: 1, flexDirection: 'row', alignItems: 'center', backgroundColor: colors.red1, diff --git a/src/view/lib/styles.ts b/src/view/lib/styles.ts index 17a24707..ba6dc0de 100644 --- a/src/view/lib/styles.ts +++ b/src/view/lib/styles.ts @@ -52,7 +52,7 @@ export const gradients = { export const s = StyleSheet.create({ // font weights fw600: {fontWeight: '600'}, - bold: {fontWeight: '600'}, + bold: {fontWeight: 'bold'}, fw500: {fontWeight: '500'}, semiBold: {fontWeight: '500'}, fw400: {fontWeight: '400'}, diff --git a/todos.txt b/todos.txt index 0f453350..91ccb43f 100644 --- a/todos.txt +++ b/todos.txt @@ -7,9 +7,8 @@ Paul's todo list - Update the view after creating a post - Profile - Real badges - - Edit profile + - Edit profile: avatar, cover photo - More button - - Followers & following as modal? - Search view - * - Linking