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/index.ts | 2 +- src/routes/main/MainStackNavigator.tsx | 53 ++++++++ src/routes/main/MainStackScreen.tsx | 182 +++++++++++++++++++++++++++ src/routes/main/index.ts | 2 + src/routes/profile/ProfileStackNavigator.tsx | 50 -------- src/routes/profile/ProfileStackScreen.tsx | 166 ------------------------ src/routes/profile/index.ts | 2 - src/routes/tabs/NavigationBar.tsx | 15 +-- 8 files changed, 246 insertions(+), 226 deletions(-) create mode 100644 src/routes/main/MainStackNavigator.tsx create mode 100644 src/routes/main/MainStackScreen.tsx create mode 100644 src/routes/main/index.ts delete mode 100644 src/routes/profile/ProfileStackNavigator.tsx delete mode 100644 src/routes/profile/ProfileStackScreen.tsx delete mode 100644 src/routes/profile/index.ts (limited to 'src/routes') diff --git a/src/routes/index.ts b/src/routes/index.ts index 3b74e130..ed61d92f 100644 --- a/src/routes/index.ts +++ b/src/routes/index.ts @@ -1,3 +1,3 @@ export * from './onboarding'; -export * from './profile'; +export * from './main'; export {default} from './Routes'; 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'; diff --git a/src/routes/profile/ProfileStackNavigator.tsx b/src/routes/profile/ProfileStackNavigator.tsx deleted file mode 100644 index bc0a9560..00000000 --- a/src/routes/profile/ProfileStackNavigator.tsx +++ /dev/null @@ -1,50 +0,0 @@ -/** - * 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 ProfileStackParams = { - 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; - }; -}; - -export const ProfileStack = createStackNavigator(); diff --git a/src/routes/profile/ProfileStackScreen.tsx b/src/routes/profile/ProfileStackScreen.tsx deleted file mode 100644 index 4fc9f0c7..00000000 --- a/src/routes/profile/ProfileStackScreen.tsx +++ /dev/null @@ -1,166 +0,0 @@ -import React from 'react'; -import { - IndividualMoment, - CaptionScreen, - SocialMediaTaggs, - SearchScreen, - ProfileScreen, - MomentCommentsScreen, - FollowersListScreen, - EditProfile, - CategorySelection, -} from '../../screens'; -import {ProfileStack, ProfileStackParams} from './ProfileStackNavigator'; -import {RouteProp} from '@react-navigation/native'; -import {ScreenType} from '../../types'; -import {AvatarHeaderHeight} from '../../utils'; -import {StackNavigationOptions} from '@react-navigation/stack'; - -/** - * 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 ProfileStackRouteProps = RouteProp; - -interface ProfileStackProps { - route: ProfileStackRouteProps; -} - -const ProfileStackScreen: React.FC = ({route}) => { - const {screenType} = route.params; - - const isProfileStack = screenType === ScreenType.Profile; - - 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 ( - - - {!isProfileStack ? ( - - ) : ( - - )} - - - {isProfileStack ? ( - - ) : ( - - )} - - - - - - ); -}; - -export default ProfileStackScreen; diff --git a/src/routes/profile/index.ts b/src/routes/profile/index.ts deleted file mode 100644 index 05a6b24a..00000000 --- a/src/routes/profile/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './ProfileStackNavigator'; -export * from './ProfileStackScreen'; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index f3043696..9d7d4b12 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -2,7 +2,7 @@ import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import React, {Fragment} from 'react'; import {NavigationIcon} from '../../components'; import {ScreenType} from '../../types'; -import Profile from '../profile/ProfileStackScreen'; +import MainStackScreen from '../main/MainStackScreen'; const Tabs = createBottomTabNavigator(); @@ -39,18 +39,19 @@ const NavigationBar: React.FC = () => { bottom: '1%', }, }}> - {/* Removed for Alpha for now */} - {/* - - */} + -- cgit v1.2.3-70-g09d2