diff --git a/src/state/models/profile-view.ts b/src/state/models/profile-view.ts index 927374cc67..5244e0912f 100644 --- a/src/state/models/profile-view.ts +++ b/src/state/models/profile-view.ts @@ -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() } diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 1b5c99d977..af5cf27b30 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%'] @@ -31,6 +33,12 @@ export function Component({ const [description, setDescription] = useState( profileView.description || '', ) + const [userBanner, setUserBanner] = useState( + profileView.userBanner, + ) + const [userAvatar, setUserAvatar] = useState( + 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({ Edit my profile + + + + + + {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, + }, }) diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 1b25c7c13c..d23be65a36 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -152,12 +152,13 @@ export const ProfileHeader = observer(function ProfileHeader({ } return ( - + diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index 9016cc4cce..8e5ac23097 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -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> }) { 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) => ( @@ -33,6 +88,32 @@ export function UserAvatar({ ) + + // setUserAvatar is only passed as prop on the EditProfile component + return setUserAvatar != null && IMAGES_ENABLED ? ( + + {userAvatar != null ? ( + + ) : ( + renderSvg(size, initials) + )} + + + + + ) : userAvatar != null ? ( + + ) : ( + 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, + }, +}) diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx index 16e18c84d4..5a6d123a70 100644 --- a/src/view/com/util/UserBanner.tsx +++ b/src/view/com/util/UserBanner.tsx @@ -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> +}) { 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 = () => ( @@ -20,4 +77,49 @@ export function UserBanner({handle}: {handle: string}) { ) + + // setUserBanner is only passed as prop on the EditProfile component + return setUserBanner != null && IMAGES_ENABLED ? ( + + {userBanner != null ? ( + + ) : ( + renderSvg() + )} + + + + + ) : userBanner != null ? ( + + ) : ( + 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, + }, +})