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

Merge branch 'upload-profile-image' into 4-update-to-react-native-070

Browse Source
This commit is contained in:
João Ferreiro
2022-12-06 15:53:11 +00:00
parent 160fc31b47 8381b7e741
commit 41be5d3da1
5 changed files with 267 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/state/models/profile-view.ts
+12 -1
View File
@@ -43,6 +43,10 @@ export class ProfileViewModel {
postsCount: number = 0
myState = new ProfileViewMyStateModel()
// data to be implemented in the protocol
userAvatar: string | null = null
userBanner: string | null = null
// added data
descriptionEntities?: Entity[]
@@ -115,8 +119,15 @@ export class ProfileViewModel {
}
}
async updateProfile(fn: (existing?: Profile.Record) => Profile.Record) {
async updateProfile(
fn: (existing?: Profile.Record) => Profile.Record,
userAvatar: string | null,
userBanner: string | null,
) {
await apilib.updateProfile(this.rootStore, this.did, fn)
// add userBanner & userAvatar in the protocol when suported
this.userAvatar = userAvatar
this.userBanner = userBanner
await this.refresh()
}
src/view/com/modals/EditProfile.tsx
+42
View File
@@ -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%']
@@ -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,
userBanner,
)
Toast.show('Profile updated')
onUpdate?.()
@@ -67,6 +77,24 @@ export function Component({
<View style={s.flex1}>
<BottomSheetScrollView style={styles.inner}>
<Text style={styles.title}>Edit my profile</Text>
<View style={styles.photos}>
<UserBanner
isMe
userBanner={userBanner}
setUserBanner={setUserBanner}
handle={profileView.handle}
/>
<View style={styles.avi}>
<UserAvatar
isMe
size={80}
userAvatar={userAvatar}
handle={profileView.handle}
setUserAvatar={setUserAvatar}
displayName={profileView.displayName}
/>
</View>
</View>
{error !== '' && (
<View style={s.mb10}>
<ErrorMessage message={error} />
@@ -155,4 +183,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,
},
})
src/view/com/profile/ProfileHeader.tsx
+3 -2
View File
@@ -152,12 +152,13 @@ export const ProfileHeader = observer(function ProfileHeader({
}
return (
<View style={styles.outer}>
<UserBanner handle={view.handle} />
<UserBanner handle={view.handle} userBanner={view.userBanner} />
<View style={styles.avi}>
<UserAvatar
size={80}
displayName={view.displayName}
handle={view.handle}
displayName={view.displayName}
userAvatar={view.userAvatar}
/>
</View>
<View style={styles.content}>
src/view/com/util/UserAvatar.tsx
+105 -4
View File
@@ -1,19 +1,74 @@
import React 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 {getGradient} from '../../lib/asset-gen'
import {colors} from '../../lib/styles'
import {IMAGES_ENABLED} from '../../../build-flags'
export function UserAvatar({
size,
displayName,
handle,
userAvatar,
displayName,
setUserAvatar,
}: {
size: number
displayName: string | undefined
handle: string
displayName: string | undefined
userAvatar: string | null
setUserAvatar?: React.Dispatch<React.SetStateAction<string | null>>
}) {
const initials = getInitials(displayName || handle)
const gradient = getGradient(handle)
return (
const handleEditAvatar = useCallback(() => {
Alert.alert('Select upload method', '', [
{
text: 'Take a new photo',
onPress: () => {
openCamera({
mediaType: 'photo',
cropping: true,
width: 80,
height: 80,
cropperCircleOverlay: true,
}).then(item => {
if (setUserAvatar != null) {
setUserAvatar(item.path)
}
})
},
},
{
text: 'Select from gallery',
onPress: () => {
openPicker({
mediaType: 'photo',
}).then(async item => {
await openCropper({
mediaType: 'photo',
path: item.path,
width: 80,
height: 80,
cropperCircleOverlay: true,
}).then(croppedItem => {
if (setUserAvatar != null) {
setUserAvatar(croppedItem.path)
}
})
})
},
},
])
}, [setUserAvatar])
const renderSvg = (size: number, initials: string) => (
<Svg width={size} height={size} viewBox="0 0 100 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
@@ -33,6 +88,32 @@ export function UserAvatar({
</Text>
</Svg>
)
// setUserAvatar is only passed as prop on the EditProfile component
return setUserAvatar != null && IMAGES_ENABLED ? (
<TouchableOpacity onPress={handleEditAvatar}>
{userAvatar != null ? (
<Image style={styles.avatarImage} source={{uri: userAvatar}} />
) : (
renderSvg(size, initials)
)}
<View style={styles.editButtonContainer}>
<FontAwesomeIcon
icon="camera"
size={24}
style={{color: colors.gray1 + '99'}}
/>
</View>
</TouchableOpacity>
) : userAvatar != null ? (
<Image
style={styles.avatarImage}
resizeMode="stretch"
source={{uri: userAvatar}}
/>
) : (
renderSvg(size, initials)
)
}
function getInitials(str: string): string {
@@ -50,3 +131,23 @@ function getInitials(str: string): string {
}
return 'X'
}
const styles = StyleSheet.create({
editButtonContainer: {
position: 'absolute',
width: 50,
height: 50,
top: '50%',
left: '50%',
borderRadius: 25,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.gray5 + '99',
transform: [{translateX: -25}, {translateY: -25}],
},
avatarImage: {
width: 80,
height: 80,
borderRadius: 40,
},
})
src/view/com/util/UserBanner.tsx
+105 -3
View File
@@ -1,10 +1,67 @@
import React 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 {IMAGES_ENABLED} from '../../../build-flags'
export function UserBanner({handle}: {handle: string}) {
export function UserBanner({
handle,
userBanner,
setUserBanner,
}: {
handle: string
userBanner: string | null
setUserBanner?: React.Dispatch<React.SetStateAction<string | null>>
}) {
const gradient = getGradient(handle)
return (
const handleEditBanner = useCallback(() => {
Alert.alert('Select upload method', '', [
{
text: 'Take a new photo',
onPress: () => {
openCamera({
mediaType: 'photo',
cropping: true,
width: 1500,
height: 500,
}).then(item => {
if (setUserBanner != null) {
setUserBanner(item.path)
}
})
},
},
{
text: 'Select from gallery',
onPress: () => {
openPicker({
mediaType: 'photo',
}).then(async item => {
await openCropper({
mediaType: 'photo',
path: item.path,
width: 1500,
height: 500,
}).then(croppedItem => {
if (setUserBanner != null) {
setUserBanner(croppedItem.path)
}
})
})
},
},
])
}, [setUserBanner])
const renderSvg = () => (
<Svg width="100%" height="120" viewBox="50 0 200 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
@@ -20,4 +77,49 @@ export function UserBanner({handle}: {handle: string}) {
<Rect x="0" y="0" width="400" height="100" fill="url(#grad2)" />
</Svg>
)
// setUserBanner is only passed as prop on the EditProfile component
return setUserBanner != null && IMAGES_ENABLED ? (
<TouchableOpacity onPress={handleEditBanner}>
{userBanner != null ? (
<Image style={styles.bannerImage} source={{uri: userBanner}} />
) : (
renderSvg()
)}
<View style={styles.editButtonContainer}>
<FontAwesomeIcon
icon="camera"
size={24}
style={{color: colors.gray1 + '99'}}
/>
</View>
</TouchableOpacity>
) : userBanner != null ? (
<Image
style={styles.bannerImage}
resizeMode="stretch"
source={{uri: userBanner}}
/>
) : (
renderSvg()
)
}
const styles = StyleSheet.create({
editButtonContainer: {
position: 'absolute',
width: 50,
height: 50,
top: '50%',
left: '50%',
borderRadius: 25,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.gray5 + '99',
transform: [{translateX: -25}, {translateY: -25}],
},
bannerImage: {
width: '100%',
height: 120,
},
})