From 98b11aebbc99ade873b7c8681ac38d6e0e72332c Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Sat, 12 Jun 2021 02:01:57 +0900
Subject: Alter location of suggested

---
 src/components/comments/AddComment.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index b229d010..c48ce627 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -20,6 +20,7 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 import {Avatar} from '../common';
 import {MentionInputControlled} from './MentionInputControlled';
+import {normalize} from 'react-native-elements';
 
 export interface AddCommentProps {
   momentId: string;
@@ -110,7 +111,6 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
           keyboardVisible ? styles.whiteBackround : {},
         ]}>
         <View style={styles.textContainer}>
-          <Avatar style={styles.avatar} uri={avatar} />
           <MentionInputControlled
             containerStyle={styles.text}
             placeholder={placeholderText}
@@ -123,12 +123,8 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
             }}
             inputRef={ref}
             partTypes={mentionPartTypes('blue')}
+            addComment={addComment}
           />
-          <View style={styles.submitButton}>
-            <TouchableOpacity style={styles.submitButton} onPress={addComment}>
-              <UpArrowIcon width={35} height={35} color={'white'} />
-            </TouchableOpacity>
-          </View>
         </View>
       </View>
     </KeyboardAvoidingView>
@@ -139,22 +135,29 @@ const styles = StyleSheet.create({
   container: {
     backgroundColor: '#f7f7f7',
     alignItems: 'center',
+    justifyContent: 'center',
     width: SCREEN_WIDTH,
   },
   textContainer: {
     width: '95%',
-    flexDirection: 'row',
+    // flexDirection: 'row',
     backgroundColor: '#e8e8e8',
     alignItems: 'center',
+    // alignSelf: 'center',
     justifyContent: 'space-between',
+    // justifyContent: 'center',
     margin: '3%',
     borderRadius: 25,
+    // borderWidth: 1,
+    // flex: 1,
+    height: normalize(45),
   },
   text: {
     flex: 1,
     padding: '1%',
-    marginHorizontal: '1%',
+    // marginHorizontal: '1%',
     maxHeight: 100,
+    // borderWidth: 1,
   },
   avatar: {
     height: 35,
-- 
cgit v1.2.3-70-g09d2


From 52ff7abbc60fc1eef1f8d67372de855ab09069a9 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Sat, 12 Jun 2021 03:37:38 +0900
Subject: Add grey background

---
 src/components/comments/AddComment.tsx             |  2 +
 src/components/comments/MentionInputControlled.tsx | 10 ++++
 src/components/common/TaggTypeahead.tsx            | 59 ++++++++++++++--------
 3 files changed, 49 insertions(+), 22 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index c48ce627..c17fdd93 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -137,6 +137,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     width: SCREEN_WIDTH,
+    // paddingTop: 10,
+    // marginTop: 10,
   },
   textContainer: {
     width: '95%',
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index c52f3286..a3229bb0 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -27,6 +27,7 @@ import {Avatar} from '../common';
 import {normalize} from 'react-native-elements';
 
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
 
 const MentionInputControlled: FC<MentionInputProps> = ({
   value,
@@ -246,6 +247,15 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
   },
   text: {flex: 1},
+  overlay: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'blue',
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: -1,
+  },
 });
 
 export {MentionInputControlled};
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 7379b5e0..a7789881 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,12 +1,12 @@
 import React, {Fragment, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet} from 'react-native';
+import {ScrollView, StyleSheet, View} from 'react-native';
 import {MentionSuggestionsProps} from 'react-native-controlled-mentions';
 import {useSelector} from 'react-redux';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType} from '../../types';
-import {SCREEN_WIDTH, shuffle} from '../../utils';
+import {SCREEN_WIDTH, SCREEN_HEIGHT, shuffle} from '../../utils';
 import TaggUserRowCell from './TaggUserRowCell';
 
 const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
@@ -42,26 +42,29 @@ const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
   }
 
   return (
-    <ScrollView
-      style={[styles.container, {top: -(height + 30)}]}
-      showsVerticalScrollIndicator={false}
-      onLayout={(event) => {
-        setHeight(event.nativeEvent.layout.height);
-      }}
-      keyboardShouldPersistTaps={'always'}>
-      {results.map((user) => (
-        <TaggUserRowCell
-          onPress={() => {
-            setResults([]);
-            onSuggestionPress({
-              id: user.id,
-              name: user.username,
-            });
-          }}
-          user={user}
-        />
-      ))}
-    </ScrollView>
+    <View>
+      <View style={styles.overlay} />
+      <ScrollView
+        style={[styles.container, {top: -height}]}
+        showsVerticalScrollIndicator={false}
+        onLayout={(event) => {
+          setHeight(event.nativeEvent.layout.height);
+        }}
+        keyboardShouldPersistTaps={'always'}>
+        {results.map((user) => (
+          <TaggUserRowCell
+            onPress={() => {
+              setResults([]);
+              onSuggestionPress({
+                id: user.id,
+                name: user.username,
+              });
+            }}
+            user={user}
+          />
+        ))}
+      </ScrollView>
+    </View>
   );
 };
 
