From 84a60592a86da2aab9e97a655e52792ff318190e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreiro?= Date: Tue, 6 Dec 2022 16:57:15 +0000 Subject: [PATCH] Upload profile image (#29) * add editable button profile picture * add editable button cover picture * upload profile photos (save them locally) * rollback pbxproj changes * rollback podfile checksum (for git only) * move edit photos onto edit profile modal * adjust edit icon and image cropping size * added temporary (react state) image * added IMAGES_ENABLED flag * minor lint fix * save local photos on edit profile upload (wip) * save profile photos on profile view state (wip) * remove unecessary computed * save photo in state before pushing it to viewmodel * refactor profile pictures's state * remove unnecessary isMe prop * removing old comments * tweak icon size & position * A few styling tweaks and a fix to mobx state management Co-authored-by: Paul Frazee --- src/state/models/profile-view.ts | 14 +++- src/view/com/modals/EditProfile.tsx | 51 ++++++++++-- src/view/com/profile/ProfileHeader.tsx | 5 +- src/view/com/util/UserAvatar.tsx | 108 ++++++++++++++++++++++++- src/view/com/util/UserBanner.tsx | 107 +++++++++++++++++++++++- 5 files changed, 269 insertions(+), 16 deletions(-) diff --git a/src/state/models/profile-view.ts b/src/state/models/profile-view.ts index 927374cc..83389c82 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() + // TODO TEMP data to be implemented in the protocol + userAvatar: string | null = null + userBanner: string | null = null + // added data descriptionEntities?: Entity[] @@ -115,7 +119,15 @@ export class ProfileViewModel { } } - async updateProfile(fn: (existing?: Profile.Record) => Profile.Record) { + async updateProfile( + fn: (existing?: Profile.Record) => Profile.Record, + userAvatar: string | null, // TODO TEMP + userBanner: string | null, // TODO TEMP + ) { + // TODO TEMP add userBanner & userAvatar in the protocol when suported + this.userAvatar = userAvatar + this.userBanner = userBanner + await apilib.updateProfile(this.rootStore, this.did, fn) await this.refresh() } diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 1b5c99d9..895fb05a 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -13,8 +13,10 @@ 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%'] +export const snapPoints = ['80%'] export function Component({ profileView, @@ -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, // TEMP + userBanner, // TEMP ) Toast.show('Profile updated') onUpdate?.() @@ -67,12 +77,28 @@ export function Component({ Edit my profile + + + + + + {error !== '' && ( )} - + Display Name setDisplayName(enforceLen(v, MAX_DISPLAY_NAME))} /> - + Description - + diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index 9016cc4c..2ed16125 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,22 @@ function getInitials(str: string): string { } return 'X' } + +const styles = StyleSheet.create({ + editButtonContainer: { + position: 'absolute', + width: 24, + height: 24, + bottom: 0, + right: 0, + borderRadius: 12, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: colors.gray5, + }, + avatarImage: { + width: 80, + height: 80, + borderRadius: 40, + }, +}) diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx index 16e18c84..c0421fe1 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,48 @@ 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: 24, + height: 24, + bottom: 8, + right: 8, + borderRadius: 12, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: colors.gray5, + }, + bannerImage: { + width: '100%', + height: 120, + }, +})