From 73a77690fa1dd0737f0226e08b19001bc0d676a3 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 7 Jul 2021 17:39:19 -0400
Subject: Basic functionality

---
 src/screens/moments/TagFriendsScreen.tsx | 159 +++++++++++++++++++++----------
 1 file changed, 110 insertions(+), 49 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 201caf49..25105e6c 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -1,10 +1,12 @@
 import {RouteProp} from '@react-navigation/core';
 import {useNavigation} from '@react-navigation/native';
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, TouchableWithoutFeedback, View} from 'react-native';
+import {useFocusEffect} from '@react-navigation/native';
 import {Button} from 'react-native-elements';
 import Video from 'react-native-video';
 import {MainStackParams} from 'src/routes';
+import BackArrow from '../../assets/icons/back-arrow.svg';
 import {
   CaptionScreenHeader,
   MomentTags,
@@ -13,7 +15,14 @@ import {
 import {TagFriendsFooter} from '../../components/moments';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {MomentTagType} from '../../types';
-import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {
+  SCREEN_WIDTH,
+  StatusBarHeight,
+  SCREEN_HEIGHT,
+  HeaderHeight,
+  isIPhoneX,
+} from '../../utils';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 
 type TagFriendsScreenRouteProps = RouteProp<
   MainStackParams,
@@ -37,6 +46,22 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     setTags(selectedTags ? selectedTags : []);
   }, [selectedTags]);
 
+  /*
+   * Hide Tab Bar
+   */
+  useFocusEffect(
+    useCallback(() => {
+      navigation.dangerouslyGetParent()?.setOptions({
+        tabBarVisible: false,
+      });
+      return () => {
+        navigation.dangerouslyGetParent()?.setOptions({
+          tabBarVisible: true,
+        });
+      };
+    }, [navigation]),
+  );
+
   /*
    * Navigate back to Tag Users Screen, send selected users
    */
@@ -49,16 +74,17 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
 
   const setMediaDimensions = (width: number, height: number) => {
     const imageAspectRatio = width / height;
+    const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT;
 
     // aspectRatio: >= 1 [Landscape] [1:1]
-    if (imageAspectRatio >= 1) {
+    if (imageAspectRatio >= screenRatio) {
       setImageWidth(SCREEN_WIDTH);
       setImageHeight(SCREEN_WIDTH / imageAspectRatio);
     }
     // aspectRatio: < 1 [Portrait]
-    if (imageAspectRatio < 1) {
-      setImageHeight(SCREEN_WIDTH);
-      setImageWidth(SCREEN_WIDTH * imageAspectRatio);
+    if (imageAspectRatio < screenRatio) {
+      setImageHeight(SCREEN_HEIGHT);
+      setImageWidth(SCREEN_HEIGHT * imageAspectRatio);
     }
   };
 
@@ -78,25 +104,12 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   }, []);
 
   return (
-    <SearchBackground>
-      <View style={styles.contentContainer}>
-        <View style={styles.buttonsContainer}>
-          <Button
-            title="Cancel"
-            buttonStyle={styles.button}
-            onPress={() => navigation.goBack()}
-          />
-          <Button
-            title="Done"
-            titleStyle={styles.shareButtonTitle}
-            buttonStyle={styles.button}
-            onPress={handleDone}
-          />
-        </View>
-        <CaptionScreenHeader
-          style={styles.header}
-          title={'Tap on photo to tag friends!'}
-        />
+    <View style={styles.contentContainer}>
+      <View
+        style={{
+          position: 'absolute',
+          paddingTop: SCREEN_HEIGHT / 2 - imageHeight / 2,
+        }}>
         <TouchableWithoutFeedback
           onPress={() =>
             navigation.navigate('TagSelectionScreen', {
@@ -108,7 +121,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               style={{
                 width: imageWidth,
                 height: imageHeight,
-                marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
                 marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
               }}
               ref={imageRef}>
@@ -136,55 +148,104 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               style={{
                 width: imageWidth,
                 height: imageHeight,
-                marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
                 marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
               }}
               source={{uri: media.uri}}
             />
           )}
         </TouchableWithoutFeedback>
-        {tags.length !== 0 && (
-          <MomentTags
-            tags={tags}
-            setTags={setTags}
-            editing={true}
-            imageRef={imageRef}
-            deleteFromList={(user) =>
-              setTags(tags.filter((tag) => tag.user.id !== user.id))
-            }
+      </View>
+      <TouchableOpacity
+        onPress={() => navigation.goBack()}
+        style={styles.backArrow}>
+        <BackArrow width={20} height={20} color={'white'} />
+      </TouchableOpacity>
+      {tags.length !== 0 && (
+        <View style={styles.buttonContainer}>
+          <Button
+            title="Done"
+            titleStyle={styles.shareButtonTitle}
+            type="clear"
+            buttonStyle={styles.button}
+            // iconContainerStyle={styles.button}
+            onPress={handleDone}
           />
-        )}
+        </View>
+      )}
+      <View style={styles.captionContainer}>
+        <CaptionScreenHeader
+          style={styles.header}
+          title={
+            tags.length === 0
+              ? 'Tap on photo to tag friends!'
+              : 'Press and drag to move'
+          }
+        />
+      </View>
+      {tags.length !== 0 && (
+        <MomentTags
+          tags={tags}
+          setTags={setTags}
+          editing={true}
+          imageRef={imageRef}
+          deleteFromList={(user) =>
+            setTags(tags.filter((tag) => tag.user.id !== user.id))
+          }
+          boundaries={{bottom: SCREEN_HEIGHT * 0.15}}
+        />
+      )}
+      {tags.length !== 0 && (
         <View style={styles.footerContainer}>
           <TagFriendsFooter tags={tags} setTags={setTags} />
         </View>
-      </View>
-    </SearchBackground>
+      )}
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   contentContainer: {
-    paddingTop: StatusBarHeight,
+    backgroundColor: 'black',
+    height: SCREEN_HEIGHT,
   },
-  buttonsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+  backArrow: {
     marginLeft: '5%',
-    marginRight: '5%',
+    marginTop: isIPhoneX() ? HeaderHeight : '10%',
+    position: 'absolute',
   },
   button: {
-    backgroundColor: 'transparent',
+    zIndex: 9999,
+  },
+  buttonContainer: {
+    position: 'absolute',
+    marginTop: isIPhoneX() ? HeaderHeight : '10%',
+    right: 0,
+    marginRight: '5%',
+  },
+  captionContainer: {
+    marginVertical: 20,
+    position: 'absolute',
+    marginTop: SCREEN_HEIGHT * 0.2,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    width: SCREEN_WIDTH,
   },
   shareButtonTitle: {
     fontWeight: 'bold',
     color: TAGG_LIGHT_BLUE_2,
   },
-  header: {
-    marginVertical: 20,
-  },
+  header: {},
   footerContainer: {
-    marginHorizontal: '5%',
     marginTop: '3%',
+    backgroundColor: 'black',
+    padding: '5%',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: SCREEN_WIDTH,
+    position: 'absolute',
+    paddingBottom: 0,
+    bottom: 0,
+    height: SCREEN_HEIGHT * 0.15,
   },
 });
 
-- 
cgit v1.2.3-70-g09d2


From adecd4264cc95dee021390db35cb3c4a1a1144ee Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 7 Jul 2021 17:41:01 -0400
Subject: Merge with master and minor edits

---
 src/screens/moments/TagFriendsScreen.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 25105e6c..f505b64f 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -167,7 +167,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
             titleStyle={styles.shareButtonTitle}
             type="clear"
             buttonStyle={styles.button}
-            // iconContainerStyle={styles.button}
             onPress={handleDone}
           />
         </View>
-- 
cgit v1.2.3-70-g09d2


From 221c066e69744493892690f2a8d054ce9e24a84d Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 7 Jul 2021 18:21:46 -0400
Subject: Update boundary

---
 src/screens/moments/TagFriendsScreen.tsx | 56 ++++++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 13 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index f505b64f..d4a1733f 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -1,28 +1,29 @@
 import {RouteProp} from '@react-navigation/core';
 import {useNavigation} from '@react-navigation/native';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Image, StyleSheet, TouchableWithoutFeedback, View} from 'react-native';
