From d0e2733f63a7bd9601e73adee1107da804f85c41 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 3 Sep 2016 14:01:10 +0200
Subject: Fix reblogs of reblogs in UI, add follow form in UI

---
 .../javascripts/components/actions/follow.jsx      | 16 +++---
 .../components/components/compose_form.jsx         | 57 ++++++++++++++++++++++
 .../components/components/composer_drawer.jsx      | 57 ----------------------
 .../javascripts/components/components/drawer.jsx   | 17 +++++++
 .../components/components/follow_form.jsx          | 40 +++++++++++++++
 .../javascripts/components/components/frontend.jsx | 17 +++++--
 .../containers/compose_form_container.jsx          | 29 +++++++++++
 .../containers/composer_drawer_container.jsx       | 29 -----------
 .../containers/follow_form_container.jsx           | 24 +++++++++
 .../javascripts/components/reducers/timelines.jsx  |  2 +
 app/assets/stylesheets/components.scss             |  2 +-
 11 files changed, 191 insertions(+), 99 deletions(-)
 create mode 100644 app/assets/javascripts/components/components/compose_form.jsx
 delete mode 100644 app/assets/javascripts/components/components/composer_drawer.jsx
 create mode 100644 app/assets/javascripts/components/components/drawer.jsx
 create mode 100644 app/assets/javascripts/components/components/follow_form.jsx
 create mode 100644 app/assets/javascripts/components/containers/compose_form_container.jsx
 delete mode 100644 app/assets/javascripts/components/containers/composer_drawer_container.jsx
 create mode 100644 app/assets/javascripts/components/containers/follow_form_container.jsx

(limited to 'app/assets')

diff --git a/app/assets/javascripts/components/actions/follow.jsx b/app/assets/javascripts/components/actions/follow.jsx
index 1c4e2c66a..a09aded83 100644
--- a/app/assets/javascripts/components/actions/follow.jsx
+++ b/app/assets/javascripts/components/actions/follow.jsx
@@ -6,41 +6,41 @@ export const FOLLOW_SUBMIT_REQUEST = 'FOLLOW_SUBMIT_REQUEST';
 export const FOLLOW_SUBMIT_SUCCESS = 'FOLLOW_SUBMIT_SUCCESS';
 export const FOLLOW_SUBMIT_FAIL    = 'FOLLOW_SUBMIT_FAIL';
 
