From 87029e8abfad4fad63481e2db1e61baf25bea0be Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 21 Apr 2021 14:47:39 -0500
Subject: [PATCH] Display tombstone in place of deleted post, #138

---
 app/soapbox/features/status/index.js | 26 ++++++++++++++++++++++----
 app/soapbox/reducers/contexts.js     |  9 +++++++++
 app/styles/components/status.scss    | 11 +++++++++++
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js
index 44992b426..8683ab9dd 100644
--- a/app/soapbox/features/status/index.js
+++ b/app/soapbox/features/status/index.js
@@ -77,7 +77,7 @@ const makeMapStateToProps = () => {
 
     if (status) {
       ancestorsIds = ancestorsIds.withMutations(mutable => {
-        let id = status.get('in_reply_to_id');
+        let id = state.getIn(['contexts', 'inReplyTos', status.get('id')]);
 
         while (id) {
           mutable.unshift(id);
@@ -409,8 +409,16 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  renderChildren(list) {
-    return list.map(id => (
+  renderTombstone(id) {
+    return (
+      <div className='tombstone'>
+        <p><FormattedMessage id='statuses.tombstone' defaultMessage='One or more posts is no longer available.' /></p>
+      </div>
+    );
+  }
+
+  renderStatus(id) {
+    return (
       <StatusContainer
         key={id}
         id={id}
@@ -418,7 +426,17 @@ class Status extends ImmutablePureComponent {
         onMoveDown={this.handleMoveDown}
         contextType='thread'
       />
-    ));
+    );
+  }
+
+  renderChildren(list) {
+    return list.map(id => {
+      if (id.startsWith('tombstone-')) {
+        return this.renderTombstone(id);
+      } else {
+        return this.renderStatus(id);
+      }
+    });
   }
 
   setRef = c => {
diff --git a/app/soapbox/reducers/contexts.js b/app/soapbox/reducers/contexts.js
index 844f9f78f..c0266d853 100644
--- a/app/soapbox/reducers/contexts.js
+++ b/app/soapbox/reducers/contexts.js
@@ -27,6 +27,15 @@ const normalizeContext = (immutableState, id, ancestors, descendants) => immutab
 
       ancestors.forEach(addReply);
       descendants.forEach(addReply);
+
+      if (ancestors.length > 0 && !inReplyTos.get(id)) {
+        const tombstoneId = `tombstone-${id}`;
+        const { id: lastId } = ancestors[ancestors.length - 1];
+        replies.update(tombstoneId, ImmutableOrderedSet(), siblings => siblings.add(id).sort());
+        replies.update(lastId, ImmutableOrderedSet(), siblings => siblings.add(tombstoneId).sort());
+        inReplyTos.set(id, tombstoneId);
+        inReplyTos.set(tombstoneId, lastId);
+      }
     }));
   }));
 });
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 88912cc35..fc020d498 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -658,3 +658,14 @@ a.status-card.compact:hover {
     max-height: 100%;
   }
 }
+
+.tombstone {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 14px;
+  border-bottom: 1px solid var(--brand-color--faint);
+  color: var(--primary-text-color--faint);
+}