Merge branch 'small-ui-updates' into 'develop'

Small UI updates

See merge request soapbox-pub/soapbox-fe!865

app/soapbox/actions/interactions.js

@@ -77,7 +77,6 @@ export function unreblog(status) {
     dispatch(unreblogRequest(status));
 
     api(getState).post(`/api/v1/statuses/${status.get('id')}/unreblog`).then(response => {
-      dispatch(importFetchedStatus(response.data));
       dispatch(unreblogSuccess(status));
     }).catch(error => {
       dispatch(unreblogFail(status, error));
@@ -157,7 +156,6 @@ export function unfavourite(status) {
     dispatch(unfavouriteRequest(status));
 
     api(getState).post(`/api/v1/statuses/${status.get('id')}/unfavourite`).then(response => {
-      dispatch(importFetchedStatus(response.data));
       dispatch(unfavouriteSuccess(status));
     }).catch(error => {
       dispatch(unfavouriteFail(status, error));

app/soapbox/features/ui/components/compose_modal.js

@@ -20,6 +20,7 @@ const mapStateToProps = state => {
     account: state.getIn(['accounts', me]),
     composeText: state.getIn(['compose', 'text']),
     privacy: state.getIn(['compose', 'privacy']),
+    inReplyTo: state.getIn(['compose', 'in_reply_to']),
   };
 };
 
@@ -31,6 +32,7 @@ class ComposeModal extends ImmutablePureComponent {
     onClose: PropTypes.func.isRequired,
     composeText: PropTypes.string,
     privacy: PropTypes.string,
+    inReplyTo: PropTypes.string,
     dispatch: PropTypes.func.isRequired,
   };
 
@@ -49,18 +51,26 @@ class ComposeModal extends ImmutablePureComponent {
     }
   };
 
+  renderTitle = () => {
+    const { privacy, inReplyTo } = this.props;
+
+    if (privacy === 'direct') {
+      return <FormattedMessage id='navigation_bar.compose_direct' defaultMessage='Direct message' />;
+    } else if (inReplyTo) {
+      return <FormattedMessage id='navigation_bar.compose_reply' defaultMessage='Reply to post' />;
+    } else {
+      return <FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new post' />;
+    }
+  }
+
   render() {
-    const { intl, privacy } = this.props;
+    const { intl } = this.props;
 
     return (
       <div className='modal-root__modal compose-modal'>
         <div className='compose-modal__header'>
           <h3 className='compose-modal__header__title'>
-            {privacy === 'direct' ? (
-              <FormattedMessage id='navigation_bar.compose_direct' defaultMessage='Direct message' />
-            ) : (
-              <FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new post' />
-            )}
+            {this.renderTitle()}
           </h3>
           <IconButton
             className='compose-modal__close'

app/soapbox/reducers/__tests__/statuses-test.js

@@ -1,8 +1,41 @@
 import reducer from '../statuses';
-import { Map as ImmutableMap } from 'immutable';
+import { Map as ImmutableMap, fromJS } from 'immutable';
+import {
+  STATUS_CREATE_REQUEST,
+  STATUS_CREATE_FAIL,
+} from 'soapbox/actions/statuses';
+
 
 describe('statuses reducer', () => {
   it('should return the initial state', () => {
     expect(reducer(undefined, {})).toEqual(ImmutableMap());
   });
+
+  describe('STATUS_CREATE_REQUEST', () => {
+    it('increments the replies_count of its parent', () => {
+      const state = fromJS({ '123': { replies_count: 4 } });
+
+      const action = {
+        type: STATUS_CREATE_REQUEST,
+        params: { in_reply_to_id: '123' },
+      };
+
+      const result = reducer(state, action).getIn(['123', 'replies_count']);
+      expect(result).toEqual(5);
+    });
+  });
+
+  describe('STATUS_CREATE_FAIL', () => {
+    it('decrements the replies_count of its parent', () => {
+      const state = fromJS({ '123': { replies_count: 5 } });
+
+      const action = {
+        type: STATUS_CREATE_FAIL,
+        params: { in_reply_to_id: '123' },
+      };
+
+      const result = reducer(state, action).getIn(['123', 'replies_count']);
+      expect(result).toEqual(4);
+    });
+  });
 });

app/soapbox/reducers/statuses.js

@@ -6,6 +6,8 @@ import {
   FAVOURITE_FAIL,
 } from '../actions/interactions';
 import {
+  STATUS_CREATE_REQUEST,
+  STATUS_CREATE_FAIL,
   STATUS_MUTE_SUCCESS,
   STATUS_UNMUTE_SUCCESS,
   STATUS_REVEAL,
@@ -33,6 +35,22 @@ const deleteStatus = (state, id, references) => {
   return state.delete(id);
 };
 
+const importPendingStatus = (state, { in_reply_to_id }) => {
+  if (in_reply_to_id) {
+    return state.updateIn([in_reply_to_id, 'replies_count'], 0, count => count + 1);
+  } else {
+    return state;
+  }
+};
+
+const deletePendingStatus = (state, { in_reply_to_id }) => {
+  if (in_reply_to_id) {
+    return state.updateIn([in_reply_to_id, 'replies_count'], 0, count => Math.max(0, count - 1));
+  } else {
+    return state;
+  }
+};
+
 const initialState = ImmutableMap();
 
 export default function statuses(state = initialState, action) {
@@ -41,6 +59,10 @@ export default function statuses(state = initialState, action) {
     return importStatus(state, action.status);
   case STATUSES_IMPORT:
     return importStatuses(state, action.statuses);
+  case STATUS_CREATE_REQUEST:
+    return importPendingStatus(state, action.params);
+  case STATUS_CREATE_FAIL:
+    return deletePendingStatus(state, action.params);
   case FAVOURITE_REQUEST:
     return state.update(action.status.get('id'), status =>
       status

app/styles/navigation.scss

@@ -87,6 +87,7 @@
     color: var(--primary-text-color);
     text-decoration: none;
     font-size: 20px;
+    width: 55px;
 
     span {
       margin-top: 1px;
@@ -155,19 +156,24 @@
     justify-content: center;
     color: var(--primary-text-color);
     opacity: 0.6;
+    font-size: 16px;
 
     .svg-icon {
       margin-right: 7px;
-      width: 22px;
-      height: 22px;
+      width: 26px;
+      height: 26px;
     }
   }
 
   &__message {
     position: absolute;
+    padding: 0 10px;
     align-self: center;
     justify-self: center;
     font-weight: bold;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100vw - 200px);
   }
 
   &__cog {