From 5b0cef9781af519a0a6ace1f429162ae05863bde Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 16 Sep 2016 00:21:51 +0200 Subject: Setting up preliminary "detailed" routes in the UI, new API end-point for fetching status context --- .../components/features/account/index.jsx | 79 ++++++++++++++++++++++ .../components/features/settings/index.jsx | 28 ++++++++ .../components/features/status/index.jsx | 74 ++++++++++++++++++++ .../components/features/subscriptions/index.jsx | 28 ++++++++ 4 files changed, 209 insertions(+) create mode 100644 app/assets/javascripts/components/features/account/index.jsx create mode 100644 app/assets/javascripts/components/features/settings/index.jsx create mode 100644 app/assets/javascripts/components/features/status/index.jsx create mode 100644 app/assets/javascripts/components/features/subscriptions/index.jsx (limited to 'app/assets/javascripts/components/features') diff --git a/app/assets/javascripts/components/features/account/index.jsx b/app/assets/javascripts/components/features/account/index.jsx new file mode 100644 index 000000000..0a940b608 --- /dev/null +++ b/app/assets/javascripts/components/features/account/index.jsx @@ -0,0 +1,79 @@ +import { connect } from 'react-redux'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { fetchAccount, followAccount, unfollowAccount } from '../../actions/accounts'; +import Button from '../../components/button'; + +function selectAccount(state, id) { + return state.getIn(['timelines', 'accounts', id], null); +} + +const mapStateToProps = (state, props) => ({ + account: selectAccount(state, Number(props.params.accountId)) +}); + +const Account = React.createClass({ + + propTypes: { + params: React.PropTypes.object.isRequired, + dispatch: React.PropTypes.func.isRequired, + account: ImmutablePropTypes.map + }, + + mixins: [PureRenderMixin], + + componentWillMount () { + this.props.dispatch(fetchAccount(this.props.params.accountId)); + }, + + componentWillReceiveProps(nextProps) { + if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) { + this.props.dispatch(fetchAccount(nextProps.params.accountId)); + } + }, + + handleFollowClick () { + this.props.dispatch(followAccount(this.props.account.get('id'))); + }, + + handleUnfollowClick () { + this.props.dispatch(unfollowAccount(this.props.account.get('id'))); + }, + + render () { + const { account } = this.props; + let action; + + if (account === null) { + return
Loading {this.props.params.accountId}...
; + } + + if (account.get('following')) { + action =