From 15225564bbf56599dd44eaea45998059e7c54b13 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 22 Dec 2020 11:56:52 -0500 Subject: [TMA-447] Natural Transitions (#145) * edit profile text now is back to black * changed default style to card and added custom modal transitions * resolved linter error --- src/components/common/GenericMoreInfoDrawer.tsx | 8 +- src/components/profile/MomentMoreInfoDrawer.tsx | 2 + src/components/profile/ProfileMoreInfoDrawer.tsx | 1 + src/routes/profile/Profile.tsx | 151 --------------------- src/routes/profile/ProfileStack.tsx | 50 ------- src/routes/profile/ProfileStackNavigator.tsx | 50 +++++++ src/routes/profile/ProfileStackScreen.tsx | 166 +++++++++++++++++++++++ src/routes/profile/index.ts | 4 +- src/routes/tabs/NavigationBar.tsx | 2 +- src/screens/profile/SocialMediaTaggs.tsx | 1 - 10 files changed, 227 insertions(+), 208 deletions(-) delete mode 100644 src/routes/profile/Profile.tsx delete mode 100644 src/routes/profile/ProfileStack.tsx create mode 100644 src/routes/profile/ProfileStackNavigator.tsx create mode 100644 src/routes/profile/ProfileStackScreen.tsx (limited to 'src') diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx index 3607ef8f..098482ae 100644 --- a/src/components/common/GenericMoreInfoDrawer.tsx +++ b/src/components/common/GenericMoreInfoDrawer.tsx @@ -20,12 +20,13 @@ interface GenericMoreInfoDrawerProps extends ViewProps { isOpen: boolean; setIsOpen: (visible: boolean) => void; showIcons: boolean; + textColor: string; // An array of title, onPressHandler, and icon component buttons: [string, OnPressHandler, JSX.Element?][]; } const GenericMoreInfoDrawer: React.FC = (props) => { - const {buttons, showIcons} = props; + const {buttons, showIcons, textColor} = props; // each button is 80px high, cancel button is always there const initialSnapPosition = (buttons.length + 1) * 80 + useSafeAreaInsets().bottom; @@ -47,7 +48,9 @@ const GenericMoreInfoDrawer: React.FC = (props) => { {showIcons && {icon}} - {title} + + {title} + @@ -74,7 +77,6 @@ const styles = StyleSheet.create({ panelButtonTitle: { fontSize: 18, fontWeight: 'bold', - color: 'red', }, icon: { height: 25, diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx index 91fb3d2b..e127e05c 100644 --- a/src/components/profile/MomentMoreInfoDrawer.tsx +++ b/src/components/profile/MomentMoreInfoDrawer.tsx @@ -77,12 +77,14 @@ const MomentMoreInfoDrawer: React.FC = (props) => { ) : ( )} diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx index 4fe24128..80ad9bba 100644 --- a/src/components/profile/ProfileMoreInfoDrawer.tsx +++ b/src/components/profile/ProfileMoreInfoDrawer.tsx @@ -41,6 +41,7 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { ], ]} diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx deleted file mode 100644 index 4c93b1ee..00000000 --- a/src/routes/profile/Profile.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import React from 'react'; -import { - IndividualMoment, - CaptionScreen, - SocialMediaTaggs, - SearchScreen, - ProfileScreen, - MomentCommentsScreen, - FollowersListScreen, - EditProfile, - CategorySelection, -} from '../../screens'; -import {ProfileStack, ProfileStackParams} from './ProfileStack'; -import {RouteProp} from '@react-navigation/native'; -import {ScreenType} from '../../types'; - -/** - * 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 Profile: React.FC = ({route}) => { - const {screenType} = route.params; - - /** - * This parameter isProfileStack acts as a switch between Search and Profile Stacks - */ - const isProfileStack = screenType === ScreenType.Profile; - return ( - ({ - 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', - }), - }, - }), - }} - mode="modal" - initialRouteName={isProfileStack ? 'Profile' : 'Search'}> - - {!isProfileStack ? ( - - ) : ( - - )} - - - {isProfileStack ? ( - - ) : ( - - )} - - - - - - ); -}; - -export default Profile; diff --git a/src/routes/profile/ProfileStack.tsx b/src/routes/profile/ProfileStack.tsx deleted file mode 100644 index bc0a9560..00000000 --- a/src/routes/profile/ProfileStack.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/ProfileStackNavigator.tsx b/src/routes/profile/ProfileStackNavigator.tsx new file mode 100644 index 00000000..bc0a9560 --- /dev/null +++ b/src/routes/profile/ProfileStackNavigator.tsx @@ -0,0 +1,50 @@ +/** + * 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 new file mode 100644 index 00000000..4fc9f0c7 --- /dev/null +++ b/src/routes/profile/ProfileStackScreen.tsx @@ -0,0 +1,166 @@ +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 index eed5c6b4..05a6b24a 100644 --- a/src/routes/profile/index.ts +++ b/src/routes/profile/index.ts @@ -1,2 +1,2 @@ -export * from './ProfileStack'; -export * from './Profile'; +export * from './ProfileStackNavigator'; +export * from './ProfileStackScreen'; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index e6c30134..f3043696 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/Profile'; +import Profile from '../profile/ProfileStackScreen'; const Tabs = createBottomTabNavigator(); diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx index b058e38d..81d271d1 100644 --- a/src/screens/profile/SocialMediaTaggs.tsx +++ b/src/screens/profile/SocialMediaTaggs.tsx @@ -70,7 +70,6 @@ const SocialMediaTaggs: React.FC = ({ headerTitle: () => { return ; }, - headerStyle: {height: AvatarHeaderHeight}, }); }, [avatar, navigation]); -- cgit v1.2.3-70-g09d2