From 0e1f57be13b282b516f1bf690f2890b9eabf3188 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 12 May 2021 11:42:14 -0700 Subject: Plus sign for profile and header in profile, ability to add on the screen, reloads screen, saved to database --- src/assets/icons/grey-purple-plus.svg | 5 + src/assets/icons/purple-plus.svg | 15 +++ src/components/profile/Cover.tsx | 196 +++++++++++++++++++++++++++++++--- src/components/profile/TaggAvatar.tsx | 155 ++++++++++++++++++++++++++- src/screens/profile/EditProfile.tsx | 6 +- 5 files changed, 357 insertions(+), 20 deletions(-) create mode 100644 src/assets/icons/grey-purple-plus.svg create mode 100644 src/assets/icons/purple-plus.svg (limited to 'src') diff --git a/src/assets/icons/grey-purple-plus.svg b/src/assets/icons/grey-purple-plus.svg new file mode 100644 index 00000000..2053d4a7 --- /dev/null +++ b/src/assets/icons/grey-purple-plus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/purple-plus.svg b/src/assets/icons/purple-plus.svg new file mode 100644 index 00000000..20949b6d --- /dev/null +++ b/src/assets/icons/purple-plus.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx index 27777b64..8aa6b0d3 100644 --- a/src/components/profile/Cover.tsx +++ b/src/components/profile/Cover.tsx @@ -1,28 +1,181 @@ -import React from 'react'; -import {Image, StyleSheet, View} from 'react-native'; -import {useSelector} from 'react-redux'; +import React, {useState, useEffect} from 'react'; +import { + Alert, + Image, + StyleSheet, + View, + TouchableOpacity, + Text, + ImageBackground, +} from 'react-native'; import {COVER_HEIGHT, IMAGE_WIDTH} from '../../constants'; -import {RootState} from '../../store/rootreducer'; import {ScreenType} from '../../types'; +import GreyPurplePlus from '../../assets/icons/grey-purple-plus.svg'; +import ImagePicker from 'react-native-image-crop-picker'; +import { + ERROR_UPLOAD_LARGE_PROFILE_PIC, + ERROR_UPLOAD_SMALL_PROFILE_PIC, +} from '../../constants/strings'; +import {patchEditProfile} from '../../services'; +import {useDispatch, useSelector} from 'react-redux'; +import {loadUserData, resetHeaderAndProfileImage} from '../../store/actions'; +import {RootState} from '../../store/rootreducer'; interface CoverProps { userXId: string | undefined; screenType: ScreenType; } const Cover: React.FC = ({userXId, screenType}) => { - const {cover} = useSelector((state: RootState) => + const dispatch = useDispatch(); + const {cover, user} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); - return ( - - - - ); + const [needsUpdate, setNeedsUpdate] = useState(false); + const [loading, setLoading] = useState(false); + const [validImage, setValidImage] = useState(true); + + const { + profile: {website, biography, gender, snapchat, tiktok, university_class}, + avatar, + } = useSelector((state: RootState) => state.user); + + const isCustomGender = + gender !== '' && gender !== 'female' && gender !== 'male'; + + const [form, setForm] = React.useState({ + largePic: cover ? cover : '', + smallPic: avatar ? avatar : '', + website: website ? website : '', + bio: biography ? biography : '', + gender: isCustomGender ? 'custom' : gender, + customGenderText: isCustomGender ? gender : '', + snapchat: snapchat, + tiktok: tiktok, + isValidWebsite: true, + isValidBio: true, + isValidGender: true, + isValidSnapchat: true, + isValidTiktok: true, + attemptedSubmit: false, + classYear: university_class, + }); + + useEffect(() => { + checkAvatar(cover); + }, []); + + useEffect(() => { + if (needsUpdate) { + const userId = user.userId; + const username = user.username; + dispatch(resetHeaderAndProfileImage()); + dispatch(loadUserData({userId, username})); + } + }, [dispatch, needsUpdate]); + + const goToGalleryLargePic = () => { + ImagePicker.openPicker({ + smartAlbums: [ + 'Favorites', + 'RecentlyAdded', + 'SelfPortraits', + 'Screenshots', + 'UserLibrary', + ], + width: 580, + height: 580, + cropping: true, + cropperToolbarTitle: 'Select Header', + mediaType: 'photo', + }).then((picture) => { + if ('path' in picture) { + setForm({ + ...form, + largePic: picture.path, + }); + handleSubmit(); + } + }); + }; + + const handleSubmit = () => { + if (!form.largePic) { + Alert.alert(ERROR_UPLOAD_LARGE_PROFILE_PIC); + return; + } + if (!form.smallPic) { + Alert.alert(ERROR_UPLOAD_SMALL_PROFILE_PIC); + return; + } + + const request = new FormData(); + request.append('largeProfilePicture', { + uri: form.largePic, + name: 'large_profile_pic.jpg', + type: 'image/jpg', + }); + + setLoading(true); + patchEditProfile(request, user.userId) + .then((_) => { + setNeedsUpdate(true); + setValidImage(true); + // navigation.pop(); + }) + .catch((error) => { + Alert.alert(error); + }); + setLoading(false); + }; + + const checkAvatar = (url: string | undefined) => { + if (!url) { + setValidImage(false); + } + fetch(url) + .then((res) => { + if (res.status === 200) { + setValidImage(true); + } else { + setValidImage(false); + } + }) + .catch((err) => { + setValidImage(false); + }); + }; + + if (!validImage && userXId === undefined && !loading) { + return ( + <> + + + goToGalleryLargePic()}> + + Add Picture + + + + + ); + } else { + return ( + + + + ); + } }; const styles = StyleSheet.create({ @@ -33,5 +186,20 @@ const styles = StyleSheet.create({ width: IMAGE_WIDTH, height: COVER_HEIGHT, }, + plus: { + position: 'absolute', + top: 75, + right: 125, + }, + text: { + color: 'white', + position: 'absolute', + fontSize: 18, + top: 80, + right: 20, + }, + touch: { + flex: 1, + }, }); export default Cover; diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx index ea0bdb65..33650a04 100644 --- a/src/components/profile/TaggAvatar.tsx +++ b/src/components/profile/TaggAvatar.tsx @@ -1,9 +1,17 @@ -import React from 'react'; -import {StyleSheet} from 'react-native'; -import {useSelector} from 'react-redux'; +import React, {useState, useEffect} from 'react'; +import {Alert, StyleSheet, TouchableOpacity} from 'react-native'; import {RootState} from '../../store/rootreducer'; import {ScreenType} from '../../types'; import {Avatar} from '../common'; +import {useDispatch, useSelector} from 'react-redux'; +import {loadUserData, resetHeaderAndProfileImage} from '../../store/actions'; +import PurplePlus from '../../assets/icons/purple-plus.svg'; +import ImagePicker from 'react-native-image-crop-picker'; +import { + ERROR_UPLOAD_LARGE_PROFILE_PIC, + ERROR_UPLOAD_SMALL_PROFILE_PIC, +} from '../../constants/strings'; +import {patchEditProfile} from '../../services'; const PROFILE_DIM = 100; @@ -20,8 +28,142 @@ const TaggAvatar: React.FC = ({ const {avatar} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); + const dispatch = useDispatch(); + const [needsUpdate, setNeedsUpdate] = useState(false); + const [loading, setLoading] = useState(false); + const [validImage, setValidImage] = useState(true); - return ; + const { + profile: {website, biography, gender, snapchat, tiktok, university_class}, + cover, + } = useSelector((state: RootState) => state.user); + const {user} = useSelector((state: RootState) => + userXId ? state.userX[screenType][userXId] : state.user, + ); + const isCustomGender = + gender !== '' && gender !== 'female' && gender !== 'male'; + + const [form, setForm] = React.useState({ + largePic: cover ? cover : '', + smallPic: avatar ? avatar : '', + website: website ? website : '', + bio: biography ? biography : '', + gender: isCustomGender ? 'custom' : gender, + customGenderText: isCustomGender ? gender : '', + snapchat: snapchat, + tiktok: tiktok, + isValidWebsite: true, + isValidBio: true, + isValidGender: true, + isValidSnapchat: true, + isValidTiktok: true, + attemptedSubmit: false, + classYear: university_class, + }); + + useEffect(() => { + checkAvatar(avatar); + }, []); + + useEffect(() => { + if (needsUpdate) { + const userId = user.userId; + const username = user.username; + dispatch(resetHeaderAndProfileImage()); + dispatch(loadUserData({userId, username})); + } + }, [dispatch, needsUpdate]); + + const goToGallerySmallPic = () => { + ImagePicker.openPicker({ + smartAlbums: [ + 'Favorites', + 'RecentlyAdded', + 'SelfPortraits', + 'Screenshots', + 'UserLibrary', + ], + width: 580, + height: 580, + cropping: true, + cropperToolbarTitle: 'Select Profile Picture', + mediaType: 'photo', + cropperCircleOverlay: true, + }).then((picture) => { + if ('path' in picture) { + setForm({ + ...form, + smallPic: picture.path, + }); + handleSubmit(); + } + }); + }; + + const handleSubmit = async () => { + if (!form.largePic) { + Alert.alert(ERROR_UPLOAD_LARGE_PROFILE_PIC); + return; + } + if (!form.smallPic) { + Alert.alert(ERROR_UPLOAD_SMALL_PROFILE_PIC); + return; + } + + const request = new FormData(); + request.append('smallProfilePicture', { + uri: form.smallPic, + name: 'small_profile_pic.jpg', + type: 'image/jpg', + }); + + setLoading(true); + patchEditProfile(request, user.userId) + .then((_) => { + setNeedsUpdate(true); + setValidImage(true); + // navigation.pop(); + }) + .catch((error) => { + Alert.alert(error); + }); + setLoading(false); + }; + + const checkAvatar = (url: string | undefined) => { + if (!url) { + setValidImage(false); + } + fetch(url) + .then((res) => { + if (res.status === 200) { + setValidImage(true); + } else { + setValidImage(false); + } + }) + .catch((err) => { + setValidImage(false); + }); + }; + + console.log(avatar); + + if (!validImage && userXId === undefined && !loading) { + return ( + <> + + goToGallerySmallPic()}> + + + + ); + } else { + return ; + } }; const styles = StyleSheet.create({ @@ -30,6 +172,11 @@ const styles = StyleSheet.create({ width: PROFILE_DIM, borderRadius: PROFILE_DIM / 2, }, + plus: { + position: 'absolute', + bottom: 35, + right: 0, + }, }); export default TaggAvatar; diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx index 26802e45..dfb8ba1f 100644 --- a/src/screens/profile/EditProfile.tsx +++ b/src/screens/profile/EditProfile.tsx @@ -61,7 +61,7 @@ interface EditProfileProps { const EditProfile: React.FC = ({route, navigation}) => { const y: Animated.Value = Animated.useValue(0); - const {userId, username} = route.params; + const {userId} = route.params; const { profile: {website, biography, gender, snapchat, tiktok, university_class}, avatar, @@ -74,10 +74,12 @@ const EditProfile: React.FC = ({route, navigation}) => { useEffect(() => { if (needsUpdate) { + const userId = user.userId; + const username = user.username; dispatch(resetHeaderAndProfileImage()); dispatch(loadUserData({userId, username})); } - }, [dispatch, needsUpdate, userId, username]); + }, [dispatch, needsUpdate, user]); const [isCustomGender, setIsCustomGender] = React.useState( gender !== '' && gender !== 'female' && gender !== 'male', -- cgit v1.2.3-70-g09d2