From 8811dbc4cbcc338169e1fa9a9181b7026d7cdfbc Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 6 Jul 2021 19:29:59 -0400
Subject: Adjust most styling for caption screen

---
 src/components/moments/CaptionScreenHeader.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/moments/CaptionScreenHeader.tsx b/src/components/moments/CaptionScreenHeader.tsx
index 0638c128..cda85e57 100644
--- a/src/components/moments/CaptionScreenHeader.tsx
+++ b/src/components/moments/CaptionScreenHeader.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {Text, View, StyleSheet, ViewProps} from 'react-native';
+import {normalize} from '../../utils';
 interface CaptionScreenHeaderProps extends ViewProps {
   title: string;
 }
@@ -26,8 +27,8 @@ const styles = StyleSheet.create({
     width: '90%',
   },
   header: {
-    fontSize: 20,
-    fontWeight: 'bold',
+    fontSize: normalize(18),
+    fontWeight: '700',
     color: 'white',
     textAlign: 'center',
   },
-- 
cgit v1.2.3-70-g09d2


From 2697a10f65f84eb44757bc3b37c09bdc1989de5d Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
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/components')

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.
@@ -180,6 +181,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
             gestureEnabled: false,
           }}
         />
+        <MainStack.Screen
+          name="ChoosingCategoryScreen"
+          component={ChoosingCategoryScreen}
+          options={{
+            ...headerBarOptions('white', 'Categories'),
+          }}
+        />
         <MainStack.Screen
           name="SocialMediaTaggs"
           component={SocialMediaTaggs}
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';
-- 
cgit v1.2.3-70-g09d2


From a33896aab969ee0c6678ab562ff2aeef25657c7c Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 7 Jul 2021 14:46:38 -0400
Subject: Remove old plus, Fix wrong upload click bug

