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/CommentTextField.tsx | 162 +++++++++++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 src/components/comments/CommentTextField.tsx

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

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};
-- 
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/CommentTextField.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 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/CommentTextField.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 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/CommentTextField.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


From 7ad33344681b430feff9b00392bf6d8e9e1722e7 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 25 Jun 2021 17:47:07 -0400
Subject: Remove unused styles, Fix comment navigation, Fix add comment

---
 src/components/comments/AddComment.tsx       | 23 +----------------------
 src/components/comments/CommentTextField.tsx | 26 ++++++++++++--------------
 src/components/moments/MomentPost.tsx        |  1 +
 3 files changed, 14 insertions(+), 36 deletions(-)

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

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 8a4ec082..33707d94 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -8,12 +8,11 @@ import {
   View,
 } from 'react-native';
 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 {CommentThreadType, CommentType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, normalize} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 import {CommentTextField} from './CommentTextField';
 import MentionInputControlled from './MentionInputControlled';
@@ -174,26 +173,6 @@ const styles = StyleSheet.create({
     flex: 1,
     maxHeight: 100,
   },
-  avatar: {
-    height: 35,
-    width: 35,
-    borderRadius: 30,
-    marginRight: 10,
-    marginLeft: '3%',
-    marginVertical: '2%',
-    alignSelf: 'flex-end',
-  },
-  submitButton: {
-    height: 35,
-    width: 35,
-    backgroundColor: TAGG_LIGHT_BLUE,
-    borderRadius: 999,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: '3%',
-    marginVertical: '2%',
-    alignSelf: 'flex-end',
-  },
   whiteBackround: {
     backgroundColor: '#fff',
   },
diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
index 6e92329c..65a237e7 100644
--- a/src/components/comments/CommentTextField.tsx
+++ b/src/components/comments/CommentTextField.tsx
@@ -99,20 +99,18 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
             )}
           </Text>
         </TextInput>
-        {(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 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) &&
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 70bea442..e55c93ba 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -396,6 +396,7 @@ const styles = StyleSheet.create({
   },
   commentsCountContainer: {
     position: 'absolute',
+    zIndex: 3,
     right: '2%',
     bottom: SCREEN_HEIGHT * 0.12,
   },
-- 
cgit v1.2.3-70-g09d2


From dcf45600b6e2be7820ed2d8c0f44603624f1e719 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 25 Jun 2021 18:01:41 -0400
Subject: Lint

---
 src/components/comments/CommentTextField.tsx | 19 +++++++------------
 src/components/moments/MomentPost.tsx        | 10 +---------
 2 files changed, 8 insertions(+), 21 deletions(-)

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

diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx
index 65a237e7..6d86eb3f 100644
--- a/src/components/comments/CommentTextField.tsx
+++ b/src/components/comments/CommentTextField.tsx
@@ -1,8 +1,8 @@
 import React, {FC, ReactFragment} from 'react';
 import {
   NativeSyntheticEvent,
-  StyleSheet,
   StyleProp,
+  StyleSheet,
   Text,
   TextInput,
   TextInputSelectionChangeEventData,
@@ -10,22 +10,21 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {useSelector} from 'react-redux';
-import {TAGG_LIGHT_BLUE} from '../../constants';
-import {RootState} from '../../store/rootReducer';
 import {
+  MentionPartType,
   Part,
   PartType,
-  MentionPartType,
 } from 'react-native-controlled-mentions/dist/types';
 import {
   defaultMentionTextStyle,
   isMentionPartType,
 } from 'react-native-controlled-mentions/dist/utils';
-import {Avatar} from '../common';
-import {normalize} from '../../utils';
-
+import {useSelector} from 'react-redux';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {normalize} from '../../utils';
+import {Avatar} from '../common';
 
 type CommentTextFieldProps = {
   containerStyle: StyleProp<ViewStyle>;
@@ -40,8 +39,6 @@ type CommentTextFieldProps = {
   ) => null;
   parts: Part[];
   addComment: () => any;
-  theme?: 'dark' | 'white';
-  keyboardVisible?: boolean;
   comment?: string;
 };
 
@@ -56,8 +53,6 @@ const CommentTextField: FC<CommentTextFieldProps> = ({
   handleSelectionChange,
   parts,
   addComment,
-  theme = 'white',
-  keyboardVisible = true,
   comment = '',
   ...textInputProps
 }) => {
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index e55c93ba..cb3a138b 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -1,13 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {
-  createRef,
-  LegacyRef,
-  MutableRefObject,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {
   Image,
   KeyboardAvoidingView,
-- 
cgit v1.2.3-70-g09d2