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') 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