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 --- .../suggestedPeople/SuggestedPeopleScreen.tsx | 152 ++++++++++++++------- 1 file changed, 103 insertions(+), 49 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 3437cd85..d61ba2fe 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -1,22 +1,25 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'; -import React, {useCallback} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import { + FlatList, + ListRenderItemInfo, + RefreshControl, StatusBar, StyleSheet, Text, - TouchableOpacity, View, } from 'react-native'; import {Image} from 'react-native-animatable'; import Animated from 'react-native-reanimated'; -import {SafeAreaView} from 'react-native-safe-area-context'; -import {useSelector} from 'react-redux'; -import {TabsGradient, TaggsBar} from '../../components'; +import {useDispatch, useSelector, useStore} from 'react-redux'; +import {TabsGradient} 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 {RootState} from '../../store/rootReducer'; -import {ScreenType} from '../../types'; -import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {ScreenType, SuggestedPeopleDataType} from '../../types'; +import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; /** * Bare bones for suggested people consisting of: @@ -24,17 +27,40 @@ import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; */ const SuggestedPeopleScreen: React.FC = () => { + const y = Animated.useValue(0); + const navigation = useNavigation(); + const state: RootState = useStore().getState(); + const dispatch = useDispatch(); + const screenType = ScreenType.SuggestedPeople; const {suggested_people_linked} = useSelector( (state: RootState) => state.user.profile, ) ?? {suggested_people_linked: -1}; - const y = Animated.useValue(0); + const [users, setUsers] = useState([]); + const [page, setPage] = useState(0); + const [refreshing, setRefreshing] = useState(false); - // Can be removed once firstname, username props are received - const firstName = 'Sarah'; + // loads data and append it to users based on current page + useEffect(() => { + const loadNextPage = async () => + await getSuggestedPeople(SP_PAGE_SIZE, page * SP_PAGE_SIZE); + loadNextPage().then((newUsers) => { + setUsers(users.concat(newUsers)); + }); + }, [page]); - // Adviced to maintain username as a variable here to append @ symbol for maintainability - const username = '@' + 'sarahmiller'; - const navigation = useNavigation(); + const resetPage = () => { + const reset = async () => { + await setPage(0); + }; + setRefreshing(true); + reset().then(() => { + setRefreshing(false); + }); + }; + + const onRefresh = useCallback(() => { + resetPage(); + }, []); useFocusEffect( useCallback(() => { @@ -48,47 +74,74 @@ const SuggestedPeopleScreen: React.FC = () => { }, [navigation, suggested_people_linked]), ); - const mainContent = () => ( - - - - - Suggested People - - - - {firstName} - {username} - - console.log('Call add friend function')}> - - {'Add Friend'} + const SPBody = ({ + item, + }: { + item: ListRenderItemInfo; + }) => { + const data = item.item; + return ( + <> + + + Suggested People + + + + {data.user.first_name} + {data.user.username} - + {/* TODO: uncomment me */} + {/* console.log('Call add friend function')}> + + {'Add Friend'} + + */} + + {/* {loadedStatus[data.user.username] && ( + + )} */} + - - - - - - ); + + ); + }; return suggested_people_linked === 0 ? ( ) : ( - mainContent() + <> + + } + keyExtractor={(item, index) => index.toString()} + showsVerticalScrollIndicator={false} + onEndReached={() => setPage(page + 1)} + refreshControl={ + + } + pagingEnabled + /> + + ); }; @@ -96,7 +149,8 @@ const styles = StyleSheet.create({ mainContainer: { flexDirection: 'column', width: SCREEN_WIDTH * 0.9, - height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88, + height: SCREEN_HEIGHT, + paddingVertical: '15%', justifyContent: 'space-between', alignSelf: 'center', marginHorizontal: '5%', @@ -171,7 +225,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', - marginBottom: '5%', + marginBottom: '10%', }, body: {}, }); -- 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/screens') 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 From a399d8266a31ad3bfd69a691bc6048637cee21da Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 19 Feb 2021 14:06:13 -0500 Subject: hide "Suggested People" after first page, some work done for hiding status bar --- .../suggestedPeople/SuggestedPeopleScreen.tsx | 26 +++++++++++++++++----- 1 file changed, 20 insertions(+), 6 deletions(-) (limited to 'src/screens') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 1199993b..f6b468c3 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -44,6 +44,8 @@ const SuggestedPeopleScreen: React.FC = () => { const [people, setPeople] = useState([]); const [page, setPage] = useState(0); const [refreshing, setRefreshing] = useState(false); + const [hideStatusBar, setHideStatusBar] = useState(false); + // const [onFirstPage, setOnFirstPage] = useState(false); // DEBUG useEffect(() => { @@ -112,23 +114,34 @@ const SuggestedPeopleScreen: React.FC = () => { }, [navigation, suggested_people_linked]), ); + // const onViewableItemsChanged = useCallback( + // ({viewableItems}: {viewableItems: ViewToken[]}) => { + // setHideStatusBar(viewableItems[0].index !== 0); + // }, + // [], + // ); + const SPBody = ({ item, }: { item: ListRenderItemInfo; }) => { const data = item.item; + const firstItem = item.index === 0; return ( <> + {/* {statusBar} */} + {/*