Remove title, Cleanup caption screen route props, Add new screen

8 files changed, 107 insertions, 37 deletions

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<ZoomInCropperProps> = ({
   route,
   navigation,
 }) => {
-  const {screenType, title, media} = route.params;
+  const {screenType, media} = route.params;
   const [aspectRatio, setAspectRatio] = useState<number>(1);
 
   // Stores the coordinates of the cropped image
@@ -77,7 +77,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         .then((croppedURL) => {
           navigation.navigate('CaptionScreen', {
             screenType,
-            title: title,
             media: {
               uri: croppedURL,
               isVideo: false,
@@ -93,7 +92,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
     ) {
       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<MomentProps> = ({
 
   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<MainStackParams>();
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.
@@ -181,6 +182,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           }}
         />
         <MainStack.Screen
+          name="ChoosingCategoryScreen"
+          component={ChoosingCategoryScreen}
+          options={{
+            ...headerBarOptions('white', 'Categories'),
+          }}
+        />
+        <MainStack.Screen
           name="SocialMediaTaggs"
           component={SocialMediaTaggs}
           initialParams={{screenType}}
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 75638c40..be153d0c 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<CameraScreenProps> = ({route, navigation}) => {
-  const {title, screenType} = route.params;
+  const {screenType} = route.params;
   const cameraRef = createRef<RNCamera>();
   const tabBarHeight = useBottomTabBarHeight();
   const [cameraType, setCameraType] = useState<keyof CameraType>('front');
@@ -72,7 +72,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
   const navigateToCropper = (uri: string) => {
     navigation.navigate('ZoomInCropper', {
       screenType,
-      title,
       media: {
         uri,
         isVideo: false,
@@ -83,7 +82,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({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<MainStackParams, 'CaptionScreen'>;
+
 type CaptionScreenNavigationProp = StackNavigationProp<
   MainStackParams,
   'CaptionScreen'
 >;
+
 interface CaptionScreenProps {
   route: CaptionScreenRouteProp;
   navigation: CaptionScreenNavigationProp;
 }
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({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<MomentTagType[]>(
-    selectedTags ? selectedTags : [],
-  );
+  const [tags, setTags] = useState<MomentTagType[]>([]);
   const [taggedUsersText, setTaggedUsersText] = useState('');
+  const [momentCategory, setMomentCategory] = useState<string | undefined>();
   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<CaptionScreenProps> = ({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<CaptionScreenProps> = ({route, navigation}) => {
 
   const handleShare = async () => {
     setLoading(true);
-    if (moment || !title) {
+    if (moment || !momentCategory) {
       handleFailed();
       return;
     }
@@ -153,7 +157,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({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<CaptionScreenProps> = ({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<CaptionScreenProps> = ({route, navigation}) => {
             <SelectableItem
               text={'Category'}
               imageUri={require('../../assets/images/images.png')}
-              onPress={() =>
-                navigation.navigate('TagFriendsScreen', {
-                  media: {
-                    uri: mediaUri,
-                    isVideo: isMediaAVideo,
-                  },
-                  selectedTags: tags,
-                })
-              }
+              onPress={() => navigation.navigate('ChoosingCategoryScreen', {})}
             />
             <SelectableItem
               text={'Tag Friends'}
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
new file mode 100644
index 00000000..285732e7
--- /dev/null
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -0,0 +1,66 @@
+import AsyncStorage from '@react-native-community/async-storage';
+import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
+import {RouteProp, useNavigation} from '@react-navigation/native';
+import React, {FC} from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {CaptionScreenHeader, SearchBackground} from '../../components';
+import {MainStackParams} from '../../routes';
+import {StatusBarHeight} from '../../utils';
+
+type ChoosingCategoryScreenRouteProps = RouteProp<
+  MainStackParams,
+  'ChoosingCategoryScreen'
+>;
+
+interface ChoosingCategoryScreenProps {
+  route: ChoosingCategoryScreenRouteProps;
+}
+
+const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
+  route,
+}) => {
+  const navigation = useNavigation();
+  const tabBarHeight = useBottomTabBarHeight();
+  const insetTop = useSafeAreaInsets().top;
+  const MomentItem: FC<{
+    title: string;
+  }> = ({title}) => (
+    <TouchableOpacity
+      onPress={async () => {
+        await AsyncStorage.setItem('selectedMomentCategory', title);
+        navigation.goBack();
+      }}>
+      <Text style={{height: 100, backgroundColor: 'green'}}>foo</Text>
+    </TouchableOpacity>
+  );
+  return (
+    <SearchBackground>
+      {/* <SafeAreaView style={styles.container}> */}
+      {/* <CaptionScreenHeader style={styles.header} title={'Moments'} /> */}
+      <View style={{marginTop: StatusBarHeight + insetTop}}>
+        <ScrollView contentContainerStyle={{paddingBottom: tabBarHeight}}>
+          {[0, 0, 0, 0].map((item) => (
+            <MomentItem />
+          ))}
+        </ScrollView>
+      </View>
+      {/* </SafeAreaView> */}
+    </SearchBackground>
+  );
+};
+
+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';