+import {
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 import {useFocusEffect} from '@react-navigation/native';
 import {Button} from 'react-native-elements';
 import Video from 'react-native-video';
 import {MainStackParams} from 'src/routes';
 import BackArrow from '../../assets/icons/back-arrow.svg';
-import {
-  CaptionScreenHeader,
-  MomentTags,
-  SearchBackground,
-} from '../../components';
+import {CaptionScreenHeader, MomentTags} from '../../components';
 import {TagFriendsFooter} from '../../components/moments';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {MomentTagType} from '../../types';
 import {
   SCREEN_WIDTH,
-  StatusBarHeight,
   SCREEN_HEIGHT,
   HeaderHeight,
   isIPhoneX,
+  normalize,
 } from '../../utils';
-import {TouchableOpacity} from 'react-native-gesture-handler';
 
 type TagFriendsScreenRouteProps = RouteProp<
   MainStackParams,
@@ -39,6 +40,19 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const [imageWidth, setImageWidth] = useState<number>(0);
   const [imageHeight, setImageHeight] = useState<number>(0);
 
+  // Calculate boundary (if any) for drag from bottom
+  let bottomBound;
+  if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) {
+    if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
+      bottomBound = SCREEN_HEIGHT * 0.15;
+    } else {
+      bottomBound =
+        SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2);
+    }
+  } else {
+    bottomBound = 0;
+  }
+
   /*
    * Update list of tagged users from route params
    */
@@ -156,9 +170,17 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
         </TouchableWithoutFeedback>
       </View>
       <TouchableOpacity
-        onPress={() => navigation.goBack()}
+        onPress={() => {
+          navigation.goBack();
+        }}
         style={styles.backArrow}>