@@ -75,10 +78,22 @@ const styles = StyleSheet.create({
     // borderRadius: 10,
     backgroundColor: 'white',
     position: 'absolute',
+    // bottom: 0,
     alignSelf: 'center',
     zIndex: 1,
     // borderWidth: 1,
   },
+  overlay: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'gray',
+    opacity: 0.4,
+    position: 'absolute',
+    alignSelf: 'center',
+    // left: 0,
+    bottom: 0,
+    zIndex: -1,
+  },
 });
 
 export default TaggTypeahead;
-- 
cgit v1.2.3-70-g09d2


From 5d8357b7e370a51a5f13b316582bcbcd595566d9 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Tue, 15 Jun 2021 01:17:40 +0900
Subject: Correct positioning

---
 src/components/comments/AddComment.tsx             |  2 --
 src/components/comments/MentionInputControlled.tsx | 42 ++++++++++++++--------
 src/components/common/TaggTypeahead.tsx            | 10 ++----
 3 files changed, 30 insertions(+), 24 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index c17fdd93..c48ce627 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -137,8 +137,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     width: SCREEN_WIDTH,
-    // paddingTop: 10,
-    // marginTop: 10,
   },
   textContainer: {
     width: '95%',
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index a3229bb0..c37d2182 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -1,17 +1,27 @@
-import React, {FC, MutableRefObject, useMemo, useRef, useState} from 'react';
+import React, {
+  FC,
+  MutableRefObject,
+  Ref,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   NativeSyntheticEvent,
   StyleSheet,
+  StyleProp,
   Text,
   TextInput,
+  TextInputProps,
   TextInputSelectionChangeEventData,
   TouchableOpacity,
   View,
+  ViewStyle,
 } from 'react-native';
 import {useDispatch, useSelector} from 'react-redux';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {
-  MentionInputProps,
+  PatternPartType,
   MentionPartType,
   Suggestion,
 } from 'react-native-controlled-mentions/dist/types';
@@ -29,7 +39,22 @@ import {normalize} from 'react-native-elements';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
 
-const MentionInputControlled: FC<MentionInputProps> = ({
+type PartType = MentionPartType | PatternPartType;
+
+type MentionInputControlledProps = Omit<TextInputProps, 'onChange'> & {
+  value: string;
+  onChange: (value: string) => any;
+
+  partTypes?: PartType[];
+
+  inputRef?: Ref<TextInput>;
+
+  containerStyle?: StyleProp<ViewStyle>;
+
+  addComment?: () => any;
+};
+
+const MentionInputControlled: FC<MentionInputControlledProps> = ({
   value,
   onChange,
 
@@ -225,14 +250,12 @@ const styles = StyleSheet.create({
     marginRight: 10,
     marginLeft: '3%',
     marginVertical: '2%',
-    // alignSelf: 'flex-end',
   },
   containerStyle: {
     flexDirection: 'row',
     alignSelf: 'center',
     alignItems: 'center',
     justifyContent: 'center',
-    // borderWidth: 1,
     height: normalize(40),
   },
   submitButton: {
@@ -247,15 +270,6 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
   },
   text: {flex: 1},
-  overlay: {
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
-    backgroundColor: 'blue',
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-    zIndex: -1,
-  },
 });
 
 export {MentionInputControlled};
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index a7789881..6686b4d9 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -70,18 +70,13 @@ const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    // marginLeft: SCREEN_WIDTH * 0.05,
-    // marginLeft: 20,
-    // margin: 50,
     width: SCREEN_WIDTH,
     maxHeight: 264,
-    // borderRadius: 10,
     backgroundColor: 'white',
     position: 'absolute',
-    // bottom: 0,
     alignSelf: 'center',
     zIndex: 1,
-    // borderWidth: 1,
+    margin: -10,
   },
   overlay: {
     width: SCREEN_WIDTH,
@@ -90,8 +85,7 @@ const styles = StyleSheet.create({
     opacity: 0.4,
     position: 'absolute',
     alignSelf: 'center',
-    // left: 0,
-    bottom: 0,
+    bottom: 10,
     zIndex: -1,
   },
 });
-- 
cgit v1.2.3-70-g09d2


From bc2c093e9342ed8deb98652d1c278417dd6435f3 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Tue, 15 Jun 2021 03:53:00 +0900
Subject: Fixed styles for comments vs captions

---
 src/components/comments/AddComment.tsx  |  2 +-
 src/components/common/TaggTypeahead.tsx | 23 ++++++++++++++++++-----
 src/screens/profile/CaptionScreen.tsx   |  2 +-
 src/utils/comments.tsx                  | 11 +++++++----
 4 files changed, 27 insertions(+), 11 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index c48ce627..db85d525 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -122,7 +122,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
               );
             }}
             inputRef={ref}