---
 src/components/common/NavigationIcon.tsx | 2 +-
 src/components/moments/Moment.tsx        | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index debb36b3..a5f42992 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -37,7 +37,7 @@ const NavigationIcon = (props: NavigationIconProps) => {
     case 'Upload':
       imgSrc = props.disabled
         ? require('../../assets/navigationIcons/new-upload.png')
-        : require('../../assets/navigationIcons/upload-clicked.png');
+        : require('../../assets/navigationIcons/new-upload.png');
       break;
     case 'Notifications':
       imgSrc = props.disabled
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 87bfad77..b4703e70 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -80,13 +80,6 @@ const Moment: React.FC<MomentProps> = ({
           )}
           {!userXId && (
             <View style={styles.row}>
-              <PlusIcon
-                width={23}
-                height={23}
-                onPress={navigateToCameraScreen}
-                color={TAGG_LIGHT_BLUE}
-                style={styles.horizontalMargin}
-              />
               {shouldAllowDeletion && (
                 <DeleteIcon
                   onPress={() => handleMomentCategoryDelete(title)}
-- 
cgit v1.2.3-70-g09d2


From 2fa0b4fb6da8cf5dd4b87174f438e90a08dffe84 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 7 Jul 2021 16:40:34 -0400
Subject: Refactor moment category icon logic

---
 src/components/onboarding/MomentCategory.tsx | 89 ++--------------------------
 src/utils/moments.ts                         | 84 ++++++++++++++++++++++++++
 2 files changed, 90 insertions(+), 83 deletions(-)

(limited to 'src/components')

diff --git a/src/components/onboarding/MomentCategory.tsx b/src/components/onboarding/MomentCategory.tsx
index 97099b9e..eb9d5bcc 100644
--- a/src/components/onboarding/MomentCategory.tsx
+++ b/src/components/onboarding/MomentCategory.tsx
@@ -3,11 +3,12 @@ import {StyleSheet} from 'react-native';
 import {Image, Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
 import {
-  BACKGROUND_GRADIENT_MAP,
-  MOMENT_CATEGORY_BG_COLORS,
-} from '../../constants';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+  getMomentCategoryIconInfo,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 
 type MomentCategoryProps = {
   categoryType: string;
@@ -22,85 +23,7 @@ const MomentCategory: React.FC<MomentCategoryProps> = ({
   isAdded,
   onSelect,
 }) => {
-  var icon, bgColor;
-
-  /**
-   * Choose icon and color based on category type
-   */
-  switch (categoryType) {
-    case 'Friends':
-      icon = require('../../assets/moment-categories/friends-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[0];
-      break;
-    case 'Adventure':
-      icon = require('../../assets/moment-categories/adventure-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[1];
-      break;
-    case 'Photo Dump':
-      icon = require('../../assets/moment-categories/photo-dump-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[2];
-      break;
-    case 'Food':
-      icon = require('../../assets/moment-categories/food-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[3];
-      break;
-    case 'Music':
-      icon = require('../../assets/moment-categories/music-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[4];
-      break;
-    case 'Art':
-      icon = require('../../assets/moment-categories/art-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[5];
-      break;
-    case 'Sports':
-      icon = require('../../assets/moment-categories/sports-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[6];
-      break;
-    case 'Fashion':
-      icon = require('../../assets/moment-categories/fashion-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[7];
-      break;
-    case 'Travel':
-      icon = require('../../assets/moment-categories/travel-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[8];
-      break;
-    case 'Pets':
-      icon = require('../../assets/moment-categories/pets-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[9];
-      break;
-    case 'Fitness':
-      icon = require('../../assets/moment-categories/fitness-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[10];
-      break;
-    case 'DIY':
-      icon = require('../../assets/moment-categories/diy-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[11];
-      break;
-    case 'Nature':
-      icon = require('../../assets/moment-categories/nature-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[12];
-      break;
-    case 'Early Life':
-      icon = require('../../assets/moment-categories/early-life-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[13];
-      break;
-    case 'Beauty':
-      icon = require('../../assets/moment-categories/beauty-icon.png');
-      bgColor = MOMENT_CATEGORY_BG_COLORS[14];
-      break;
-    default:
-      // All custom categories
-      icon = require('../../assets/moment-categories/custom-icon.png');
-      // A quick deterministic "random" color picker by summing up ascii char codees
-      const charCodeSum = categoryType
-        .split('')
-        .reduce((acc: number, x: string) => acc + x.charCodeAt(0), 0);
-      bgColor =
-        MOMENT_CATEGORY_BG_COLORS[
-          charCodeSum % MOMENT_CATEGORY_BG_COLORS.length
-        ];
-      break;
-  }
+  const {icon, bgColor} = getMomentCategoryIconInfo(categoryType);
 
   /**
    * The Linear Gradient helps us add a gradient border when the category is already added /selected by user
diff --git a/src/utils/moments.ts b/src/utils/moments.ts
index 9e8cc332..2b924b1b 100644
--- a/src/utils/moments.ts
+++ b/src/utils/moments.ts
@@ -1,4 +1,6 @@
 import moment from 'moment';
+import {ImageSourcePropType} from 'react-native';
+import {MOMENT_CATEGORY_BG_COLORS} from '../constants';
 
 /**
  * Formats elapsed time from a given time.
@@ -71,3 +73,85 @@ export const getTimeInShorthand = (date_time: string) => {
   }
   return time;
 };
+
+export const getMomentCategoryIconInfo = (category: string) => {
+  let icon: ImageSourcePropType, bgColor: string;
+  switch (category) {
+    case 'Friends':
+      icon = require('../../assets/moment-categories/friends-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[0];
+      break;
+    case 'Adventure':
+      icon = require('../../assets/moment-categories/adventure-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[1];
+      break;
+    case 'Photo Dump':
+      icon = require('../../assets/moment-categories/photo-dump-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[2];
+      break;
+    case 'Food':
+      icon = require('../../assets/moment-categories/food-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[3];
+      break;
+    case 'Music':
+      icon = require('../../assets/moment-categories/music-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[4];
+      break;
+    case 'Art':
+      icon = require('../../assets/moment-categories/art-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[5];
+      break;
+    case 'Sports':
+      icon = require('../../assets/moment-categories/sports-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[6];
+      break;
+    case 'Fashion':
+      icon = require('../../assets/moment-categories/fashion-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[7];
+      break;
+    case 'Travel':
+      icon = require('../../assets/moment-categories/travel-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[8];
+      break;
+    case 'Pets':
+      icon = require('../../assets/moment-categories/pets-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[9];
+      break;
+    case 'Fitness':
+      icon = require('../../assets/moment-categories/fitness-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[10];
+      break;
+    case 'DIY':
+      icon = require('../../assets/moment-categories/diy-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[11];
+      break;
+    case 'Nature':
+      icon = require('../../assets/moment-categories/nature-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[12];
+      break;
+    case 'Early Life':
+      icon = require('../../assets/moment-categories/early-life-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[13];
+      break;
+    case 'Beauty':
+      icon = require('../../assets/moment-categories/beauty-icon.png');
+      bgColor = MOMENT_CATEGORY_BG_COLORS[14];
+      break;
+    default:
+      // All custom categories
+      icon = require('../../assets/moment-categories/custom-icon.png');
+      // A quick deterministic "random" color picker by summing up ascii char codees
+      const charCodeSum = category
+        .split('')
+        .reduce((acc: number, x: string) => acc + x.charCodeAt(0), 0);
+      bgColor =
+        MOMENT_CATEGORY_BG_COLORS[
+          charCodeSum % MOMENT_CATEGORY_BG_COLORS.length
+        ];
+      break;
+  }
+  return {
+    icon,
+    bgColor,
+  };
+};
-- 
cgit v1.2.3-70-g09d2


From 12d92de8b9c93a4615952134ca4973049e45952f Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 8 Jul 2021 15:42:50 -0400
Subject: Cleanup tabbar visibility status

---
 src/components/comments/ZoomInCropper.tsx | 13 -------------
 src/screens/moments/CameraScreen.tsx      |  5 -----
 2 files changed, 18 deletions(-)

(limited to 'src/components')

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 4de82418..6f2d7c21 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -34,19 +34,6 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   const [y0, setY0] = useState<number>();
   const [y1, setY1] = useState<number>();
 
-  useFocusEffect(
-    useCallback(() => {
-      navigation.dangerouslyGetParent()?.setOptions({
-        tabBarVisible: false,
-      });
-      return () => {
-        navigation.dangerouslyGetParent()?.setOptions({
-          tabBarVisible: true,
-        });
-      };
-    }, [navigation]),
-  );
-
   // Setting original aspect ratio of image
   useEffect(() => {
     if (media.uri) {
diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index be153d0c..07c9b059 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -45,11 +45,6 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
       navigation.dangerouslyGetParent()?.setOptions({
         tabBarVisible: false,
       });
-      return () => {
-        navigation.dangerouslyGetParent()?.setOptions({
-          tabBarVisible: true,
-        });
-      };
     }, [navigation]),
   );
 
-- 
cgit v1.2.3-70-g09d2


From f9b9a3297dd8d935d0ed5f176451075e192aee49 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 8 Jul 2021 15:45:38 -0400
Subject: Add navigation to camera tab with big blue plus

---
 src/components/moments/Moment.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index b4703e70..a1621f2e 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -7,9 +7,9 @@ import LinearGradient from 'react-native-linear-gradient';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
 import DownIcon from '../../assets/icons/down_icon.svg';
 import BigPlusIcon from '../../assets/icons/plus-icon-white.svg';
-import PlusIcon from '../../assets/icons/plus-icon.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';
@@ -41,12 +41,6 @@ const Moment: React.FC<MomentProps> = ({
 }) => {
   const navigation = useNavigation();
 
-  const navigateToCameraScreen = () => {
-    navigation.navigate('CameraScreen', {
-      screenType,
-    });
-  };
-
   return (
     <View style={[styles.container, externalStyles?.container]}>
       <View style={[styles.header, externalStyles?.header]}>
@@ -106,7 +100,7 @@ const Moment: React.FC<MomentProps> = ({
             />
           ))}
         {(images === undefined || images.length === 0) && !userXId && (
-          <TouchableOpacity onPress={navigateToCameraScreen}>
+          <TouchableOpacity onPress={() => RootNavigation.navigate('Upload')}>
             <LinearGradient
               colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
               <View style={styles.defaultImage}>
-- 
cgit v1.2.3-70-g09d2


From ff783d8aebc90802079f843b27f2719173bd6b70 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 8 Jul 2021 16:01:56 -0400
Subject: Add post button

---
 src/components/moments/MomentPostButton.tsx | 49 +++++++++++++++++++++++++++++
 src/components/moments/index.ts             |  1 +
 src/screens/profile/CaptionScreen.tsx       |  7 ++++-
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/components/moments/MomentPostButton.tsx

(limited to 'src/components')

diff --git a/src/components/moments/MomentPostButton.tsx b/src/components/moments/MomentPostButton.tsx
new file mode 100644
index 00000000..78fe209b
--- /dev/null
+++ b/src/components/moments/MomentPostButton.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {normalize, SCREEN_WIDTH} from '../../utils';
+
+interface MomentPostButtonProps {
+  enabled: boolean;
+  onPress: () => void;
+}
+
+const MomentPostButton: React.FC<MomentPostButtonProps> = ({
+  enabled,
+  onPress,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[styles.button, enabled ? {} : styles.grey]}
+      onPress={onPress}
+      disabled={!enabled}>
+      <Text style={styles.text}>Post</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: SCREEN_WIDTH * 0.8,
+    height: normalize(37),
+    backgroundColor: TAGG_LIGHT_BLUE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 6,
+    alignSelf: 'center',
+  },
+  grey: {
+    backgroundColor: '#C4C4C4',
+  },
+  text: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: normalize(15),
+    lineHeight: 18,
+    letterSpacing: 2,
+  },
+});
+
+export default MomentPostButton;
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index cac2da2e..d2f5d150 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -3,3 +3,4 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader';
 export {default as Moment} from './Moment';
 export {default as TagFriendsFooter} from './TagFriendsFoooter';
 export {default as MomentPost} from './MomentPost';
+export {default as MomentPostButton} from './MomentPostButton';
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index aa866f56..86628d16 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -18,7 +18,11 @@ import {Button} from 'react-native-elements';
 import Video from 'react-native-video';
 import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
-import {MentionInputControlled, SearchBackground} from '../../components';
+import {
+  MentionInputControlled,
+  MomentPostButton,
+  SearchBackground,
+} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
@@ -314,6 +318,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 })
               }
             />
+            <MomentPostButton enabled={true} onPress={() => null} />
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
-- 
cgit v1.2.3-70-g09d2


From 2c2921af0fc075482aa1a7d2064d24c4999497ca Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 8 Jul 2021 16:23:49 -0400
Subject: Remove moment post button, Update to use square button

---
 src/components/common/TaggSquareButton.tsx  | 17 +++++---
 src/components/moments/MomentPostButton.tsx | 49 -----------------------
 src/components/moments/index.ts             |  1 -
 src/screens/profile/CaptionScreen.tsx       | 61 ++++++++++++++++++++++-------
 4 files changed, 58 insertions(+), 70 deletions(-)
 delete mode 100644 src/components/moments/MomentPostButton.tsx

(limited to 'src/components')

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 1a1c33b3..2447276d 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import {
   GestureResponderEvent,
+  StyleProp,
   StyleSheet,
   Text,
   TextStyle,
   TouchableOpacity,
-  ViewProps,
+  TouchableOpacityProps,
   ViewStyle,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
@@ -15,14 +16,15 @@ import {
   TAGG_PURPLE,
 } from '../../constants';
 import {normalize, SCREEN_WIDTH} from '../../utils';
-interface TaggSquareButtonProps extends ViewProps {
+
+interface TaggSquareButtonProps extends TouchableOpacityProps {
   onPress: (event: GestureResponderEvent) => void;
   title: string;
   buttonStyle: 'normal' | 'large' | 'gradient';
   buttonColor: 'purple' | 'white' | 'blue';
   labelColor: 'white' | 'blue';
-  style?: ViewStyle;
-  labelStyle?: TextStyle;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
@@ -50,6 +52,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
     case 'large':
       return (
         <TouchableOpacity
+          {...props}
           onPress={props.onPress}
           style={[styles.largeButton, buttonColor, props.style]}>
           <Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
@@ -59,7 +62,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       );
     case 'gradient':
       return (
-        <TouchableOpacity onPress={props.onPress} style={props.style}>
+        <TouchableOpacity
+          {...props}
+          onPress={props.onPress}
+          style={props.style}>
           <LinearGradient
             style={styles.gradientButton}
             colors={BACKGROUND_GRADIENT_MAP[0]}
@@ -75,6 +81,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
     default:
       return (
         <TouchableOpacity
+          {...props}
           onPress={props.onPress}
           style={[styles.normalButton, buttonColor, props.style]}>
           <Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
diff --git a/src/components/moments/MomentPostButton.tsx b/src/components/moments/MomentPostButton.tsx
deleted file mode 100644
index 78fe209b..00000000
--- a/src/components/moments/MomentPostButton.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {Text} from 'react-native-animatable';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import {TAGG_LIGHT_BLUE} from '../../constants';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-
-interface MomentPostButtonProps {
-  enabled: boolean;
-  onPress: () => void;
-}
-
-const MomentPostButton: React.FC<MomentPostButtonProps> = ({
-  enabled,
-  onPress,
-}) => {
-  return (
-    <TouchableOpacity
-      style={[styles.button, enabled ? {} : styles.grey]}
-      onPress={onPress}
-      disabled={!enabled}>
-      <Text style={styles.text}>Post</Text>
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    width: SCREEN_WIDTH * 0.8,
-    height: normalize(37),
-    backgroundColor: TAGG_LIGHT_BLUE,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 6,
-    alignSelf: 'center',
-  },
-  grey: {
-    backgroundColor: '#C4C4C4',
-  },
-  text: {
-    color: 'white',
-    fontWeight: 'bold',
-    fontSize: normalize(15),
-    lineHeight: 18,
-    letterSpacing: 2,
-  },
-});
-
-export default MomentPostButton;
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index d2f5d150..cac2da2e 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -3,4 +3,3 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader';
 export {default as Moment} from './Moment';
 export {default as TagFriendsFooter} from './TagFriendsFoooter';
 export {default as MomentPost} from './MomentPost';
-export {default as MomentPostButton} from './MomentPostButton';
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 86628d16..86e30bdc 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -22,10 +22,11 @@ import {
   MentionInputControlled,
   MomentPostButton,
   SearchBackground,
+  TaggSquareButton,
 } from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
-import {TAGG_LIGHT_BLUE_2} from '../../constants';
+import {TAGG_LIGHT_BLUE, TAGG_LIGHT_BLUE_2} from '../../constants';
 import {
   ERROR_NO_MOMENT_CATEGORY,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
@@ -46,7 +47,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
-import {normalize, StatusBarHeight} from '../../utils';
+import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 /**
@@ -268,12 +269,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 buttonStyle={styles.button}
                 onPress={() => navigation.goBack()}
               />
-              <Button
-                title={moment ? 'Done' : 'Share'}
-                titleStyle={styles.shareButtonTitle}
-                buttonStyle={styles.button}
-                onPress={moment ? handleDoneEditing : handleShare}
-              />
             </View>
             <CaptionScreenHeader style={styles.header} title={'Moments'} />
             <View style={styles.captionContainer}>
@@ -292,7 +287,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               )}
               <MentionInputControlled
                 style={styles.text}
-                containerStyle={styles.textContainer}
+                containerStyle={styles.flex}
                 placeholder="Write something....."
                 placeholderTextColor="white"
                 value={caption}
@@ -318,7 +313,28 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 })
               }
             />
-            <MomentPostButton enabled={true} onPress={() => null} />
+            {momentCategory ? (
+              <TaggSquareButton
+                onPress={moment ? handleDoneEditing : handleShare}
+                title={'Post'}
+                buttonStyle={'large'}
+                buttonColor={'blue'}
+                labelColor={'white'}
+                style={styles.postButton}
+                labelStyle={styles.postText}
+              />
+            ) : (
+              <TaggSquareButton
+                disabled={true}
+                onPress={moment ? handleDoneEditing : handleShare}
+                title={'Post'}
+                buttonStyle={'large'}
+                buttonColor={'blue'}
+                labelColor={'white'}
+                style={[styles.postButton, styles.greyBackground]}
+                labelStyle={styles.postText}
+              />
+            )}
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -364,12 +380,8 @@ const styles = StyleSheet.create({
     fontSize: normalize(12),
     lineHeight: 14,
     fontWeight: '500',
-  },
-  textContainer: {
-    flex: 1,
     height: normalize(150),
     marginLeft: normalize(15),
-    color: 'white',
   },
   flex: {
     flex: 1,
@@ -386,7 +398,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: normalize(20),
+    marginBottom: normalize(42),
   },
   asteriskText: {
     color: TAGG_LIGHT_BLUE_2,
@@ -413,6 +425,25 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  greyBackground: {
+    backgroundColor: '#C4C4C4',
+  },
+  postButton: {
+    width: SCREEN_WIDTH * 0.8,
+    height: normalize(37),
+    backgroundColor: TAGG_LIGHT_BLUE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 6,
+    alignSelf: 'center',
+  },
+  postText: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: normalize(15),
+    lineHeight: 18,
+    letterSpacing: 2,
+  },
 });
 
 export default CaptionScreen;
-- 
cgit v1.2.3-70-g09d2


From 8b3bb9164453498b78e497e4e8f3a5252b4159ea Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
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/components')

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<MomentProps> = ({
   move,
   externalStyles,
 }) => {
-  const navigation = useNavigation();
-
   return (
     <View style={[styles.container, externalStyles?.container]}>
       <View style={[styles.header, externalStyles?.header]}>
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<CategorySelectionProps> = ({
             onPress={() => {
               navigation.push('CreateCustomCategory', {
                 existingCategories: momentCategories.concat(selectedCategories),
+                fromScreen: 'CategorySelection',
               });
             }}>
             <PlusIcon width={30} height={30} color="white" />
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<ChoosingCategoryScreenProps> = ({
   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<ChoosingCategoryScreenProps> = ({
           style={{height: SCREEN_HEIGHT * 0.9}}
           contentContainerStyle={{paddingBottom: tabBarHeight}}>
           {momentCategories.map((title) => (
-            <MomentItem
+            <ListItem
               key={title}
               title={title}
               onPress={() =>
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<CreateCustomCategoryProps> = ({
   /**
    * 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 <ivan@tagg.id>
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/components')

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<ViewStyle>;
   labelStyle?: StyleProp<TextStyle>;
+  icon?: Element;
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
@@ -55,6 +56,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
           {...props}
           onPress={props.onPress}
           style={[styles.largeButton, buttonColor, props.style]}>
+          {props.icon}
           <Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
             {props.title}
           </Text>
@@ -71,6 +73,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
             colors={BACKGROUND_GRADIENT_MAP[0]}
             useAngle
             angle={90}>
+            {props.icon}
             <Text style={[styles.gradientLabel, props.labelStyle]}>
               {props.title}
             </Text>
@@ -84,6 +87,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
           {...props}
           onPress={props.onPress}
           style={[styles.normalButton, buttonColor, props.style]}>
+          {props.icon}
           <Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
             {props.title}
           </Text>
@@ -94,6 +98,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (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<CategorySelectionProps> = ({
             onPress={() => {
               navigation.push('CreateCustomCategory', {
                 existingCategories: momentCategories.concat(selectedCategories),
-                fromScreen: 'CategorySelection',
+                fromScreen: route.name,
               });
             }}>
             <PlusIcon width={30} height={30} color="white" />
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<ChoosingCategoryScreenProps> = ({
   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<ChoosingCategoryScreenProps> = ({
               }
             />
           ))}
+          <TaggSquareButton
+            onPress={() =>
+              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={<PlusIcon style={styles.plusIcon} />}
+          />
         </ScrollView>
       </View>
     </SearchBackground>
@@ -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 74d0ad5bab6f0d058fc03095fa0a313499162579 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 01:38:04 -0400
Subject: Lint, Update service code to allow category edition

---
 src/components/comments/ZoomInCropper.tsx       |  3 +--
 src/components/profile/MomentMoreInfoDrawer.tsx |  1 +
 src/screens/profile/CaptionScreen.tsx           | 19 ++++++++++---------
 src/services/MomentService.ts                   |  4 +++-
 4 files changed, 15 insertions(+), 12 deletions(-)

(limited to 'src/components')

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 6f2d7c21..8b87d137 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,7 +1,6 @@
 import {RouteProp} from '@react-navigation/core';
-import {useFocusEffect} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {normalize} from 'react-native-elements';
 import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index 910aa095..493f6238 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -129,6 +129,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
       screenType: screenType,
       selectedTags: tags,
       moment: moment,
+      selectedCategory: moment.moment_category,
     });
   };
 
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 15566555..9a1878aa 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -20,13 +20,12 @@ import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
 import {
   MentionInputControlled,
-  MomentPostButton,
   SearchBackground,
   TaggSquareButton,
 } from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
-import {TAGG_LIGHT_BLUE, TAGG_LIGHT_BLUE_2} from '../../constants';
+import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {
   ERROR_NO_MOMENT_CATEGORY,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
@@ -66,7 +65,8 @@ interface CaptionScreenProps {
 }
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
-  const {screenType, moment} = route.params;
+  // moment is only present when editing
+  const {moment} = route.params;
   const {
     user: {userId},
   } = useSelector((state: RootState) => state.user);
@@ -205,12 +205,13 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     handleSuccess();
   };
 
-  const handleDoneEditing = async () => {
+  const handleSubmitEditChanges = async () => {
     setLoading(true);
-    if (moment?.moment_id) {
+    if (moment?.moment_id && momentCategory) {
       const success = await patchMoment(
         moment.moment_id,
         caption,
+        momentCategory,
         formattedTags(),
       );
       if (success) {
@@ -315,8 +316,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             />
             {momentCategory ? (
               <TaggSquareButton
-                onPress={moment ? handleDoneEditing : handleShare}
-                title={'Post'}
+                onPress={moment ? handleSubmitEditChanges : handleShare}
+                title={moment ? 'Update' : 'Post'}
                 buttonStyle={'large'}
                 buttonColor={'blue'}
                 labelColor={'white'}
@@ -326,8 +327,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             ) : (
               <TaggSquareButton
                 disabled={true}
-                onPress={moment ? handleDoneEditing : handleShare}
-                title={'Post'}
+                onPress={moment ? handleSubmitEditChanges : handleShare}
+                title={moment ? 'Update' : 'Post'}
                 buttonStyle={'large'}
                 buttonColor={'blue'}
                 labelColor={'white'}
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index 0c93876a..50cedef9 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -59,6 +59,7 @@ export const postMoment = async (
 export const patchMoment = async (
   momentId: string,
   caption: string,
+  category: string,
   tags: {
     x: number;
     y: number;
@@ -69,7 +70,8 @@ export const patchMoment = async (
   try {
     const request = new FormData();
     request.append('moment_id', momentId);
-    request.append('captions', JSON.stringify({[momentId]: caption}));
+    request.append('caption', caption);
+    request.append('category', category);
     request.append('tags', JSON.stringify(tags));
     const token = await AsyncStorage.getItem('token');
     let response = await fetch(MOMENTS_ENDPOINT, {
-- 
cgit v1.2.3-70-g09d2


From aa25df7dbd192394f2d6d42ed07d1e1f43cc07f0 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 15:23:12 -0400
Subject: Fix mention box position, Fix image flickering

---
 src/components/common/TaggTypeahead.tsx | 44 +++++++++++++++++++++------
 src/screens/profile/CaptionScreen.tsx   | 53 ++++++++++++++++++++-------------
 src/utils/comments.tsx                  |  9 ++++--
 3 files changed, 75 insertions(+), 31 deletions(-)

(limited to 'src/components')

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 7967fdbc..7444e2d8 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,5 +1,5 @@
-import React, {Fragment, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet, View} from 'react-native';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
+import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native';
 import {Suggestion} from 'react-native-controlled-mentions';
 import {useSelector} from 'react-redux';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
@@ -13,15 +13,19 @@ type TaggTypeaheadProps = {
   keyword: string | undefined;
   component: string | undefined;
   onSuggestionPress: (suggestion: Suggestion) => void;
+  isShowBelowStyle?: boolean;
 };
 
 const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   keyword,
   component,
   onSuggestionPress,
+  isShowBelowStyle = false,
 }) => {
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
+  const [viewPx, setViewPx] = useState<number>(0);
+  const viewRef = useRef<View>(null);
   const [height, setHeight] = useState(0);
   const margin = component === 'comment' ? -10 : 0;
 
@@ -33,6 +37,22 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
     }
   }, [keyword]);
 
+  const onLayout = (e: LayoutChangeEvent) => {
+    setHeight(e.nativeEvent.layout.height);
+    viewRef.current?.measure(
+      (
+        _fx: number,
+        _fy: number,
+        _width: number,
+        _height: number,
+        px: number,
+        _py: number,
+      ) => {
+        setViewPx(px);
+      },
+    );
+  };
+
   const getQuerySuggested = async () => {
     if (keyword === undefined || keyword === '@') {
       return;
@@ -50,14 +70,17 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   }
 
   return (
-    <View>
-      <View style={styles.overlay} />
+    <View ref={viewRef}>
+      {!isShowBelowStyle && <View style={styles.overlay} />}
       <ScrollView
-        style={[styles.container, {top: -height, margin: margin}]}
+        style={[
+          styles.container,
+          isShowBelowStyle
+            ? [styles.topPadding, {left: -viewPx}]
+            : {top: -height, margin: margin},
+        ]}
         showsVerticalScrollIndicator={false}
-        onLayout={(event) => {
-          setHeight(event.nativeEvent.layout.height);
-        }}
+        onLayout={onLayout}
         keyboardShouldPersistTaps={'always'}>
         {results.map((user) => (
           <TaggUserRowCell
@@ -78,10 +101,10 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
 
 const styles = StyleSheet.create({
   container: {
+    position: 'absolute',
     width: SCREEN_WIDTH,
     maxHeight: 264,
     backgroundColor: 'white',
-    position: 'absolute',
     alignSelf: 'center',
     zIndex: 1,
   },
@@ -95,6 +118,9 @@ const styles = StyleSheet.create({
     bottom: 10,
     zIndex: -1,
   },
+  topPadding: {
+    top: 30,
+  },
 });
 
 export default TaggTypeahead;
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 9a1878aa..02b8caf2 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {FC, useEffect, useState} from 'react';
+import React, {FC, useEffect, useMemo, useState} from 'react';
 import {
   Alert,
   Image,
@@ -293,27 +293,39 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 placeholderTextColor="white"
                 value={caption}
                 onChange={setCaption}
-                partTypes={mentionPartTypes('white', 'caption')}
+                partTypes={mentionPartTypes('white', 'caption', true)}
               />
             </View>
-            <SelectableItem
-              text={'Category'}
-              imageUri={require('../../assets/images/images.png')}
-              onPress={() => navigation.navigate('ChoosingCategoryScreen', {})}
-            />
-            <SelectableItem
-              text={'Tag Friends'}
-              imageUri={require('../../assets/icons/tagging/tag-icon.png')}
-              onPress={() =>
-                navigation.navigate('TagFriendsScreen', {
-                  media: {
-                    uri: mediaUri,
-                    isVideo: isMediaAVideo,
-                  },
-                  selectedTags: tags,
-                })
-              }
-            />
+            {useMemo(
+              () => (
+                <SelectableItem
+                  text={'Category'}
+                  imageUri={require('../../assets/images/images.png')}
+                  onPress={() =>
+                    navigation.navigate('ChoosingCategoryScreen', {})
+                  }
+                />
+              ),
+              [momentCategory],
+            )}
+            {useMemo(
+              () => (
+                <SelectableItem
+                  text={'Tag Friends'}
+                  imageUri={require('../../assets/icons/tagging/tag-icon.png')}
+                  onPress={() =>
+                    navigation.navigate('TagFriendsScreen', {
+                      media: {
+                        uri: mediaUri,
+                        isVideo: isMediaAVideo,
+                      },
+                      selectedTags: tags,
+                    })
+                  }
+                />
+              ),
+              [taggedUsersText],
+            )}
             {momentCategory ? (
               <TaggSquareButton
                 onPress={moment ? handleSubmitEditChanges : handleShare}
@@ -371,6 +383,7 @@ const styles = StyleSheet.create({
     borderColor: 'white',
     borderTopWidth: 1,
     borderBottomWidth: 1,
+    zIndex: 1,
   },
   media: {
     height: normalize(150),
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index 28879622..504631f5 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -82,12 +82,17 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
 export const mentionPartTypes: (
   theme: 'blue' | 'white',
   component: 'caption' | 'comment',
-) => PartType[] = (theme, component) => {
+  isShowBelowStyle?: boolean,
+) => PartType[] = (theme, component, isShowBelowStyle = false) => {
   return [
     {
       trigger: '@',
       renderSuggestions: (props) => (
-        <TaggTypeahead component={component} {...props} />
+        <TaggTypeahead
+          component={component}
+          isShowBelowStyle={isShowBelowStyle}
+          {...props}
+        />
       ),
       allowedSpacesCount: 0,
       isInsertSpaceAfterMention: true,
-- 
cgit v1.2.3-70-g09d2


From 8272e2d75bd1bdc9b1d28960d2e896d20ae73a21 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 15:52:37 -0400
Subject: Fix mention box padding issue

---
 src/components/common/TaggTypeahead.tsx | 19 +++++++++++--------
 src/screens/profile/CaptionScreen.tsx   |  3 ++-
 2 files changed, 13 insertions(+), 9 deletions(-)

(limited to 'src/components')

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 7444e2d8..672cff69 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -6,7 +6,7 @@ import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
 import TaggUserRowCell from './TaggUserRowCell';
 
 type TaggTypeaheadProps = {
@@ -24,7 +24,10 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
 }) => {
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
-  const [viewPx, setViewPx] = useState<number>(0);
+  const [viewPxy, setViewPxy] = useState<{px: number; py: number}>({
+    px: 0,
+    py: 0,
+  });
   const viewRef = useRef<View>(null);
   const [height, setHeight] = useState(0);
   const margin = component === 'comment' ? -10 : 0;
@@ -46,9 +49,9 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
         _width: number,
         _height: number,
         px: number,
-        _py: number,
+        py: number,
       ) => {
-        setViewPx(px);
+        setViewPxy({px, py});
       },
     );
   };
@@ -70,17 +73,17 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   }
 
   return (
-    <View ref={viewRef}>
+    <View ref={viewRef} onLayout={onLayout}>
+      {/* <View ref={viewRef} onLayout={onLayout}> */}
       {!isShowBelowStyle && <View style={styles.overlay} />}
       <ScrollView
         style={[
           styles.container,
           isShowBelowStyle
-            ? [styles.topPadding, {left: -viewPx}]
+            ? [styles.topPadding, {left: -viewPxy.px}]
             : {top: -height, margin: margin},
         ]}
         showsVerticalScrollIndicator={false}
-        onLayout={onLayout}
         keyboardShouldPersistTaps={'always'}>
         {results.map((user) => (
           <TaggUserRowCell
@@ -119,7 +122,7 @@ const styles = StyleSheet.create({
     zIndex: -1,
   },
   topPadding: {
-    top: 30,
+    top: isIPhoneX() ? 180 : 150,
   },
 });
 
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 02b8caf2..acfe4900 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -46,7 +46,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
-import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {isIPhoneX, normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 /**
@@ -262,6 +262,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          keyboardVerticalOffset={isIPhoneX() ? 40 : 30}
           style={styles.flex}>
           <View style={styles.contentContainer}>
             <View style={styles.buttonsContainer}>
-- 
cgit v1.2.3-70-g09d2


From dff83dc855e9500bc228a1491601e660527afa10 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
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/components')

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<ZoomInCropperProps> = ({
   route,
   navigation,
 }) => {
-  const {screenType, media} = route.params;
+  const {screenType, media, selectedCategory} = route.params;
   const [aspectRatio, setAspectRatio] = useState<number>(1);
 
   // Stores the coordinates of the cropped image
@@ -67,6 +67,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
               uri: croppedURL,
               isVideo: false,
             },
+            selectedCategory,
           });
         })
         .catch((err) => console.log('err: ', err));
@@ -79,6 +80,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
       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<MomentProps> = ({
   move,
   externalStyles,
 }) => {
+  const navigation = useNavigation();
   return (
     <View style={[styles.container, externalStyles?.container]}>
       <View style={[styles.header, externalStyles?.header]}>
@@ -97,7 +98,13 @@ const Moment: React.FC<MomentProps> = ({
             />
           ))}
         {(images === undefined || images.length === 0) && !userXId && (
-          <TouchableOpacity onPress={() => RootNavigation.navigate('Upload')}>
+          <TouchableOpacity
+            onPress={() =>
+              navigation.navigate('CameraScreen', {
+                screenType: ScreenType.Profile,
+                selectedCategory: title,
+              })
+            }>
             <LinearGradient
               colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
               <View style={styles.defaultImage}>
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<CameraScreenProps> = ({route, navigation}) => {
-  const {screenType} = route.params;
+  const {screenType, selectedCategory} = route.params;
   const cameraRef = createRef<RNCamera>();
   const tabBarHeight = useBottomTabBarHeight();
   const [cameraType, setCameraType] = useState<keyof CameraType>('front');
@@ -71,6 +71,7 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
         uri,
         isVideo: false,
       },
+      selectedCategory,
     });
   };
 
@@ -94,6 +95,9 @@ const CameraScreen: React.FC<CameraScreenProps> = ({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<CaptionScreenProps> = ({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<CaptionScreenProps> = ({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