From bd2f89805d0bb1c2f1d08fe8d91099aa4f109d35 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 29 Dec 2020 20:21:24 -0500 Subject: [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> --- src/routes/main/MainStackNavigator.tsx | 53 ++++++++++ src/routes/main/MainStackScreen.tsx | 182 +++++++++++++++++++++++++++++++++ src/routes/main/index.ts | 2 + 3 files changed, 237 insertions(+) create mode 100644 src/routes/main/MainStackNavigator.tsx create mode 100644 src/routes/main/MainStackScreen.tsx create mode 100644 src/routes/main/index.ts (limited to 'src/routes/main') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx new file mode 100644 index 00000000..c156c725 --- /dev/null +++ b/src/routes/main/MainStackNavigator.tsx @@ -0,0 +1,53 @@ +/** + * Note the name userXId here, it refers to the id of the user being visited + */ +import {createStackNavigator} from '@react-navigation/stack'; +import {CategorySelectionScreenType, MomentType, ScreenType} from '../../types'; + +export type MainStackParams = { + Search: { + screenType: ScreenType; + }; + Profile: { + userXId: string | undefined; + screenType: ScreenType; + }; + SocialMediaTaggs: { + socialMediaType: string; + userXId: string | undefined; + screenType: ScreenType; + }; + CaptionScreen: { + title: string; + image: object; + screenType: ScreenType; + }; + IndividualMoment: { + moment: MomentType; + userXId: string | undefined; + screenType: ScreenType; + }; + MomentCommentsScreen: { + moment_id: string; + userXId: string | undefined; + screenType: ScreenType; + }; + FollowersListScreen: { + isFollowers: boolean; + userXId: string | undefined; + screenType: ScreenType; + }; + EditProfile: { + userId: string; + username: string; + }; + CategorySelection: { + categories: Array; + screenType: CategorySelectionScreenType; + }; + Notifications: { + screenType: ScreenType; + }; +}; + +export const MainStack = createStackNavigator(); 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; + +interface MainStackProps { + route: MainStackRouteProps; +} + +const MainStackScreen: React.FC = ({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 ( + + + {isSearchTab && ( + + )} + {isNotificationsTab && ( + + )} + + + + + + + + + ); +}; + +export default MainStackScreen; diff --git a/src/routes/main/index.ts b/src/routes/main/index.ts new file mode 100644 index 00000000..945c3fb0 --- /dev/null +++ b/src/routes/main/index.ts @@ -0,0 +1,2 @@ +export * from './MainStackNavigator'; +export * from './MainStackScreen'; -- cgit v1.2.3-70-g09d2