From 979a264cc08373ac9647eef0921f12ad5623a004 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreiro?= <ferreiro@pinkroom.dev>
Date: Mon, 5 Dec 2022 16:07:24 +0000
Subject: [PATCH] move edit photos onto edit profile modal

---
 src/view/com/modals/EditProfile.tsx    | 27 ++++++++++++++++++++++
 src/view/com/profile/ProfileHeader.tsx |  3 +--
 src/view/com/util/UserAvatar.tsx       | 30 ++++++++++++++-----------
 src/view/com/util/UserBanner.tsx       | 31 ++++++++++++++------------
 4 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx
index 1b5c99d977..08ce5f350c 100644
--- a/src/view/com/modals/EditProfile.tsx
+++ b/src/view/com/modals/EditProfile.tsx
@@ -13,6 +13,8 @@ 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%']
 
@@ -67,6 +69,17 @@ export function Component({
     <View style={s.flex1}>
       <BottomSheetScrollView style={styles.inner}>
         <Text style={styles.title}>Edit my profile</Text>
+        <View style={styles.photos}>
+          <UserBanner isEditable handle={profileView.handle} />
+          <View style={styles.avi}>
+            <UserAvatar
+              isEditable
+              size={80}
+              displayName={profileView.displayName}
+              handle={profileView.handle}
+            />
+          </View>
+        </View>
         {error !== '' && (
           <View style={s.mb10}>
             <ErrorMessage message={error} />
@@ -155,4 +168,18 @@ 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: 48,
+  },
 })
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 228b6c594a..1b25c7c13c 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -152,11 +152,10 @@ export const ProfileHeader = observer(function ProfileHeader({
   }
   return (
     <View style={styles.outer}>
-      <UserBanner isMe={isMe} handle={view.handle} />
+      <UserBanner handle={view.handle} />
       <View style={styles.avi}>
         <UserAvatar
           size={80}
-          isMe={isMe}
           displayName={view.displayName}
           handle={view.handle}
         />
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index eeef51b2ef..2826a7846d 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -1,30 +1,31 @@
-import React, {useCallback, useState} from 'react'
+import React, {useCallback} 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'
-import {openCamera, openCropper, openPicker} from 'react-native-image-crop-picker'
+import {
+  openCamera,
+  openCropper,
+  openPicker,
+} from 'react-native-image-crop-picker'
 import {getGradient} from '../../lib/asset-gen'
 import {colors} from '../../lib/styles'
 
 export function UserAvatar({
-  isMe = false,
+  isEditable = false,
   size,
   handle,
   displayName,
 }: {
-  isMe?: boolean
+  isEditable?: boolean
   size: number
   handle: string
   displayName: string | undefined
 }) {
-  const [localAvatarPicture, setLocalAvatarPicture] = useState<string | null>(
-    null,
-  )
   const initials = getInitials(displayName || handle)
   const gradient = getGradient(handle)
 
   const handleEditAvatar = useCallback(() => {
-    Alert.alert('', 'Select upload method', [
+    Alert.alert('Select upload method', '', [
       {
         text: 'Take a new photo',
         onPress: () => {
@@ -35,7 +36,8 @@ export function UserAvatar({
             height: 80,
             cropperCircleOverlay: true,
           }).then(item => {
-            setLocalAvatarPicture(item.path)
+            // setLocalAvatarPicture(item.path)
+            console.log(item)
           })
         },
       },
@@ -52,7 +54,8 @@ export function UserAvatar({
               height: 80,
               cropperCircleOverlay: true,
             }).then(croppedItem => {
-              setLocalAvatarPicture(croppedItem.path)
+              // setLocalAvatarPicture(croppedItem.path)
+              console.log(croppedItem)
             })
           })
         },
@@ -81,13 +84,14 @@ export function UserAvatar({
     </Svg>
   )
 
-  return isMe ? (
+  return isEditable ? (
     <TouchableOpacity onPress={handleEditAvatar}>
-      {localAvatarPicture != null ? (
+      {/* {localAvatarPicture != null ? (
         <Image style={styles.avatarImage} source={{uri: localAvatarPicture}} />
       ) : (
         renderSvg(size, initials)
-      )}
+      )} */}
+      {renderSvg(size, initials)}
       <View style={styles.editButtonContainer}>
         <FontAwesomeIcon
           icon="camera"
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 66ee675bbb..2183dfcdcd 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -1,26 +1,26 @@
-import React, {useCallback, useState} from 'react'
+import React, {useCallback} 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'
 import {getGradient} from '../../lib/asset-gen'
 import {colors} from '../../lib/styles'
-import {openCamera, openCropper, openPicker} from 'react-native-image-crop-picker'
+import {
+  openCamera,
+  openCropper,
+  openPicker,
+} from 'react-native-image-crop-picker'
 
 export function UserBanner({
   handle,
-  isMe = false,
+  isEditable = false,
 }: {
   handle: string
-  isMe?: boolean
+  isEditable?: boolean
 }) {
-  const [localBannerPicture, setLocalBannerPicture] = useState<string | null>(
-    null,
-  )
-
   const gradient = getGradient(handle)
 
   const handleEditBanner = useCallback(() => {
-    Alert.alert('', 'Select upload method', [
+    Alert.alert('Select upload method', '', [
       {
         text: 'Take a new photo',
         onPress: () => {
@@ -30,7 +30,8 @@ export function UserBanner({
             width: 1000,
             height: 120,
           }).then(item => {
-            setLocalBannerPicture(item.path)
+            // setLocalBannerPicture(item.path)
+            console.log(item)
           })
         },
       },
@@ -46,7 +47,8 @@ export function UserBanner({
               width: 1000,
               height: 120,
             }).then(croppedItem => {
-              setLocalBannerPicture(croppedItem.path)
+              // setLocalBannerPicture(croppedItem.path)
+              console.log(croppedItem)
             })
           })
         },
@@ -71,13 +73,14 @@ export function UserBanner({
     </Svg>
   )
 
-  return isMe ? (
+  return isEditable ? (
     <TouchableOpacity onPress={handleEditBanner}>
-      {localBannerPicture != null ? (
+      {/* {localBannerPicture != null ? (
         <Image style={styles.bannerImage} source={{uri: localBannerPicture}} />
       ) : (
         renderSvg()
-      )}
+      )} */}
+      {renderSvg()}
       <View style={styles.editButtonContainer}>
         <FontAwesomeIcon
           icon="camera"