From cd10595e8675c8bcf32399a910f90a626d706f3a Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 18 Feb 2021 19:08:16 -0500 Subject: pagination mostly working --- src/components/suggestedPeople/MutualFriends.tsx | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) (limited to 'src/components') diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx index f99279c0..283ee6c5 100644 --- a/src/components/suggestedPeople/MutualFriends.tsx +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -1,29 +1,21 @@ import React, {useState} from 'react'; import {SafeAreaView, StyleSheet, Text, View} from 'react-native'; +import {normalize} from 'react-native-elements'; import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler'; -import {useSelector} from 'react-redux'; -import {ScreenType} from '../../types'; import {BottomDrawer, TabsGradient} from '../../components'; -import {RootState} from '../../store/rootReducer'; +import {ProfilePreviewType, ScreenType} from '../../types'; import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {ProfilePreview} from '../profile'; -import {normalize} from 'react-native-elements'; -const MutualFriends: React.FC = () => { - // Requires user id of profile being viewed - const userXId = '53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d'; - - // Fetch mutual friends of user X - let {friends} = userXId - ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId]) - : useSelector((state: RootState) => state.friends); +interface MutualFriendsProps { + user: ProfilePreviewType; + friends: ProfilePreviewType[]; +} +const MutualFriends: React.FC = ({user, friends}) => { // Getting list of first 4 friends to display on suggested people screen const friendsPreview = friends.slice(0, 4); - // Extract username of user whose profile is being viewed - const username = '@' + '12345678901234'; - // Count to be displayed after + symbol const count = friends.length - friendsPreview.length; @@ -61,7 +53,7 @@ const MutualFriends: React.FC = () => { Mutual Friends - {username} and you are both friends with + @{user.username} and you are both friends with -- cgit v1.2.3-70-g09d2 From f931ca29805be64ed4b8835a4523da00dfcbb0ad Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 18 Feb 2021 20:09:45 -0500 Subject: finished?! --- src/components/suggestedPeople/MutualFriends.tsx | 5 +- .../suggestedPeople/SuggestedPeopleScreen.tsx | 77 ++++++++++++++++------ src/store/initialStates.ts | 1 + 3 files changed, 61 insertions(+), 22 deletions(-) (limited to 'src/components') diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx index 283ee6c5..fdda104a 100644 --- a/src/components/suggestedPeople/MutualFriends.tsx +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -12,7 +12,10 @@ interface MutualFriendsProps { friends: ProfilePreviewType[]; } -const MutualFriends: React.FC = ({user, friends}) => { +const MutualFriends: React.FC = ({ + user, + friends, +}): JSX.Element => { // Getting list of first 4 friends to display on suggested people screen const friendsPreview = friends.slice(0, 4); diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index d61ba2fe..1199993b 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -12,14 +12,20 @@ import { import {Image} from 'react-native-animatable'; import Animated from 'react-native-reanimated'; import {useDispatch, useSelector, useStore} from 'react-redux'; -import {TabsGradient} from '../../components'; +import {TabsGradient, TaggsBar} from '../../components'; import {MutualFriends} from '../../components/suggestedPeople'; import {SP_PAGE_SIZE} from '../../constants'; import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen'; import {getSuggestedPeople} from '../../services/SuggestedPeopleService'; +import {resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import {ScreenType, SuggestedPeopleDataType} from '../../types'; -import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import { + ProfilePreviewType, + ScreenType, + SuggestedPeopleDataType, +} from '../../types'; +import {fetchUserX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {userXInStore} from './../../utils/'; /** * Bare bones for suggested people consisting of: @@ -35,22 +41,54 @@ const SuggestedPeopleScreen: React.FC = () => { const {suggested_people_linked} = useSelector( (state: RootState) => state.user.profile, ) ?? {suggested_people_linked: -1}; - const [users, setUsers] = useState([]); + const [people, setPeople] = useState([]); const [page, setPage] = useState(0); const [refreshing, setRefreshing] = useState(false); + // DEBUG + useEffect(() => { + console.log( + 'people updated', + people.map((ppl) => ppl.user.username), + ); + }, [people]); + // loads data and append it to users based on current page useEffect(() => { + console.log('current page', page); + loadMore(false); + }, [page]); + + const loadMore = (resetData: boolean) => { const loadNextPage = async () => await getSuggestedPeople(SP_PAGE_SIZE, page * SP_PAGE_SIZE); loadNextPage().then((newUsers) => { - setUsers(users.concat(newUsers)); + if (resetData) { + setPeople([]); + setPage(0); + } + loadUserDataToStore(newUsers.map((ppl) => ppl.user)); + setPeople(people.concat(newUsers)); }); - }, [page]); + }; + const loadUserDataToStore = async (users: ProfilePreviewType[]) => { + const loadUserData = async (user: ProfilePreviewType) => { + if (!userXInStore(state, screenType, user.id)) { + await fetchUserX( + dispatch, + {userId: user.id, username: user.username}, + screenType, + ); + } + }; + await Promise.all(users.map((user) => loadUserData(user))); + console.log('done loading'); + }; const resetPage = () => { const reset = async () => { - await setPage(0); + await dispatch(resetScreenType(screenType)); + loadMore(true); }; setRefreshing(true); reset().then(() => { @@ -83,10 +121,8 @@ const SuggestedPeopleScreen: React.FC = () => { return ( <> { {data.user.first_name} {data.user.username} - {/* TODO: uncomment me */} + {/* TODO: Finish me ?! */} {/* { */} - {/* {loadedStatus[data.user.username] && ( - - )} */} + @@ -130,7 +164,7 @@ const SuggestedPeopleScreen: React.FC = () => { <> } keyExtractor={(item, index) => index.toString()} showsVerticalScrollIndicator={false} @@ -151,6 +185,7 @@ const styles = StyleSheet.create({ width: SCREEN_WIDTH * 0.9, height: SCREEN_HEIGHT, paddingVertical: '15%', + paddingBottom: '20%', justifyContent: 'space-between', alignSelf: 'center', marginHorizontal: '5%', @@ -225,7 +260,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', - marginBottom: '10%', + marginBottom: '5%', }, body: {}, }); diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts index 10fdad25..408de39e 100644 --- a/src/store/initialStates.ts +++ b/src/store/initialStates.ts @@ -128,6 +128,7 @@ export const EMPTY_SCREEN_TO_USERS_LIST: Record< [ScreenType.Profile]: EMPTY_USERX_LIST, [ScreenType.Search]: EMPTY_USERX_LIST, [ScreenType.Notifications]: EMPTY_USERX_LIST, + [ScreenType.SuggestedPeople]: EMPTY_USERX_LIST, }; export const INITIAL_CATEGORIES_STATE = { -- cgit v1.2.3-70-g09d2