From 37b37f296a59aea43e73f615ae6cb042b2242e87 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Fri, 14 May 2021 19:33:03 -0700 Subject: Bug fixes --- src/components/common/Avatar.tsx | 23 ++++++++--- src/components/profile/Cover.tsx | 64 +++++++++++++++++++------------ src/components/profile/ProfileHeader.tsx | 1 + src/components/profile/TaggAvatar.tsx | 66 ++++++++++++++++++++++---------- 4 files changed, 105 insertions(+), 49 deletions(-) (limited to 'src') diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx index 831cf906..86ebedf3 100644 --- a/src/components/common/Avatar.tsx +++ b/src/components/common/Avatar.tsx @@ -1,17 +1,30 @@ import React, {FC} from 'react'; -import {Image, ImageStyle, StyleProp} from 'react-native'; +import {Image, ImageStyle, StyleProp, ImageBackground} from 'react-native'; type AvatarProps = { style: StyleProp; uri: string | undefined; + loading: boolean; + loadingStyle: StyleProp | undefined; }; -const Avatar: FC = ({style, uri}) => { +const Avatar: FC = ({ + style, + uri, + loading = false, + loadingStyle, +}) => { return ( - + source={{uri, cache: 'reload'}}> + {loading && ( + + )} + ); }; diff --git a/src/components/profile/Cover.tsx b/src/components/profile/Cover.tsx index 5d5b4234..2b6268a6 100644 --- a/src/components/profile/Cover.tsx +++ b/src/components/profile/Cover.tsx @@ -14,6 +14,7 @@ import {useDispatch, useSelector} from 'react-redux'; import {loadUserData, resetHeaderAndProfileImage} from '../../store/actions'; import {RootState} from '../../store/rootreducer'; import {normalize, patchProfile, validateImageLink} from '../../utils'; +import {useIsFocused} from '@react-navigation/native'; interface CoverProps { userXId: string | undefined; @@ -26,14 +27,22 @@ const Cover: React.FC = ({userXId, screenType}) => { ); const [needsUpdate, setNeedsUpdate] = useState(false); - const [loading, setLoading] = useState(false); + const [updating, setUpdating] = useState(false); + const [loading, setLoading] = useState(true); const [validImage, setValidImage] = useState(true); + const isFocused = useIsFocused(); useEffect(() => { - checkAvatar(cover); + checkCover(cover); + setLoading(false); }, []); useEffect(() => { + checkCover(cover); + }, [cover, isFocused]); + + useEffect(() => { + checkCover(cover); if (needsUpdate) { const userId = user.userId; const username = user.username; @@ -47,26 +56,35 @@ const Cover: React.FC = ({userXId, screenType}) => { const result = await patchProfile('header', user.userId); setLoading(true); if (result) { + setUpdating(true); setNeedsUpdate(true); + setLoading(false); } else { setLoading(false); } }; - const checkAvatar = async (url: string | undefined) => { + const checkCover = async (url: string | undefined) => { const valid = await validateImageLink(url); if (valid !== validImage) { setValidImage(valid); } + setLoading(false); }; - if (!validImage && userXId === undefined && !loading) { - return ( - - + return ( + + + {loading && ( + + )} + {!validImage && userXId === undefined && !loading && !updating && ( = ({userXId, screenType}) => { Add Picture - - - ); - } else { - return ( - - - - ); - } + )} + + + ); }; const styles = StyleSheet.create({ @@ -113,5 +121,13 @@ const styles = StyleSheet.create({ touch: { flex: 1, }, + loadingLarge: { + alignSelf: 'center', + justifyContent: 'center', + height: COVER_HEIGHT * 0.2, + width: IMAGE_WIDTH * 0.2, + aspectRatio: 1, + top: 100, + }, }); export default Cover; diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 14f7dc71..f3bc8e4b 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -115,6 +115,7 @@ const ProfileHeader: React.FC = ({ style={styles.avatar} userXId={userXId} screenType={screenType} + editable={true} /> diff --git a/src/components/profile/TaggAvatar.tsx b/src/components/profile/TaggAvatar.tsx index 304b9e3a..8ccae2ef 100644 --- a/src/components/profile/TaggAvatar.tsx +++ b/src/components/profile/TaggAvatar.tsx @@ -7,6 +7,7 @@ import {useDispatch, useSelector} from 'react-redux'; import {loadUserData, resetHeaderAndProfileImage} from '../../store/actions'; import PurplePlus from '../../assets/icons/purple-plus.svg'; import {patchProfile, validateImageLink} from '../../utils'; +import {useIsFocused} from '@react-navigation/native'; const PROFILE_DIM = 100; @@ -14,28 +15,35 @@ interface TaggAvatarProps { style?: object; userXId: string | undefined; screenType: ScreenType; + editable: boolean; } const TaggAvatar: React.FC = ({ style, screenType, userXId, + editable = false, }) => { - const {avatar} = useSelector((state: RootState) => + const {avatar, user} = useSelector((state: RootState) => userXId ? state.userX[screenType][userXId] : state.user, ); const dispatch = useDispatch(); const [needsUpdate, setNeedsUpdate] = useState(false); - const [loading, setLoading] = useState(false); + const [updating, setUpdating] = useState(false); + const [loading, setLoading] = useState(true); const [validImage, setValidImage] = useState(true); - const {user} = useSelector((state: RootState) => - userXId ? state.userX[screenType][userXId] : state.user, - ); + const isFocused = useIsFocused(); useEffect(() => { checkAvatar(avatar); + setLoading(false); }, []); useEffect(() => { + checkAvatar(avatar); + }, [avatar, isFocused]); + + useEffect(() => { + checkAvatar(avatar); if (needsUpdate) { const userId = user.userId; const username = user.username; @@ -47,8 +55,11 @@ const TaggAvatar: React.FC = ({ const handleNewImage = async () => { setLoading(true); const result = await patchProfile('profile', user.userId); + setLoading(true); if (result) { + setUpdating(true); setNeedsUpdate(true); + setLoading(false); } else { setLoading(false); } @@ -61,21 +72,28 @@ const TaggAvatar: React.FC = ({ } }; - if (!validImage && userXId === undefined && !loading) { - return ( - <> - - handleNewImage()}> - - - - ); - } else { - return ; - } + return ( + <> + + {editable && + !validImage && + userXId === undefined && + !loading && + !updating && ( + handleNewImage()}> + + + )} + + ); }; const styles = StyleSheet.create({ @@ -83,12 +101,20 @@ const styles = StyleSheet.create({ height: PROFILE_DIM, width: PROFILE_DIM, borderRadius: PROFILE_DIM / 2, + overflow: 'hidden', }, plus: { position: 'absolute', bottom: 35, right: 0, }, + loadingLarge: { + height: PROFILE_DIM * 0.8, + width: PROFILE_DIM * 0.8, + alignSelf: 'center', + justifyContent: 'center', + aspectRatio: 2, + }, }); export default TaggAvatar; -- cgit v1.2.3-70-g09d2 From 6a74b270d24f04e36821398b83863d5b97e1b44b Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Mon, 17 May 2021 12:01:22 -0700 Subject: Fixed bugs for plus sign in profile --- src/components/comments/CommentsContainer.tsx | 2 +- src/services/UserProfileService.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx index 595ec743..d839ef38 100644 --- a/src/components/comments/CommentsContainer.tsx +++ b/src/components/comments/CommentsContainer.tsx @@ -49,7 +49,7 @@ const CommentsContainer: React.FC = ({ count += 1 + comments[i].replies_count; } return count; - } + }; useEffect(() => { const loadComments = async () => { diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts index 8b7b78e1..19d353aa 100644 --- a/src/services/UserProfileService.ts +++ b/src/services/UserProfileService.ts @@ -442,7 +442,7 @@ export const verifyExistingInformation = async ( const form = new FormData(); if (email) { form.append('email', email); - } + } if (username) { form.append('username', username); } @@ -453,7 +453,7 @@ export const verifyExistingInformation = async ( }, body: form, }); - return response.status===200; + return response.status === 200; } catch (error) { console.log(error); return false; -- cgit v1.2.3-70-g09d2