Add EditProfile modal

zio/stable
Paul Frazee 2022-09-07 16:00:25 -05:00
parent 5ae39612d7
commit 9010078489
9 changed files with 177 additions and 8 deletions

View File

@ -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,

View File

@ -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
// =

View File

@ -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
}

View File

@ -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<string>('')
const [displayName, setDisplayName] = useState<string>(
profileView.displayName || '',
)
const [description, setDescription] = useState<string>(
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 (
<View style={s.flex1}>
<Text style={[s.textCenter, s.bold, s.f16]}>Edit my profile</Text>
<View style={styles.inner}>
{error !== '' && (
<View style={s.mb10}>
<ErrorMessage message={error} />
</View>
)}
<View style={styles.group}>
<Text style={styles.label}>Display Name</Text>
<TextInput
style={styles.textInput}
placeholder="e.g. Alice Roberts"
value={displayName}
onChangeText={setDisplayName}
/>
</View>
<View style={styles.group}>
<Text style={styles.label}>Biography</Text>
<TextInput
style={[styles.textArea]}
placeholder="e.g. Artist, dog-lover, and memelord."
multiline
value={description}
onChangeText={setDescription}
/>
</View>
<TouchableOpacity style={s.mt10} onPress={onPressSave}>
<LinearGradient
colors={[gradients.primary.start, gradients.primary.end]}
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn]}>
<Text style={[s.white, s.bold]}>Save Changes</Text>
</LinearGradient>
</TouchableOpacity>
</View>
</View>
)
}
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,
},
})

View File

@ -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 = (
<EditProfile.Component
{...(store.shell.activeModal as models.EditProfileModel)}
/>
)
} else {
return <View />
}

View File

@ -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

View File

@ -35,7 +35,6 @@ export function ErrorMessage({
const styles = StyleSheet.create({
outer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: colors.red1,

View File

@ -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'},

View File

@ -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