locales/en.json

@@ -238,6 +238,7 @@
     "report":"Report",
     "createFirstPost":"Create your first post",
     "blocked":"You have blocked @{{username}}",
+    "blockedNav":"You have blocked &{username}&",
     "tapUnblock":"Tap to unblock",
     "notFound":"Channel not found",
     "viewScheduled":"Scheduled",
@@ -783,5 +784,6 @@
   "showingStored":"Showing stored data",
   "actions":"Actions",
   "requests":"Requests",
-  "notAllowed":"You are not allowed"
+  "notAllowed":"You are not allowed",
+  "undo":"Undo"
 }

locales/es.json

@@ -189,6 +189,7 @@
         "confirmUnsubscribe": "Estás seguro que quieres desuscribirte de este canal? ",
         "subscribed": "Suscrito",
         "blocked": "Has bloqueado a @{{username}}",
+        "blockedNav":"Has bloqueado a &{username}&",
         "tapUnblock": "Pulsa para desbloquear",
         "notFound": "Canal no encontrado",
         "viewScheduled": "Agendado"
@@ -767,5 +768,6 @@
     "showingStored": "Mostrando datos guardados",
     "enableComments": "Activar comentarios",
     "disableComments": "Desactivar comentarios",
-    "more": "Más"
+    "more": "Más",
+    "undo":"Deshacer"
 }
\ No newline at end of file

src/common/components/BlockedChannel.js

+import React, {Component} from 'react';
+
+import {Text, StyleSheet, View} from 'react-native';
+
+import {CommonStyle} from '../../styles/Common';
+import Colors from '../../styles/Colors';
+import i18n from '../services/i18n.service';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+export default class BlockedChannel extends Component {
+  /**
+   * Navigate To channel
+   */
+  navToChannel = () => {
+    // only active if receive the navigation property
+    if (this.props.navigation) {
+      this.props.navigation.push('Channel', {
+        guid: this.props.entity.ownerObj.guid,
+      });
+    }
+  };
+
+  render() {
+    return (
+      <View style={[styles.container, CommonStyle.hairLineBottom]}>
+        <View style={[CommonStyle.flexContainerCenter, styles.insideBox]}>
+          <Text style={styles.text}>
+            {i18n.to('channel.blockedNav', null, {
+              username: (
+                <Text style={styles.username} onPress={this.navToChannel}>
+                  @{this.props.entity.ownerObj.username}
+                </Text>
+              ),
+            })}
+          </Text>
+          <TouchableOpacity
+            onPress={async () => {
+              await this.props.entity.unblockOwner();
+            }}>
+            <Text style={styles.textUndo}>{i18n.t('undo')}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'visible',
+    height: 150,
+    backgroundColor: Colors.lightGreyed,
+    padding: 5,
+  },
+  insideBox: {
+    borderStyle: 'solid',
+    borderColor: Colors.darkGreyed,
+    borderWidth: 0.5,
+    alignItems: 'center',
+  },
+  text: {
+    color: Colors.darkGreyed,
+  },
+  username: {
+    fontWeight: 'bold',
+  },
+  textUndo: {
+    color: Colors.darkGreyed,
+    marginTop: 20,
+    fontWeight: 'bold',
+  }
+});

src/common/services/block-list.service.js

@@ -2,10 +2,11 @@ import apiService from "./api.service";
 import sessionService from "./session.service";
 import storageService from "./storage.service";
 import logService from "./log.service";
+import {observable, action} from 'mobx';
 
 export class BlockListService {
 
-  blocked: Map = new Map();
+  @observable blocked: Map = new Map();
 
   constructor() {
     sessionService.onSession(async (token) => {
@@ -53,11 +54,13 @@ export class BlockListService {
     return this.blocked;
   }
 
+  @action
   async add(guid: string) {
     this.blocked.set( guid );
     storageService.setItem('@minds:blocked', this.blocked.keys());
   }
 
+  @action
   async remove(guid: string) {
     this.blocked.delete(guid);
     storageService.setItem('@minds:blocked', this.blocked.keys());

src/newsfeed/activity/Activity.js

@@ -33,6 +33,7 @@ import Pinned from '../../common/components/Pinned';
 import blockListService from '../../common/services/block-list.service';
 import i18n from '../../common/services/i18n.service';
 import ActivityModel from '../ActivityModel';
+import BlockedChannel from '../../common/components/BlockedChannel';
 
 /**
  * Activity
@@ -71,6 +72,11 @@ export default class Activity extends Component {
    */
   render() {
     const entity = ActivityModel.checkOrCreate(this.props.entity);
+
+    if (blockListService.blocked.has(entity.ownerObj.guid)) {
+      return (<BlockedChannel entity={entity} navigation={this.props.navigation}/>);
+    }
+
     const hasText = !!entity.text;
     const lock = (entity.paywall && entity.paywall !== '0')? <Lock entity={entity} navigation={this.props.navigation}/> : null;