From 17fbfa29c1b78703b872221e3b590aca3ef5cf7e Mon Sep 17 00:00:00 2001 From: Husam Salhab <47015061+hsalhab@users.noreply.github.com> Date: Mon, 26 Oct 2020 18:42:02 -0400 Subject: [TMA-13] List of following (#72) * move async-storage * removed lock files * added lock files to gitignore * added the wrong file to gitignore * added following list * added numFollowers; removed redundant code * removed followercount stuff for now * Fixed follower count * Made come more changes Co-authored-by: Ashm Walia --- src/components/profile/Content.tsx | 30 +++++++++++++++++-------- src/components/profile/FollowCount.tsx | 3 ++- src/components/profile/Followers.tsx | 10 ++++----- src/components/profile/ProfileHeader.tsx | 11 +++++---- src/constants/api.ts | 1 + src/routes/profile/ProfileStack.tsx | 3 ++- src/routes/viewProfile/ProfileProvider.tsx | 3 +++ src/screens/profile/FollowersListScreen.tsx | 35 ++++++++++++++++------------- src/services/UserFollowServices.ts | 21 +++++++++++++++++ 9 files changed, 81 insertions(+), 36 deletions(-) (limited to 'src') diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index 50e9d627..8d69b3b0 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -11,7 +11,11 @@ import {Moment} from '../moments'; import ProfileBody from './ProfileBody'; import ProfileCutout from './ProfileCutout'; import ProfileHeader from './ProfileHeader'; -import {loadFollowers, followOrUnfollowUser} from '../../services'; +import { + loadFollowers, + loadFollowing, + followOrUnfollowUser, +} from '../../services'; interface ContentProps { y: Animated.Value; @@ -33,6 +37,9 @@ const Content: React.FC = ({y, isProfileView}) => { const [followers, setFollowers] = React.useState>( [], ); + const [following, setFollowing] = React.useState>( + [], + ); const {user: loggedInUser} = React.useContext(AuthContext); /** @@ -110,6 +117,11 @@ const Content: React.FC = ({y, isProfileView}) => { token, ); + const listFollowing: ProfilePreviewType[] = await loadFollowing( + userId, + token, + ); + /** * Check if the logged in user actually follows the user being viewed. */ @@ -121,14 +133,10 @@ const Content: React.FC = ({y, isProfileView}) => { setFollowed(isActuallyFollowed); } setFollowers(listFollowers); + setFollowing(listFollowing); }; - /** - * Update the followed value if and only if a profile is being viewed and you are loading a profile afresh that is not your own profile. - */ - if (isProfileView && !isOwnProfile) { - updateFollowedValue(); - } + updateFollowedValue(); }, []); /** @@ -158,8 +166,12 @@ const Content: React.FC = ({y, isProfileView}) => { showsVerticalScrollIndicator={false} scrollEventThrottle={1} stickyHeaderIndices={[2, 4]}> - - + + = ({ count, isProfileView, }) => { + const navigation = useNavigation(); const displayed: string = count < 5e3 ? `${count}` @@ -23,12 +24,12 @@ const FollowCount: React.FC = ({ : count < 1e6 ? `${(count / 1e3).toFixed(0)}k` : `${count / 1e6}m`; - const navigation = useNavigation(); return ( navigation.navigate('FollowersListScreen', { isProfileView: isProfileView, + isFollowers: mode === 'followers', }) }> diff --git a/src/components/profile/Followers.tsx b/src/components/profile/Followers.tsx index e0fee303..bee02e07 100644 --- a/src/components/profile/Followers.tsx +++ b/src/components/profile/Followers.tsx @@ -6,11 +6,11 @@ import {useNavigation} from '@react-navigation/native'; import {Button} from 'react-native-elements'; interface FollowersListProps { - followers: Array; + result: Array; sectionTitle: string; } -const Followers: React.FC = ({followers}) => { +const Followers: React.FC = ({result, sectionTitle}) => { const navigation = useNavigation(); return ( <> @@ -23,14 +23,14 @@ const Followers: React.FC = ({followers}) => { navigation.goBack(); }} /> - {'Followers'} + {sectionTitle} - {followers.map((profilePreview) => ( + {result.map((profilePreview) => ( ))} diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 25789525..f3ef5dfa 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -5,12 +5,15 @@ import FollowCount from './FollowCount'; import {View, Text, StyleSheet} from 'react-native'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {AuthContext, ProfileContext} from '../../routes/'; +import { ProfilePreviewType } from 'src/types'; type ProfileHeaderProps = { - isProfileView: boolean; + isProfileView: boolean, + numFollowing: number, + numFollowers: number; }; -const ProfileHeader: React.FC = ({isProfileView}) => { +const ProfileHeader: React.FC = ({isProfileView, numFollowing, numFollowers}) => { const { profile: {name}, } = isProfileView @@ -26,13 +29,13 @@ const ProfileHeader: React.FC = ({isProfileView}) => { diff --git a/src/constants/api.ts b/src/constants/api.ts index ce9b24f4..4effc1d3 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -20,6 +20,7 @@ export const COMMENTS_ENDPOINT: string = API_URL + 'comments/'; export const FOLLOW_USER_ENDPOINT: string = API_URL + 'follow/'; export const UNFOLLOW_USER_ENDPOINT: string = API_URL + 'unfollow/'; export const FOLLOWERS_ENDPOINT: string = API_URL + 'followers/'; +export const FOLLOWING_ENDPOINT: string = API_URL + 'following/'; // Register Social Link (Non-integrated) export const LINK_SNAPCHAT_ENDPOINT: string = API_URL + 'link-sc/'; diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx index 0cb20f75..d85f003e 100644 --- a/src/routes/profile/ProfileStack.tsx +++ b/src/routes/profile/ProfileStack.tsx @@ -27,7 +27,8 @@ export type ProfileStackParams = { isProfileView: boolean; }; FollowersListScreen: { - isProfileView: boolean; + isProfileView: boolean, + isFollowers: boolean; }; }; diff --git a/src/routes/viewProfile/ProfileProvider.tsx b/src/routes/viewProfile/ProfileProvider.tsx index c4942ea0..0600b65b 100644 --- a/src/routes/viewProfile/ProfileProvider.tsx +++ b/src/routes/viewProfile/ProfileProvider.tsx @@ -116,6 +116,9 @@ const ProfileProvider: React.FC = ({children}) => { updateMoments: (value) => { setNewMomentsAvailable(value); }, + socialsNeedUpdate: (socials: string[]) => { + setSocialsNeedUpdate(socials); + }, }}> {children} diff --git a/src/screens/profile/FollowersListScreen.tsx b/src/screens/profile/FollowersListScreen.tsx index 5150c77d..21778929 100644 --- a/src/screens/profile/FollowersListScreen.tsx +++ b/src/screens/profile/FollowersListScreen.tsx @@ -3,13 +3,14 @@ import {RouteProp} from '@react-navigation/native'; import {TabsGradient, Followers, CenteredView} from '../../components'; import Animated from 'react-native-reanimated'; import {AuthContext, ProfileContext} from '../../routes/'; -import {FOLLOWERS_ENDPOINT} from '../../constants'; +import {FOLLOWERS_ENDPOINT, FOLLOWING_ENDPOINT} from '../../constants'; import AsyncStorage from '@react-native-community/async-storage'; import {ProfilePreviewType} from '../../types'; import {ScrollView} from 'react-native-gesture-handler'; import {StatusBarHeight, SCREEN_HEIGHT} from '../../utils'; import {StyleSheet, View} from 'react-native'; import {ProfileStackParams} from '../../routes'; +import { loadFollowers, loadFollowing } from '../../services/UserFollowServices'; type FollowersListScreenRouteProp = RouteProp< ProfileStackParams, @@ -20,37 +21,39 @@ interface FollowersListScreenProps { } const FollowersListScreen: React.FC = ({route}) => { - const {isProfileView} = route.params; + const {isProfileView, isFollowers} = route.params; const {user} = isProfileView ? React.useContext(ProfileContext) : React.useContext(AuthContext); const y = Animated.useValue(0); - const [followers, setFollowers] = useState>([]); + const [result, setResult] = useState>([]); const top = Animated.useValue(-SCREEN_HEIGHT); useEffect(() => { const loadResults = async (q: string) => { try { const token = await AsyncStorage.getItem('token'); - const response = await fetch(`${FOLLOWERS_ENDPOINT}?user_id=${q}`, { - method: 'GET', - headers: { - Authorization: 'Token ' + token, - }, - }); - const status = response.status; - if (status === 200) { - let followersResults = await response.json(); - setFollowers(followersResults); + + if (!token) { return; } - setFollowers([]); + + const result: ProfilePreviewType[] = isFollowers ? await loadFollowers( + user.userId, + token, + ) : await loadFollowing( + user.userId, + token, + ); + setResult(result); + } catch (error) { console.log(error); - setFollowers([]); + setResult([]); } }; loadResults(user.userId); + }, []); return ( @@ -61,7 +64,7 @@ const FollowersListScreen: React.FC = ({route}) => { stickyHeaderIndices={[4]} contentContainerStyle={styles.contentContainer} showsVerticalScrollIndicator={false}> - + diff --git a/src/services/UserFollowServices.ts b/src/services/UserFollowServices.ts index bfd8058a..508c1387 100644 --- a/src/services/UserFollowServices.ts +++ b/src/services/UserFollowServices.ts @@ -5,6 +5,7 @@ import { FOLLOWERS_ENDPOINT, FOLLOW_USER_ENDPOINT, UNFOLLOW_USER_ENDPOINT, + FOLLOWING_ENDPOINT, } from '../constants'; import {ProfilePreviewType} from 'src/types'; @@ -29,6 +30,26 @@ export const loadFollowers = async (userId: string, token: string) => { return []; }; +export const loadFollowing = async (userId: string, token: string) => { + try { + const response = await fetch(FOLLOWING_ENDPOINT + `?user_id=${userId}`, { + method: 'GET', + headers: { + Authorization: 'Token ' + token, + }, + }); + if (response.status === 200) { + const body = await response.json(); + return body; + } else { + throw new Error(await response.json()); + } + } catch (error) { + console.log(error); + } + return []; +}; + export const followOrUnfollowUser = async ( follower: string, followed: string, -- cgit v1.2.3-70-g09d2