Add EditProfile modal
parent
5ae39612d7
commit
9010078489
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
// =
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
})
|
|
@ -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 />
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -35,7 +35,6 @@ export function ErrorMessage({
|
|||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.red1,
|
||||
|
|
|
@ -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'},
|
||||
|
|
Loading…
Reference in New Issue