From 59e26e30a18bca1d40400c3a98f133fcfbd13a28 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 6 Jul 2021 18:47:27 -0400 Subject: Add initial styling for caption screen --- src/routes/main/MainStackNavigator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/routes') diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index bc023da8..d21a1fe4 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -36,7 +36,7 @@ export type MainStackParams = { screenType: ScreenType; }; CaptionScreen: { - title?: string; + title?: string; // TODO: remove this? media?: {uri: string; isVideo: boolean}; screenType: ScreenType; selectedTags?: MomentTagType[]; -- cgit v1.2.3-70-g09d2 From 2697a10f65f84eb44757bc3b37c09bdc1989de5d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 14:38:10 -0400 Subject: Remove title, Cleanup caption screen route props, Add new screen --- src/components/comments/ZoomInCropper.tsx | 4 +- src/components/moments/Moment.tsx | 1 - src/routes/main/MainStackNavigator.tsx | 21 ++++---- src/routes/main/MainStackScreen.tsx | 8 ++++ src/screens/moments/CameraScreen.tsx | 4 +- src/screens/profile/CaptionScreen.tsx | 39 +++++++-------- src/screens/profile/ChoosingCategoryScreen.tsx | 66 ++++++++++++++++++++++++++ src/screens/profile/index.ts | 1 + 8 files changed, 107 insertions(+), 37 deletions(-) create mode 100644 src/screens/profile/ChoosingCategoryScreen.tsx (limited to 'src/routes') diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index 7fa88f6e..4de82418 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -25,7 +25,7 @@ export const ZoomInCropper: React.FC = ({ route, navigation, }) => { - const {screenType, title, media} = route.params; + const {screenType, media} = route.params; const [aspectRatio, setAspectRatio] = useState(1); // Stores the coordinates of the cropped image @@ -77,7 +77,6 @@ export const ZoomInCropper: React.FC = ({ .then((croppedURL) => { navigation.navigate('CaptionScreen', { screenType, - title: title, media: { uri: croppedURL, isVideo: false, @@ -93,7 +92,6 @@ export const ZoomInCropper: React.FC = ({ ) { navigation.navigate('CaptionScreen', { screenType, - title: title, media, }); } diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index 73503c5e..87bfad77 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -43,7 +43,6 @@ const Moment: React.FC = ({ const navigateToCameraScreen = () => { navigation.navigate('CameraScreen', { - title, screenType, }); }; diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index d21a1fe4..e840eb38 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -35,13 +35,21 @@ export type MainStackParams = { userXId: string | undefined; screenType: ScreenType; }; + CameraScreen: { + screenType: ScreenType; + }; + ZoomInCropper: { + media: {uri: string; isVideo: boolean}; + screenType: ScreenType; + }; CaptionScreen: { - title?: string; // TODO: remove this? - media?: {uri: string; isVideo: boolean}; screenType: ScreenType; + media?: {uri: string; isVideo: boolean}; + selectedCategory?: string; selectedTags?: MomentTagType[]; moment?: MomentType; }; + ChoosingCategoryScreen: {}; TagFriendsScreen: { media: { uri: string; @@ -109,15 +117,6 @@ export type MainStackParams = { ChatList: undefined; Chat: undefined; NewChatModal: undefined; - ZoomInCropper: { - media: {uri: string; isVideo: boolean}; - screenType: ScreenType; - title: string; - }; - CameraScreen: { - title: string; - screenType: ScreenType; - }; }; export const MainStack = createStackNavigator(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 948f37b8..15300c0d 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -40,6 +40,7 @@ import {ScreenType} from '../../types'; import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils'; import {MainStack, MainStackParams} from './MainStackNavigator'; import {ZoomInCropper} from '../../components/comments/ZoomInCropper'; +import ChoosingCategoryScreen from '../../screens/profile/ChoosingCategoryScreen'; /** * 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. @@ -180,6 +181,13 @@ const MainStackScreen: React.FC = ({route}) => { gestureEnabled: false, }} /> + = ({route, navigation}) => { - const {title, screenType} = route.params; + const {screenType} = route.params; const cameraRef = createRef(); const tabBarHeight = useBottomTabBarHeight(); const [cameraType, setCameraType] = useState('front'); @@ -72,7 +72,6 @@ const CameraScreen: React.FC = ({route, navigation}) => { const navigateToCropper = (uri: string) => { navigation.navigate('ZoomInCropper', { screenType, - title, media: { uri, isVideo: false, @@ -83,7 +82,6 @@ const CameraScreen: React.FC = ({route, navigation}) => { const navigateToCaptionScreen = (isVideo: boolean, uri: string) => { navigation.navigate('CaptionScreen', { screenType, - title, media: { uri, isVideo, diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 67d1fd04..025d81a7 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -14,7 +14,6 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {openContactForm} from 'react-native-contacts'; import {Button} from 'react-native-elements'; import Video from 'react-native-video'; import {useDispatch, useSelector} from 'react-redux'; @@ -48,27 +47,28 @@ import {mentionPartTypes} from '../../utils/comments'; * Upload Screen to allow users to upload posts to Tagg */ type CaptionScreenRouteProp = RouteProp; + type CaptionScreenNavigationProp = StackNavigationProp< MainStackParams, 'CaptionScreen' >; + interface CaptionScreenProps { route: CaptionScreenRouteProp; navigation: CaptionScreenNavigationProp; } const CaptionScreen: React.FC = ({route, navigation}) => { - const {title, screenType, selectedTags, moment} = route.params; + const {screenType, moment} = route.params; const { user: {userId}, } = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); const [caption, setCaption] = useState(moment ? moment.caption : ''); const [loading, setLoading] = useState(false); - const [tags, setTags] = useState( - selectedTags ? selectedTags : [], - ); + const [tags, setTags] = useState([]); const [taggedUsersText, setTaggedUsersText] = useState(''); + const [momentCategory, setMomentCategory] = useState(); const mediaUri = moment ? moment.moment_url : route.params.media!.uri; // TODO: change this once moment refactor is done const isMediaAVideo = moment @@ -81,8 +81,12 @@ const CaptionScreen: React.FC = ({route, navigation}) => { : route.params.media?.isVideo ?? false; useEffect(() => { - setTags(selectedTags ? selectedTags : []); - }, [selectedTags]); + setTags(route.params.selectedTags ?? []); + }, [route.params.selectedTags]); + + useEffect(() => { + setMomentCategory(route.params.selectedCategory); + }, [route.params.selectedCategory]); useEffect(() => { let listString = ''; @@ -145,7 +149,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const handleShare = async () => { setLoading(true); - if (moment || !title) { + if (moment || !momentCategory) { handleFailed(); return; } @@ -153,7 +157,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { let momentId; // separate upload logic for image/video if (isMediaAVideo) { - const presignedURLResponse = await handlePresignedURL(title); + const presignedURLResponse = await handlePresignedURL(momentCategory); if (!presignedURLResponse) { handleFailed(); return; @@ -166,7 +170,12 @@ const CaptionScreen: React.FC = ({route, navigation}) => { handleFailed(); } } else { - const momentResponse = await postMoment(mediaUri, caption, title, userId); + const momentResponse = await postMoment( + mediaUri, + caption, + momentCategory, + userId, + ); if (!momentResponse) { handleFailed(); return; @@ -276,15 +285,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { - navigation.navigate('TagFriendsScreen', { - media: { - uri: mediaUri, - isVideo: isMediaAVideo, - }, - selectedTags: tags, - }) - } + onPress={() => navigation.navigate('ChoosingCategoryScreen', {})} /> ; + +interface ChoosingCategoryScreenProps { + route: ChoosingCategoryScreenRouteProps; +} + +const ChoosingCategoryScreen: React.FC = ({ + route, +}) => { + const navigation = useNavigation(); + const tabBarHeight = useBottomTabBarHeight(); + const insetTop = useSafeAreaInsets().top; + const MomentItem: FC<{ + title: string; + }> = ({title}) => ( + { + await AsyncStorage.setItem('selectedMomentCategory', title); + navigation.goBack(); + }}> + foo + + ); + return ( + + {/* */} + {/* */} + + + {[0, 0, 0, 0].map((item) => ( + + ))} + + + {/* */} + + ); +}; + +const styles = StyleSheet.create({ + container: { + marginTop: StatusBarHeight, + }, + scrollContainer: {}, +}); + +export default ChoosingCategoryScreen; diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts index ea0505a2..101101b8 100644 --- a/src/screens/profile/index.ts +++ b/src/screens/profile/index.ts @@ -13,3 +13,4 @@ export {default as AccountType} from './AccountType'; export {default as CategorySelection} from './CategorySelection'; export {default as CreateCustomCategory} from './CreateCustomCategory'; export {default as CommentReactionScreen} from './CommentReactionScreen'; +export {default as ChoosingCategoryScreen} from './ChoosingCategoryScreen'; -- cgit v1.2.3-70-g09d2 From f39a320fd9e07750c8fcf7cc1882f21324a0ce58 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Wed, 7 Jul 2021 15:07:18 -0400 Subject: Fix navigation error handling --- src/constants/strings.ts | 1 + src/routes/tabs/NavigationBar.tsx | 4 ++-- src/screens/profile/CaptionScreen.tsx | 34 ++++++++++++++++++---------------- 3 files changed, 21 insertions(+), 18 deletions(-) (limited to 'src/routes') diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 112bc546..071b3835 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -45,6 +45,7 @@ export const ERROR_SELECT_GENDER = 'Please select your gender'; export const ERROR_SELECT_UNIVERSITY = 'Please select your University'; export const ERROR_SERVER_DOWN = 'mhm, looks like our servers are down, please refresh and try again in a few mins'; export const ERROR_SOMETHING_WENT_WRONG = 'Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app'; +export const ERROR_NO_MOMENT_CATEGORY = 'Please select a category!'; export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again"; export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again"; export const ERROR_T_AND_C_NOT_ACCEPTED = 'You must first agree to the terms and conditions.'; diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx index 12f6ab58..c3f0b9f8 100644 --- a/src/routes/tabs/NavigationBar.tsx +++ b/src/routes/tabs/NavigationBar.tsx @@ -66,7 +66,7 @@ const NavigationBar: React.FC = () => { disabled={!focused} /> ); - case 'Profile': + case 'ProfileTab': return ; case 'SuggestedPeople': return ( @@ -118,7 +118,7 @@ const NavigationBar: React.FC = () => { }} /> diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 025d81a7..ad301ded 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -23,9 +23,11 @@ import {CaptionScreenHeader} from '../../components/'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; import { + ERROR_NO_MOMENT_CATEGORY, ERROR_SOMETHING_WENT_WRONG_REFRESH, ERROR_UPLOAD, } from '../../constants/strings'; +import * as RootNavigation from '../../RootNavigation'; import {MainStackParams} from '../../routes'; import { handlePresignedURL, @@ -69,6 +71,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const [tags, setTags] = useState([]); const [taggedUsersText, setTaggedUsersText] = useState(''); const [momentCategory, setMomentCategory] = useState(); + // const [momentCategory, setMomentCategory] = useState(); const mediaUri = moment ? moment.moment_url : route.params.media!.uri; // TODO: change this once moment refactor is done const isMediaAVideo = moment @@ -105,27 +108,23 @@ const CaptionScreen: React.FC = ({route, navigation}) => { setTaggedUsersText(listString); }, [tags]); - const navigateToProfile = () => { - //Since the logged In User is navigating to own profile, useXId is not required - navigation.navigate('Profile', { - screenType, - userXId: undefined, - }); - }; - - const handleFailed = () => { + const handleFailed = (noCategory = false) => { setLoading(false); setTimeout(() => { - Alert.alert(moment ? ERROR_SOMETHING_WENT_WRONG_REFRESH : ERROR_UPLOAD); + if (noCategory) { + Alert.alert(ERROR_NO_MOMENT_CATEGORY); + } else { + Alert.alert(moment ? ERROR_SOMETHING_WENT_WRONG_REFRESH : ERROR_UPLOAD); + } }, 500); }; const handleSuccess = () => { setLoading(false); - if (moment) { - setLoading(false); - navigation.goBack(); - } else { - navigateToProfile(); + if (!moment) { + // if posting, pop all screens until at camera screen (default upload screen) + // then switch to the profile tab + navigation.popToTop(); + RootNavigation.navigate('ProfileTab'); setTimeout(() => { if (isMediaAVideo) { Alert.alert( @@ -135,6 +134,9 @@ const CaptionScreen: React.FC = ({route, navigation}) => { Alert.alert(''); } }, 500); + } else { + // if editing, simply go back to (most likely) indiv moment + navigation.goBack(); } }; @@ -150,7 +152,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const handleShare = async () => { setLoading(true); if (moment || !momentCategory) { - handleFailed(); + handleFailed(true); return; } let profileCompletionStage; -- cgit v1.2.3-70-g09d2 From 8b3bb9164453498b78e497e4e8f3a5252b4159ea Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Jul 2021 17:42:17 -0400 Subject: Hook up navigation to custom category creation --- src/components/moments/Moment.tsx | 2 -- src/routes/main/MainStackNavigator.tsx | 5 ++++- src/screens/profile/CategorySelection.tsx | 1 + src/screens/profile/ChoosingCategoryScreen.tsx | 4 ++-- src/screens/profile/CreateCustomCategory.tsx | 4 ++-- 5 files changed, 9 insertions(+), 7 deletions(-) (limited to 'src/routes') diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index a1621f2e..ca736b92 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -39,8 +39,6 @@ const Moment: React.FC = ({ move, externalStyles, }) => { - const navigation = useNavigation(); - return ( diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index e840eb38..05f5138f 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -49,7 +49,9 @@ export type MainStackParams = { selectedTags?: MomentTagType[]; moment?: MomentType; }; - ChoosingCategoryScreen: {}; + ChoosingCategoryScreen: { + newCustomCategory: string; + }; TagFriendsScreen: { media: { uri: string; @@ -88,6 +90,7 @@ export type MainStackParams = { }; CreateCustomCategory: { existingCategories: string[]; + fromScreen: 'ChoosingCategoryScreen' | 'CategorySelection'; }; Notifications: { screenType: ScreenType; diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx index ea443fce..9b8672ea 100644 --- a/src/screens/profile/CategorySelection.tsx +++ b/src/screens/profile/CategorySelection.tsx @@ -170,6 +170,7 @@ const CategorySelection: React.FC = ({ onPress={() => { navigation.push('CreateCustomCategory', { existingCategories: momentCategories.concat(selectedCategories), + fromScreen: 'CategorySelection', }); }}> diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx index daf7642d..24db015e 100644 --- a/src/screens/profile/ChoosingCategoryScreen.tsx +++ b/src/screens/profile/ChoosingCategoryScreen.tsx @@ -43,7 +43,7 @@ const ChoosingCategoryScreen: React.FC = ({ const tabBarHeight = useBottomTabBarHeight(); const insetTop = useSafeAreaInsets().top; - const MomentItem: FC<{ + const ListItem: FC<{ title: string; onPress: () => void; }> = ({title, onPress}) => { @@ -80,7 +80,7 @@ const ChoosingCategoryScreen: React.FC = ({ style={{height: SCREEN_HEIGHT * 0.9}} contentContainerStyle={{paddingBottom: tabBarHeight}}> {momentCategories.map((title) => ( - diff --git a/src/screens/profile/CreateCustomCategory.tsx b/src/screens/profile/CreateCustomCategory.tsx index c4b17b1e..91083c7c 100644 --- a/src/screens/profile/CreateCustomCategory.tsx +++ b/src/screens/profile/CreateCustomCategory.tsx @@ -37,14 +37,14 @@ const CreateCustomCategory: React.FC = ({ /** * Same component to be used for category selection while onboarding and while on profile */ - const {existingCategories} = route.params; + const {existingCategories, fromScreen} = route.params; const [newCategory, setNewCategory] = useState(''); const handleButtonPress = () => { if (existingCategories.includes(newCategory)) { Alert.alert('Looks like you already have that one created!'); } else { - navigation.navigate('CategorySelection', { + navigation.navigate(fromScreen, { newCustomCategory: newCategory, }); } -- cgit v1.2.3-70-g09d2 From f78bb9fea2128825d9c9cf4a64a7b78a288250b1 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 8 Jul 2021 17:42:47 -0400 Subject: Add logic to create custom category action --- src/components/common/TaggSquareButton.tsx | 9 ++++- src/components/moments/Moment.tsx | 1 - src/routes/main/MainStackNavigator.tsx | 2 +- src/screens/profile/CaptionScreen.tsx | 1 - src/screens/profile/CategorySelection.tsx | 2 +- src/screens/profile/ChoosingCategoryScreen.tsx | 56 ++++++++++++++++++++++++-- 6 files changed, 63 insertions(+), 8 deletions(-) (limited to 'src/routes') diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 2447276d..b1e65ba6 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {FC} from 'react'; import { GestureResponderEvent, StyleProp, @@ -25,6 +25,7 @@ interface TaggSquareButtonProps extends TouchableOpacityProps { labelColor: 'white' | 'blue'; style?: StyleProp; labelStyle?: StyleProp; + icon?: Element; } const TaggSquareButton: React.FC = (props) => { @@ -55,6 +56,7 @@ const TaggSquareButton: React.FC = (props) => { {...props} onPress={props.onPress} style={[styles.largeButton, buttonColor, props.style]}> + {props.icon} {props.title} @@ -71,6 +73,7 @@ const TaggSquareButton: React.FC = (props) => { colors={BACKGROUND_GRADIENT_MAP[0]} useAngle angle={90}> + {props.icon} {props.title} @@ -84,6 +87,7 @@ const TaggSquareButton: React.FC = (props) => { {...props} onPress={props.onPress} style={[styles.normalButton, buttonColor, props.style]}> + {props.icon} {props.title} @@ -94,6 +98,7 @@ const TaggSquareButton: React.FC = (props) => { const styles = StyleSheet.create({ largeButton: { + flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: '70%', @@ -106,6 +111,7 @@ const styles = StyleSheet.create({ color: '#eee', }, normalButton: { + flexDirection: 'row', justifyContent: 'center', alignItems: 'center', width: SCREEN_WIDTH * 0.45, @@ -118,6 +124,7 @@ const styles = StyleSheet.create({ fontWeight: '500', }, gradientButton: { + flexDirection: 'row', marginTop: '8%', borderRadius: 5, paddingVertical: '5%', diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index ca736b92..12c1fda4 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -1,4 +1,3 @@ -import {useNavigation} from '@react-navigation/native'; import React from 'react'; import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'; import {Text} from 'react-native-animatable'; diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 05f5138f..2dac1777 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -50,7 +50,7 @@ export type MainStackParams = { moment?: MomentType; }; ChoosingCategoryScreen: { - newCustomCategory: string; + newCustomCategory?: string; }; TagFriendsScreen: { media: { diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 86e30bdc..15566555 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -431,7 +431,6 @@ const styles = StyleSheet.create({ postButton: { width: SCREEN_WIDTH * 0.8, height: normalize(37), - backgroundColor: TAGG_LIGHT_BLUE, justifyContent: 'center', alignItems: 'center', borderRadius: 6, diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx index 9b8672ea..2f364e59 100644 --- a/src/screens/profile/CategorySelection.tsx +++ b/src/screens/profile/CategorySelection.tsx @@ -170,7 +170,7 @@ const CategorySelection: React.FC = ({ onPress={() => { navigation.push('CreateCustomCategory', { existingCategories: momentCategories.concat(selectedCategories), - fromScreen: 'CategorySelection', + fromScreen: route.name, }); }}> diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx index 24db015e..cdc941db 100644 --- a/src/screens/profile/ChoosingCategoryScreen.tsx +++ b/src/screens/profile/ChoosingCategoryScreen.tsx @@ -1,6 +1,6 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs'; import {RouteProp, useNavigation} from '@react-navigation/native'; -import React, {FC} from 'react'; +import React, {FC, useEffect} from 'react'; import { Image, ScrollView, @@ -11,16 +11,19 @@ import { } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; -import {useSelector} from 'react-redux'; +import {useDispatch, useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; -import {SearchBackground} from '../../components'; +import PlusIcon from '../../assets/icons/plus-icon.svg'; +import {SearchBackground, TaggSquareButton} from '../../components'; import {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants'; import {MainStackParams} from '../../routes'; +import {updateMomentCategories} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import { getMomentCategoryIconInfo, normalize, SCREEN_HEIGHT, + SCREEN_WIDTH, StatusBarHeight, } from '../../utils'; @@ -39,10 +42,22 @@ const ChoosingCategoryScreen: React.FC = ({ const {momentCategories} = useSelector( (state: RootState) => state.momentCategories, ); + const dispatch = useDispatch(); const navigation = useNavigation(); const tabBarHeight = useBottomTabBarHeight(); const insetTop = useSafeAreaInsets().top; + useEffect(() => { + if (route.params.newCustomCategory) { + dispatch( + updateMomentCategories( + momentCategories.concat([route.params.newCustomCategory]), + false, + ), + ); + } + }, [route.params.newCustomCategory]); + const ListItem: FC<{ title: string; onPress: () => void; @@ -90,6 +105,21 @@ const ChoosingCategoryScreen: React.FC = ({ } /> ))} + + navigation.navigate('CreateCustomCategory', { + existingCategories: momentCategories, + fromScreen: route.name, + }) + } + title={'Create a new category'} + buttonStyle={'large'} + buttonColor={'blue'} + labelColor={'white'} + style={styles.button} + labelStyle={styles.buttonText} + icon={} + /> @@ -138,6 +168,26 @@ const styles = StyleSheet.create({ row: { flexDirection: 'row', }, + button: { + width: SCREEN_WIDTH * 0.9, + height: normalize(67), + justifyContent: 'center', + alignItems: 'center', + borderRadius: 8, + alignSelf: 'center', + marginTop: 40, + }, + buttonText: { + color: 'white', + fontSize: normalize(15), + lineHeight: 18, + }, + plusIcon: { + color: 'white', + marginRight: normalize(25), + width: 30, + height: 30, + }, }); export default ChoosingCategoryScreen; -- cgit v1.2.3-70-g09d2 From dff83dc855e9500bc228a1491601e660527afa10 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 9 Jul 2021 18:40:30 -0400 Subject: Allow preselect category from profile screen --- src/components/comments/ZoomInCropper.tsx | 4 +++- src/components/moments/Moment.tsx | 11 +++++++++-- src/routes/main/MainStackNavigator.tsx | 2 ++ src/screens/moments/CameraScreen.tsx | 6 +++++- src/screens/profile/CaptionScreen.tsx | 6 ++++++ 5 files changed, 25 insertions(+), 4 deletions(-) (limited to 'src/routes') diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx index 8b87d137..e624c81c 100644 --- a/src/components/comments/ZoomInCropper.tsx +++ b/src/components/comments/ZoomInCropper.tsx @@ -24,7 +24,7 @@ export const ZoomInCropper: React.FC = ({ route, navigation, }) => { - const {screenType, media} = route.params; + const {screenType, media, selectedCategory} = route.params; const [aspectRatio, setAspectRatio] = useState(1); // Stores the coordinates of the cropped image @@ -67,6 +67,7 @@ export const ZoomInCropper: React.FC = ({ uri: croppedURL, isVideo: false, }, + selectedCategory, }); }) .catch((err) => console.log('err: ', err)); @@ -79,6 +80,7 @@ export const ZoomInCropper: React.FC = ({ navigation.navigate('CaptionScreen', { screenType, media, + selectedCategory, }); } }; diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx index 12c1fda4..087b343f 100644 --- a/src/components/moments/Moment.tsx +++ b/src/components/moments/Moment.tsx @@ -1,3 +1,4 @@ +import {useNavigation} from '@react-navigation/native'; import React from 'react'; import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'; import {Text} from 'react-native-animatable'; @@ -8,7 +9,6 @@ import DownIcon from '../../assets/icons/down_icon.svg'; import BigPlusIcon from '../../assets/icons/plus-icon-white.svg'; import UpIcon from '../../assets/icons/up_icon.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; -import * as RootNavigation from '../../RootNavigation'; import {MomentType, ScreenType} from '../../types'; import {normalize, SCREEN_WIDTH} from '../../utils'; import MomentTile from './MomentTile'; @@ -38,6 +38,7 @@ const Moment: React.FC = ({ move, externalStyles, }) => { + const navigation = useNavigation(); return ( @@ -97,7 +98,13 @@ const Moment: React.FC = ({ /> ))} {(images === undefined || images.length === 0) && !userXId && ( - RootNavigation.navigate('Upload')}> + + navigation.navigate('CameraScreen', { + screenType: ScreenType.Profile, + selectedCategory: title, + }) + }> diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 2dac1777..c569d2d6 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -37,10 +37,12 @@ export type MainStackParams = { }; CameraScreen: { screenType: ScreenType; + selectedCategory?: string; }; ZoomInCropper: { media: {uri: string; isVideo: boolean}; screenType: ScreenType; + selectedCategory?: string; }; CaptionScreen: { screenType: ScreenType; diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx index 07c9b059..5f9412fb 100644 --- a/src/screens/moments/CameraScreen.tsx +++ b/src/screens/moments/CameraScreen.tsx @@ -30,7 +30,7 @@ interface CameraScreenProps { navigation: CameraScreenNavigationProps; } const CameraScreen: React.FC = ({route, navigation}) => { - const {screenType} = route.params; + const {screenType, selectedCategory} = route.params; const cameraRef = createRef(); const tabBarHeight = useBottomTabBarHeight(); const [cameraType, setCameraType] = useState('front'); @@ -71,6 +71,7 @@ const CameraScreen: React.FC = ({route, navigation}) => { uri, isVideo: false, }, + selectedCategory, }); }; @@ -94,6 +95,9 @@ const CameraScreen: React.FC = ({route, navigation}) => { setShowSaveButton(false); setMediaFromGallery(''); } else { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: true, + }); navigation.goBack(); } }; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 484070d2..1232eb66 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -115,6 +115,9 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const handleFailed = (noCategory = false) => { setLoading(false); + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: true, + }); setTimeout(() => { if (noCategory) { Alert.alert(ERROR_NO_MOMENT_CATEGORY); @@ -125,6 +128,9 @@ const CaptionScreen: React.FC = ({route, navigation}) => { }; const handleSuccess = () => { setLoading(false); + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: true, + }); if (!moment) { // if posting, pop all screens until at camera screen (default upload screen) // then switch to the profile tab -- cgit v1.2.3-70-g09d2