save local photos on edit profile upload (wip)

src/view/com/modals/EditProfile.tsx

@@ -70,10 +70,11 @@ export function Component({
       <BottomSheetScrollView style={styles.inner}>
         <Text style={styles.title}>Edit my profile</Text>
         <View style={styles.photos}>
-          <UserBanner isEditable handle={profileView.handle} />
+          <UserBanner isEditable isMe handle={profileView.handle} />
           <View style={styles.avi}>
             <UserAvatar
               isEditable
+              isMe
               size={80}
               displayName={profileView.displayName}
               handle={profileView.handle}

src/view/com/profile/ProfileHeader.tsx

@@ -152,9 +152,10 @@ export const ProfileHeader = observer(function ProfileHeader({
   }
   return (
     <View style={styles.outer}>
-      <UserBanner handle={view.handle} />
+      <UserBanner isMe={isMe} handle={view.handle} />
       <View style={styles.avi}>
         <UserAvatar
+          isMe={isMe}
           size={80}
           displayName={view.displayName}
           handle={view.handle}

src/view/com/util/UserAvatar.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import React, {useCallback, useEffect, useState} from 'react'
 import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
 import Svg, {Circle, Text, Defs, LinearGradient, Stop} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -10,22 +10,36 @@ import {
 import {getGradient} from '../../lib/asset-gen'
 import {colors} from '../../lib/styles'
 import {IMAGES_ENABLED} from '../../../build-flags'
+import {loadString, saveString} from '../../../state/lib/storage'
 
 export function UserAvatar({
-  isEditable = false,
   size,
   handle,
   displayName,
+  isMe = false,
+  isEditable = false,
 }: {
-  isEditable?: boolean
   size: number
   handle: string
+  isMe?: boolean
+  isEditable?: boolean
   displayName: string | undefined
 }) {
   const initials = getInitials(displayName || handle)
   const gradient = getGradient(handle)
 
-  const [uploadedImage, setUploadedImage] = useState<string | null>(null)
+  const [userAvatarImage, setUserAvatarImage] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function loadLocalImage() {
+      if (isMe) {
+        await loadString('userAvatarImage').then(uri => {
+          setUserAvatarImage(uri)
+        })
+      }
+    }
+    loadLocalImage()
+  }, [isMe])
 
   const handleEditAvatar = useCallback(() => {
     Alert.alert('Select upload method', '', [
@@ -39,7 +53,7 @@ export function UserAvatar({
             height: 80,
             cropperCircleOverlay: true,
           }).then(item => {
-            setUploadedImage(item.path)
+            saveString('userAvatarImage', item.path)
           })
         },
       },
@@ -56,8 +70,7 @@ export function UserAvatar({
               height: 80,
               cropperCircleOverlay: true,
             }).then(croppedItem => {
-              setUploadedImage(croppedItem.path)
+              saveString('userAvatarImage', croppedItem.path)
-              console.log(croppedItem)
             })
           })
         },
@@ -88,9 +101,9 @@ export function UserAvatar({
 
   return isEditable && IMAGES_ENABLED ? (
     <TouchableOpacity onPress={handleEditAvatar}>
-      {/* Added a react state temporary photo white the protocol does not support imagery */}
+      {/* Added a react state temporary photo while the protocol does not support imagery */}
-      {uploadedImage != null ? (
+      {userAvatarImage != null ? (
-        <Image style={styles.avatarImage} source={{uri: uploadedImage}} />
+        <Image style={styles.avatarImage} source={{uri: userAvatarImage}} />
       ) : (
         renderSvg(size, initials)
       )}
@@ -102,6 +115,12 @@ export function UserAvatar({
         />
       </View>
     </TouchableOpacity>
+  ) : isMe && userAvatarImage != null ? (
+    <Image
+      style={styles.avatarImage}
+      resizeMode="stretch"
+      source={{uri: userAvatarImage}}
+    />
   ) : (
     renderSvg(size, initials)
   )

src/view/com/util/UserBanner.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import React, {useCallback, useEffect, useState} from 'react'
 import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
 import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -10,17 +10,31 @@ import {
   openPicker,
 } from 'react-native-image-crop-picker'
 import {IMAGES_ENABLED} from '../../../build-flags'
+import {saveString, loadString} from '../../../state/lib/storage'
 
 export function UserBanner({
   handle,
+  isMe = false,
   isEditable = false,
 }: {
   handle: string
+  isMe?: boolean
   isEditable?: boolean
 }) {
   const gradient = getGradient(handle)
 
-  const [uploadedImage, setUploadedImage] = useState<string | null>(null)
+  const [userBannerImage, setUserBannerImage] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function loadLocalImage() {
+      if (isMe) {
+        await loadString('userBannerImage').then(uri => {
+          setUserBannerImage(uri)
+        })
+      }
+    }
+    loadLocalImage()
+  }, [isMe])
 
   const handleEditBanner = useCallback(() => {
     Alert.alert('Select upload method', '', [
@@ -33,8 +47,7 @@ export function UserBanner({
             width: 1500,
             height: 500,
           }).then(item => {
-            setUploadedImage(item.path)
+            saveString('userBannerImage', item.path)
-            console.log(item)
           })
         },
       },
@@ -50,8 +63,7 @@ export function UserBanner({
               width: 1500,
               height: 500,
             }).then(croppedItem => {
-              setUploadedImage(croppedItem.path)
+              saveString('userBannerImage', croppedItem.path)
-              console.log(croppedItem)
             })
           })
         },
@@ -78,12 +90,12 @@ export function UserBanner({
 
   return isEditable && IMAGES_ENABLED ? (
     <TouchableOpacity onPress={handleEditBanner}>
-      {/* Added a react state temporary photo white the protocol does not support imagery */}
+      {/* Added a react state temporary photo while the protocol does not support imagery */}
-      {uploadedImage != null ? (
+      {userBannerImage != null ? (
         <Image
           style={styles.bannerImage}
           resizeMode="stretch"
-          source={{uri: uploadedImage}}
+          source={{uri: userBannerImage}}
         />
       ) : (
         renderSvg()
@@ -96,6 +108,12 @@ export function UserBanner({
         />
       </View>
     </TouchableOpacity>
+  ) : isMe && userBannerImage != null ? (
+    <Image
+      style={styles.bannerImage}
+      resizeMode="stretch"
+      source={{uri: userBannerImage}}
+    />
   ) : (
     renderSvg()
   )