-            partTypes={mentionPartTypes('blue')}
+            partTypes={mentionPartTypes('blue', 'comment')}
             addComment={addComment}
           />
         </View>
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 6686b4d9..6b3df559 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,21 +1,35 @@
 import React, {Fragment, useEffect, useState} from 'react';
 import {ScrollView, StyleSheet, View} from 'react-native';
-import {MentionSuggestionsProps} from 'react-native-controlled-mentions';
+import {Suggestion} from 'react-native-controlled-mentions';
 import {useSelector} from 'react-redux';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType} from '../../types';
-import {SCREEN_WIDTH, SCREEN_HEIGHT, shuffle} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
 import TaggUserRowCell from './TaggUserRowCell';
 
-const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
+type TaggTypeaheadProps = {
+  keyword: string | undefined;
+  component: string | undefined;
+  onSuggestionPress: (suggestion: Suggestion) => void;
+};
+
+const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   keyword,
+  component,
   onSuggestionPress,
 }) => {
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
   const [height, setHeight] = useState(0);
+  const [margin, setMargin] = useState(0);
+
+  useEffect(() => {
+    if (component === 'comment') {
+      setMargin(-10);
+    }
+  }, [component]);
 
   useEffect(() => {
     if (keyword === '') {
@@ -45,7 +59,7 @@ const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
     <View>
       <View style={styles.overlay} />
       <ScrollView
-        style={[styles.container, {top: -height}]}
+        style={[styles.container, {top: -height, margin: margin}]}
         showsVerticalScrollIndicator={false}
         onLayout={(event) => {
           setHeight(event.nativeEvent.layout.height);
@@ -76,7 +90,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     alignSelf: 'center',
     zIndex: 1,
-    margin: -10,
   },
   overlay: {
     width: SCREEN_WIDTH,
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 8bffd82b..05095d16 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -167,7 +167,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               placeholderTextColor="gray"
               value={caption}
               onChange={setCaption}
-              partTypes={mentionPartTypes('blue')}
+              partTypes={mentionPartTypes('blue', 'caption')}
             />
             <TouchableOpacity
               onPress={() =>
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index 5c17cefe..80786b74 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -79,13 +79,16 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
   );
 };
 
-export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = (
-  style,
-) => {
+export const mentionPartTypes: (
+  style: 'blue' | 'white',
+  component: 'caption' | 'comment',
+) => PartType[] = (style, component) => {
   return [
     {
       trigger: '@',
-      renderSuggestions: (props) => <TaggTypeahead {...props} />,
+      renderSuggestions: (props) => (
+        <TaggTypeahead component={component} {...props} />
+      ),
       allowedSpacesCount: 0,
       isInsertSpaceAfterMention: true,
       textStyle:
-- 
cgit v1.2.3-70-g09d2


From 6ee452c257d388913a1effd817c37bef638bc179 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Tue, 15 Jun 2021 12:21:53 +0900
Subject: Fix bug in caption screen of suggestions not disappearing

---
 src/components/comments/AddComment.tsx             |   5 +-
 src/components/comments/CommentTextField.tsx       | 162 +++++++++++++++++++++
 src/components/comments/MentionInputControlled.tsx | 106 ++++++--------
 src/components/comments/index.ts                   |   1 +
 src/screens/profile/CaptionScreen.tsx              |   4 +-
 5 files changed, 210 insertions(+), 68 deletions(-)
 create mode 100644 src/components/comments/CommentTextField.tsx

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index db85d525..3c0e9a0a 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -18,8 +18,8 @@ import {RootState} from '../../store/rootreducer';
 import {CommentThreadType, CommentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
-import {Avatar} from '../common';
-import {MentionInputControlled} from './MentionInputControlled';
+import {CommentTextField} from './CommentTextField';
+import MentionInputControlled from './MentionInputControlled';
 import {normalize} from 'react-native-elements';
 
 export interface AddCommentProps {
@@ -124,6 +124,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
             inputRef={ref}
             partTypes={mentionPartTypes('blue', 'comment')}
             addComment={addComment}
+            NewText={CommentTextField}
           />
         </View>
       </View>
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
new file mode 100644
index 00000000..61b489bb
--- /dev/null
+++ b/src/components/comments/CommentTextField.tsx
@@ -0,0 +1,162 @@
+import React, {
+  FC,
+  MutableRefObject,
+  Ref,
+  useMemo,
+  useRef,
+  useState,
+  ReactFragment,
+} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  StyleProp,
+  Text,
+  TextInput,
+  TextInputProps,
+  TextInputSelectionChangeEventData,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {useDispatch, useSelector} from 'react-redux';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {
+  Part,
+  PartType,
+  PatternPartType,
+  MentionPartType,
+  Suggestion,
+} from 'react-native-controlled-mentions/dist/types';
+import {
+  defaultMentionTextStyle,
+  generateValueFromPartsAndChangedText,
+  generateValueWithAddedSuggestion,
+  getMentionPartSuggestionKeywords,
+  isMentionPartType,
+  parseValue,
+} from 'react-native-controlled-mentions/dist/utils';
+import {Avatar} from '../common';
+import {normalize} from 'react-native-elements';
+
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
+
+type CommentTextFieldProps = {
+  containerStyle: StyleProp<ViewStyle>;
+  validateInput: any;
+  keyboardText: string;
+  partTypes: PartType[];
+  renderMentionSuggestions: (mentionType: MentionPartType) => ReactFragment;
+  handleTextInputRef: (ref: TextInput) => null;
+  onChangeInput: (changedText: string) => null;
+  handleSelectionChange: (
+    event: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
+  ) => null;
+  parts: Part[];
+  addComment: () => any;
+};
+
+const CommentTextField: FC<CommentTextFieldProps> = ({
+  containerStyle,
+  validateInput,
+  keyboardText,
+  partTypes,
+  renderMentionSuggestions,
+  handleTextInputRef,
+  onChangeInput,
+  handleSelectionChange,
+  parts,
+  addComment,
+  ...textInputProps
+}) => {
+  const {avatar} = useSelector((state: RootState) => state.user);
+
+  return (
+    <View style={containerStyle}>
+      {validateInput(keyboardText)
+        ? (
+            partTypes.filter(
+              (one) =>
+                isMentionPartType(one) &&
+                one.renderSuggestions != null &&
+                !one.isBottomMentionSuggestionsRender,
+            ) as MentionPartType[]
+          ).map(renderMentionSuggestions)
+        : null}
+
+      <View style={styles.containerStyle}>
+        <Avatar style={styles.avatar} uri={avatar} />
+        <TextInput
+          multiline
+          {...textInputProps}
+          ref={handleTextInputRef}
+          onChangeText={onChangeInput}
+          onSelectionChange={handleSelectionChange}
+          style={styles.text}>
+          <Text>
+            {parts.map(({text, partType, data}, index) =>
+              partType ? (
+                <Text
+                  key={`${index}-${data?.trigger ?? 'pattern'}`}
+                  style={partType.textStyle ?? defaultMentionTextStyle}>
+                  {text}
+                </Text>
+              ) : (
+                <Text key={index}>{text}</Text>
+              ),
+            )}
+          </Text>
+        </TextInput>
+        <View style={styles.submitButton}>
+          <TouchableOpacity style={styles.submitButton} onPress={addComment}>
+            <UpArrowIcon width={35} height={35} color={'white'} />
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {validateInput(keyboardText)
+        ? (
+            partTypes.filter(
+              (one) =>
+                isMentionPartType(one) &&
+                one.renderSuggestions != null &&
+                one.isBottomMentionSuggestionsRender,
+            ) as MentionPartType[]
+          ).map(renderMentionSuggestions)
+        : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  avatar: {
+    height: 35,
+    width: 35,
+    borderRadius: 30,
+    marginRight: 10,
+    marginLeft: '3%',
+    marginVertical: '2%',
+  },
+  containerStyle: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: normalize(40),
+  },
+  submitButton: {
+    height: 35,
+    width: 35,
+    backgroundColor: TAGG_LIGHT_BLUE,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  text: {flex: 1},
+});
+
+export {CommentTextField};
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index c37d2182..50762ac0 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useRef,
   useState,
+  ReactFragment,
 } from 'react';
 import {
   NativeSyntheticEvent,
@@ -51,7 +52,9 @@ type MentionInputControlledProps = Omit<TextInputProps, 'onChange'> & {
 
   containerStyle?: StyleProp<ViewStyle>;
 
-  addComment?: () => any;
+  addComment?: () => any | null;
+
+  NewText?: FC<any>;
 };
 
 const MentionInputControlled: FC<MentionInputControlledProps> = ({
@@ -68,6 +71,8 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
 
   addComment,
 
+  NewText,
+
   ...textInputProps
 }) => {
   const textInput = useRef<TextInput | null>(null);
@@ -76,8 +81,6 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
 
   const [keyboardText, setKeyboardText] = useState<string>('');
 
-  const {avatar} = useSelector((state: RootState) => state.user);
-
   const validRegex = () => {
     if (partTypes.length === 0) {
       return /.*@[^ ]*$/;
@@ -185,7 +188,21 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
     return validRegex().test(testString);
   };
 
-  return (
+  return NewText ? (
+    <NewText
+      {...textInputProps}
+      containerStyle={containerStyle}
+      validateInput={validateInput}
+      keyboardText={keyboardText}
+      partTypes={partTypes}
+      renderMentionSuggestions={renderMentionSuggestions}
+      handleTextInputRef={handleTextInputRef}
+      onChangeInput={onChangeInput}
+      handleSelectionChange={handleSelectionChange}
+      parts={parts}
+      addComment={addComment}
+    />
+  ) : (
     <View style={containerStyle}>
       {validateInput(keyboardText)
         ? (
@@ -198,35 +215,26 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
           ).map(renderMentionSuggestions)
         : null}
 
-      <View style={styles.containerStyle}>
-        <Avatar style={styles.avatar} uri={avatar} />
-        <TextInput
-          multiline
-          {...textInputProps}
-          ref={handleTextInputRef}
-          onChangeText={onChangeInput}
-          onSelectionChange={handleSelectionChange}
-          style={styles.text}>
-          <Text>
-            {parts.map(({text, partType, data}, index) =>
-              partType ? (
-                <Text
-                  key={`${index}-${data?.trigger ?? 'pattern'}`}
-                  style={partType.textStyle ?? defaultMentionTextStyle}>
-                  {text}
-                </Text>
-              ) : (
-                <Text key={index}>{text}</Text>
-              ),
-            )}
-          </Text>
-        </TextInput>
-        <View style={styles.submitButton}>
-          <TouchableOpacity style={styles.submitButton} onPress={addComment}>
-            <UpArrowIcon width={35} height={35} color={'white'} />
-          </TouchableOpacity>
-        </View>
-      </View>
+      <TextInput
+        multiline
+        {...textInputProps}
+        ref={handleTextInputRef}
+        onChangeText={onChangeInput}
+        onSelectionChange={handleSelectionChange}>
+        <Text>
+          {parts.map(({text, partType, data}, index) =>
+            partType ? (
+              <Text
+                key={`${index}-${data?.trigger ?? 'pattern'}`}
+                style={partType.textStyle ?? defaultMentionTextStyle}>
+                {text}
+              </Text>
+            ) : (
+              <Text key={index}>{text}</Text>
+            ),
+          )}
+        </Text>
+      </TextInput>
 
       {validateInput(keyboardText)
         ? (
@@ -242,34 +250,4 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  avatar: {
-    height: 35,
-    width: 35,
-    borderRadius: 30,
-    marginRight: 10,
-    marginLeft: '3%',
-    marginVertical: '2%',
-  },
-  containerStyle: {
-    flexDirection: 'row',
-    alignSelf: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: normalize(40),
-  },
-  submitButton: {
-    height: 35,
-    width: 35,
-    backgroundColor: TAGG_LIGHT_BLUE,
-    borderRadius: 999,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: '3%',
-    marginVertical: '2%',
-    alignSelf: 'flex-end',
-  },
-  text: {flex: 1},
-});
-
-export {MentionInputControlled};
+export default MentionInputControlled;
diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts
index 6293f799..653f594c 100644
--- a/src/components/comments/index.ts
+++ b/src/components/comments/index.ts
@@ -1,3 +1,4 @@
 export {default as CommentsCount} from '../comments/CommentsCount';
 export {default as CommentTile} from './CommentTile';
 export {default as AddComment} from './AddComment';
+export {default as MentionInputControlled} from './MentionInputControlled';
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 05095d16..755c668b 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -13,7 +13,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {MentionInput} from 'react-native-controlled-mentions';
+import {MentionInputControlled} from '../../components';
 import {Button, normalize} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
@@ -161,7 +161,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               source={{uri: image.path}}
               resizeMode={'cover'}
             />
-            <MentionInput
+            <MentionInputControlled
               containerStyle={styles.text}
               placeholder="Write something....."
               placeholderTextColor="gray"
-- 
cgit v1.2.3-70-g09d2


From c57b4959c90cec90dd0936f75a9086a4430b66b1 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Tue, 15 Jun 2021 12:26:02 +0900
Subject: Fix yarn

---
 src/components/comments/AddComment.tsx             |  6 +-----
 src/components/comments/CommentTextField.tsx       | 21 +++------------------
 src/components/comments/MentionInputControlled.tsx | 10 ----------
 3 files changed, 4 insertions(+), 33 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 3c0e9a0a..01325475 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -7,14 +7,11 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useDispatch, useSelector} from 'react-redux';
-import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {useDispatch} from 'react-redux';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
 import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
-import {RootState} from '../../store/rootreducer';
 import {CommentThreadType, CommentType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
@@ -33,7 +30,6 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
   const [inReplyToMention, setInReplyToMention] = useState('');
   const [comment, setComment] = useState('');
   const [keyboardVisible, setKeyboardVisible] = useState(false);
-  const {avatar} = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const ref = useRef<TextInput>(null);
   const isReplyingToComment =
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
index 61b489bb..3e97449c 100644
--- a/src/components/comments/CommentTextField.tsx
+++ b/src/components/comments/CommentTextField.tsx
@@ -1,46 +1,31 @@
-import React, {
-  FC,
-  MutableRefObject,
-  Ref,
-  useMemo,
-  useRef,
-  useState,
-  ReactFragment,
-} from 'react';
+import React, {FC, ReactFragment} from 'react';
 import {
   NativeSyntheticEvent,
   StyleSheet,
   StyleProp,
   Text,
   TextInput,
-  TextInputProps,
   TextInputSelectionChangeEventData,
   TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
-import {useDispatch, useSelector} from 'react-redux';
+import {useSelector} from 'react-redux';
 import {TAGG_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootReducer';
 import {
   Part,
   PartType,
-  PatternPartType,
   MentionPartType,
-  Suggestion,
 } from 'react-native-controlled-mentions/dist/types';
 import {
   defaultMentionTextStyle,
-  generateValueFromPartsAndChangedText,
-  generateValueWithAddedSuggestion,
-  getMentionPartSuggestionKeywords,
   isMentionPartType,
-  parseValue,
 } from 'react-native-controlled-mentions/dist/utils';
 import {Avatar} from '../common';
 import {normalize} from 'react-native-elements';
 
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
-import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
 
 type CommentTextFieldProps = {
   containerStyle: StyleProp<ViewStyle>;
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index 50762ac0..de52d1c1 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -5,22 +5,17 @@ import React, {
   useMemo,
   useRef,
   useState,
-  ReactFragment,
 } from 'react';
 import {
   NativeSyntheticEvent,
-  StyleSheet,
   StyleProp,
   Text,
   TextInput,
   TextInputProps,
   TextInputSelectionChangeEventData,
-  TouchableOpacity,
   View,
   ViewStyle,
 } from 'react-native';
-import {useDispatch, useSelector} from 'react-redux';
-import {TAGG_LIGHT_BLUE} from '../../constants';
 import {
   PatternPartType,
   MentionPartType,
@@ -34,11 +29,6 @@ import {
   isMentionPartType,
   parseValue,
 } from 'react-native-controlled-mentions/dist/utils';
-import {Avatar} from '../common';
-import {normalize} from 'react-native-elements';
-
-import UpArrowIcon from '../../assets/icons/up_arrow.svg';
-import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
 
 type PartType = MentionPartType | PatternPartType;
 
-- 
cgit v1.2.3-70-g09d2


From 41a9ecf350ccc1567e7cbf9c0a3413565d2397f7 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 16 Jun 2021 23:11:49 +0900
Subject: Fix issue with background messing up appearance of AddComment
 elsewhere

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

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 01325475..4a1822a3 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -130,7 +130,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#f7f7f7',
+    // backgroundColor: '#f7f7f7',
     alignItems: 'center',
     justifyContent: 'center',
     width: SCREEN_WIDTH,
diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
index f6b9d75b..d4729888 100644
--- a/src/components/moments/MomentCommentPreview.tsx
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -9,7 +9,7 @@ import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 
 interface MomentCommentPreviewProps {
   momentId: string;
-  commentsCount: number | null;
+  commentsCount: number;
   commentPreview: MomentCommentPreviewType | null;
   screenType: ScreenType;
 }
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 7dfe8ae9..402e5f44 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -48,9 +48,8 @@ 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 902ad06d502024e1e42187887e07a7ac59d662e8 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 16 Jun 2021 23:14:13 +0900
Subject: Remove some comments

---
 src/components/comments/AddComment.tsx | 8 --------
 1 file changed, 8 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 4a1822a3..eda04752 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -130,31 +130,23 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
 
 const styles = StyleSheet.create({
   container: {
-    // backgroundColor: '#f7f7f7',
     alignItems: 'center',
     justifyContent: 'center',
     width: SCREEN_WIDTH,
   },
   textContainer: {
     width: '95%',
-    // flexDirection: 'row',
     backgroundColor: '#e8e8e8',
     alignItems: 'center',
-    // alignSelf: 'center',
     justifyContent: 'space-between',
-    // justifyContent: 'center',
     margin: '3%',
     borderRadius: 25,
-    // borderWidth: 1,
-    // flex: 1,
     height: normalize(45),
   },
   text: {
     flex: 1,
     padding: '1%',
-    // marginHorizontal: '1%',
     maxHeight: 100,
-    // borderWidth: 1,
   },
   avatar: {
     height: 35,
-- 
cgit v1.2.3-70-g09d2


From 8560936e0dc21ee2d06677c766a0bbcbc93b6de0 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 16 Jun 2021 23:53:03 +0900
Subject: Further merges with master

---
 src/components/comments/AddComment.tsx             | 84 ++++++++++++++--------
 src/components/comments/CommentTextField.tsx       | 28 ++++++--
 src/components/comments/MentionInputControlled.tsx | 15 ++++
 3 files changed, 94 insertions(+), 33 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index eda04752..a510c355 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -22,9 +22,20 @@ import {normalize} from 'react-native-elements';
 export interface AddCommentProps {
   momentId: string;
   placeholderText: string;
+  callback?: (message: string) => void;
+  onFocus?: () => void;
+  isKeyboardAvoiding?: boolean;
+  theme?: 'dark' | 'white';
 }
 
-const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
+const AddComment: React.FC<AddCommentProps> = ({
+  momentId,
+  placeholderText,
+  callback = (_) => null,
+  onFocus = () => null,
+  isKeyboardAvoiding = true,
+  theme = 'white',
+}) => {
   const {setShouldUpdateAllComments, commentTapped} =
     useContext(CommentContext);
   const [inReplyToMention, setInReplyToMention] = useState('');
@@ -47,13 +58,15 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
     if (trimmed === '') {
       return;
     }
+    const message = inReplyToMention + trimmed;
     const postedComment = await postComment(
-      inReplyToMention + trimmed,
+      message,
       objectId,
       isReplyingToComment || isReplyingToReply,
     );
 
     if (postedComment) {
+      callback(message);
       setComment('');
       setInReplyToMention('');
 
@@ -97,41 +110,56 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
     }
   }, [isReplyingToComment, isReplyingToReply, commentTapped]);
 
-  return (
+  const mainContent = () => (
+    <View
+      style={[
+        theme === 'white' ? styles.containerWhite : styles.containerDark,
+        keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
+      ]}>
+      <View style={styles.textContainer}>
+        <MentionInputControlled
+          containerStyle={styles.text}
+          placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
+          placeholder={placeholderText}
+          value={inReplyToMention + comment}
+          onFocus={onFocus}
+          onChange={(newText: string) => {
+            // skipping the `inReplyToMention` text
+            setComment(
+              newText.substring(inReplyToMention.length, newText.length),
+            );
+          }}
+          inputRef={ref}
+          partTypes={mentionPartTypes('blue', 'comment')}
+          addComment={addComment}
+          NewText={CommentTextField}
+          theme={theme}
+          keyboardVisible={keyboardVisible}
+          comment={comment}
+        />
+      </View>
+    </View>
+  );
+
+  return isKeyboardAvoiding ? (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
-      <View
-        style={[
-          styles.container,
-          keyboardVisible ? styles.whiteBackround : {},
-        ]}>
-        <View style={styles.textContainer}>
-          <MentionInputControlled
-            containerStyle={styles.text}
-            placeholder={placeholderText}
-            value={inReplyToMention + comment}
-            onChange={(newText: string) => {
-              // skipping the `inReplyToMention` text
-              setComment(
-                newText.substring(inReplyToMention.length, newText.length),
-              );
-            }}
-            inputRef={ref}
-            partTypes={mentionPartTypes('blue', 'comment')}
-            addComment={addComment}
-            NewText={CommentTextField}
-          />
-        </View>
-      </View>
+      {mainContent()}
     </KeyboardAvoidingView>
+  ) : (
+    mainContent()
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
+  containerDark: {
+    alignItems: 'center',
+    width: SCREEN_WIDTH,
+  },
+  containerWhite: {
+    backgroundColor: '#f7f7f7',
     alignItems: 'center',
-    justifyContent: 'center',
     width: SCREEN_WIDTH,
   },
   textContainer: {
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
index 3e97449c..a3a14ec8 100644
--- a/src/components/comments/CommentTextField.tsx
+++ b/src/components/comments/CommentTextField.tsx
@@ -40,6 +40,9 @@ type CommentTextFieldProps = {
   ) => null;
   parts: Part[];
   addComment: () => any;
+  theme?: 'dark' | 'white';
+  keyboardVisible?: boolean;
+  comment?: string;
 };
 
 const CommentTextField: FC<CommentTextFieldProps> = ({
@@ -53,6 +56,9 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
   handleSelectionChange,
   parts,
   addComment,
+  theme = 'white',
+  keyboardVisible = true,
+  comment = '',
   ...textInputProps
 }) => {
   const {avatar} = useSelector((state: RootState) => state.user);
@@ -93,11 +99,20 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
             )}
           </Text>
         </TextInput>
-        <View style={styles.submitButton}>
-          <TouchableOpacity style={styles.submitButton} onPress={addComment}>
-            <UpArrowIcon width={35} height={35} color={'white'} />
-          </TouchableOpacity>
-        </View>
+        {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
+          <View style={styles.submitButton}>
+            <TouchableOpacity
+              style={
+                comment === ''
+                  ? [styles.submitButton, styles.greyButton]
+                  : styles.submitButton
+              }
+              disabled={comment === ''}
+              onPress={addComment}>
+              <UpArrowIcon width={35} height={35} color={'white'} />
+            </TouchableOpacity>
+          </View>
+        )}
       </View>
 
       {validateInput(keyboardText)
@@ -130,6 +145,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: normalize(40),
   },
+  greyButton: {
+    backgroundColor: 'grey',
+  },
   submitButton: {
     height: 35,
     width: 35,
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index de52d1c1..0965e318 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -45,6 +45,12 @@ type MentionInputControlledProps = Omit<TextInputProps, 'onChange'> & {
   addComment?: () => any | null;
 
   NewText?: FC<any>;
+
+  theme?: 'dark' | 'white';
+
+  keyboardVisible?: boolean;
+
+  comment?: string;
 };
 
 const MentionInputControlled: FC<MentionInputControlledProps> = ({
@@ -63,6 +69,12 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
 
   NewText,
 
+  theme = 'white',
+
+  keyboardVisible = true,
+
+  comment = '',
+
   ...textInputProps
 }) => {
   const textInput = useRef<TextInput | null>(null);
@@ -191,6 +203,9 @@ const MentionInputControlled: FC<MentionInputControlledProps> = ({
       handleSelectionChange={handleSelectionChange}
       parts={parts}
       addComment={addComment}
+      theme={theme}
+      keyboardVisible={keyboardVisible}
+      comment={comment}
     />
   ) : (
     <View style={containerStyle}>
-- 
cgit v1.2.3-70-g09d2


From 867484bac72a64231e57f96fdc4ce813930f75f6 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 16 Jun 2021 23:57:21 +0900
Subject: Rework some sizes, more closely match master

---
 src/components/comments/AddComment.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index a510c355..fd7d819a 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -169,11 +169,11 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     margin: '3%',
     borderRadius: 25,
-    height: normalize(45),
+    height: normalize(40),
   },
   text: {
     flex: 1,
-    padding: '1%',
+    // padding: '1%',
     maxHeight: 100,
   },
   avatar: {
-- 
cgit v1.2.3-70-g09d2


From 6fcd7b41cd763e95733187c6c4d48ddb6e9bd01a Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 17 Jun 2021 16:21:57 +0900
Subject: Made edits

---
 src/components/comments/AddComment.tsx          |  6 ++----
 src/components/comments/CommentTextField.tsx    | 23 +++++++++++------------
 src/components/common/TaggTypeahead.tsx         |  8 +-------
 src/components/moments/MomentCommentPreview.tsx |  2 +-
 4 files changed, 15 insertions(+), 24 deletions(-)

(limited to 'src/components/comments/AddComment.tsx')

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index fd7d819a..8a4ec082 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -13,11 +13,10 @@ import {CommentContext} from '../../screens/profile/MomentCommentsScreen';
 import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
 import {CommentThreadType, CommentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, normalize} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 import {CommentTextField} from './CommentTextField';
 import MentionInputControlled from './MentionInputControlled';
-import {normalize} from 'react-native-elements';
 
 export interface AddCommentProps {
   momentId: string;
@@ -169,11 +168,10 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     margin: '3%',
     borderRadius: 25,
-    height: normalize(40),
+    height: normalize(45),
   },
   text: {
     flex: 1,
-    // padding: '1%',
     maxHeight: 100,
   },
   avatar: {
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
index a3a14ec8..6e92329c 100644
--- a/src/components/comments/CommentTextField.tsx
+++ b/src/components/comments/CommentTextField.tsx
@@ -23,7 +23,7 @@ import {
   isMentionPartType,
 } from 'react-native-controlled-mentions/dist/utils';
 import {Avatar} from '../common';
-import {normalize} from 'react-native-elements';
+import {normalize} from '../../utils';
 
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 
@@ -115,16 +115,15 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
         )}
       </View>
 
-      {validateInput(keyboardText)
-        ? (
-            partTypes.filter(
-              (one) =>
-                isMentionPartType(one) &&
-                one.renderSuggestions != null &&
-                one.isBottomMentionSuggestionsRender,
-            ) as MentionPartType[]
-          ).map(renderMentionSuggestions)
-        : null}
+      {validateInput(keyboardText) &&
+        (
+          partTypes.filter(
+            (one) =>
+              isMentionPartType(one) &&
+              one.renderSuggestions != null &&
+              one.isBottomMentionSuggestionsRender,
+          ) as MentionPartType[]
+        ).map(renderMentionSuggestions)}
     </View>
   );
 };
@@ -143,7 +142,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     alignItems: 'center',
     justifyContent: 'center',
-    height: normalize(40),
+    height: normalize(45),
   },
   greyButton: {
     backgroundColor: 'grey',
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 6b3df559..7967fdbc 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -23,13 +23,7 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
   const [height, setHeight] = useState(0);
-  const [margin, setMargin] = useState(0);
-
-  useEffect(() => {
-    if (component === 'comment') {
-      setMargin(-10);
-    }
-  }, [component]);
+  const margin = component === 'comment' ? -10 : 0;
 
   useEffect(() => {
     if (keyword === '') {
diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx
index d4729888..232568f1 100644
--- a/src/components/moments/MomentCommentPreview.tsx
+++ b/src/components/moments/MomentCommentPreview.tsx
@@ -52,7 +52,7 @@ const MomentCommentPreview: React.FC<MomentCommentPreviewProps> = ({
             {renderTextWithMentions({
               value: commentPreview.comment,
               styles: styles.normalFont,
-              partTypes: mentionPartTypes('white'),
+              partTypes: mentionPartTypes('white', 'comment'),
               onPress: (user: UserType) =>
                 navigateToProfile(
                   state,
-- 
cgit v1.2.3-70-g09d2

