From 90d851c0c53b1acd9bf018d1e940da203953d248 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreiro?= <ferreiro@pinkroom.dev>
Date: Tue, 6 Dec 2022 11:26:13 +0000
Subject: [PATCH] save photo in state before pushing it to viewmodel

---
 src/view/com/profile/ProfileHeader.tsx | 18 +++++++++---------
 src/view/com/util/UserAvatar.tsx       | 10 +++++++---
 src/view/com/util/UserBanner.tsx       | 10 +++++++---
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index e31c51418d..0dee773546 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -32,15 +32,15 @@ export const ProfileHeader = observer(function ProfileHeader({
   const store = useStores()
   const isMember = useMemo(
     () => view.isScene && view.myState.member,
-    [view.isScene, view.myState.member],
+    [view.myState.member],
   )
 
-  // const onPressBack = () => {
-  //   store.nav.tab.goBack()
-  // }
-  // const onPressSearch = () => {
-  //   store.nav.navigate('/search')
-  // }
+  const onPressBack = () => {
+    store.nav.tab.goBack()
+  }
+  const onPressSearch = () => {
+    store.nav.navigate(`/search`)
+  }
   const onPressToggleFollow = () => {
     view?.toggleFollowing().then(
       () => {
@@ -72,7 +72,7 @@ export const ProfileHeader = observer(function ProfileHeader({
     store.shell.openModal(
       new ConfirmModel(
         'Leave this scene?',
-        "You'll be able to come back unless your invite is revoked.",
+        `You'll be able to come back unless your invite is revoked.`,
         onPressConfirmLeaveScene,
       ),
     )
@@ -83,7 +83,7 @@ export const ProfileHeader = observer(function ProfileHeader({
         did: store.me.did || '',
         rkey: new AtUri(view.myState.member).rkey,
       })
-      Toast.show('Scene left')
+      Toast.show(`Scene left`)
     }
     onRefreshAll()
   }
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 95c70c32db..ed9c96d164 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React, {useCallback, 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'
@@ -30,6 +30,8 @@ export function UserAvatar({
   const initials = getInitials(displayName || handle)
   const gradient = getGradient(handle)
 
+  const [tempUserAvatar, setTempUserAvatar] = useState<string | null>(null)
+
   const handleEditAvatar = useCallback(() => {
     Alert.alert('Select upload method', '', [
       {
@@ -43,6 +45,7 @@ export function UserAvatar({
             cropperCircleOverlay: true,
           }).then(item => {
             profileView.updateUserAvatar(item)
+            setTempUserAvatar(item.path)
           })
         },
       },
@@ -60,6 +63,7 @@ export function UserAvatar({
               cropperCircleOverlay: true,
             }).then(croppedItem => {
               profileView.updateUserAvatar(croppedItem)
+              setTempUserAvatar(croppedItem.path)
             })
           })
         },
@@ -91,10 +95,10 @@ export function UserAvatar({
   return isEditable && IMAGES_ENABLED ? (
     <TouchableOpacity onPress={handleEditAvatar}>
       {/* Added a react state temporary photo while the protocol does not support imagery */}
-      {profileView.userAvatar != null ? (
+      {profileView.userAvatar != null || tempUserAvatar != null ? (
         <Image
           style={styles.avatarImage}
-          source={{uri: profileView.userAvatar.path}}
+          source={{uri: tempUserAvatar ?? profileView.userAvatar?.path}}
         />
       ) : (
         renderSvg(size, initials)
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 710463e976..bc2c4a9207 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React, {useCallback, 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'
@@ -25,6 +25,8 @@ export function UserBanner({
 }) {
   const gradient = getGradient(handle)
 
+  const [tempUserBanner, setTempUserBanner] = useState<string | null>(null)
+
   const handleEditBanner = useCallback(() => {
     Alert.alert('Select upload method', '', [
       {
@@ -37,6 +39,7 @@ export function UserBanner({
             height: 500,
           }).then(item => {
             profileView.updateUserBanner(item)
+            setTempUserBanner(item.path)
           })
         },
       },
@@ -53,6 +56,7 @@ export function UserBanner({
               height: 500,
             }).then(croppedItem => {
               profileView.updateUserBanner(croppedItem)
+              setTempUserBanner(croppedItem.path)
             })
           })
         },
@@ -80,11 +84,11 @@ export function UserBanner({
   return isEditable && IMAGES_ENABLED ? (
     <TouchableOpacity onPress={handleEditBanner}>
       {/* Added a react state temporary photo while the protocol does not support imagery */}
-      {profileView.userBanner != null ? (
+      {profileView.userBanner != null || tempUserBanner != null ? (
         <Image
           style={styles.bannerImage}
           resizeMode="stretch"
-          source={{uri: profileView.userBanner.path}}
+          source={{uri: tempUserBanner ?? profileView.userBanner?.path}}
         />
       ) : (
         renderSvg()