[TMA-461] Notifications Screen (#151)

* renamed ProfileStack to MainStack, created initial notifications data type

* cleaned up code

* added notifications to redux

* finished sectioned list

* updated types to make more sense

* finished sectioned notifications by date

* updated notification type and tested mock backend integration

* finished read or unread logic

* minor changes

* another minor fix

* finished integration

* moved stuff

* added ability to navigate to user profile

Co-authored-by: Husam Salhab <47015061+hsalhab@users.noreply.github.com>

1 files changed, 182 insertions, 0 deletions

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
new file mode 100644
index 00000000..cd053bde
--- /dev/null
+++ b/src/routes/main/MainStackScreen.tsx
@@ -0,0 +1,182 @@
+import React from 'react';
+import {
+  IndividualMoment,
+  CaptionScreen,
+  SocialMediaTaggs,
+  SearchScreen,
+  ProfileScreen,
+  MomentCommentsScreen,
+  FollowersListScreen,
+  EditProfile,
+  CategorySelection,
+  NotificationsScreen,
+} from '../../screens';
+import {MainStack, MainStackParams} from './MainStackNavigator';
+import {RouteProp} from '@react-navigation/native';
+import {ScreenType} from '../../types';
+import {AvatarHeaderHeight} from '../../utils';
+import {StackNavigationOptions} from '@react-navigation/stack';
+import {Screen} from 'react-native-screens';
+
+/**
+ * Trying to explain the purpose of each route on the stack (ACTUALLY A STACK)
+ * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited.
+ * Search : To display the search screen. Search for a user on this screen, click on a result tile and navigate to the same.
+ * When you click on the search icon after looking at a user's profile, the stack gets reset and you come back to the top of the stack (First screen : Search in this case)
+ * SocialMediaTaggs : To display user data for any social media account set up by the user.
+ * IndividualMoment : To display individual images uploaded by the user (Navigate to comments from this screen, click on a commenter's profile pic / username, look at a user's profile. Click on the profile icon again to come back to your own profile).
+ * MomentCommentsScreen : Displays comments posted by users on an image uploaded by the user.
+ * EditProfile : To edit logged in user's information.
+ */
+
+type MainStackRouteProps = RouteProp<MainStackParams, 'Profile'>;
+
+interface MainStackProps {
+  route: MainStackRouteProps;
+}
+
+const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
+  const {screenType} = route.params;
+
+  // const isProfileTab = screenType === ScreenType.Profile;
+  const isSearchTab = screenType === ScreenType.Search;
+  const isNotificationsTab = screenType === ScreenType.Notifications;
+
+  const initialRouteName = (() => {
+    switch (screenType) {
+      case ScreenType.Profile:
+        return 'Profile';
+      case ScreenType.Search:
+        return 'Search';
+      case ScreenType.Notifications:
+        return 'Notifications';
+    }
+  })();
+
+  const modalStyle: StackNavigationOptions = {
+    cardStyle: {backgroundColor: 'transparent'},
+    gestureDirection: 'vertical',
+    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: '#505050',
+        opacity: progress.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, 0.9],
+          extrapolate: 'clamp',
+        }),
+      },
+    }),
+  };
+
+  return (
+    <MainStack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+      mode="card"
+      initialRouteName={initialRouteName}>
+      <MainStack.Screen
+        name="Profile"
+        component={ProfileScreen}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTitle: '',
+          headerTintColor: 'white',
+          headerStyle: {height: AvatarHeaderHeight},
+        }}
+        initialParams={{
+          screenType,
+        }}
+      />
+      {isSearchTab && (
+        <MainStack.Screen
+          name="Search"
+          component={SearchScreen}
+          initialParams={{screenType}}
+        />
+      )}
+      {isNotificationsTab && (
+        <MainStack.Screen
+          name="Notifications"
+          component={NotificationsScreen}
+          initialParams={{screenType}}
+        />
+      )}
+      <MainStack.Screen
+        name="CaptionScreen"
+        component={CaptionScreen}
+        options={{...modalStyle, gestureEnabled: false}}
+      />
+      <MainStack.Screen
+        name="SocialMediaTaggs"
+        component={SocialMediaTaggs}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTitle: '',
+          headerTintColor: 'white',
+          headerStyle: {height: AvatarHeaderHeight},
+        }}
+        initialParams={{screenType}}
+      />
+      <MainStack.Screen
+        name="CategorySelection"
+        component={CategorySelection}
+        options={{
+          headerShown: true,
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTintColor: 'white',
+          headerTitle: '',
+        }}
+      />
+      <MainStack.Screen
+        name="IndividualMoment"
+        component={IndividualMoment}
+        options={{
+          ...modalStyle,
+        }}
+        initialParams={{screenType}}
+      />
+      <MainStack.Screen
+        name="MomentCommentsScreen"
+        component={MomentCommentsScreen}
+        options={{
+          ...modalStyle,
+        }}
+        initialParams={{screenType}}
+      />
+      <MainStack.Screen
+        name="FollowersListScreen"
+        component={FollowersListScreen}
+        options={{
+          ...modalStyle,
+        }}
+        initialParams={{screenType}}
+      />
+      <MainStack.Screen
+        name="EditProfile"
+        component={EditProfile}
+        options={{
+          headerShown: true,
+          headerTitle: 'Edit Profile',
+          headerTransparent: true,
+          headerBackTitleVisible: false,
+          headerTintColor: 'white',
+        }}
+      />
+    </MainStack.Navigator>
+  );
+};
+
+export default MainStackScreen;