acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

save local photos on edit profile upload (wip)

Browse Source
This commit is contained in:
João Ferreiro
2022-12-06 10:30:04 +00:00
parent 2cec34a324
commit a067312f19
4 changed files with 60 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/modals/EditProfile.tsx
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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
+29 -10
View File
@@ -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)
console.log(croppedItem)
saveString('userAvatarImage', croppedItem.path)
})
})
},
@@ -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 */}
{uploadedImage != null ? (
<Image style={styles.avatarImage} source={{uri: uploadedImage}} />
{/* Added a react state temporary photo while the protocol does not support imagery */}
{userAvatarImage != null ? (
<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
+27 -9
View File
@@ -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)
console.log(item)
saveString('userBannerImage', item.path)
})
},
},
@@ -50,8 +63,7 @@ export function UserBanner({
width: 1500,
height: 500,
}).then(croppedItem => {
setUploadedImage(croppedItem.path)
console.log(croppedItem)
saveString('userBannerImage', croppedItem.path)
})
})
},
@@ -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 */}
{uploadedImage != null ? (
{/* Added a react state temporary photo while the protocol does not support imagery */}
{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()
)