Upload profile image (#29)

* add editable button profile picture

* add editable button cover picture

* upload profile photos (save them locally)

* rollback pbxproj changes

* rollback podfile checksum (for git only)

* move edit photos onto edit profile modal

* adjust edit icon and image cropping size

* added temporary (react state) image

* added IMAGES_ENABLED flag

* minor lint fix

* save local photos on edit profile upload (wip)

* save profile photos on profile view state (wip)

* remove unecessary computed

* save photo in state before pushing it to viewmodel

* refactor profile pictures's state

* remove unnecessary isMe prop

* removing old comments

* tweak icon size & position

* A few styling tweaks and a fix to mobx state management

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/com/modals/EditProfile.tsx

@@ -13,8 +13,10 @@ import {
   MAX_DESCRIPTION,
 } from '../../../lib/strings'
 import * as Profile from '../../../third-party/api/src/client/types/app/bsky/actor/profile'
+import {UserBanner} from '../util/UserBanner'
+import {UserAvatar} from '../util/UserAvatar'
 
-export const snapPoints = ['60%']
+export const snapPoints = ['80%']
 
 export function Component({
   profileView,
@@ -31,6 +33,12 @@ export function Component({
   const [description, setDescription] = useState<string>(
     profileView.description || '',
   )
+  const [userBanner, setUserBanner] = useState<string | null>(
+    profileView.userBanner,
+  )
+  const [userAvatar, setUserAvatar] = useState<string | null>(
+    profileView.userAvatar,
+  )
   const onPressCancel = () => {
     store.shell.closeModal()
   }
@@ -51,6 +59,8 @@ export function Component({
             description,
           }
         },
+        userAvatar, // TEMP
+        userBanner, // TEMP
       )
       Toast.show('Profile updated')
       onUpdate?.()
@@ -67,12 +77,28 @@ export function Component({
     <View style={s.flex1}>
       <BottomSheetScrollView style={styles.inner}>
         <Text style={styles.title}>Edit my profile</Text>
+        <View style={styles.photos}>
+          <UserBanner
+            userBanner={userBanner}
+            setUserBanner={setUserBanner}
+            handle={profileView.handle}
+          />
+          <View style={styles.avi}>
+            <UserAvatar
+              size={80}
+              userAvatar={userAvatar}
+              handle={profileView.handle}
+              setUserAvatar={setUserAvatar}
+              displayName={profileView.displayName}
+            />
+          </View>
+        </View>
         {error !== '' && (
           <View style={s.mb10}>
             <ErrorMessage message={error} />
           </View>
         )}
-        <View style={styles.group}>
+        <View>
           <Text style={styles.label}>Display Name</Text>
           <BottomSheetTextInput
             style={styles.textInput}
@@ -81,7 +107,7 @@ export function Component({
             onChangeText={v => setDisplayName(enforceLen(v, MAX_DISPLAY_NAME))}
           />
         </View>
-        <View style={styles.group}>
+        <View style={s.pb10}>
           <Text style={styles.label}>Description</Text>
           <BottomSheetTextInput
             style={[styles.textArea]}
@@ -120,13 +146,11 @@ const styles = StyleSheet.create({
     fontSize: 24,
     marginBottom: 18,
   },
-  group: {
-    marginBottom: 10,
-  },
   label: {
     fontWeight: 'bold',
     paddingHorizontal: 4,
     paddingBottom: 4,
+    marginTop: 20,
   },
   textInput: {
     borderWidth: 1,
@@ -155,4 +179,19 @@ const styles = StyleSheet.create({
     padding: 10,
     marginBottom: 10,
   },
+  avi: {
+    position: 'absolute',
+    top: 80,
+    left: 10,
+    width: 84,
+    height: 84,
+    borderWidth: 2,
+    borderRadius: 42,
+    borderColor: colors.white,
+    backgroundColor: colors.white,
+  },
+  photos: {
+    marginBottom: 36,
+    marginHorizontal: -14,
+  },
 })