Merge pull request #404 from IvanIFChen/hotfix-mentions-bugfixes

[HOTFIX] Mentions Bugfixes

12 files changed, 68 insertions, 64 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index dd016109..9cf10b5e 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -123,7 +123,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
               );
             }}
             inputRef={ref}
-            partTypes={mentionPartTypes}
+            partTypes={mentionPartTypes('blue')}
           />
           <View style={styles.submitButton}>
             <TouchableOpacity style={styles.submitButton} onPress={addComment}>
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index ce346af5..ecdb4c30 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -25,7 +25,7 @@ import {
   normalize,
   SCREEN_WIDTH,
 } from '../../utils';
-import {renderTextWithMentions} from '../../utils/comments';
+import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 import {ProfilePreview} from '../profile';
 import CommentsContainer from './CommentsContainer';
 
@@ -152,6 +152,7 @@ const CommentTile: React.FC<CommentTileProps> = ({
           {renderTextWithMentions({
             value: commentObject.comment,
             styles: styles.comment,
+            partTypes: mentionPartTypes('blue'),
             onPress: (user: UserType) =>
               navigateToProfile(state, dispatch, navigation, screenType, user),
           })}
diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx
index d5d02a92..cd9ecb02 100644
--- a/src/components/comments/CommentsContainer.tsx
+++ b/src/components/comments/CommentsContainer.tsx
@@ -39,6 +39,7 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
   const [commentsList, setCommentsList] = useState<CommentType[]>([]);
   const dispatch = useDispatch();
   const ref = useRef<FlatList<CommentType>>(null);
+  const ITEM_HEIGHT = SCREEN_HEIGHT / 7.0;
 
   useEffect(() => {
     const loadComments = async () => {
@@ -61,22 +62,24 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
     };
   }, [shouldUpdate]);
 
+  // scrolls to the comment
   useEffect(() => {
-    const performAction = () => {
-      if (commentId) {
-        swapCommentTo(commentId, 0);
-      } else if (!isThread && !commentTapped) {
-        setTimeout(() => {
-          ref.current?.scrollToEnd({animated: true});
-        }, 500);
+    if (commentId) {
+      const index = commentsList.findIndex(
+        (item) => item.comment_id === commentId,
+      );
+      if (index > 0) {
+        let comments = [...commentsList];
+        const temp = comments[index];
+        comments[index] = comments[0];
+        comments[0] = temp;
+        setCommentsList(comments);
       }
-    };
-    if (commentsList) {
-      //Bring the relevant comment to top if a comment id is present else scroll if necessary
-      performAction();
+    } else if (!isThread && !commentTapped) {
+      setTimeout(() => {
+        ref.current?.scrollToEnd({animated: true});
+      }, 500);
     }
-
-    //Clean up the reply id present in store
     return () => {
       if (commentId && isThread) {
         setTimeout(() => {
@@ -84,23 +87,7 @@ const CommentsContainer: React.FC<CommentsContainerProps> = ({
         }, 200);
       }
     };
-  }, [commentsList, commentId]);
-
-  // eslint-disable-next-line no-shadow
-  const swapCommentTo = (commentId: string, toIndex: number) => {
-    const index = commentsList.findIndex(
-      (item) => item.comment_id === commentId,
-    );
-    if (index > 0) {
-      let comments = [...commentsList];
-      const temp = comments[index];
-      comments[index] = comments[toIndex];
-      comments[toIndex] = temp;
-      setCommentsList(comments);
-    }
-  };
-
-  const ITEM_HEIGHT = SCREEN_HEIGHT / 7.0;
+  }, [commentId]);
 
   const renderComment = ({item}: {item: CommentType | CommentThreadType}) => (
     <CommentTile
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 03034925..45186ba1 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -11,7 +11,7 @@ import {
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } from '../../utils';
-import {renderTextWithMentions} from '../../utils/comments';
+import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 import {CommentsCount} from '../comments';
 
 interface MomentPostContentProps extends ViewProps {
@@ -62,6 +62,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
       {renderTextWithMentions({
         value: caption,
         styles: styles.captionText,
+        partTypes: mentionPartTypes('white'),
         onPress: (user: UserType) =>
           navigateToProfile(state, dispatch, navigation, screenType, user),
       })}
@@ -101,7 +102,7 @@ const styles = StyleSheet.create({
     marginLeft: '5%',
     marginRight: '5%',
     color: '#ffffff',
-    fontWeight: 'bold',
+    fontWeight: '500',
   },
 });
 export default MomentPostContent;
diff --git a/src/components/moments/MomentPostHeader.tsx b/src/components/moments/MomentPostHeader.tsx
index 20d9150a..d2e9fc49 100644
--- a/src/components/moments/MomentPostHeader.tsx
+++ b/src/components/moments/MomentPostHeader.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   StyleSheet,
   Text,
@@ -51,6 +51,10 @@ const MomentPostHeader: React.FC<MomentPostHeaderProps> = ({
     });
   };
 
+  useEffect(() => {
+    setDrawerVisible(drawerVisible);
+  }, [drawerVisible]);
+
   return (
     <View style={[styles.container, style]}>
       <TouchableOpacity onPress={navigateToProfile} style={styles.header}>
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index ea1e5166..400a31e7 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,3 +1,4 @@
+import {useNavigation} from '@react-navigation/core';
 import React, {useContext} from 'react';
 import {
   Alert,
@@ -7,30 +8,29 @@ import {
   Text,
   View,
 } from 'react-native';
-import {normalize} from 'react-native-elements';
 import {useDispatch, useSelector, useStore} from 'react-redux';
+import {ChatContext} from '../../App';
 import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
+import {ERROR_UNABLE_CONNECT_CHAT} from '../../constants/strings';
 import {
   acceptFriendRequest,
   declineFriendRequest,
   updateUserXFriends,
   updateUserXProfileAllScreens,
 } from '../../store/actions';
-import {canViewProfile} from '../../utils/users';
 import {NO_PROFILE} from '../../store/initialStates';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
 import {
   createChannel,
   getUserAsProfilePreviewType,
+  normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } from '../../utils';
-import {FriendsButton, BasicButton} from '../common';
+import {canViewProfile} from '../../utils/users';
+import {BasicButton, FriendsButton} from '../common';
 import ToggleButton from './ToggleButton';
-import {ChatContext} from '../../App';
-import {useNavigation} from '@react-navigation/core';
-import {ERROR_UNABLE_CONNECT_CHAT} from '../../constants/strings';
 
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index ea36d58b..8a53178b 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -1,6 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {
   Keyboard,
+  LayoutChangeEvent,
   NativeSyntheticEvent,
   StyleSheet,
   Text,
@@ -10,14 +11,12 @@ import {
   TouchableOpacity,
   View,
   ViewStyle,
-  LayoutChangeEvent,
 } from 'react-native';
-import {normalize} from 'react-native-elements';
 import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/Feather';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
-import {getSearchSuggestions} from '../../utils';
+import {getSearchSuggestions, normalize} from '../../utils';
 
 const AnimatedIcon = Animated.createAnimatedComponent(Icon);
 
@@ -166,9 +165,9 @@ const styles = StyleSheet.create({
   },
   input: {
     flex: 1,
-    fontSize: 16,
+    fontSize: normalize(19),
     color: '#000',
-    letterSpacing: normalize(0.5),
+    letterSpacing: 0.5,
   },
   cancelButton: {
     height: '100%',
diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
index f72104d4..3e2dc851 100644
--- a/src/components/suggestedPeople/MutualFriends.tsx
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -1,10 +1,9 @@
 import React, {useState} from 'react';
 import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
-import {normalize} from 'react-native-elements';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import {BottomDrawer, TabsGradient} from '../../components';
 import {ProfilePreviewType, ScreenType} from '../../types';
-import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {ProfilePreview} from '../profile';
 
 interface MutualFriendsProps {
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index f5100e58..1105b6f9 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -2,7 +2,6 @@ import {RouteProp} from '@react-navigation/native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React from 'react';
 import {StyleSheet, Text} from 'react-native';
-import {normalize} from 'react-native-elements';
 import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
   AccountType,
@@ -34,7 +33,12 @@ import {
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
-import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
+import {
+  AvatarHeaderHeight,
+  ChatHeaderHeight,
+  normalize,
+  SCREEN_WIDTH,
+} from '../../utils';
 import {MainStack, MainStackParams} from './MainStackNavigator';
 
 /**
diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx
index 3531111b..91018d4c 100644
--- a/src/screens/chat/ChatSearchBar.tsx
+++ b/src/screens/chat/ChatSearchBar.tsx
@@ -10,8 +10,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {normalize} from 'react-native-elements';
 import Animated from 'react-native-reanimated';
+import {normalize} from '../../utils';
 
 interface SearchBarProps extends TextInputProps {
   onCancel: () => void;
@@ -76,9 +76,9 @@ const styles = StyleSheet.create({
   },
   input: {
     flex: 1,
-    fontSize: 16,
+    fontSize: normalize(16),
     color: '#000',
-    letterSpacing: normalize(0.5),
+    letterSpacing: 0.5,
   },
   cancelButton: {
     justifyContent: 'center',
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 041f0da2..a41abba6 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -116,7 +116,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               placeholderTextColor="gray"
               value={caption}
               onChange={setCaption}
-              partTypes={mentionPartTypes}
+              partTypes={mentionPartTypes('blue')}
             />
           </View>
         </KeyboardAvoidingView>
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index a71e3857..0d551682 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -55,6 +55,7 @@ const renderPart = (
 interface RenderProps {
   value: string;
   styles: StyleProp<TextStyle>;
+  partTypes: PartType[];
   onPress: (user: UserType) => void;
 }
 
@@ -66,9 +67,10 @@ interface RenderProps {
 export const renderTextWithMentions: React.FC<RenderProps> = ({
   value,
   styles,
+  partTypes,
   onPress,
 }) => {
-  const {parts} = parseValue(value, mentionPartTypes);
+  const {parts} = parseValue(value, partTypes);
   return (
     <Text style={styles}>
       {parts.map((part, index) => renderPart(part, index, onPress))}
@@ -76,12 +78,19 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
   );
 };
 
-export const mentionPartTypes: PartType[] = [
-  {
-    trigger: '@',
-    renderSuggestions: (props) => <TaggTypeahead {...props} />,
-    allowedSpacesCount: 0,
-    isInsertSpaceAfterMention: true,
-    textStyle: {color: TAGG_LIGHT_BLUE},
-  },
-];
+export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = (
+  style,
+) => {
+  return [
+    {
+      trigger: '@',
+      renderSuggestions: (props) => <TaggTypeahead {...props} />,
+      allowedSpacesCount: 0,
+      isInsertSpaceAfterMention: true,
+      textStyle:
+        style === 'blue'
+          ? {color: TAGG_LIGHT_BLUE}
+          : {color: 'white', fontWeight: '800'},
+    },
+  ];
+};