diff options
Diffstat (limited to 'src/components/profile/Content.tsx')
-rw-r--r-- | src/components/profile/Content.tsx | 110 |
1 files changed, 27 insertions, 83 deletions
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 8d69b3b0..689fcaf7 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -1,21 +1,17 @@ import AsyncStorage from '@react-native-community/async-storage'; import React, {useCallback, useEffect, useState} from 'react'; -import {Alert, LayoutChangeEvent, StyleSheet, View} from 'react-native'; +import {LayoutChangeEvent, StyleSheet, View} from 'react-native'; import Animated from 'react-native-reanimated'; import {AuthContext, ProfileContext} from '../../routes/'; -import {MomentType, ProfilePreviewType} from 'src/types'; -import {defaultMoments, MOMENTS_ENDPOINT} from '../../constants'; +import {MomentType} from 'src/types'; +import {defaultMoments} from '../../constants'; import {SCREEN_HEIGHT} from '../../utils'; import TaggsBar from '../taggs/TaggsBar'; import {Moment} from '../moments'; import ProfileBody from './ProfileBody'; import ProfileCutout from './ProfileCutout'; import ProfileHeader from './ProfileHeader'; -import { - loadFollowers, - loadFollowing, - followOrUnfollowUser, -} from '../../services'; +import {followOrUnfollowUser} from '../../services'; interface ContentProps { y: Animated.Value<number>; @@ -24,23 +20,19 @@ interface ContentProps { const Content: React.FC<ContentProps> = ({y, isProfileView}) => { const [profileBodyHeight, setProfileBodyHeight] = useState(0); - const {newMomentsAvailable, updateMoments, user} = isProfileView + const {user, moments, followers, following, updateFollowers} = isProfileView ? React.useContext(ProfileContext) : React.useContext(AuthContext); const {logout} = React.useContext(AuthContext); - const [imagesList, setImagesList] = useState<MomentType[]>([]); + const {user: loggedInUser} = React.useContext(AuthContext); + + /** + * States + */ const [imagesMap, setImagesMap] = useState<Map<string, MomentType[]>>( new Map(), ); - const [followed, setFollowed] = React.useState<boolean>(false); - const [followers, setFollowers] = React.useState<Array<ProfilePreviewType>>( - [], - ); - const [following, setFollowing] = React.useState<Array<ProfilePreviewType>>( - [], - ); - const {user: loggedInUser} = React.useContext(AuthContext); /** * If own profile is being viewed then do not show the follow button. @@ -52,11 +44,11 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => { setProfileBodyHeight(height); }; - const {userId, username} = user; + const {userId} = user; const createImagesMap = useCallback(() => { var map = new Map(); - imagesList.forEach(function (imageObject) { + moments.forEach(function (imageObject) { var moment_category = imageObject.moment_category; if (map.has(moment_category)) { map.get(moment_category).push(imageObject); @@ -66,78 +58,29 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => { }); setImagesMap(map); - }, [imagesList]); + }, [moments]); useEffect(() => { if (!userId) { return; } - - const retrieveMoments = async () => { - try { - const token = await AsyncStorage.getItem('token'); - const response = await fetch(MOMENTS_ENDPOINT + '?user_id=' + userId, { - method: 'GET', - headers: { - Authorization: 'Token ' + token, - }, - }); - const status = response.status; - if (status === 200) { - const data = await response.json(); - setImagesList(data); - updateMoments(!newMomentsAvailable); - } else { - console.log('Could not load moments!'); - } - } catch (err) { - console.log(err); - } - }; - - if (newMomentsAvailable) { - retrieveMoments(); - createImagesMap(); - } - }, [userId, createImagesMap, updateMoments, newMomentsAvailable]); + createImagesMap(); + }, [createImagesMap]); /** - * This hook is called just on the load of profile. + * This hook is called load of profile and when you push update the followers list. */ useEffect(() => { - const updateFollowedValue = async () => { - const token = await AsyncStorage.getItem('token'); - if (!token) { - logout(); - return; - } - - const listFollowers: ProfilePreviewType[] = await loadFollowers( - userId, - token, - ); - - const listFollowing: ProfilePreviewType[] = await loadFollowing( - userId, - token, - ); - - /** - * Check if the logged in user actually follows the user being viewed. - */ - const isActuallyFollowed = listFollowers.some( - (follower) => follower.username === loggedInUser.username, - ); - - if (followed != isActuallyFollowed) { - setFollowed(isActuallyFollowed); - } - setFollowers(listFollowers); - setFollowing(listFollowing); - }; - - updateFollowedValue(); - }, []); + if (!userId) { + return; + } + const isActuallyFollowed = followers.some( + (follower) => follower.username === loggedInUser.username, + ); + if (followed != isActuallyFollowed) { + setFollowed(isActuallyFollowed); + } + }, [followers]); /** * Handles a click on the follow / unfollow button. @@ -156,6 +99,7 @@ const Content: React.FC<ContentProps> = ({y, isProfileView}) => { ); if (isUpdatedSuccessful) { setFollowed(!followed); + updateFollowers(true); } }; |