Optimistic threads

app/soapbox/features/status/index.js

@@ -49,6 +49,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
 import ThreadStatus from './components/thread_status';
+import PendingStatus from 'soapbox/features/ui/components/pending_status';
 import SubNavigation from 'soapbox/components/sub_navigation';
 
 const messages = defineMessages({
@@ -485,10 +486,27 @@ class Status extends ImmutablePureComponent {
     );
   }
 
+  renderPendingStatus(id) {
+    const idempotencyKey = id.replace(/^pending-/, '');
+
+    return (
+      <PendingStatus
+        key={id}
+        idempotencyKey={idempotencyKey}
+        focusedStatusId={status && status.get('id')}
+        onMoveUp={this.handleMoveUp}
+        onMoveDown={this.handleMoveDown}
+        contextType='thread'
+      />
+    );
+  }
+
   renderChildren(list) {
     return list.map(id => {
       if (id.endsWith('-tombstone')) {
         return this.renderTombstone(id);
+      } else if (id.startsWith('pending-')) {
+        return this.renderPendingStatus(id);
       } else {
         return this.renderStatus(id);
       }

app/soapbox/reducers/contexts.js

@@ -2,6 +2,10 @@ import {
   ACCOUNT_BLOCK_SUCCESS,
   ACCOUNT_MUTE_SUCCESS,
 } from '../actions/accounts';
+import {
+  STATUS_CREATE_REQUEST,
+  STATUS_CREATE_SUCCESS,
+} from '../actions/statuses';
 import { CONTEXT_FETCH_SUCCESS } from '../actions/statuses';
 import { TIMELINE_DELETE } from '../actions/timelines';
 import { STATUS_IMPORT, STATUSES_IMPORT } from 'soapbox/actions/importer';
@@ -91,6 +95,26 @@ const filterContexts = (state, relationship, statuses) => {
   return deleteStatuses(state, ownedStatusIds);
 };
 
+const importPendingStatus = (state, params, idempotencyKey) => {
+  const id = `pending-${idempotencyKey}`;
+  const { in_reply_to_id } = params;
+  return importStatus(state, { id, in_reply_to_id });
+};
+
+const deletePendingStatus = (state, { in_reply_to_id }, idempotencyKey) => {
+  const id = `pending-${idempotencyKey}`;
+
+  return state.withMutations(state => {
+    state.deleteIn(['inReplyTos', id]);
+
+    if (in_reply_to_id) {
+      state.updateIn(['replies', in_reply_to_id], ImmutableOrderedSet(), ids => {
+        return ids.delete(id).sort();
+      });
+    }
+  });
+};
+
 export default function replies(state = initialState, action) {
   switch(action.type) {
   case ACCOUNT_BLOCK_SUCCESS:
@@ -100,6 +124,10 @@ export default function replies(state = initialState, action) {
     return normalizeContext(state, action.id, action.ancestors, action.descendants);
   case TIMELINE_DELETE:
     return deleteStatuses(state, [action.id]);
+  case STATUS_CREATE_REQUEST:
+    return importPendingStatus(state, action.params, action.idempotencyKey);
+  case STATUS_CREATE_SUCCESS:
+    return deletePendingStatus(state, action.status, action.idempotencyKey);
   case STATUS_IMPORT:
     return importStatus(state, action.status);
   case STATUSES_IMPORT: