Display tombstone in place of deleted post, #138

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) {
+  renderTombstone(id) {
-    return list.map(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 => {

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);
+      }
     }));
   }));
 });

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);
+}