Tma235/231 Individual view and horizontal view (#59)

* Implemented modal stack navigation for moment view, created a rough UI for individual moment view [incl: title, image(not displayed)]

* bare bones beginnning

* Created individual moment screen, moment tile for horizontal view

* Alert

* Fix initial route

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>
Co-authored-by: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>

6 files changed, 76 insertions, 8 deletions

diff --git a/src/routes/authentication/AuthProvider.tsx b/src/routes/authentication/AuthProvider.tsx
index 6f577a73..8dd9fd73 100644
--- a/src/routes/authentication/AuthProvider.tsx
+++ b/src/routes/authentication/AuthProvider.tsx
@@ -24,6 +24,8 @@ interface AuthContextProps {
   cover: string | null;
   instaPosts: Array<InstagramPostType>;
   recentSearches: Array<ProfilePreviewType>;
+  newMomentsAvailable: boolean;
+  updateMoments: (value: boolean) => void;
 }
 const NO_USER: UserType = {
   userId: '',
@@ -43,6 +45,8 @@ export const AuthContext = createContext<AuthContextProps>({
   cover: null,
   instaPosts: [],
   recentSearches: [],
+  newMomentsAvailable: true,
+  updateMoments: () => {},
 });
 
 /**
@@ -57,6 +61,7 @@ const AuthProvider: React.FC = ({children}) => {
   const [recentSearches, setRecentSearches] = useState<
     Array<ProfilePreviewType>
   >([]);
+  const [newMomentsAvailable, setNewMomentsAvailable] = useState<boolean>(true);
   const {userId} = user;
   useEffect(() => {
     if (!userId) {
@@ -90,6 +95,7 @@ const AuthProvider: React.FC = ({children}) => {
         avatar,
         cover,
         instaPosts,
+        newMomentsAvailable,
         login: (id, username) => {
           setUser({...user, userId: id, username});
         },
@@ -105,6 +111,9 @@ const AuthProvider: React.FC = ({children}) => {
           }
         },
         recentSearches,
+        updateMoments: (value) => {
+          setNewMomentsAvailable(value);
+        },
       }}>
       {children}
     </AuthContext.Provider>
diff --git a/src/routes/profile/MomentStack.tsx b/src/routes/profile/MomentStack.tsx
new file mode 100644
index 00000000..83853c99
--- /dev/null
+++ b/src/routes/profile/MomentStack.tsx
@@ -0,0 +1,11 @@
+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
new file mode 100644
index 00000000..8768199a
--- /dev/null
+++ b/src/routes/profile/MomentStackScreen.tsx
@@ -0,0 +1,46 @@
+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/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx
index 63ab9a10..df4d234f 100644
--- a/src/routes/profile/ProfileStack.tsx
+++ b/src/routes/profile/ProfileStack.tsx
@@ -10,7 +10,10 @@ export type ProfileStackParams = {
     socialMediaHandle: string;
     isProfileView: boolean;
   };
-  CaptionScreen: {title: string; image: object};
+  CaptionScreen: {
+    title: string;
+    image: object;
+  };
 };
 
 export const ProfileStack = createStackNavigator<ProfileStackParams>();
diff --git a/src/routes/profile/index.ts b/src/routes/profile/index.ts
index 367f4cc6..1ab9cb7e 100644
--- a/src/routes/profile/index.ts
+++ b/src/routes/profile/index.ts
@@ -1,2 +1,4 @@
 export * from './ProfileStack';
+export * from './MomentStack';
+export * from './MomentStackScreen';
 export {default} from './Profile';
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 2852b565..f05a512b 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {NavigationIcon} from '../../components';
 import {Home, Notifications, Upload} from '../../screens';
 import Profile from '../profile';
+import MomentStackScreen from '../profile/MomentStackScreen';
 
 const Tabs = createBottomTabNavigator();
 
@@ -35,7 +36,7 @@ const NavigationBar: React.FC = () => {
             ) : (
               <NavigationIcon tab="Notifications" disabled={true} />
             );
-          } else if (route.name === 'Profile') {
+          } else if (route.name === 'MomentStackScreen') {
             return focused ? (
               <NavigationIcon tab="Profile" disabled={false} />
             ) : (
@@ -44,7 +45,7 @@ const NavigationBar: React.FC = () => {
           }
         },
       })}
-      initialRouteName="Profile"
+      initialRouteName="MomentStackScreen"
       tabBarOptions={{
         showLabel: false,
         style: {
@@ -64,11 +65,7 @@ const NavigationBar: React.FC = () => {
       />
       <Tabs.Screen name="Upload" component={Upload} />
       <Tabs.Screen name="Notifications" component={Notifications} />
-      <Tabs.Screen
-        name="Profile"
-        component={Profile}
-        initialParams={{isProfileView: false}}
-      />
+      <Tabs.Screen name="MomentStackScreen" component={MomentStackScreen} />
     </Tabs.Navigator>
   );
 };