-export function followChange(text) {
+export function changeFollow(text) {
   return {
     type: FOLLOW_CHANGE,
     text: text
   };
 }
 
-export function followSubmit() {
+export function submitFollow() {
   return function (dispatch, getState) {
-    dispatch(followSubmitRequest());
+    dispatch(submitFollowRequest());
 
     api(getState).post('/api/follows', {
       uri: getState().getIn(['follow', 'text'])
     }).then(function (response) {
-      dispatch(followSubmitSuccess(response.data));
+      dispatch(submitFollowSuccess(response.data));
     }).catch(function (error) {
-      dispatch(followSubmitFail(error));
+      dispatch(submitFollowFail(error));
     });
   };
 }
 
-export function followSubmitRequest() {
+export function submitFollowRequest() {
   return {
     type: FOLLOW_SUBMIT_REQUEST
   };
 }
 
-export function followSubmitSuccess(account) {
+export function submitFollowSuccess(account) {
   return {
     type: FOLLOW_SUBMIT_SUCCESS,
     account: account
   };
 }
 
-export function followSubmitFail(error) {
+export function submitFollowFail(error) {
   return {
     type: FOLLOW_SUBMIT_FAIL,
     error: error
diff --git a/app/assets/javascripts/components/components/compose_form.jsx b/app/assets/javascripts/components/components/compose_form.jsx
new file mode 100644
index 000000000..641412012
--- /dev/null
+++ b/app/assets/javascripts/components/components/compose_form.jsx
@@ -0,0 +1,57 @@
+import CharacterCounter   from './character_counter';
+import Button             from './button';
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ReplyIndicator     from './reply_indicator';
+
+const ComposeForm = React.createClass({
+
+  propTypes: {
+    text: React.PropTypes.string.isRequired,
+    is_submitting: React.PropTypes.bool,
+    in_reply_to: ImmutablePropTypes.map,
+    onChange: React.PropTypes.func.isRequired,
+    onSubmit: React.PropTypes.func.isRequired,
+    onCancelReply: React.PropTypes.func.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  handleChange (e) {
+    this.props.onChange(e.target.value);
+  },
+
+  handleKeyUp (e) {
+    if (e.keyCode === 13 && e.ctrlKey) {
+      this.props.onSubmit();
+    }
+  },
+
+  handleSubmit () {
+    this.props.onSubmit();
+  },
+
+  render () {
+    let replyArea = '';
+
+    if (this.props.in_reply_to) {
+      replyArea = <ReplyIndicator status={this.props.in_reply_to} onCancel={this.props.onCancelReply} />;
+    }
+
+    return (
+      <div style={{ marginBottom: '30px', padding: '10px' }}>
+        {replyArea}
+
+        <textarea disabled={this.props.is_submitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} className='compose-form__textarea' style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px', margin: '0' }} />
+
+        <div style={{ marginTop: '10px', overflow: 'hidden' }}>
+          <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} disabled={this.props.is_submitting} /></div>
+          <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter text={this.props.text} /></div>
+        </div>
+      </div>
+    );
+  }
+
+});
+
+export default ComposeForm;
diff --git a/app/assets/javascripts/components/components/composer_drawer.jsx b/app/assets/javascripts/components/components/composer_drawer.jsx
deleted file mode 100644
index 0d6a2a8d6..000000000
--- a/app/assets/javascripts/components/components/composer_drawer.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import CharacterCounter   from './character_counter';
-import Button             from './button';
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ReplyIndicator     from './reply_indicator';
-
-const ComposerDrawer = React.createClass({
-
-  propTypes: {
-    text: React.PropTypes.string.isRequired,
-    is_submitting: React.PropTypes.bool,
-    in_reply_to: ImmutablePropTypes.map,
-    onChange: React.PropTypes.func.isRequired,
-    onSubmit: React.PropTypes.func.isRequired,
-    onCancelReply: React.PropTypes.func.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  handleChange (e) {
-    this.props.onChange(e.target.value);
-  },
-
-  handleKeyUp (e) {
-    if (e.keyCode === 13 && e.ctrlKey) {
-      this.props.onSubmit();
-    }
-  },
-
-  handleSubmit () {
-    this.props.onSubmit();
-  },
-
-  render () {
-    let replyArea = '';
-
-    if (this.props.in_reply_to) {
-      replyArea = <ReplyIndicator status={this.props.in_reply_to} onCancel={this.props.onCancelReply} />;
-    }
-
-    return (
-      <div style={{ width: '280px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '10px' }}>
-        {replyArea}
-
-        <textarea disabled={this.props.is_submitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} className='compose-drawer__textarea' style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px', margin: '0' }} />
-
-        <div style={{ marginTop: '10px', overflow: 'hidden' }}>
-          <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} disabled={this.props.is_submitting} /></div>
-          <div style={{ float: 'right', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter text={this.props.text} /></div>
-        </div>
-      </div>
-    );
-  }
-
-});
-
-export default ComposerDrawer;
diff --git a/app/assets/javascripts/components/components/drawer.jsx b/app/assets/javascripts/components/components/drawer.jsx
new file mode 100644
index 000000000..8e2201ebe
--- /dev/null
+++ b/app/assets/javascripts/components/components/drawer.jsx
@@ -0,0 +1,17 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+const Drawer = React.createClass({
+
+  mixins: [PureRenderMixin],
+
+  render () {
+    return (
+      <div style={{ width: '280px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '0', display: 'flex', flexDirection: 'column' }}>
+        {this.props.children}
+      </div>
+    );
+  }
+
+});
+
+export default Drawer;
diff --git a/app/assets/javascripts/components/components/follow_form.jsx b/app/assets/javascripts/components/components/follow_form.jsx
new file mode 100644
index 000000000..0563c511f
--- /dev/null
+++ b/app/assets/javascripts/components/components/follow_form.jsx
@@ -0,0 +1,40 @@
+import IconButton      from './icon_button';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+const FollowForm = React.createClass({
+
+  propTypes: {
+    text: React.PropTypes.string.isRequired,
+    is_submitting: React.PropTypes.bool,
+    onChange: React.PropTypes.func.isRequired,
+    onSubmit: React.PropTypes.func.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  handleChange (e) {
+    this.props.onChange(e.target.value);
+  },
+
+  handleKeyUp (e) {
+    if (e.keyCode === 13) {
+      this.props.onSubmit();
+    }
+  },
+
+  handleSubmit () {
+    this.props.onSubmit();
+  },
+
+  render () {
+    return (
+      <div style={{ display: 'flex', lineHeight: '20px', padding: '10px', background: '#373b4a' }}>
+        <input type='text' disabled={this.props.is_submitting} placeholder='username@domain' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} className='follow-form__input' style={{ flex: '1 1 auto', boxSizing: 'border-box', display: 'block', border: 'none', padding: '10px', fontFamily: 'Roboto', color: '#282c37', fontSize: '14px', margin: '0' }} />
+        <div style={{ padding: '10px', paddingRight: '0' }}><IconButton title='Follow' size={20} icon='user-plus' onClick={this.handleSubmit} disabled={this.props.is_submitting} /></div>
+      </div>
+    );
+  }
+
+});
+
+export default FollowForm;
diff --git a/app/assets/javascripts/components/components/frontend.jsx b/app/assets/javascripts/components/components/frontend.jsx
index 90ad02dd5..3532b6674 100644
--- a/app/assets/javascripts/components/components/frontend.jsx
+++ b/app/assets/javascripts/components/components/frontend.jsx
@@ -1,6 +1,8 @@
-import ColumnsArea             from './columns_area';
-import ComposerDrawerContainer from '../containers/composer_drawer_container';
-import PureRenderMixin         from 'react-addons-pure-render-mixin';
+import ColumnsArea          from './columns_area';
+import Drawer               from './drawer';
+import ComposeFormContainer from '../containers/compose_form_container';
+import FollowFormContainer  from '../containers/follow_form_container';
+import PureRenderMixin      from 'react-addons-pure-render-mixin';
 
 const Frontend = React.createClass({
 
@@ -9,7 +11,14 @@ const Frontend = React.createClass({
   render () {
     return (
       <div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
-        <ComposerDrawerContainer />
+        <Drawer>
+          <div style={{ flex: '1 1 auto' }}>
+            <ComposeFormContainer />
+          </div>
+
+          <FollowFormContainer />
+        </Drawer>
+
         <ColumnsArea />
       </div>
     );
diff --git a/app/assets/javascripts/components/containers/compose_form_container.jsx b/app/assets/javascripts/components/containers/compose_form_container.jsx
new file mode 100644
index 000000000..534830c27
--- /dev/null
+++ b/app/assets/javascripts/components/containers/compose_form_container.jsx
@@ -0,0 +1,29 @@
+import { connect }                                          from 'react-redux';
+import ComposeForm                                          from '../components/compose_form';
+import { changeCompose, submitCompose, cancelReplyCompose } from '../actions/compose';
+
+const mapStateToProps = function (state, props) {
+  return {
+    text: state.getIn(['compose', 'text']),
+    is_submitting: state.getIn(['compose', 'is_submitting']),
+    in_reply_to: state.getIn(['compose', 'in_reply_to'])
+  };
+};
+
+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);
diff --git a/app/assets/javascripts/components/containers/composer_drawer_container.jsx b/app/assets/javascripts/components/containers/composer_drawer_container.jsx
deleted file mode 100644
index e9cef99b2..000000000
--- a/app/assets/javascripts/components/containers/composer_drawer_container.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { connect }                                          from 'react-redux';
-import ComposerDrawer                                       from '../components/composer_drawer';
-import { changeCompose, submitCompose, cancelReplyCompose } from '../actions/compose';
-
-const mapStateToProps = function (state, props) {
-  return {
-    text: state.getIn(['compose', 'text']),
-    is_submitting: state.getIn(['compose', 'is_submitting']),
-    in_reply_to: state.getIn(['compose', 'in_reply_to'])
-  };
-};
-
-const mapDispatchToProps = function (dispatch) {
-  return {
-    onChange: function (text) {
-      dispatch(changeCompose(text));
-    },
-
-    onSubmit: function () {
-      dispatch(submitCompose());
-    },
-
-    onCancelReply: function () {
-      dispatch(cancelReplyCompose());
-    }
-  }
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ComposerDrawer);
diff --git a/app/assets/javascripts/components/containers/follow_form_container.jsx b/app/assets/javascripts/components/containers/follow_form_container.jsx
new file mode 100644
index 000000000..b5f787aba
--- /dev/null
+++ b/app/assets/javascripts/components/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);
diff --git a/app/assets/javascripts/components/reducers/timelines.jsx b/app/assets/javascripts/components/reducers/timelines.jsx
index 983518df7..616411186 100644
--- a/app/assets/javascripts/components/reducers/timelines.jsx
+++ b/app/assets/javascripts/components/reducers/timelines.jsx
@@ -9,6 +9,8 @@ function updateMatchingStatuses(state, needle, callback) {
     return list.map(function (status) {
       if (status.get('id') === needle.get('id')) {
         return callback(status);
+      } else if (status.getIn(['reblog', 'id'], null) === needle.get('id')) {
+        return status.set('reblog', callback(status.get('reblog')));
       }
 
       return status;
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index f17160161..39b571183 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -28,7 +28,7 @@
   }
 }
 
-.compose-drawer__textarea {
+.compose-form__textarea, .follow-form__input {
   background: #fff;
 
   &:disabled {
-- 
cgit