-        <BackArrow width={20} height={20} color={'white'} />
+        <View style={styles.backArrowContainer}>
+          <BackArrow
+            height={normalize(18)}
+            width={normalize(18)}
+            color={'white'}
+          />
+        </View>
       </TouchableOpacity>
       {tags.length !== 0 && (
         <View style={styles.buttonContainer}>
@@ -190,7 +212,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           deleteFromList={(user) =>
             setTags(tags.filter((tag) => tag.user.id !== user.id))
           }
-          boundaries={{bottom: SCREEN_HEIGHT * 0.15}}
+          boundaries={{bottom: bottomBound}}
         />
       )}
       {tags.length !== 0 && (
@@ -206,11 +228,17 @@ const styles = StyleSheet.create({
   contentContainer: {
     backgroundColor: 'black',
     height: SCREEN_HEIGHT,
+    // justifyContent: 'center',
+    alignContent: 'center',
   },
   backArrow: {
     marginLeft: '5%',
     marginTop: isIPhoneX() ? HeaderHeight : '10%',
     position: 'absolute',
+    zIndex: 9999,
+  },
+  backArrowContainer: {
+    flex: 1,
   },
   button: {
     zIndex: 9999,
@@ -223,11 +251,13 @@ const styles = StyleSheet.create({
   },
   captionContainer: {
     marginVertical: 20,
-    position: 'absolute',
+    // position: 'absolute',
     marginTop: SCREEN_HEIGHT * 0.2,
     flexDirection: 'row',
     justifyContent: 'center',
-    width: SCREEN_WIDTH,
+    // width: SCREEN_WIDTH,
+    borderWidth: 4,
+    borderColor: 'pink',
   },
   shareButtonTitle: {
     fontWeight: 'bold',
-- 
cgit v1.2.3-70-g09d2


From 282ba64214efdfb522dc9617ec897de950b6918c Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 7 Jul 2021 18:22:33 -0400
Subject: Remove comments

---
 src/screens/moments/TagFriendsScreen.tsx | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index d4a1733f..a0b782bf 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -228,7 +228,6 @@ const styles = StyleSheet.create({
   contentContainer: {
     backgroundColor: 'black',
     height: SCREEN_HEIGHT,
-    // justifyContent: 'center',
     alignContent: 'center',
   },
   backArrow: {
@@ -251,11 +250,9 @@ const styles = StyleSheet.create({
   },
   captionContainer: {
     marginVertical: 20,
-    // position: 'absolute',
     marginTop: SCREEN_HEIGHT * 0.2,
     flexDirection: 'row',
     justifyContent: 'center',
-    // width: SCREEN_WIDTH,
     borderWidth: 4,
     borderColor: 'pink',
   },
-- 
cgit v1.2.3-70-g09d2


From 9940cfdf9d55fc6bb505e68a315373babad46bae Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 09:25:34 -0400
Subject: Fixed title

---
 src/screens/moments/TagFriendsScreen.tsx | 121 ++++++++++++++++++-------------
 1 file changed, 71 insertions(+), 50 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index a0b782bf..6a96a094 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -4,6 +4,7 @@ import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {
   Image,
   StyleSheet,
+  Text,
   TouchableOpacity,
   TouchableWithoutFeedback,
   View,
@@ -13,7 +14,7 @@ import {Button} from 'react-native-elements';
 import Video from 'react-native-video';
 import {MainStackParams} from 'src/routes';
 import BackArrow from '../../assets/icons/back-arrow.svg';
-import {CaptionScreenHeader, MomentTags} from '../../components';
+import {MomentTags} from '../../components';
 import {TagFriendsFooter} from '../../components/moments';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {MomentTagType} from '../../types';
@@ -80,22 +81,25 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
    * Navigate back to Tag Users Screen, send selected users
    */
   const handleDone = () => {
-    navigation.navigate('CaptionScreen', {
-      ...route.params,
-      selectedTags: tags,
-    });
+    // Makes sure that this can only be pressed if there are tags
+    if (tags.length !== 0) {
+      navigation.navigate('CaptionScreen', {
+        ...route.params,
+        selectedTags: tags,
+      });
+    }
   };
 
   const setMediaDimensions = (width: number, height: number) => {
     const imageAspectRatio = width / height;
     const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT;
 
-    // aspectRatio: >= 1 [Landscape] [1:1]
+    // aspectRatio is wider than or equal to screen
     if (imageAspectRatio >= screenRatio) {
       setImageWidth(SCREEN_WIDTH);
       setImageHeight(SCREEN_WIDTH / imageAspectRatio);
     }
-    // aspectRatio: < 1 [Portrait]
+    // aspectRatio is taller than screen
     if (imageAspectRatio < screenRatio) {
       setImageHeight(SCREEN_HEIGHT);
       setImageWidth(SCREEN_HEIGHT * imageAspectRatio);
@@ -169,39 +173,43 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           )}
         </TouchableWithoutFeedback>
       </View>
-      <TouchableOpacity
-        onPress={() => {
-          navigation.goBack();
-        }}
-        style={styles.backArrow}>
-        <View style={styles.backArrowContainer}>
-          <BackArrow
-            height={normalize(18)}
-            width={normalize(18)}
-            color={'white'}
-          />
-        </View>
-      </TouchableOpacity>
-      {tags.length !== 0 && (
-        <View style={styles.buttonContainer}>
-          <Button
-            title="Done"
-            titleStyle={styles.shareButtonTitle}
-            type="clear"
-            buttonStyle={styles.button}
-            onPress={handleDone}
-          />
-        </View>
-      )}
-      <View style={styles.captionContainer}>
-        <CaptionScreenHeader
-          style={styles.header}
-          title={
-            tags.length === 0
-              ? 'Tap on photo to tag friends!'
-              : 'Press and drag to move'
-          }
-        />
+      <View style={styles.titleContainer}>
+        <TouchableOpacity
+          onPress={() => {
+            navigation.goBack();
+          }}
+          style={styles.backArrow}>
+          <View style={styles.backArrowContainer}>
+            <BackArrow
+              height={normalize(18)}
+              width={normalize(18)}
+              color={'white'}
+            />
+          </View>
+        </TouchableOpacity>
+        <TouchableWithoutFeedback style={styles.captionContainer}>
+          {tags.length === 0 ? (
+            <Text style={styles.header}>Tap on photo to tag friends!</Text>
+          ) : (
+            <Text style={styles.header}>Press and drag to move</Text>
+          )}
+        </TouchableWithoutFeedback>
+        <TouchableOpacity
+          style={styles.buttonContainer}
+          // Altering the opacity style of TouchableOpacity doesn't work,
+          // so the next two lines are needed
+          disabled={tags.length === 0}
+          activeOpacity={tags.length === 0 ? 0 : 1}
+          onPress={handleDone}>
+          <Text
+            style={[
+              styles.shareButtonTitle,
+              // makes the Done buttomn invisible if there are no tags
+              {opacity: tags.length !== 0 ? 1 : 0},
+            ]}>
+            Done
+          </Text>
+        </TouchableOpacity>
       </View>
       {tags.length !== 0 && (
         <MomentTags
@@ -231,36 +239,49 @@ const styles = StyleSheet.create({
     alignContent: 'center',
   },
   backArrow: {
-    marginLeft: '5%',
     marginTop: isIPhoneX() ? HeaderHeight : '10%',
-    position: 'absolute',
     zIndex: 9999,
   },
   backArrowContainer: {
     flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignContent: 'center',
   },
   button: {
     zIndex: 9999,
   },
   buttonContainer: {
-    position: 'absolute',
     marginTop: isIPhoneX() ? HeaderHeight : '10%',
     right: 0,
-    marginRight: '5%',
+    zIndex: 9999,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
   },
   captionContainer: {
-    marginVertical: 20,
-    marginTop: SCREEN_HEIGHT * 0.2,
+    width: SCREEN_WIDTH,
     flexDirection: 'row',
     justifyContent: 'center',
-    borderWidth: 4,
-    borderColor: 'pink',
+    zIndex: 9999,
   },
   shareButtonTitle: {
     fontWeight: 'bold',
-    color: TAGG_LIGHT_BLUE_2,
+    fontSize: 18,
+    color: 'white',
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignContent: 'center',
+    zIndex: 9999,
+  },
+  header: {
+    marginTop: isIPhoneX() ? HeaderHeight : '10%',
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: 'white',
+    textAlign: 'center',
   },
-  header: {},
   footerContainer: {
     marginTop: '3%',
     backgroundColor: 'black',
-- 
cgit v1.2.3-70-g09d2


From ac4318fa0e1556f60bf41b8afdbad69477c764a1 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 11:10:54 -0400
Subject: Fix linting

---
 src/screens/moments/TagFriendsScreen.tsx     | 2 --
 src/screens/profile/MomentCommentsScreen.tsx | 5 +++--
 2 files changed, 3 insertions(+), 4 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 6a96a094..1852e6a6 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -10,13 +10,11 @@ import {
   View,
 } from 'react-native';
 import {useFocusEffect} from '@react-navigation/native';
-import {Button} from 'react-native-elements';
 import Video from 'react-native-video';
 import {MainStackParams} from 'src/routes';
 import BackArrow from '../../assets/icons/back-arrow.svg';
 import {MomentTags} from '../../components';
 import {TagFriendsFooter} from '../../components/moments';
-import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {MomentTagType} from '../../types';
 import {
   SCREEN_WIDTH,
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 402e5f44..7dfe8ae9 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -48,8 +48,9 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
     React.useState(true);
 
   //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
-  const [commentTapped, setCommentTapped] =
-    useState<CommentType | CommentThreadType | undefined>();
+  const [commentTapped, setCommentTapped] = useState<
+    CommentType | CommentThreadType | undefined
+  >();
 
   useEffect(() => {
     navigation.setOptions({
-- 
cgit v1.2.3-70-g09d2


From ffa1a2eae42aab3ec7d6598868d9a4a989799d7a Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 8 Jul 2021 09:48:09 -0700
Subject: Enable/disable scoll depending on keyboard

---
 src/screens/profile/IndividualMoment.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/screens')

diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index 7d231312..c65d41e7 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -92,6 +92,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
             screenType={screenType}
           />
         )}
+        scrollEnabled={!keyboardVisible}
         keyExtractor={(item, _) => item.moment_id}
         showsVerticalScrollIndicator={false}
         initialScrollIndex={initialIndex}
-- 
cgit v1.2.3-70-g09d2


From dd6813e7b662a1c2d7beaba982f8081de0e74f0f Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 16:53:46 -0400
Subject: Respond to comments, simplify boundaries, place calculations within
 useEffect

---
 ios/Podfile.lock                         |  4 +--
 src/components/common/MomentTags.tsx     | 26 +++++++++--------
 src/screens/moments/TagFriendsScreen.tsx | 48 ++++++++++++++++++++++----------
 3 files changed, 49 insertions(+), 29 deletions(-)

(limited to 'src/screens')

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 19df8c81..82a5b8a8 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -455,7 +455,7 @@ PODS:
     - React-Core
     - React-RCTImage
     - TOCropViewController
-  - RNInAppBrowser (3.6.1):
+  - RNInAppBrowser (3.6.3):
     - React-Core
   - RNReactNativeHapticFeedback (1.11.0):
     - React-Core
@@ -801,7 +801,7 @@ SPEC CHECKSUMS:
   RNFS: 3ab21fa6c56d65566d1fb26c2228e2b6132e5e32
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNImageCropPicker: 35a3ceb837446fa11547704709bb22b5fac6d584
-  RNInAppBrowser: 0523b3c15501fb8b54b4f32905d2e71ca902d914
+  RNInAppBrowser: 3ff3a3b8f458aaf25aaee879d057352862edf357
   RNReactNativeHapticFeedback: 653a8c126a0f5e88ce15ffe280b3ff37e1fbb285
   RNReanimated: b9c929bfff7dedc9c89ab1875f1c6151023358d9
   RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 36c87558..62b551f0 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -31,10 +31,8 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
   const [maxZIndex, setMaxZIndex] = useState(1);
   const [draggableRefs, setDraggableRefs] = useState<RefObject<View>[]>([]);
-  const [minXBoundary, setMinXBoundary] = useState<number>(0);
-  const [maxXBoundary, setMaxXBoundary] = useState<number>(0);
-  const [minYBoundary, setMinYBoundary] = useState<number>(0);
-  const [maxYBoundary, setMaxYBoundary] = useState<number>(0);
+  // [minXBoundary, maxXBoundary, minYBoundary, maxYBoundary]
+  const [boundariesList, setBoundariesList] = useState<number[]>([0, 0, 0, 0]);
 
   const updateTagPosition = (ref: RefObject<Image>, userId: string) => {
     if (ref !== null && ref.current !== null) {
@@ -92,18 +90,22 @@ const MomentTags: React.FC<MomentTagsProps> = ({
 
         // Checks for and adds boundaries
         if (boundaries) {
+          console.log(boundaries);
+          const newBounds = [...boundariesList];
           if (boundaries.top) {
-            setMinYBoundary(boundaries.top);
+            newBounds[2] = boundaries.top;
           }
           if (boundaries.bottom) {
-            setMaxYBoundary(boundaries.bottom);
+            newBounds[3] = boundaries.bottom;
           }
           if (boundaries.left) {
-            setMinXBoundary(boundaries.left);
+            newBounds[0] = boundaries.left;
           }
           if (boundaries.right) {
-            setMaxXBoundary(boundaries.right);
+            newBounds[1] = boundaries.right;
           }
+          console.log(newBounds);
+          setBoundariesList(newBounds);
         }
       },
       editing ? 100 : 0,
@@ -122,10 +124,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
           y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
-          minX={offset[0] + minXBoundary}
-          minY={offset[1] + minYBoundary}
-          maxX={imageDimensions[0] + offset[0] - maxXBoundary}
-          maxY={imageDimensions[1] + offset[1] - maxYBoundary}
+          minX={offset[0] + boundariesList[0]}
+          minY={offset[1] + boundariesList[2]}
+          maxX={imageDimensions[0] + offset[0] - boundariesList[1]}
+          maxY={imageDimensions[1] + offset[1] - boundariesList[3]}
           onDragStart={() => {
             const currZIndex = maxZIndex;
             setMaxZIndex(currZIndex + 1);
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 1852e6a6..5c3501bb 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -38,19 +38,8 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const [tags, setTags] = useState<MomentTagType[]>([]);
   const [imageWidth, setImageWidth] = useState<number>(0);
   const [imageHeight, setImageHeight] = useState<number>(0);
-
-  // Calculate boundary (if any) for drag from bottom
-  let bottomBound;
-  if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) {
-    if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
-      bottomBound = SCREEN_HEIGHT * 0.15;
-    } else {
-      bottomBound =
-        SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2);
-    }
-  } else {
-    bottomBound = 0;
-  }
+  const [bottomBound, setBottomBound] = useState<number>(0);
+  const [topBound, setTopBound] = useState<number>(0);
 
   /*
    * Update list of tagged users from route params
@@ -104,6 +93,21 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     }
   };
 
+  /*
+   * Calculate boundary (if any) for drag from bottom
+   */
+  useEffect(() => {
+    if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) {
+      if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
+        setBottomBound(SCREEN_HEIGHT * 0.15);
+      } else {
+        setBottomBound(
+          SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2),
+        );
+      }
+    }
+  }, [imageHeight, imageWidth]);
+
   /*
    * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images.
    */
@@ -171,7 +175,21 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           )}
         </TouchableWithoutFeedback>
       </View>
-      <View style={styles.titleContainer}>
+      <View
+        style={styles.titleContainer}
+        onLayout={(event) => {
+          const {_x, y, _width, height} = event.nativeEvent.layout;
+          const tempBound = y + height;
+          if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) {
+            if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
+              setTopBound(tempBound + 15);
+            } else {
+              setTopBound(
+                tempBound - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15,
+              );
+            }
+          }
+        }}>
         <TouchableOpacity
           onPress={() => {
             navigation.goBack();
@@ -218,7 +236,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           deleteFromList={(user) =>
             setTags(tags.filter((tag) => tag.user.id !== user.id))
           }
-          boundaries={{bottom: bottomBound}}
+          boundaries={{top: topBound, bottom: bottomBound}}
         />
       )}
       {tags.length !== 0 && (
-- 
cgit v1.2.3-70-g09d2


From 9acc152bb1aa7dabdd846ec7fb9a508ace41c9ce Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 17:06:22 -0400
Subject: Fix lint

---
 src/components/common/MomentTags.tsx     | 8 ++++----
 src/screens/moments/TagFriendsScreen.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 62b551f0..6ea76508 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -153,10 +153,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
           y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
-          minX={offset[0] + minXBoundary}
-          minY={offset[1] + minYBoundary}
-          maxX={imageDimensions[0] + offset[0] - maxXBoundary}
-          maxY={imageDimensions[1] + offset[1] - maxYBoundary}
+          minX={offset[0] + boundariesList[0]}
+          minY={offset[1] + boundariesList[2]}
+          maxX={imageDimensions[0] + offset[0] - boundariesList[1]}
+          maxY={imageDimensions[1] + offset[1] - boundariesList[3]}
           disabled={true}>
           <TaggDraggable
             draggableRef={draggableRefs[index]}
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 5c3501bb..2518cfbb 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -178,7 +178,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
       <View
         style={styles.titleContainer}
         onLayout={(event) => {
-          const {_x, y, _width, height} = event.nativeEvent.layout;
+          const {y, height} = event.nativeEvent.layout;
           const tempBound = y + height;
           if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) {
             if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
-- 
cgit v1.2.3-70-g09d2


From 2bd0057c2ab82679695691d9803ab12897216ce9 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 17:09:10 -0400
Subject: Got rid of tab bar remover

---
 src/screens/moments/TagFriendsScreen.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 2518cfbb..5e267d72 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -48,22 +48,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     setTags(selectedTags ? selectedTags : []);
   }, [selectedTags]);
 
-  /*
-   * Hide Tab Bar
-   */
-  useFocusEffect(
-    useCallback(() => {
-      navigation.dangerouslyGetParent()?.setOptions({
-        tabBarVisible: false,
-      });
-      return () => {
-        navigation.dangerouslyGetParent()?.setOptions({
-          tabBarVisible: true,
-        });
-      };
-    }, [navigation]),
-  );
-
   /*
    * Navigate back to Tag Users Screen, send selected users
    */
-- 
cgit v1.2.3-70-g09d2


From 8a7ce9dee2eb24f80d84831b1d596f28a0d5c07a Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 17:12:21 -0400
Subject: More lint fixes

---
 src/screens/moments/TagFriendsScreen.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 5e267d72..983b1be3 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/core';
 import {useNavigation} from '@react-navigation/native';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {
   Image,
   StyleSheet,
@@ -9,7 +9,6 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {useFocusEffect} from '@react-navigation/native';
 import Video from 'react-native-video';
 import {MainStackParams} from 'src/routes';
 import BackArrow from '../../assets/icons/back-arrow.svg';
-- 
cgit v1.2.3-70-g09d2


From a1d684b8543a46b0aa69cf3fc901f87e0c58f4ee Mon Sep 17 00:00:00 2001
From: George Rusu <george@tagg.id>
Date: Thu, 8 Jul 2021 14:19:42 -0700
Subject: Added refresh to see video thumbnails

---
 src/screens/profile/CaptionScreen.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index fac00f21..6b647716 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -121,7 +121,13 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     } else {
       navigateToProfile();
       setTimeout(() => {
-        Alert.alert(SUCCESS_PIC_UPLOAD);
+        if (isMediaAVideo) {
+          Alert.alert(
+            'Beautiful, the Moment was uploaded successfully! Refresh to see it!',
+          );
+        } else {
+          Alert.alert('');
+        }
       }, 500);
     }
   };
@@ -173,7 +179,9 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
         return;
       }
     }
-    dispatch(loadUserMoments(userId));
+    if (!isMediaAVideo) {
+      dispatch(loadUserMoments(userId));
+    }
     if (profileCompletionStage) {
       dispatch(updateProfileCompletionStage(profileCompletionStage));
     }
-- 
cgit v1.2.3-70-g09d2


From e62ba8ca223d92f662016445264030d28009288f Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 17:22:56 -0400
Subject: Fixed boundaries

---
 src/components/common/MomentTags.tsx     |  2 --
 src/screens/moments/TagFriendsScreen.tsx | 26 ++++++++++++++------------
 2 files changed, 14 insertions(+), 14 deletions(-)

(limited to 'src/screens')

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 6ea76508..37069e18 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -90,7 +90,6 @@ const MomentTags: React.FC<MomentTagsProps> = ({
 
         // Checks for and adds boundaries
         if (boundaries) {
-          console.log(boundaries);
           const newBounds = [...boundariesList];
           if (boundaries.top) {
             newBounds[2] = boundaries.top;
@@ -104,7 +103,6 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           if (boundaries.right) {
             newBounds[1] = boundaries.right;
           }
-          console.log(newBounds);
           setBoundariesList(newBounds);
         }
       },
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 983b1be3..6c982936 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -38,6 +38,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const [imageWidth, setImageWidth] = useState<number>(0);
   const [imageHeight, setImageHeight] = useState<number>(0);
   const [bottomBound, setBottomBound] = useState<number>(0);
+  const [topHeight, setTopHeight] = useState<number>(0);
   const [topBound, setTopBound] = useState<number>(0);
 
   /*
@@ -77,9 +78,10 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   };
 
   /*
-   * Calculate boundary (if any) for drag from bottom
+   * Calculate boundary (if any) for drag from bottom and top
    */
   useEffect(() => {
+    // Bottom dead zone
     if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) {
       if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
         setBottomBound(SCREEN_HEIGHT * 0.15);
@@ -89,7 +91,16 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
         );
       }
     }
-  }, [imageHeight, imageWidth]);
+
+    // Top dead zone
+    if (SCREEN_HEIGHT / 2 - imageHeight / 2 < topHeight) {
+      if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
+        setTopBound(topHeight + 15);
+      } else {
+        setTopBound(topHeight - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15);
+      }
+    }
+  }, [imageHeight, imageWidth, topHeight]);
 
   /*
    * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images.
@@ -162,16 +173,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
         style={styles.titleContainer}
         onLayout={(event) => {
           const {y, height} = event.nativeEvent.layout;
-          const tempBound = y + height;
-          if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) {
-            if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
-              setTopBound(tempBound + 15);
-            } else {
-              setTopBound(
-                tempBound - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15,
-              );
-            }
-          }
+          setTopHeight(y + height);
         }}>
         <TouchableOpacity
           onPress={() => {
-- 
cgit v1.2.3-70-g09d2


From 882e76dbb14440b6d61f217682628a54f1071ebe Mon Sep 17 00:00:00 2001
From: George Rusu <george@tagg.id>
Date: Thu, 8 Jul 2021 14:41:11 -0700
Subject: Lint, update alert helper text

---
 src/screens/profile/CaptionScreen.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 6b647716..7fef73db 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -25,7 +25,6 @@ import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
   ERROR_UPLOAD,
-  SUCCESS_PIC_UPLOAD,
 } from '../../constants/strings';
 import {MainStackParams} from '../../routes';
 import {
@@ -123,7 +122,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       setTimeout(() => {
         if (isMediaAVideo) {
           Alert.alert(
-            'Beautiful, the Moment was uploaded successfully! Refresh to see it!',
+            'Beautiful, the Moment was uploaded successfully! Check back in a bit and refresh to see it!',
           );
         } else {
           Alert.alert('');
-- 
cgit v1.2.3-70-g09d2


From 59e26e30a18bca1d40400c3a98f133fcfbd13a28 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 6 Jul 2021 18:47:27 -0400
Subject: Add initial styling for caption screen

---
 src/routes/main/MainStackNavigator.tsx |   2 +-
 src/screens/profile/CaptionScreen.tsx  | 126 +++++++++++++++++----------------
 2 files changed, 66 insertions(+), 62 deletions(-)

(limited to 'src/screens')

diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index bc023da8..d21a1fe4 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -36,7 +36,7 @@ export type MainStackParams = {
     screenType: ScreenType;
   };
   CaptionScreen: {
-    title?: string;
+    title?: string; // TODO: remove this?
     media?: {uri: string; isVideo: boolean};
     screenType: ScreenType;
     selectedTags?: MomentTagType[];
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 7fef73db..2c5356c0 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, {Fragment, useEffect, useState} from 'react';
+import React, {FC, useEffect, useState} from 'react';
 import {
   Alert,
   Image,
@@ -13,12 +13,11 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {MentionInputControlled} from '../../components';
 import {Button, normalize} 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 {SearchBackground} from '../../components';
+import {MentionInputControlled, SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
@@ -40,7 +39,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
-import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 /**
@@ -204,9 +203,34 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     }
   };
 
+  const SelectableItem: FC = () => (
+    <TouchableOpacity
+      onPress={() =>
+        navigation.navigate('TagFriendsScreen', {
+          media: {
+            uri: mediaUri,
+            isVideo: isMediaAVideo,
+          },
+          selectedTags: tags,
+        })
+      }
+      style={styles.tagFriendsContainer}>
+      <Image
+        source={require('../../assets/icons/tagging/tag-icon.png')}
+        style={styles.tagIcon}
+      />
+      <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+      <Text numberOfLines={1} style={styles.taggedListContainer}>
+        {taggedList}
+        {taggedList.length > 21 ? '. . .' : ''}
+      </Text>
+      <FrontArrow width={12} height={12} color={'white'} />
+    </TouchableOpacity>
+  );
+
   return (
     <SearchBackground>
-      {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
+      {loading && <TaggLoadingIndicator fullscreen />}
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -225,53 +249,31 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 onPress={moment ? handleDoneEditing : handleShare}
               />
             </View>
-            <CaptionScreenHeader
-              style={styles.header}
-              {...{title: moment ? moment.moment_category : title ?? ''}}
-            />
-            {isMediaAVideo ? (
-              <Video
-                style={styles.media}
-                source={{uri: mediaUri}}
-                repeat={true}
-              />
-            ) : (
-              <Image
-                style={styles.media}
-                source={{uri: mediaUri}}
-                resizeMode={'contain'}
-              />
-            )}
-            <MentionInputControlled
-              containerStyle={styles.text}
-              placeholder="Write something....."
-              placeholderTextColor="gray"
-              value={caption}
-              onChange={setCaption}
-              partTypes={mentionPartTypes('blue', 'caption')}
-            />
-            <TouchableOpacity
-              onPress={() =>
-                navigation.navigate('TagFriendsScreen', {
-                  media: {
-                    uri: mediaUri,
-                    isVideo: isMediaAVideo,
-                  },
-                  selectedTags: tags,
-                })
-              }
-              style={styles.tagFriendsContainer}>
-              <Image
-                source={require('../../assets/icons/tagging/tag-icon.png')}
-                style={styles.tagIcon}
+            <CaptionScreenHeader style={styles.header} title={'Moments'} />
+            <View style={styles.captionContainer}>
+              {isMediaAVideo ? (
+                <Video
+                  style={styles.media}
+                  source={{uri: mediaUri}}
+                  repeat={true}
+                />
+              ) : (
+                <Image
+                  style={styles.media}
+                  source={{uri: mediaUri}}
+                  resizeMode={'contain'}
+                />
+              )}
+              <MentionInputControlled
+                containerStyle={styles.text}
+                placeholder="Write something....."
+                placeholderTextColor="gray"
+                value={caption}
+                onChange={setCaption}
+                partTypes={mentionPartTypes('blue', 'caption')}
               />
-              <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
-              <Text numberOfLines={1} style={styles.taggedListContainer}>
-                {taggedList}
-                {taggedList.length > 21 ? '. . .' : ''}
-              </Text>
-              <FrontArrow width={12} height={12} color={'white'} />
-            </TouchableOpacity>
+            </View>
+            <SelectableItem />
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -297,21 +299,23 @@ const styles = StyleSheet.create({
     color: TAGG_LIGHT_BLUE_2,
   },
   header: {
-    marginVertical: 20,
+    marginTop: 20,
+    marginBottom: 30,
+  },
+  captionContainer: {
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    padding: normalize(15),
   },
   media: {
-    position: 'relative',
-    width: SCREEN_WIDTH,
-    aspectRatio: 1,
-    marginBottom: '3%',
+    height: normalize(150),
+    aspectRatio: 9 / 16,
   },
   text: {
-    position: 'relative',
     backgroundColor: 'white',
-    width: '100%',
-    paddingHorizontal: '2%',
-    paddingVertical: '1%',
-    height: 60,
+    flex: 1,
+    height: normalize(150),
+    marginLeft: normalize(15),
   },
   flex: {
     flex: 1,
-- 
cgit v1.2.3-70-g09d2


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 +-
 src/screens/profile/CaptionScreen.tsx          | 113 ++++++++++++++++---------
 2 files changed, 75 insertions(+), 43 deletions(-)

(limited to 'src/screens')

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',
   },
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 2c5356c0..1d2946bb 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -4,6 +4,7 @@ import React, {FC, useEffect, useState} from 'react';
 import {
   Alert,
   Image,
+  ImageSourcePropType,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
@@ -13,7 +14,8 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {Button, normalize} from 'react-native-elements';
+import {openContactForm} from 'react-native-contacts';
+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';
@@ -39,7 +41,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
-import {StatusBarHeight} from '../../utils';
+import {normalize, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 /**
@@ -66,7 +68,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [tags, setTags] = useState<MomentTagType[]>(
     selectedTags ? selectedTags : [],
   );
-  const [taggedList, setTaggedList] = useState<string>('');
+  const [taggedUsersText, setTaggedUsersText] = useState('');
   const mediaUri = moment ? moment.moment_url : route.params.media!.uri;
   // TODO: change this once moment refactor is done
   const isMediaAVideo = moment
@@ -83,18 +85,17 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   }, [selectedTags]);
 
   useEffect(() => {
-    const getTaggedUsersListString = () => {
-      let listString = '';
-      for (let i = 0; i < tags.length; i++) {
-        if (listString.length < 21) {
-          listString = listString.concat(`@${tags[i].user.username} `);
-        } else {
-          break;
-        }
+    let listString = '';
+    for (const tag of tags) {
+      const usernameStr = `@${tag.user.username} `;
+      if (listString.length + usernameStr.length > 21) {
+        listString = listString.concat('. . .');
+        break;
+      } else {
+        listString = listString.concat(usernameStr);
       }
-      setTaggedList(listString);
-    };
-    getTaggedUsersListString();
+    }
+    setTaggedUsersText(listString);
   }, [tags]);
 
   const navigateToProfile = () => {
@@ -203,28 +204,24 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     }
   };
 
-  const SelectableItem: FC = () => (
-    <TouchableOpacity
-      onPress={() =>
-        navigation.navigate('TagFriendsScreen', {
-          media: {
-            uri: mediaUri,
-            isVideo: isMediaAVideo,
-          },
-          selectedTags: tags,
-        })
-      }
-      style={styles.tagFriendsContainer}>
-      <Image
-        source={require('../../assets/icons/tagging/tag-icon.png')}
-        style={styles.tagIcon}
-      />
-      <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
-      <Text numberOfLines={1} style={styles.taggedListContainer}>
-        {taggedList}
-        {taggedList.length > 21 ? '. . .' : ''}
-      </Text>
-      <FrontArrow width={12} height={12} color={'white'} />
+  const SelectableItem: FC<{
+    text: string;
+    imageUri: ImageSourcePropType;
+    onPress: () => void;
+  }> = ({text, imageUri, onPress}) => (
+    <TouchableOpacity onPress={onPress} style={styles.tagFriendsContainer}>
+      <View style={styles.row}>
+        <Image style={styles.tagIcon} source={imageUri} />
+        <Text style={styles.tagFriendsTitle}>{text}</Text>
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.taggedUsersText}>{taggedUsersText}</Text>
+        <FrontArrow
+          width={normalize(13)}
+          height={normalize(13)}
+          color={'white'}
+        />
+      </View>
     </TouchableOpacity>
   );
 
@@ -273,7 +270,32 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 partTypes={mentionPartTypes('blue', 'caption')}
               />
             </View>
-            <SelectableItem />
+            <SelectableItem
+              text={'Category'}
+              imageUri={require('../../assets/images/images.png')}
+              onPress={() =>
+                navigation.navigate('TagFriendsScreen', {
+                  media: {
+                    uri: mediaUri,
+                    isVideo: isMediaAVideo,
+                  },
+                  selectedTags: tags,
+                })
+              }
+            />
+            <SelectableItem
+              text={'Tag Friends'}
+              imageUri={require('../../assets/icons/tagging/tag-icon.png')}
+              onPress={() =>
+                navigation.navigate('TagFriendsScreen', {
+                  media: {
+                    uri: mediaUri,
+                    isVideo: isMediaAVideo,
+                  },
+                  selectedTags: tags,
+                })
+              }
+            />
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -306,6 +328,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     flexDirection: 'row',
     padding: normalize(15),
+    marginBottom: normalize(35),
   },
   media: {
     height: normalize(150),
@@ -322,27 +345,35 @@ const styles = StyleSheet.create({
   },
   tagFriendsTitle: {
     color: 'white',
-    fontSize: normalize(12),
+    fontSize: normalize(14),
     lineHeight: normalize(16.71),
     letterSpacing: normalize(0.3),
     fontWeight: '600',
   },
   tagFriendsContainer: {
     marginHorizontal: '5%',
-    marginTop: '3%',
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
+    marginBottom: normalize(20),
   },
-  taggedListContainer: {
+  taggedUsersText: {
     color: 'white',
     width: 150,
     fontSize: normalize(10),
     lineHeight: normalize(11),
     letterSpacing: normalize(0.3),
     textAlign: 'right',
+    marginRight: 5,
+  },
+  tagIcon: {
+    width: normalize(20),
+    height: normalize(20),
+    marginRight: 15,
+  },
+  row: {
+    flexDirection: 'row',
   },
-  tagIcon: {width: 20, height: 20},
 });
 
 export default CaptionScreen;
-- 
cgit v1.2.3-70-g09d2


From dda5964a5f334655826f36023025f90cb86364c8 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 6 Jul 2021 19:41:02 -0400
Subject: Add comments

---
 src/screens/profile/CaptionScreen.tsx | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/screens')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 1d2946bb..67d1fd04 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -86,6 +86,9 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
 
   useEffect(() => {
     let listString = '';
+    // Append non-truncated usernames together and no more than 21 characters total
+    // e.g. "@ivan.tagg"
+    // e.g. "@ivan.tagg @foobar . . ."
     for (const tag of tags) {
       const usernameStr = `@${tag.user.username} `;
       if (listString.length + usernameStr.length > 21) {
-- 
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/screens')

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 f39a320fd9e07750c8fcf7cc1882f21324a0ce58 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 7 Jul 2021 15:07:18 -0400
Subject: Fix navigation error handling

---
 src/constants/strings.ts              |  1 +
 src/routes/tabs/NavigationBar.tsx     |  4 ++--
 src/screens/profile/CaptionScreen.tsx | 34 ++++++++++++++++++----------------
 3 files changed, 21 insertions(+), 18 deletions(-)

(limited to 'src/screens')

diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 112bc546..071b3835 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -45,6 +45,7 @@ export const ERROR_SELECT_GENDER = 'Please select your gender';
 export const ERROR_SELECT_UNIVERSITY = 'Please select your University';
 export const ERROR_SERVER_DOWN = 'mhm, looks like our servers are down, please refresh and try again in a few mins';
 export const ERROR_SOMETHING_WENT_WRONG = 'Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app';
+export const ERROR_NO_MOMENT_CATEGORY = 'Please select a category!';
 export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again";
 export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again";
 export const ERROR_T_AND_C_NOT_ACCEPTED = 'You must first agree to the terms and conditions.';
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 12f6ab58..c3f0b9f8 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -66,7 +66,7 @@ const NavigationBar: React.FC = () => {
                     disabled={!focused}
                   />
                 );
-              case 'Profile':
+              case 'ProfileTab':
                 return <NavigationIcon tab="Profile" disabled={!focused} />;
               case 'SuggestedPeople':
                 return (
@@ -118,7 +118,7 @@ const NavigationBar: React.FC = () => {
           }}
         />
         <Tabs.Screen
-          name="Profile"
+          name="ProfileTab"
           component={MainStackScreen}
           initialParams={{screenType: ScreenType.Profile}}
         />
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 025d81a7..ad301ded 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -23,9 +23,11 @@ import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {
+  ERROR_NO_MOMENT_CATEGORY,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
   ERROR_UPLOAD,
 } from '../../constants/strings';
+import * as RootNavigation from '../../RootNavigation';
 import {MainStackParams} from '../../routes';
 import {
   handlePresignedURL,
@@ -69,6 +71,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [tags, setTags] = useState<MomentTagType[]>([]);
   const [taggedUsersText, setTaggedUsersText] = useState('');
   const [momentCategory, setMomentCategory] = useState<string | undefined>();
+  // 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
@@ -105,27 +108,23 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     setTaggedUsersText(listString);
   }, [tags]);
 
-  const navigateToProfile = () => {
-    //Since the logged In User is navigating to own profile, useXId is not required
-    navigation.navigate('Profile', {
-      screenType,
-      userXId: undefined,
-    });
-  };
-
-  const handleFailed = () => {
+  const handleFailed = (noCategory = false) => {
     setLoading(false);
     setTimeout(() => {
-      Alert.alert(moment ? ERROR_SOMETHING_WENT_WRONG_REFRESH : ERROR_UPLOAD);
+      if (noCategory) {
+        Alert.alert(ERROR_NO_MOMENT_CATEGORY);
+      } else {
+        Alert.alert(moment ? ERROR_SOMETHING_WENT_WRONG_REFRESH : ERROR_UPLOAD);
+      }
     }, 500);
   };
   const handleSuccess = () => {
     setLoading(false);
-    if (moment) {
-      setLoading(false);
-      navigation.goBack();
-    } else {
-      navigateToProfile();
+    if (!moment) {
+      // if posting, pop all screens until at camera screen (default upload screen)
+      // then switch to the profile tab
+      navigation.popToTop();
+      RootNavigation.navigate('ProfileTab');
       setTimeout(() => {
         if (isMediaAVideo) {
           Alert.alert(
@@ -135,6 +134,9 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
           Alert.alert('');
         }
       }, 500);
+    } else {
+      // if editing, simply go back to (most likely) indiv moment
+      navigation.goBack();
     }
   };
 
@@ -150,7 +152,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const handleShare = async () => {
     setLoading(true);
     if (moment || !momentCategory) {
-      handleFailed();
+      handleFailed(true);
       return;
     }
     let profileCompletionStage;
-- 
cgit v1.2.3-70-g09d2


From 933b27e8d1f03b9d07f99b9662503e68f6a6ac91 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 7 Jul 2021 15:24:41 -0400
Subject: Add logic to display current selected category

---
 src/screens/profile/CaptionScreen.tsx          | 54 +++++++++++++++++---------
 src/screens/profile/ChoosingCategoryScreen.tsx |  9 +++--
 2 files changed, 41 insertions(+), 22 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index ad301ded..a8664d85 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -219,25 +219,35 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   };
 
   const SelectableItem: FC<{
-    text: string;
+    text: 'Tag Friends' | 'Category';
     imageUri: ImageSourcePropType;
     onPress: () => void;
-  }> = ({text, imageUri, onPress}) => (
-    <TouchableOpacity onPress={onPress} style={styles.tagFriendsContainer}>
-      <View style={styles.row}>
-        <Image style={styles.tagIcon} source={imageUri} />
-        <Text style={styles.tagFriendsTitle}>{text}</Text>
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.taggedUsersText}>{taggedUsersText}</Text>
-        <FrontArrow
-          width={normalize(13)}
-          height={normalize(13)}
-          color={'white'}
-        />
-      </View>
-    </TouchableOpacity>
-  );
+  }> = ({text, imageUri, onPress}) => {
+    return (
+      <TouchableOpacity onPress={onPress} style={styles.tagFriendsContainer}>
+        <View style={styles.row}>
+          {text === 'Category' && !momentCategory && (
+            <Text style={styles.asteriskText}>* </Text>
+          )}
+          <Image style={styles.tagIcon} source={imageUri} />
+          <Text style={styles.tagFriendsTitle}>{text}</Text>
+        </View>
+        <View style={styles.row}>
+          {text === 'Tag Friends' && (
+            <Text style={styles.itemInfoText}>{taggedUsersText}</Text>
+          )}
+          {text === 'Category' && (
+            <Text style={styles.itemInfoText}>{momentCategory}</Text>
+          )}
+          <FrontArrow
+            width={normalize(13)}
+            height={normalize(13)}
+            color={'white'}
+          />
+        </View>
+      </TouchableOpacity>
+    );
+  };
 
   return (
     <SearchBackground>
@@ -363,13 +373,21 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginBottom: normalize(20),
   },
-  taggedUsersText: {
+  asteriskText: {
+    color: TAGG_LIGHT_BLUE_2,
+    fontWeight: 'bold',
+    fontSize: normalize(15),
+    height: 15,
+    alignSelf: 'center',
+  },
+  itemInfoText: {
     color: 'white',
     width: 150,
     fontSize: normalize(10),
     lineHeight: normalize(11),
     letterSpacing: normalize(0.3),
     textAlign: 'right',
+
     marginRight: 5,
   },
   tagIcon: {
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index 285732e7..dd3bc1bb 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -33,10 +33,11 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
     title: string;
   }> = ({title}) => (
     <TouchableOpacity
-      onPress={async () => {
-        await AsyncStorage.setItem('selectedMomentCategory', title);
-        navigation.goBack();
-      }}>
+      onPress={async () =>
+        navigation.navigate('CaptionScreen', {
+          selectedCategory: 'Food',
+        })
+      }>
       <Text style={{height: 100, backgroundColor: 'green'}}>foo</Text>
     </TouchableOpacity>
   );
-- 
cgit v1.2.3-70-g09d2


From 160eaf8084deb21d15fe03e6984a5bb057a57e94 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 7 Jul 2021 16:19:38 -0400
Subject: Add more styling to choosing category screen

---
 src/screens/profile/CaptionScreen.tsx          | 10 ++--
 src/screens/profile/ChoosingCategoryScreen.tsx | 82 ++++++++++++++++++++------
 2 files changed, 69 insertions(+), 23 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index a8664d85..280319b4 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -224,13 +224,15 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     onPress: () => void;
   }> = ({text, imageUri, onPress}) => {
     return (
-      <TouchableOpacity onPress={onPress} style={styles.tagFriendsContainer}>
+      <TouchableOpacity
+        onPress={onPress}
+        style={styles.selectableItemContainer}>
         <View style={styles.row}>
           {text === 'Category' && !momentCategory && (
             <Text style={styles.asteriskText}>* </Text>
           )}
           <Image style={styles.tagIcon} source={imageUri} />
-          <Text style={styles.tagFriendsTitle}>{text}</Text>
+          <Text style={styles.selectableItemTitle}>{text}</Text>
         </View>
         <View style={styles.row}>
           {text === 'Tag Friends' && (
@@ -359,14 +361,14 @@ const styles = StyleSheet.create({
   flex: {
     flex: 1,
   },
-  tagFriendsTitle: {
+  selectableItemTitle: {
     color: 'white',
     fontSize: normalize(14),
     lineHeight: normalize(16.71),
     letterSpacing: normalize(0.3),
     fontWeight: '600',
   },
-  tagFriendsContainer: {
+  selectableItemContainer: {
     marginHorizontal: '5%',
     flexDirection: 'row',
     justifyContent: 'space-between',
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index dd3bc1bb..a591cd69 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -1,4 +1,3 @@
-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';
@@ -9,10 +8,13 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {CaptionScreenHeader, SearchBackground} from '../../components';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {useSelector} from 'react-redux';
+import FrontArrow from '../../assets/icons/front-arrow.svg';
+import {SearchBackground} from '../../components';
 import {MainStackParams} from '../../routes';
-import {StatusBarHeight} from '../../utils';
+import {RootState} from '../../store/rootReducer';
+import {normalize, SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
 
 type ChoosingCategoryScreenRouteProps = RouteProp<
   MainStackParams,
@@ -26,33 +28,57 @@ interface ChoosingCategoryScreenProps {
 const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
   route,
 }) => {
+  const {momentCategories} = useSelector(
+    (state: RootState) => state.momentCategories,
+  );
   const navigation = useNavigation();
   const tabBarHeight = useBottomTabBarHeight();
   const insetTop = useSafeAreaInsets().top;
+
   const MomentItem: FC<{
     title: string;
-  }> = ({title}) => (
-    <TouchableOpacity
-      onPress={async () =>
-        navigation.navigate('CaptionScreen', {
-          selectedCategory: 'Food',
-        })
-      }>
-      <Text style={{height: 100, backgroundColor: 'green'}}>foo</Text>
+    onPress: () => void;
+  }> = ({title, onPress}) => (
+    <TouchableOpacity onPress={onPress} style={styles.itemContainer}>
+      <View style={styles.row}>
+        <View
+          style={{
+            height: normalize(35),
+            width: normalize(35),
+            backgroundColor: 'red',
+          }}
+        />
+        {/* <Image style={styles.tagIcon} source={imageUri} /> */}
+        <Text style={styles.itemTitle}>{title}</Text>
+      </View>
+      <View style={styles.row}>
+        <FrontArrow
+          width={normalize(13)}
+          height={normalize(13)}
+          color={'white'}
+        />
+      </View>
     </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
+          style={{height: SCREEN_HEIGHT * 0.9}}
+          contentContainerStyle={{paddingBottom: tabBarHeight}}>
+          {momentCategories.map((title) => (
+            <MomentItem
+              title={title}
+              onPress={() =>
+                navigation.navigate('CaptionScreen', {
+                  selectedCategory: title,
+                })
+              }
+            />
           ))}
         </ScrollView>
       </View>
-      {/* </SafeAreaView> */}
     </SearchBackground>
   );
 };
@@ -61,7 +87,25 @@ const styles = StyleSheet.create({
   container: {
     marginTop: StatusBarHeight,
   },
-  scrollContainer: {},
+  itemContainer: {
+    marginHorizontal: '5%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: normalize(20),
+  },
+  itemTitle: {
+    color: 'white',
+    fontSize: normalize(14),
+    lineHeight: normalize(16.71),
+    letterSpacing: normalize(0.3),
+    fontWeight: '600',
+    alignSelf: 'center',
+    marginLeft: normalize(25),
+  },
+  row: {
+    flexDirection: 'row',
+  },
 });
 
 export default ChoosingCategoryScreen;
-- 
cgit v1.2.3-70-g09d2


From 0e01031c024c1ce68e18974329cc7cb8e770a781 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 7 Jul 2021 16:32:08 -0400
Subject: Adjust caption container

---
 src/screens/profile/CaptionScreen.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 280319b4..aa866f56 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -71,7 +71,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [tags, setTags] = useState<MomentTagType[]>([]);
   const [taggedUsersText, setTaggedUsersText] = useState('');
   const [momentCategory, setMomentCategory] = useState<string | undefined>();
-  // 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
@@ -288,12 +287,13 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 />
               )}
               <MentionInputControlled
-                containerStyle={styles.text}
+                style={styles.text}
+                containerStyle={styles.textContainer}
                 placeholder="Write something....."
-                placeholderTextColor="gray"
+                placeholderTextColor="white"
                 value={caption}
                 onChange={setCaption}
-                partTypes={mentionPartTypes('blue', 'caption')}
+                partTypes={mentionPartTypes('white', 'caption')}
               />
             </View>
             <SelectableItem
@@ -343,20 +343,28 @@ const styles = StyleSheet.create({
     marginBottom: 30,
   },
   captionContainer: {
-    backgroundColor: 'white',
     flexDirection: 'row',
     padding: normalize(15),
     marginBottom: normalize(35),
+    borderColor: 'white',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
   },
   media: {
     height: normalize(150),
     aspectRatio: 9 / 16,
   },
   text: {
-    backgroundColor: 'white',
+    color: 'white',
+    fontSize: normalize(12),
+    lineHeight: 14,
+    fontWeight: '500',
+  },
+  textContainer: {
     flex: 1,
     height: normalize(150),
     marginLeft: normalize(15),
+    color: 'white',
   },
   flex: {
     flex: 1,
-- 
cgit v1.2.3-70-g09d2


From 2a6035061a8a8a37dc74905180928aa75d92983f Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 7 Jul 2021 16:57:41 -0400
Subject: Add more styling to choosing category

---
 src/constants/constants.ts                     |  1 +
 src/screens/profile/ChoosingCategoryScreen.tsx | 80 ++++++++++++++++++--------
 2 files changed, 57 insertions(+), 24 deletions(-)

(limited to 'src/screens')

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index f4ffd750..13a73208 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -66,6 +66,7 @@ export const YOUTUBE_FONT_COLOR: string = '#FCA4A4';
 
 export const TAGG_PURPLE = '#8F01FF';
 export const TAGG_DARK_BLUE = '#4E699C';
+export const TAGG_DARK_PURPLEISH_BLUE = '#4755A1';
 export const TAGG_LIGHT_BLUE: string = '#698DD3';
 export const TAGG_LIGHT_BLUE_2: string = '#6EE7E7';
 export const TAGG_LIGHT_PURPLE = '#F4DDFF';
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index a591cd69..daf7642d 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -2,19 +2,27 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {RouteProp, useNavigation} from '@react-navigation/native';
 import React, {FC} from 'react';
 import {
+  Image,
   ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
 import {SearchBackground} from '../../components';
+import {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootReducer';
-import {normalize, SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
+import {
+  getMomentCategoryIconInfo,
+  normalize,
+  SCREEN_HEIGHT,
+  StatusBarHeight,
+} from '../../utils';
 
 type ChoosingCategoryScreenRouteProps = RouteProp<
   MainStackParams,
@@ -38,28 +46,32 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
   const MomentItem: FC<{
     title: string;
     onPress: () => void;
-  }> = ({title, onPress}) => (
-    <TouchableOpacity onPress={onPress} style={styles.itemContainer}>
-      <View style={styles.row}>
-        <View
-          style={{
-            height: normalize(35),
-            width: normalize(35),
-            backgroundColor: 'red',
-          }}
-        />
-        {/* <Image style={styles.tagIcon} source={imageUri} /> */}
-        <Text style={styles.itemTitle}>{title}</Text>
-      </View>
-      <View style={styles.row}>
-        <FrontArrow
-          width={normalize(13)}
-          height={normalize(13)}
-          color={'white'}
-        />
-      </View>
-    </TouchableOpacity>
-  );
+  }> = ({title, onPress}) => {
+    const icon = getMomentCategoryIconInfo(title).icon;
+    return (
+      <TouchableOpacity onPress={onPress} style={styles.itemContainer}>
+        <View style={styles.row}>
+          <LinearGradient
+            style={styles.gradientIcon}
+            colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+            useAngle={true}
+            angle={-45}>
+            <View style={styles.iconBackground}>
+              <Image style={styles.icon} source={icon} />
+            </View>
+          </LinearGradient>
+          <Text style={styles.itemTitle}>{title}</Text>
+        </View>
+        <View style={styles.row}>
+          <FrontArrow
+            width={normalize(13)}
+            height={normalize(13)}
+            color={'white'}
+          />
+        </View>
+      </TouchableOpacity>
+    );
+  };
 
   return (
     <SearchBackground>
@@ -69,6 +81,7 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
           contentContainerStyle={{paddingBottom: tabBarHeight}}>
           {momentCategories.map((title) => (
             <MomentItem
+              key={title}
               title={title}
               onPress={() =>
                 navigation.navigate('CaptionScreen', {
@@ -92,7 +105,26 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: normalize(20),
+    marginVertical: normalize(20),
+    borderRadius: 4,
+  },
+  gradientIcon: {
+    width: normalize(40),
+    height: normalize(40),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+  },
+  iconBackground: {
+    height: '85%',
+    width: '85%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: TAGG_DARK_PURPLEISH_BLUE,
+  },
+  icon: {
+    height: normalize(25),
+    width: normalize(25),
   },
   itemTitle: {
     color: 'white',
-- 
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/screens')

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

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

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

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

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

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

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

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 abb032a2c4b6907575531f3cd94728a0cc77bc1d Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 15:52:46 -0400
Subject: Fix choosing category header issue

---
 src/screens/profile/ChoosingCategoryScreen.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index cdc941db..720412a4 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -21,6 +21,7 @@ import {updateMomentCategories} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {
   getMomentCategoryIconInfo,
+  HeaderHeight,
   normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
@@ -90,7 +91,7 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
 
   return (
     <SearchBackground>
-      <View style={{marginTop: StatusBarHeight + insetTop}}>
+      <View style={{marginTop: StatusBarHeight + HeaderHeight}}>
         <ScrollView
           style={{height: SCREEN_HEIGHT * 0.9}}
           contentContainerStyle={{paddingBottom: tabBarHeight}}>
-- 
cgit v1.2.3-70-g09d2


From d05ae427027003c714911a2e253bba535c3c8749 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 17:59:47 -0400
Subject: Add success msg back

---
 src/screens/profile/CaptionScreen.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index acfe4900..62d2a4c7 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -30,6 +30,7 @@ import {
   ERROR_NO_MOMENT_CATEGORY,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
   ERROR_UPLOAD,
+  SUCCESS_PIC_UPLOAD,
 } from '../../constants/strings';
 import * as RootNavigation from '../../RootNavigation';
 import {MainStackParams} from '../../routes';
@@ -135,7 +136,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             'Beautiful, the Moment was uploaded successfully! Check back in a bit and refresh to see it!',
           );
         } else {
-          Alert.alert('');
+          Alert.alert(SUCCESS_PIC_UPLOAD);
         }
       }, 500);
     } else {
-- 
cgit v1.2.3-70-g09d2


From 75a6a376e93b2985a21627cecd7d86e558393f31 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 9 Jul 2021 15:02:06 -0700
Subject: Flip camera on double tap

---
 src/screens/moments/CameraScreen.tsx | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/screens')

diff --git a/src/screens/moments/CameraScreen.tsx b/src/screens/moments/CameraScreen.tsx
index 75638c40..dd3612ca 100644
--- a/src/screens/moments/CameraScreen.tsx
+++ b/src/screens/moments/CameraScreen.tsx
@@ -116,6 +116,9 @@ const CameraScreen: React.FC<CameraScreenProps> = ({route, navigation}) => {
         style={styles.camera}
         type={cameraType}
         flashMode={flashMode}
+        onDoubleTap={() => {
+          setCameraType(cameraType === 'front' ? 'back' : 'front');
+        }}
       />
       <View style={[styles.bottomContainer, {bottom: tabBarHeight}]}>
         {showSaveButton ? (
-- 
cgit v1.2.3-70-g09d2


From 9bbba285b989cd6bf1a9543b4fa0e97e2379616c Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 18:29:13 -0400
Subject: Change edit to go back to profile

---
 src/screens/profile/CaptionScreen.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 62d2a4c7..484070d2 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -140,8 +140,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
         }
       }, 500);
     } else {
-      // if editing, simply go back to (most likely) indiv moment
-      navigation.goBack();
+      // if editing, simply go back to profile screen
+      navigation.navigate('Profile', {
+        userXId: undefined,
+        screenType: route.params.screenType,
+      });
     }
   };
 
-- 
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/screens')

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


From bfd77dfd62c7e743d699834a7a3072fe9df08aa1 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 18:45:25 -0400
Subject: Lint

---
 src/screens/profile/ChoosingCategoryScreen.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index 720412a4..68586aef 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -46,7 +46,6 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
   const dispatch = useDispatch();
   const navigation = useNavigation();
   const tabBarHeight = useBottomTabBarHeight();
-  const insetTop = useSafeAreaInsets().top;
 
   useEffect(() => {
     if (route.params.newCustomCategory) {
-- 
cgit v1.2.3-70-g09d2


From a0f3288050ec1ea3b9b9fc1320fa54b7f3119bb2 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 18:48:00 -0400
Subject: Lint

---
 src/screens/moments/TagFriendsScreen.tsx       | 16 ++++++++++------
 src/screens/profile/ChoosingCategoryScreen.tsx |  1 -
 2 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 6c982936..fc3bccf2 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -16,11 +16,11 @@ import {MomentTags} from '../../components';
 import {TagFriendsFooter} from '../../components/moments';
 import {MomentTagType} from '../../types';
 import {
-  SCREEN_WIDTH,
-  SCREEN_HEIGHT,
   HeaderHeight,
   isIPhoneX,
   normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
 } from '../../utils';
 
 type TagFriendsScreenRouteProps = RouteProp<
@@ -120,10 +120,10 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   return (
     <View style={styles.contentContainer}>
       <View
-        style={{
-          position: 'absolute',
-          paddingTop: SCREEN_HEIGHT / 2 - imageHeight / 2,
-        }}>
+        style={[
+          styles.innerContainer,
+          {paddingTop: SCREEN_HEIGHT / 2 - imageHeight / 2},
+        ]}>
         <TouchableWithoutFeedback
           onPress={() =>
             navigation.navigate('TagSelectionScreen', {
@@ -206,6 +206,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
             style={[
               styles.shareButtonTitle,
               // makes the Done buttomn invisible if there are no tags
+              // eslint-disable-next-line react-native/no-inline-styles
               {opacity: tags.length !== 0 ? 1 : 0},
             ]}>
             Done
@@ -295,6 +296,9 @@ const styles = StyleSheet.create({
     bottom: 0,
     height: SCREEN_HEIGHT * 0.15,
   },
+  innerContainer: {
+    position: 'absolute',
+  },
 });
 
 export default TagFriendsScreen;
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index 68586aef..8a7e3007 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -10,7 +10,6 @@ import {
   View,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
 import PlusIcon from '../../assets/icons/plus-icon.svg';
-- 
cgit v1.2.3-70-g09d2


From c179f04f13dfcde88e22097680d951c449ffcb38 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 9 Jul 2021 17:43:43 -0700
Subject: Add tap to view to dismiss keyboard, Add flatlist param

---
 src/components/moments/MomentPost.tsx    | 2 ++
 src/screens/profile/IndividualMoment.tsx | 1 +
 2 files changed, 3 insertions(+)

(limited to 'src/screens')

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 319542f9..07295369 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -2,6 +2,7 @@ import {useNavigation} from '@react-navigation/native';
 import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {
   Image,
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   StatusBar,
@@ -252,6 +253,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
           onPress={() => {
             setVisible(!visible);
             setFadeValue(new Animated.Value(0));
+            Keyboard.dismiss();
           }}>
           <View style={styles.contentContainer}>
             <View style={styles.topContainer}>
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index c65d41e7..1b0c7c2b 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -92,6 +92,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
             screenType={screenType}
           />
         )}
+        keyboardShouldPersistTaps={'handled'}
         scrollEnabled={!keyboardVisible}
         keyExtractor={(item, _) => item.moment_id}
         showsVerticalScrollIndicator={false}
-- 
cgit v1.2.3-70-g09d2