From 337462aa5e68014aa15788e4513e190b2e434d7e Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 19 Sep 2016 23:25:59 +0200 Subject: Re-organizing components to be more modular, adding loading bars --- .../containers/compose_form_container.jsx | 42 ------------ .../containers/follow_form_container.jsx | 24 ------- .../javascripts/components/containers/mastodon.jsx | 74 ++++++++++++++++++++++ .../components/containers/navigation_container.jsx | 8 --- .../containers/notifications_container.jsx | 25 -------- .../javascripts/components/containers/root.jsx | 74 ---------------------- .../containers/status_list_container.jsx | 29 --------- .../containers/upload_form_container.jsx | 25 -------- 8 files changed, 74 insertions(+), 227 deletions(-) delete mode 100644 app/assets/javascripts/components/containers/compose_form_container.jsx delete mode 100644 app/assets/javascripts/components/containers/follow_form_container.jsx create mode 100644 app/assets/javascripts/components/containers/mastodon.jsx delete mode 100644 app/assets/javascripts/components/containers/navigation_container.jsx delete mode 100644 app/assets/javascripts/components/containers/notifications_container.jsx delete mode 100644 app/assets/javascripts/components/containers/root.jsx delete mode 100644 app/assets/javascripts/components/containers/status_list_container.jsx delete mode 100644 app/assets/javascripts/components/containers/upload_form_container.jsx (limited to 'app/assets/javascripts/components/containers') diff --git a/app/assets/javascripts/components/containers/compose_form_container.jsx b/app/assets/javascripts/components/containers/compose_form_container.jsx deleted file mode 100644 index d49217a90..000000000 --- a/app/assets/javascripts/components/containers/compose_form_container.jsx +++ /dev/null @@ -1,42 +0,0 @@ -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); diff --git a/app/assets/javascripts/components/containers/follow_form_container.jsx b/app/assets/javascripts/components/containers/follow_form_container.jsx deleted file mode 100644 index b5f787aba..000000000 --- a/app/assets/javascripts/components/containers/follow_form_container.jsx +++ /dev/null @@ -1,24 +0,0 @@ -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/containers/mastodon.jsx b/app/assets/javascripts/components/containers/mastodon.jsx new file mode 100644 index 000000000..ba6e568ac --- /dev/null +++ b/app/assets/javascripts/components/containers/mastodon.jsx @@ -0,0 +1,74 @@ +import { Provider } from 'react-redux'; +import configureStore from '../store/configureStore'; +import { setTimeline, updateTimeline, deleteFromTimelines, refreshTimeline } from '../actions/timelines'; +import { setAccessToken } from '../actions/meta'; +import { setAccountSelf } from '../actions/accounts'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import { Router, Route, hashHistory } from 'react-router'; +import Account from '../features/account'; +import Settings from '../features/settings'; +import Status from '../features/status'; +import Subscriptions from '../features/subscriptions'; +import UI from '../features/ui'; + +const store = configureStore(); + +const Mastodon = React.createClass({ + + propTypes: { + token: React.PropTypes.string.isRequired, + timelines: React.PropTypes.object, + account: React.PropTypes.string + }, + + mixins: [PureRenderMixin], + + componentWillMount() { + store.dispatch(setAccessToken(this.props.token)); + store.dispatch(setAccountSelf(JSON.parse(this.props.account))); + + for (var timelineType in this.props.timelines) { + if (this.props.timelines.hasOwnProperty(timelineType)) { + store.dispatch(setTimeline(timelineType, JSON.parse(this.props.timelines[timelineType]))); + } + } + + if (typeof App !== 'undefined') { + App.timeline = App.cable.subscriptions.create("TimelineChannel", { + connected: function() {}, + + disconnected: function() {}, + + received: function(data) { + switch(data.type) { + case 'update': + return store.dispatch(updateTimeline(data.timeline, JSON.parse(data.message))); + case 'delete': + return store.dispatch(deleteFromTimelines(data.id)); + case 'merge': + case 'unmerge': + return store.dispatch(refreshTimeline('home')); + } + } + }); + } + }, + + render () { + return ( + + + + + + + + + + + ); + } + +}); + +export default Mastodon; diff --git a/app/assets/javascripts/components/containers/navigation_container.jsx b/app/assets/javascripts/components/containers/navigation_container.jsx deleted file mode 100644 index 4aeea4c37..000000000 --- a/app/assets/javascripts/components/containers/navigation_container.jsx +++ /dev/null @@ -1,8 +0,0 @@ -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); diff --git a/app/assets/javascripts/components/containers/notifications_container.jsx b/app/assets/javascripts/components/containers/notifications_container.jsx deleted file mode 100644 index 68173b34e..000000000 --- a/app/assets/javascripts/components/containers/notifications_container.jsx +++ /dev/null @@ -1,25 +0,0 @@ -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); diff --git a/app/assets/javascripts/components/containers/root.jsx b/app/assets/javascripts/components/containers/root.jsx deleted file mode 100644 index e30330beb..000000000 --- a/app/assets/javascripts/components/containers/root.jsx +++ /dev/null @@ -1,74 +0,0 @@ -import { Provider } from 'react-redux'; -import configureStore from '../store/configureStore'; -import Frontend from '../components/frontend'; -import { setTimeline, updateTimeline, deleteFromTimelines, refreshTimeline } from '../actions/timelines'; -import { setAccessToken } from '../actions/meta'; -import { setAccountSelf } from '../actions/accounts'; -import PureRenderMixin from 'react-addons-pure-render-mixin'; -import { Router, Route, hashHistory } from 'react-router'; -import Account from '../features/account'; -import Settings from '../features/settings'; -import Status from '../features/status'; -import Subscriptions from '../features/subscriptions'; - -const store = configureStore(); - -const Root = React.createClass({ - - propTypes: { - token: React.PropTypes.string.isRequired, - timelines: React.PropTypes.object, - account: React.PropTypes.string - }, - - mixins: [PureRenderMixin], - - componentWillMount() { - store.dispatch(setAccessToken(this.props.token)); - store.dispatch(setAccountSelf(JSON.parse(this.props.account))); - - for (var timelineType in this.props.timelines) { - if (this.props.timelines.hasOwnProperty(timelineType)) { - store.dispatch(setTimeline(timelineType, JSON.parse(this.props.timelines[timelineType]))); - } - } - - if (typeof App !== 'undefined') { - App.timeline = App.cable.subscriptions.create("TimelineChannel", { - connected: function() {}, - - disconnected: function() {}, - - received: function(data) { - switch(data.type) { - case 'update': - return store.dispatch(updateTimeline(data.timeline, JSON.parse(data.message))); - case 'delete': - return store.dispatch(deleteFromTimelines(data.id)); - case 'merge': - case 'unmerge': - return store.dispatch(refreshTimeline('home')); - } - } - }); - } - }, - - render () { - return ( - - - - - - - - - - - ); - } - -}); - -export default Root; diff --git a/app/assets/javascripts/components/containers/status_list_container.jsx b/app/assets/javascripts/components/containers/status_list_container.jsx deleted file mode 100644 index a4fba95e1..000000000 --- a/app/assets/javascripts/components/containers/status_list_container.jsx +++ /dev/null @@ -1,29 +0,0 @@ -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); diff --git a/app/assets/javascripts/components/containers/upload_form_container.jsx b/app/assets/javascripts/components/containers/upload_form_container.jsx deleted file mode 100644 index b168e8187..000000000 --- a/app/assets/javascripts/components/containers/upload_form_container.jsx +++ /dev/null @@ -1,25 +0,0 @@ -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); -- cgit