hiding post card content of muted author

src/components/postCard/container/postCardContainer.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { withNavigation } from 'react-navigation';
 import { connect } from 'react-redux';
 import get from 'lodash/get';
@@ -35,6 +35,9 @@ const PostCardContainer = ({
   const [_content, setContent] = useState(content);
   const [reblogs, setReblogs] = useState([]);
   const activeVotes = get(_content, 'active_votes', []);
+  const [isMuted, setIsMuted] = useState(
+    currentAccount.mutes && currentAccount.mutes.indexOf(content.author) > -1,
+  );
 
   useEffect(() => {
     let isCancelled = false;
@@ -117,12 +120,17 @@ const PostCardContainer = ({
     });
   };
 
+  const _handleOnUnmutePress = () => {
+    setIsMuted(false);
+  };
+
   return (
     <PostCardView
       handleOnUserPress={_handleOnUserPress}
       handleOnContentPress={_handleOnContentPress}
       handleOnVotersPress={_handleOnVotersPress}
       handleOnReblogsPress={_handleOnReblogsPress}
+      handleOnUnmutePress={_handleOnUnmutePress}
       content={_content}
       isHideImage={isHideImage}
       nsfw={nsfw || '1'}
@@ -130,6 +138,7 @@ const PostCardContainer = ({
       activeVotes={activeVotes}
       imageHeight={imageHeight}
       setImageHeight={setImageHeight}
+      isMuted={isMuted}
       fetchPost={_fetchPost}
     />
   );

src/components/postCard/view/postCardStyles.js

@@ -91,4 +91,18 @@ export default EStyleSheet.create({
     color: '$primaryDarkGray',
     marginLeft: 2,
   },
+  revealButton: {
+    backgroundColor: '$primaryGrayBackground',
+    height: 56,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 12,
+    marginTop: 8,
+    marginHorizontal: 0,
+  },
+  revealText: {
+    color: '$primaryDarkText',
+    textAlign: 'center',
+    fontSize: 18,
+  },
 });

src/components/postCard/view/postCardView.js

@@ -18,6 +18,7 @@ import { TextWithIcon } from '../../basicUIElements';
 import { Upvote } from '../../upvote';
 // Styles
 import styles from './postCardStyles';
+import { TextButton } from '../..';
 
 const dim = Dimensions.get('window');
 const DEFAULT_IMAGE =
@@ -30,6 +31,7 @@ const PostCardView = ({
   handleOnContentPress,
   handleOnVotersPress,
   handleOnReblogsPress,
+  handleOnUnmutePress,
   content,
   reblogs,
   isHideImage,
@@ -39,6 +41,7 @@ const PostCardView = ({
   activeVotes,
   imageHeight,
   setImageHeight,
+  isMuted,
 }) => {
   //local state to manage fake upvote if available
   const [activeVotesCount, setActiveVotesCount] = useState(0);
@@ -78,7 +81,7 @@ const PostCardView = ({
 
   var images = { image: DEFAULT_IMAGE, thumbnail: DEFAULT_IMAGE };
   if (content.thumbnail) {
-    if (nsfw !== '0' && content.nsfw) {
+    if (isMuted || (nsfw !== '0' && content.nsfw)) {
       images = { image: NSFW_IMAGE, thumbnail: NSFW_IMAGE };
     } else {
       images = { image: content.image, thumbnail: content.thumbnail };
@@ -149,10 +152,19 @@ const PostCardView = ({
               }}
             />
           )}
+          {!isMuted ? (
             <View style={[styles.postDescripton]}>
               <Text style={styles.title}>{content.title}</Text>
               <Text style={styles.summary}>{content.summary}</Text>
             </View>
+          ) : (
+            <TextButton
+              style={styles.revealButton}
+              textStyle={styles.revealText}
+              onPress={() => handleOnUnmutePress()}
+              text={intl.formatMessage({ id: 'post.reveal_muted' })}
+            />
+          )}
         </TouchableOpacity>
       </View>
       <View style={styles.bodyFooter}>

src/config/locales/en-US.json

@@ -441,7 +441,8 @@
     "image_saved": "Image saved to Photo Gallery",
     "image_saved_error": "Error Saving Image",
     "wrong_link": "Wrong link",
-    "in": "in"
+    "in": "in",
+    "reveal_muted":"MUTED\nTap to reveal content"
   },
   "drafts": {
     "title": "Drafts",