Merged changes to make sure moments view and search work (#62)

12 files changed, 100 insertions, 105 deletions

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 {Text} from 'react-native-animatable'; -->
 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<ContentProps> = ({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<MomentType[]>([]);
   const [imagesMap, setImagesMap] = useState<Map<string, MomentType[]>>(
     new Map(),
@@ -68,10 +68,10 @@ const Content: React.FC<ContentProps> = ({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<ContentProps> = ({y, isProfileView}) => {
       <ProfileCutout>
         <ProfileHeader {...{isProfileView}} />
       </ProfileCutout>
-      <ProfileBody {...{onLayout}} />
-      <TaggsBar {...{y, profileBodyHeight}} />
       <ProfileBody {...{onLayout, isProfileView}} />
       <TaggsBar {...{y, profileBodyHeight, isProfileView}} />
-      {!isProfileView ? (
-        <View style={styles.momentsContainer}>
+      <View style={styles.momentsContainer}>
         {defaultMoments.map((title, index) => (
-          <Moment key={index} title={title} images={imagesMap.get(title)} />
+          <Moment
+            key={index}
+            title={title}
+            images={imagesMap.get(title)}
+            isProfileView={isProfileView}
+          />
         ))}
       </View>
-      ) : (
-        <React.Fragment />
-      )}
     </Animated.ScrollView>
   );
 };
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<MomentProps> = ({title, images}) => {
+const Moment: React.FC<MomentProps> = ({title, images, isProfileView}) => {
   const navigation = useNavigation();
 
   const navigateToImagePicker = () => {
@@ -36,17 +37,23 @@ const Moment: React.FC<MomentProps> = ({title, images}) => {
           });
         }
       })
-      .catch((err) => {Alert.alert('Unable to upload moment!');});
+      .catch((err) => {
+        Alert.alert('Unable to upload moment!');
+      });
   };
   return (
     <View style={styles.container}>
       <View style={styles.header}>
         <Text style={styles.titleText}>{title}</Text>
-        <PlusIcon
-          width={21}
-          height={21}
-          onPress={() => navigateToImagePicker()}
-        />
+        {!isProfileView ? (
+          <PlusIcon
+            width={21}
+            height={21}
+            onPress={() => navigateToImagePicker()}
+          />
+        ) : (
+          <React.Fragment />
+        )}
       </View>
       <ScrollView
         horizontal
@@ -56,7 +63,7 @@ const Moment: React.FC<MomentProps> = ({title, images}) => {
           images.map((imageObj: MomentType) => (
             <MomentTile key={imageObj.moment_id} moment={imageObj} />
           ))}
-        {(images === undefined || images.length === 0) && (
+        {(images === undefined || images.length === 0) && !isProfileView && (
           <TouchableOpacity onPress={() => navigateToImagePicker()}>
             <LinearGradient
               colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
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<SearchResultProps> = ({
   style,
 }) => {
   const navigation = useNavigation();
-  const {loadProfile} = useContext(ProfileContext);
+  const {loadProfile, updateMoments} = useContext(ProfileContext);
   const [avatarURI, setAvatarURI] = useState<string | null>(null);
   const [user, setUser] = useState<UserType>(NO_USER);
   useEffect(() => {
@@ -100,10 +100,12 @@ const SearchResult: React.FC<SearchResultProps> = ({
         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<MomentStackParams>();
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 (
-    <MomentStack.Navigator
-      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',
-            }),
-          },
-        }),
-      }}
-      initialRouteName="Profile"
-      mode="modal">
-      <MomentStack.Screen
-        name="Profile"
-        component={Profile}
-        options={{headerShown: false}}
-      />
-      <MomentStack.Screen
-        name="IndividualMoment"
-        component={IndividualMoment}
-        options={{headerShown: false}}
-      />
-    </MomentStack.Navigator>
-  );
-};
-
-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<ProfileStackParams, 'Profile'>;
+type ProfileStackRouteProps = RouteProp<ProfileStackParams, 'Profile'>;
 
-interface ProfileScreenProps {
-  route: ProfileScreenRouteProps;
+interface ProfileStackProps {
+  route: ProfileStackRouteProps;
 }
 
-const Profile: React.FC<ProfileScreenProps> = ({route}) => {
+const Profile: React.FC<ProfileStackProps> = ({route}) => {
   const {isProfileView} = route.params;
   return (
     <ProfileStack.Navigator
-      initialRouteName={!isProfileView ? `Profile` : `Search`}
-      screenOptions={{headerShown: false}}>
+      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`}>
       <ProfileStack.Screen
         name="Profile"
         component={ProfileScreen}
+        options={{headerShown: false}}
         initialParams={{isProfileView: isProfileView}}
       />
       {isProfileView ? (
@@ -47,6 +70,12 @@ const Profile: React.FC<ProfileScreenProps> = ({route}) => {
       ) : (
         <React.Fragment />
       )}
+      <ProfileStack.Screen
+        name="IndividualMoment"
+        component={IndividualMoment}
+        options={{headerShown: false}}
+        initialParams={{isProfileView: isProfileView}}
+      />
     </ProfileStack.Navigator>
   );
 };
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<ProfileStackParams>();
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 = () => {
             ) : (
               <NavigationIcon tab="Notifications" disabled={true} />
             );
-          } else if (route.name === 'MomentStackScreen') {
+          } else if (route.name === 'Profile') {
             return focused ? (
               <NavigationIcon tab="Profile" disabled={false} />
             ) : (
@@ -45,7 +44,7 @@ const NavigationBar: React.FC = () => {
           }
         },
       })}
-      initialRouteName="MomentStackScreen"
+      initialRouteName="Profile"
       tabBarOptions={{
         showLabel: false,
         style: {
@@ -65,7 +64,11 @@ const NavigationBar: React.FC = () => {
       />
       <Tabs.Screen name="Upload" component={Upload} />
       <Tabs.Screen name="Notifications" component={Notifications} />
-      <Tabs.Screen name="MomentStackScreen" component={MomentStackScreen} />
+      <Tabs.Screen
+        name="Profile"
+        component={Profile}
+        initialParams={{isProfileView: false}}
+      />
     </Tabs.Navigator>
   );
 };
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<InstagramPostType>;
+  newMomentsAvailable: boolean;
+  updateMoments: (value: boolean) => void;
 }
 const NO_USER: UserType = {
   userId: '',
@@ -35,6 +36,8 @@ export const ProfileContext = createContext<ProfileContextProps>({
   avatar: null,
   cover: null,
   instaPosts: [],
+  newMomentsAvailable: true,
+  updateMoments: () => {},
 });
 
 /**
@@ -46,6 +49,7 @@ const ProfileProvider: React.FC = ({children}) => {
   const [avatar, setAvatar] = useState<string | null>(null);
   const [cover, setCover] = useState<string | null>(null);
   const [instaPosts, setInstaPosts] = useState<Array<InstagramPostType>>([]);
+  const [newMomentsAvailable, setNewMomentsAvailable] = useState<boolean>(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}
     </ProfileContext.Provider>
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<CaptionScreenProps> = ({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<CaptionScreenProps> = ({route, navigation}) => {
             title="Cancel"
             buttonStyle={styles.button}
             onPress={() => {
-              navigation.navigate('Profile');
+              navigation.navigate('Profile', {isProfileView: false});
             }}
           />
           <Button
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 377898c1..639c0965 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -7,7 +7,7 @@ import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {CaptionScreenHeader} from '../../components/profile';
 import {AuthContext} from '../../routes/authentication';
-import {MomentStackParams} from 'src/routes/profile/MomentStack';
+import {ProfileStackParams} from 'src/routes/profile/ProfileStack';
 import moment from 'moment';
 import Animated from 'react-native-reanimated';
 
@@ -20,11 +20,11 @@ const NO_USER: UserType = {
  * Individual moment view opened when user clicks on a moment tile
  */
 type IndividualMomentRouteProp = RouteProp<
-  MomentStackParams,
+  ProfileStackParams,
   'IndividualMoment'
 >;
 type IndividualMomentNavigationProp = StackNavigationProp<
-  MomentStackParams,
+  ProfileStackParams,
   'IndividualMoment'
 >;
 interface IndividualMomentProps {
@@ -42,6 +42,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
     date_time,
     moment_id,
   } = route.params.moment;
+  const {isProfileView} = route.params;
   const {
     user: {userId},
   } = React.useContext(AuthContext);
@@ -95,7 +96,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
           title="Close"
           buttonStyle={styles.button}
           onPress={() => {
-            navigation.navigate('Profile');
+            navigation.navigate('Profile', {isProfileView: isProfileView});
           }}
         />
       </View>