Re-organizing components to be more modular, adding loading bars

app/assets/javascripts/components/features/ui/containers/compose_form_container.jsx

@@ -0,0 +1,42 @@
+import { connect }                                          from 'react-redux';
+import ComposeForm                                          from '../components/compose_form';
+import { changeCompose, submitCompose, cancelReplyCompose } from '../../../actions/compose';
+
+function selectStatus(state) {
+  let statusId = state.getIn(['compose', 'in_reply_to'], null);
+
+  if (statusId === null) {
+    return null;
+  }
+
+  let status = state.getIn(['timelines', 'statuses', statusId]);
+  status = status.set('account', state.getIn(['timelines', 'accounts', status.get('account')]));
+
+  return status;
+};
+
+const mapStateToProps = function (state, props) {
+  return {
+    text: state.getIn(['compose', 'text']),
+    is_submitting: state.getIn(['compose', 'is_submitting']),
+    in_reply_to: selectStatus(state)
+  };
+};
+
+const mapDispatchToProps = function (dispatch) {
+  return {
+    onChange: function (text) {
+      dispatch(changeCompose(text));
+    },
+
+    onSubmit: function () {
+      dispatch(submitCompose());
+    },
+
+    onCancelReply: function () {
+      dispatch(cancelReplyCompose());
+    }
+  }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm);

app/assets/javascripts/components/features/ui/containers/follow_form_container.jsx

@@ -0,0 +1,24 @@
+import { connect }                    from 'react-redux';
+import FollowForm                     from '../components/follow_form';
+import { changeFollow, submitFollow } from '../../../actions/follow';
+
+const mapStateToProps = function (state, props) {
+  return {
+    text: state.getIn(['follow', 'text']),
+    is_submitting: state.getIn(['follow', 'is_submitting'])
+  };
+};
+
+const mapDispatchToProps = function (dispatch) {
+  return {
+    onChange: function (text) {
+      dispatch(changeFollow(text));
+    },
+
+    onSubmit: function () {
+      dispatch(submitFollow());
+    }
+  }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(FollowForm);

app/assets/javascripts/components/features/ui/containers/navigation_container.jsx

@@ -0,0 +1,8 @@
+import { connect }   from 'react-redux';
+import NavigationBar from '../components/navigation_bar';
+
+const mapStateToProps = (state, props) => ({
+  account: state.getIn(['timelines', 'accounts', state.getIn(['timelines', 'me'])])
+});
+
+export default connect(mapStateToProps)(NavigationBar);

app/assets/javascripts/components/features/ui/containers/notifications_container.jsx

@@ -0,0 +1,25 @@
+import { connect }             from 'react-redux';
+import { NotificationStack }   from 'react-notification';
+import { dismissNotification } from '../../../actions/notifications';
+
+const mapStateToProps = (state, props) => {
+  return {
+    notifications: state.get('notifications').map((item, i) => ({
+      message: item.get('message'),
+      title: item.get('title'),
+      key: i,
+      action: 'Dismiss',
+      dismissAfter: 5000
+    })).toJS()
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    onDismiss: notifiction => {
+      dispatch(dismissNotification(notifiction));
+    }
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(NotificationStack);

app/assets/javascripts/components/features/ui/containers/status_list_container.jsx

@@ -0,0 +1,29 @@
+import { connect }           from 'react-redux';
+import StatusList            from '../../../components/status_list';
+import { replyCompose }      from '../../../actions/compose';
+import { reblog, favourite } from '../../../actions/interactions';
+import { selectStatus }      from '../../../reducers/timelines';
+
+const mapStateToProps = function (state, props) {
+  return {
+    statuses: state.getIn(['timelines', props.type]).map(id => selectStatus(state, id))
+  };
+};
+
+const mapDispatchToProps = function (dispatch) {
+  return {
+    onReply: function (status) {
+      dispatch(replyCompose(status));
+    },
+
+    onFavourite: function (status) {
+      dispatch(favourite(status));
+    },
+
+    onReblog: function (status) {
+      dispatch(reblog(status));
+    }
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(StatusList);

app/assets/javascripts/components/features/ui/containers/upload_form_container.jsx

@@ -0,0 +1,25 @@
+import { connect }                          from 'react-redux';
+import UploadForm                           from '../components/upload_form';
+import { uploadCompose, undoUploadCompose } from '../../../actions/compose';
+
+const mapStateToProps = function (state, props) {
+  return {
+    media: state.getIn(['compose', 'media_attachments']),
+    progress: state.getIn(['compose', 'progress']),
+    is_uploading: state.getIn(['compose', 'is_uploading'])
+  };
+};
+
+const mapDispatchToProps = function (dispatch) {
+  return {
+    onSelectFile: function (files) {
+      dispatch(uploadCompose(files));
+    },
+
+    onRemoveFile: function (media_id) {
+      dispatch(undoUploadCompose(media_id));
+    }
+  }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(UploadForm);