Handle post deletions by removing from active views (close #37)

7 files changed, 59 insertions, 4 deletions

diff --git a/src/state/models/feed-view.ts b/src/state/models/feed-view.ts
index 5697108a1..2b3fba64c 100644
--- a/src/state/models/feed-view.ts
+++ b/src/state/models/feed-view.ts
@@ -166,6 +166,7 @@ export class FeedItemModel {
       did: this.post.author.did,
       rkey: new AtUri(this.post.uri).rkey,
     })
+    this.rootStore.emitPostDeleted(this.post.uri)
   }
 }
 
@@ -256,6 +257,14 @@ export class FeedModel {
   }
 
   /**
+   * Register any event listeners. Returns a cleanup function.
+   */
+  registerListeners() {
+    const sub = this.rootStore.onPostDeleted(this.onPostDeleted.bind(this))
+    return () => sub.remove()
+  }
+
+  /**
    * Reset and load
    */
   async refresh() {
@@ -303,7 +312,7 @@ export class FeedModel {
   }
 
   /**
-   * Check if new postrs are available
+   * Check if new posts are available
    */
   async checkForLatest() {
     if (this.hasNewLatest) {
@@ -322,6 +331,20 @@ export class FeedModel {
     this.setHasNewLatest(hasNewLatest)
   }
 
+  /**
+   * Removes posts from the feed upon deletion.
+   */
+  onPostDeleted(uri: string) {
+    console.log('hit', uri)
+    let i
+    do {
+      i = this.feed.findIndex(item => item.post.uri === uri)
+      if (i !== -1) {
+        this.feed.splice(i, 1)
+      }
+    } while (i !== -1)
+  }
+
   // state transitions
   // =
 
diff --git a/src/state/models/post-thread-view.ts b/src/state/models/post-thread-view.ts
index 1fc188723..584658e14 100644
--- a/src/state/models/post-thread-view.ts
+++ b/src/state/models/post-thread-view.ts
@@ -173,6 +173,7 @@ export class PostThreadViewPostModel {
       did: this.post.author.did,
       rkey: new AtUri(this.post.uri).rkey,
     })
+    this.rootStore.emitPostDeleted(this.post.uri)
   }
 }
 
@@ -230,6 +231,14 @@ export class PostThreadViewModel {
   }
 
   /**
+   * Register any event listeners. Returns a cleanup function.
+   */
+  registerListeners() {
+    const sub = this.rootStore.onPostDeleted(this.onPostDeleted.bind(this))
+    return () => sub.remove()
+  }
+
+  /**
    * Reset and load
    */
   async refresh() {
@@ -246,6 +255,13 @@ export class PostThreadViewModel {
     this._load()
   }
 
+  /**
+   * Refreshes when posts are deleted
+   */
+  onPostDeleted(_uri: string) {
+    this.refresh()
+  }
+
   // state transitions
   // =
 
diff --git a/src/state/models/root-store.ts b/src/state/models/root-store.ts
index 5646157cb..73f1c452f 100644
--- a/src/state/models/root-store.ts
+++ b/src/state/models/root-store.ts
@@ -5,6 +5,7 @@
 import {makeAutoObservable} from 'mobx'
 import {sessionClient as AtpApi, SessionServiceClient} from '@atproto/api'
 import {createContext, useContext} from 'react'
+import {DeviceEventEmitter, EmitterSubscription} from 'react-native'
 import {isObj, hasProp} from '../lib/type-guards'
 import {LogModel} from './log'
 import {SessionModel} from './session'
@@ -102,6 +103,15 @@ export class RootStoreModel {
     this.nav.clear()
     this.me.clear()
   }
+
+  onPostDeleted(handler: (uri: string) => void): EmitterSubscription {
+    return DeviceEventEmitter.addListener('post-deleted', handler)
+  }
+
+  emitPostDeleted(uri: string) {
+    console.log('emit')
+    DeviceEventEmitter.emit('post-deleted', uri)
+  }
 }
 
 const throwawayInst = new RootStoreModel(AtpApi.service('http://localhost')) // this will be replaced by the loader, we just need to supply a value at init
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index cbd6f86b8..46512e758 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -102,7 +102,7 @@ export const PostThreadItem = observer(function PostThreadItem({
 
   if (deleted) {
     return (
-      <View style={[styles.outer, pal.view, s.p20, s.flexRow]}>
+      <View style={[styles.outer, pal.border, pal.view, s.p20, s.flexRow]}>
         <FontAwesomeIcon
           icon={['far', 'trash-can']}
           style={{color: pal.colors.icon}}
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index cfbf82efc..25d68c02e 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -46,9 +46,11 @@ export const Home = observer(function Home({
   )
 
   useEffect(() => {
+    const feedCleanup = store.me.mainFeed.registerListeners()
     const pollInterval = setInterval(() => doPoll(), 15e3)
     const cleanup = () => {
       clearInterval(pollInterval)
+      feedCleanup()
     }
 
     if (!visible) {
diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx
index eb8ac9eb4..c14c93af0 100644
--- a/src/view/screens/PostThread.tsx
+++ b/src/view/screens/PostThread.tsx
@@ -25,8 +25,9 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
   }
   useEffect(() => {
     let aborted = false
+    const threadCleanup = view.registerListeners()
     if (!visible) {
-      return
+      return threadCleanup
     }
     setTitle()
     store.shell.setMinimalShellMode(false)
@@ -44,6 +45,7 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
     }
     return () => {
       aborted = true
+      threadCleanup()
     }
   }, [visible, store.nav, store.log, name])
 
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index a3e3ecd33..d701fba0d 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -31,8 +31,9 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
 
   useEffect(() => {
     let aborted = false
+    const feedCleanup = uiState.feed.registerListeners()
     if (!visible) {
-      return
+      return feedCleanup
     }
     if (hasSetup) {
       uiState.update()
@@ -45,6 +46,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
     }
     return () => {
       aborted = true
+      feedCleanup()
     }
   }, [visible, params.name, store])