Merge pull request #2931 from ecency/nt/bot-filtered-waves

Nt/bot filtered waves

Author: feruzm

src/components/comment/view/commentView.tsx

@@ -63,7 +63,11 @@ const CommentView = ({
   const _currentUsername = currentAccountUsername || currentAccount?.username;
 
   const _showSubCommentsToggle = async (force = false) => {
-    if (!!handleOnToggleReplies && !!comment.commentKey && ((replies && replies.length > 0) || force)) {
+    if (
+      !!handleOnToggleReplies &&
+      !!comment.commentKey &&
+      ((replies && replies.length > 0) || force)
+    ) {
       setIsOpeningReplies(true);
       await delay(10); // hack to rendering inidcator first before start loading comments
       handleOnToggleReplies(comment.commentKey);

src/components/commentsModal/container/commentsModal.tsx

@@ -7,9 +7,9 @@ import Comments from '../../comments';
 import styles from '../styles/commentsModal.styles';
 
 /**
- * NOTE: this comments modal is in draft stage, right now rendering of 
- * content works great but actions do not respond as expected since most 
- * of action reply on modals and action sheets which causes a conflict with 
+ * NOTE: this comments modal is in draft stage, right now rendering of
+ * content works great but actions do not respond as expected since most
+ * of action reply on modals and action sheets which causes a conflict with
  * rendering comments in existing modal, similarly some actions require navigation
  * to different screen while comments modal is still visible on screen.
  */

src/components/index.tsx

@@ -273,6 +273,5 @@ export {
   PostTranslationModal,
   ImageViewer,
   WalkthroughMarker,
-  ProposalVoteRequest
-  
+  ProposalVoteRequest,
 };

src/components/postComments/children/botCommentsPreview.tsx

@@ -1,63 +1,59 @@
 import React, { useRef } from 'react';
 import { View, TouchableOpacity, Text } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
-import { CommentsModal, Icon, UserAvatar } from '../..';
-import styles from '../styles/botCommentsPreview.styles';
 import { useIntl } from 'react-intl';
 import { useNavigation } from '@react-navigation/native';
+import { CommentsModal, Icon, UserAvatar } from '../..';
+import styles from '../styles/botCommentsPreview.styles';
 import ROUTES from '../../../constants/routeNames';
 
 interface BotCommentsProps {
-    comments: any[];
+  comments: any[];
 }
 
 export const BotCommentsPreview = ({ comments }: BotCommentsProps) => {
-    const intl = useIntl();
-    const navigation = useNavigation();
-
-    const commentsModalRef = useRef<typeof CommentsModal>();
+  const intl = useIntl();
+  const navigation = useNavigation();
 
-    if (!comments?.length) {
-        return null;
-    }
+  const commentsModalRef = useRef<typeof CommentsModal>();
 
-    const _onPress = () => {
-        navigation.navigate({
-            name: ROUTES.MODALS.BOT_COMMENTS,
-            params: {
-                comments
-            }
-        });
-    }
+  if (!comments?.length) {
+    return null;
+  }
 
-    return (
-        <View style={styles.container}>
-            <View style={styles.labelWrapper}>
-                <Text style={styles.label}>
-                    {intl.formatMessage({ id: 'comments.bot_comments' })}
-                </Text>
-                <Icon
-                    iconType="AntDesign"
-                    name="right"
-                    size={14}
-                    color={EStyleSheet.value('$primaryDarkText')}
-                />
-            </View>
-            <TouchableOpacity
-                onPress={_onPress}
-            >
-                <View style={styles.botAvatarsWrapper}>
-                    {comments.map((comment) => {
-                        return (
-                            <View style={styles.item}>
-                                <UserAvatar username={comment.author} noAction />
-                            </View>
-                        );
-                    })}
-                </View>
-            </TouchableOpacity>
+  const _onPress = () => {
+    navigation.navigate({
+      name: ROUTES.MODALS.BOT_COMMENTS,
+      params: {
+        comments,
+      },
+    });
+  };
 
-            <CommentsModal ref={commentsModalRef} />
+  return (
+    <View style={styles.container}>
+      <View style={styles.labelWrapper}>
+        <Text style={styles.label}>{intl.formatMessage({ id: 'comments.bot_comments' })}</Text>
+        <Icon
+          iconType="AntDesign"
+          name="right"
+          size={14}
+          color={EStyleSheet.value('$primaryDarkText')}
+        />
+      </View>
+      <TouchableOpacity onPress={_onPress}>
+        <View style={styles.botAvatarsWrapper}>
+          {comments.map((comment) => {
+            return (
+              <View style={styles.item}>
+                <UserAvatar username={comment.author} noAction />
+              </View>
+            );
+          })}
         </View>
-    );
+      </TouchableOpacity>
+
+      <CommentsModal ref={commentsModalRef} />
+    </View>
+  );
 };

src/components/postsList/container/postsListContainer.tsx

@@ -208,7 +208,7 @@ const postsListContainer = (
     }
   };
 
-  const _renderSeparator = () => <Separator style={styles.separator} />
+  const _renderSeparator = () => <Separator style={styles.separator} />;
 
   const _renderItem = ({ item }: { item: any }) => {
     // get image height from cache if available
@@ -231,7 +231,6 @@ const postsListContainer = (
         }
       />
     );
-
   };
 
   return (

src/components/postsList/view/postsListStyles.tsx

@@ -11,8 +11,8 @@ export default EStyleSheet.create({
   placeholderWrapper: {
     flex: 1,
   },
-  separator:{
-    backgroundColor:'$primaryLightBackground', 
-    marginBottom:8
-  }
+  separator: {
+    backgroundColor: '$primaryLightBackground',
+    marginBottom: 8,
+  },
 });