hide low rep comments, intl

src/components/comment/view/commentView.js

@@ -65,6 +65,7 @@ const CommentView = ({
         <View style={[{ marginLeft: 34 }, styles.bodyWrapper]}>
           <CommentBody
             commentDepth={comment.depth}
+            reputation={comment.author_reputation}
             handleOnUserPress={handleOnUserPress}
             body={comment.body}
             created={comment.created}
@@ -147,7 +148,11 @@ const CommentView = ({
                   iconStyle={styles.iconStyle}
                   iconSize={16}
                   onPress={() => _showSubCommentsToggle()}
-                  text={!isPressedShowButton ? `${comment.children} more replies` : ''}
+                  text={
+                    !isPressedShowButton
+                      ? `${comment.children} ${intl.formatMessage({ id: 'comments.more_replies' })}`
+                      : ''
+                  }
                 />
               </View>
             )}

src/components/comments/view/commentsView.js

@@ -72,7 +72,7 @@ const CommentsView = ({
         style={styles.moreRepliesButtonWrapper}
         textStyle={styles.moreRepliesText}
         onPress={() => _readMoreComments()}
-        text="Read more comments"
+        text={intl.formatMessage({ id: 'comments.read_more' })}
       />
     );
   }

src/components/postElements/body/view/commentBodyView.js

@@ -16,7 +16,10 @@ import { default as ROUTES } from '../../../../constants/routeNames';
 import { CommentPlaceHolder } from '../../../basicUIElements';
 import { customCommentScript } from './config';
 
+import { TextButton } from '../../..';
+
 // Styles
+import styles from './postBodyStyles';
 
 const WIDTH = Dimensions.get('window').width;
 
@@ -27,11 +30,16 @@ const CommentBody = ({
   handleOnPostPress,
   created,
   commentDepth,
+  reputation,
 }) => {
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
   const [postImages, setPostImages] = useState([]);
+  const [revealComment, setRevealComment] = useState(reputation > 0);
   const intl = useIntl();
 
+  const _showLowComment = () => {
+    setRevealComment(true);
+  };
   //new renderer functions
   const __handleOnLinkPress = event => {
     if ((!event && !get(event, 'nativeEvent.data'), false)) {
@@ -347,21 +355,30 @@ const CommentBody = ({
           }}
         />
       </Modal>
-      <AutoHeightWebView
-        key={`akey-${created.toString()}`}
-        source={{ html }}
-        allowsFullscreenVideo={true}
-        style={{ width: WIDTH - (32 + 34 * (commentDepth % 6)) }}
-        customStyle={customStyle}
-        onMessage={__handleOnLinkPress}
-        customScript={customCommentScript}
-        renderLoading={() => <CommentPlaceHolder />}
-        startInLoadingState={true}
-        onShouldStartLoadWithRequest={false}
-        scrollEnabled={false}
-        scalesPageToFit={false}
-        zoomable={false}
-      />
+      {revealComment ? (
+        <AutoHeightWebView
+          key={`akey-${created.toString()}`}
+          source={{ html }}
+          allowsFullscreenVideo={true}
+          style={{ width: WIDTH - (32 + 34 * (commentDepth % 6)) }}
+          customStyle={customStyle}
+          onMessage={__handleOnLinkPress}
+          customScript={customCommentScript}
+          renderLoading={() => <CommentPlaceHolder />}
+          startInLoadingState={true}
+          onShouldStartLoadWithRequest={false}
+          scrollEnabled={false}
+          scalesPageToFit={false}
+          zoomable={false}
+        />
+      ) : (
+        <TextButton
+          style={styles.revealButton}
+          textStyle={styles.revealText}
+          onPress={() => _showLowComment()}
+          text={intl.formatMessage({ id: 'comments.reveal_comment' })}
+        />
+      )}
     </Fragment>
   );
 };

src/components/postElements/body/view/config.js

@@ -137,6 +137,7 @@ for (var i = 0; i < images.length; i++) {
   }
 }
 document.addEventListener('touchstart', function(event) {
+  event.preventDefault();
   var el = event.target;
   while (el.tagName !== 'A') {
     if (!el.parentNode) {
@@ -228,7 +229,7 @@ document.addEventListener('touchstart', function(event) {
       return false;
     }
   }
-}, { passive: false });
+});
 true;
 `;
 

src/components/postElements/body/view/postBodyStyles.js

@@ -1,72 +1,17 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
-  text: {
-    fontSize: 16,
-    color: '$primaryBlack',
-    fontFamily: '$primaryFont',
-  },
-  container: {
-    paddingHorizontal: 0,
-    marginTop: 10,
-  },
-  a: {
-    color: '$primaryBlue',
-    fontFamily: '$primaryFont',
-  },
-  h4: {
-    fontSize: 15,
-    marginHorizontal: 10,
-    marginVertical: 5,
-  },
-  h1: {
-    fontSize: 30,
-  },
-  h2: {
-    fontSize: 25,
-  },
-  h3: {
-    fontSize: 20,
-  },
-  commentContainer: {
-    paddingHorizontal: 0,
-    right: 30,
-    marginTop: 10,
-  },
-  th: {
-    flex: 1,
+  revealButton: {
+    backgroundColor: '$iconColor',
+    height: 22,
     justifyContent: 'center',
-    fontWeight: 'bold',
-    color: '$primaryBlack',
-    fontSize: 14,
-    padding: 5,
-  },
-  tr: {
-    backgroundColor: '$darkIconColor',
-    flexDirection: 'row',
-  },
-  td: {
-    borderWidth: 0.5,
-    borderColor: '$tableBorderColor',
-    flex: 1,
-    padding: 10,
-    backgroundColor: '$tableTrColor',
-  },
-  blockquote: {
-    borderLeftWidth: 5,
-    borderColor: '$darkIconColor',
-    paddingLeft: 5,
-  },
-  code: {
-    backgroundColor: '$darkIconColor',
-    fontFamily: '$editorFont',
-  },
-  center: {
-    textAlign: 'center',
     alignItems: 'center',
-    justifyContent: 'center',
+    borderRadius: 20,
+    minWidth: 40,
+    maxWidth: 170,
   },
-  img: {
-    alignSelf: 'center',
+  revealText: {
+    color: '$white',
+    fontSize: 14,
   },
 });

src/config/locales/en-US.json

@@ -464,6 +464,9 @@
     }
   },
   "comments": {
-    "title": "Comments"
+    "title": "Comments",
+    "reveal_comment": "Reveal comment",
+    "read_more": "Read more comments",
+    "more_replies": "more replies"
   }
 }