1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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,
},
})
|
