From 88fb33d1fe1cd0785e4a92cb3c20d0fafb2da54d Mon Sep 17 00:00:00 2001 From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com> Date: Mon, 19 Oct 2020 17:14:37 -0700 Subject: Merged changes to make sure moments view and search work (#62) --- src/components/profile/Content.tsx | 29 +++++++++---------- src/components/profile/Moment.tsx | 23 +++++++++------ src/components/search/SearchResult.tsx | 6 ++-- src/routes/profile/MomentStack.tsx | 11 ------- src/routes/profile/MomentStackScreen.tsx | 46 ------------------------------ src/routes/profile/Profile.tsx | 45 +++++++++++++++++++++++------ src/routes/profile/ProfileStack.tsx | 5 ++++ src/routes/profile/index.ts | 4 +-- src/routes/tabs/NavigationBar.tsx | 13 +++++---- src/routes/viewProfile/ProfileProvider.tsx | 10 ++++++- src/screens/profile/CaptionScreen.tsx | 4 +-- src/screens/profile/IndividualMoment.tsx | 9 +++--- 12 files changed, 100 insertions(+), 105 deletions(-) delete mode 100644 src/routes/profile/MomentStack.tsx delete mode 100644 src/routes/profile/MomentStackScreen.tsx (limited to 'src') diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx index d52696a7..0bf66dc7 100644 --- a/src/components/profile/Content.tsx +++ b/src/components/profile/Content.tsx @@ -1,10 +1,9 @@ import AsyncStorage from '@react-native-community/async-storage'; import React, {useCallback, useEffect, useState} from 'react'; import {Alert, LayoutChangeEvent, StyleSheet, View} from 'react-native'; - import Animated from 'react-native-reanimated'; -import {AuthContext} from '../../routes/authentication'; -import {MomentType, UserType} from 'src/types'; +import {AuthContext, ProfileContext} from '../../routes/'; +import {MomentType} from 'src/types'; import {defaultMoments, MOMENTS_ENDPOINT} from '../../constants'; import {SCREEN_HEIGHT} from '../../utils'; import TaggsBar from '../taggs/TaggsBar'; @@ -20,8 +19,9 @@ interface ContentProps { const Content: React.FC = ({y, isProfileView}) => { const [profileBodyHeight, setProfileBodyHeight] = useState(0); - const {newMomentsAvailable, updateMoments} = React.useContext(AuthContext); - + const {newMomentsAvailable, updateMoments, user} = isProfileView + ? React.useContext(ProfileContext) + : React.useContext(AuthContext); const [imagesList, setImagesList] = useState([]); const [imagesMap, setImagesMap] = useState>( new Map(), @@ -68,10 +68,10 @@ const Content: React.FC = ({y, isProfileView}) => { setImagesList(data); updateMoments(!newMomentsAvailable); } else { - Alert.alert('Could not load moments!'); + console.log('Could not load moments!'); } } catch (err) { - Alert.alert('Could not load moments!'); + console.log(err); } }; @@ -91,19 +91,18 @@ const Content: React.FC = ({y, isProfileView}) => { - - - {!isProfileView ? ( - + {defaultMoments.map((title, index) => ( - + ))} - ) : ( - - )} ); }; diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx index be7cbfba..1ec5511e 100644 --- a/src/components/profile/Moment.tsx +++ b/src/components/profile/Moment.tsx @@ -15,9 +15,10 @@ import {MomentType} from 'src/types'; interface MomentProps { title: string; images: MomentType[] | undefined; + isProfileView: boolean; } -const Moment: React.FC = ({title, images}) => { +const Moment: React.FC = ({title, images, isProfileView}) => { const navigation = useNavigation(); const navigateToImagePicker = () => { @@ -36,17 +37,23 @@ const Moment: React.FC = ({title, images}) => { }); } }) - .catch((err) => {Alert.alert('Unable to upload moment!');}); + .catch((err) => { + Alert.alert('Unable to upload moment!'); + }); }; return ( {title} - navigateToImagePicker()} - /> + {!isProfileView ? ( + navigateToImagePicker()} + /> + ) : ( + + )} = ({title, images}) => { images.map((imageObj: MomentType) => ( ))} - {(images === undefined || images.length === 0) && ( + {(images === undefined || images.length === 0) && !isProfileView && ( navigateToImagePicker()}> diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx index cc960308..04624004 100644 --- a/src/components/search/SearchResult.tsx +++ b/src/components/search/SearchResult.tsx @@ -27,7 +27,7 @@ const SearchResult: React.FC = ({ style, }) => { const navigation = useNavigation(); - const {loadProfile} = useContext(ProfileContext); + const {loadProfile, updateMoments} = useContext(ProfileContext); const [avatarURI, setAvatarURI] = useState(null); const [user, setUser] = useState(NO_USER); useEffect(() => { @@ -100,10 +100,12 @@ const SearchResult: React.FC = ({ recentlySearchedList = [user]; } - //Load user profile and navigate to ProfileView + //Load user profile and set new moments to true, navigate to Profile //Load user profile makes sure that we actually load profile of the user the logged in user want to view + //Set new moments to true makes sure that we download the moment for the user being viewed again. //Not sure if we should make this call before caching the search results ?? loadProfile(user.id, user.username); + updateMoments(true); navigation.navigate('Profile', { isProfileView: true, }); diff --git a/src/routes/profile/MomentStack.tsx b/src/routes/profile/MomentStack.tsx deleted file mode 100644 index 83853c99..00000000 --- a/src/routes/profile/MomentStack.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import {createStackNavigator} from '@react-navigation/stack'; -import {MomentType} from '../../types'; - -export type MomentStackParams = { - Profile: undefined; - IndividualMoment: { - moment: MomentType; - }; -}; - -export const MomentStack = createStackNavigator(); diff --git a/src/routes/profile/MomentStackScreen.tsx b/src/routes/profile/MomentStackScreen.tsx deleted file mode 100644 index 8768199a..00000000 --- a/src/routes/profile/MomentStackScreen.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from 'react'; -import {IndividualMoment} from '../../screens'; -import {MomentStack} from './MomentStack'; -import Profile from './Profile'; - -const MomentStackScreen: React.FC = () => { - return ( - ({ - cardStyle: { - opacity: progress.interpolate({ - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }), - }, - overlayStyle: { - backgroundColor: '#808080', - opacity: progress.interpolate({ - inputRange: [0, 1], - outputRange: [0, 0.9], - extrapolate: 'clamp', - }), - }, - }), - }} - initialRouteName="Profile" - mode="modal"> - - - - ); -}; - -export default MomentStackScreen; diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx index b39b726e..363e9e21 100644 --- a/src/routes/profile/Profile.tsx +++ b/src/routes/profile/Profile.tsx @@ -1,29 +1,52 @@ import React from 'react'; import { - ProfileScreen, + IndividualMoment, CaptionScreen, SocialMediaTaggs, SearchScreen, + ProfileScreen, } from '../../screens'; -import {RouteProp} from '@react-navigation/native'; import {ProfileStack, ProfileStackParams} from './ProfileStack'; +import {RouteProp} from '@react-navigation/native'; import {AvatarTitle} from '../../components'; -type ProfileScreenRouteProps = RouteProp; +type ProfileStackRouteProps = RouteProp; -interface ProfileScreenProps { - route: ProfileScreenRouteProps; +interface ProfileStackProps { + route: ProfileStackRouteProps; } -const Profile: React.FC = ({route}) => { +const Profile: React.FC = ({route}) => { const {isProfileView} = route.params; return ( + screenOptions={{ + headerShown: false, + cardStyle: {backgroundColor: 'transparent'}, + cardOverlayEnabled: true, + cardStyleInterpolator: ({current: {progress}}) => ({ + cardStyle: { + opacity: progress.interpolate({ + inputRange: [0, 0.5, 0.9, 1], + outputRange: [0, 0.25, 0.7, 1], + }), + }, + overlayStyle: { + backgroundColor: '#808080', + opacity: progress.interpolate({ + inputRange: [0, 1], + outputRange: [0, 0.9], + extrapolate: 'clamp', + }), + }, + }), + }} + mode="modal" + initialRouteName={!isProfileView ? `Profile` : `Search`}> {isProfileView ? ( @@ -47,6 +70,12 @@ const Profile: React.FC = ({route}) => { ) : ( )} + ); }; diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx index df4d234f..1d7b907e 100644 --- a/src/routes/profile/ProfileStack.tsx +++ b/src/routes/profile/ProfileStack.tsx @@ -1,4 +1,5 @@ import {createStackNavigator} from '@react-navigation/stack'; +import {MomentType} from '../../types'; export type ProfileStackParams = { Search: undefined; @@ -14,6 +15,10 @@ export type ProfileStackParams = { title: string; image: object; }; + IndividualMoment: { + moment: MomentType; + isProfileView: boolean; + }; }; export const ProfileStack = createStackNavigator(); diff --git a/src/routes/profile/index.ts b/src/routes/profile/index.ts index 1ab9cb7e..eed5c6b4 100644 --- a/src/routes/profile/index.ts +++ b/src/routes/profile/index.ts @@ -1,4 +1,2 @@ export * from './ProfileStack'; -export * from './MomentStack'; -export * from './MomentStackScreen'; -export {default} from './Profile'; +export * from './Profile'; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index f05a512b..9cfbe4bf 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -2,8 +2,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import React from 'react'; import {NavigationIcon} from '../../components'; import {Home, Notifications, Upload} from '../../screens'; -import Profile from '../profile'; -import MomentStackScreen from '../profile/MomentStackScreen'; +import Profile from '../profile/Profile'; const Tabs = createBottomTabNavigator(); @@ -36,7 +35,7 @@ const NavigationBar: React.FC = () => { ) : ( ); - } else if (route.name === 'MomentStackScreen') { + } else if (route.name === 'Profile') { return focused ? ( ) : ( @@ -45,7 +44,7 @@ const NavigationBar: React.FC = () => { } }, })} - initialRouteName="MomentStackScreen" + initialRouteName="Profile" tabBarOptions={{ showLabel: false, style: { @@ -65,7 +64,11 @@ const NavigationBar: React.FC = () => { /> - + ); }; diff --git a/src/routes/viewProfile/ProfileProvider.tsx b/src/routes/viewProfile/ProfileProvider.tsx index 1af7917d..8fb9a011 100644 --- a/src/routes/viewProfile/ProfileProvider.tsx +++ b/src/routes/viewProfile/ProfileProvider.tsx @@ -8,7 +8,6 @@ import { loadAvatar, loadCover, loadInstaPosts, - loadRecentlySearchedUsers, } from '../../services'; interface ProfileContextProps { @@ -18,6 +17,8 @@ interface ProfileContextProps { avatar: string | null; cover: string | null; instaPosts: Array; + newMomentsAvailable: boolean; + updateMoments: (value: boolean) => void; } const NO_USER: UserType = { userId: '', @@ -35,6 +36,8 @@ export const ProfileContext = createContext({ avatar: null, cover: null, instaPosts: [], + newMomentsAvailable: true, + updateMoments: () => {}, }); /** @@ -46,6 +49,7 @@ const ProfileProvider: React.FC = ({children}) => { const [avatar, setAvatar] = useState(null); const [cover, setCover] = useState(null); const [instaPosts, setInstaPosts] = useState>([]); + const [newMomentsAvailable, setNewMomentsAvailable] = useState(true); const {userId} = user; useEffect(() => { @@ -79,9 +83,13 @@ const ProfileProvider: React.FC = ({children}) => { avatar, cover, instaPosts, + newMomentsAvailable, loadProfile: (id, username) => { setUser({...user, userId: id, username}); }, + updateMoments: (value) => { + setNewMomentsAvailable(value); + }, }}> {children} diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index d65a8451..9417d1be 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -78,7 +78,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { if (statusCode === 200 && checkImageUploadStatus(data)) { Alert.alert('The picture was uploaded successfully!'); updateMoments(true); - navigation.navigate('Profile'); + navigation.navigate('Profile', {isProfileView: false}); } else { Alert.alert('An error occured while uploading. Please try again!'); } @@ -95,7 +95,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { title="Cancel" buttonStyle={styles.button} onPress={() => { - navigation.navigate('Profile'); + navigation.navigate('Profile', {isProfileView: false}); }} />