diff --git a/app/assets/javascripts/components/actions/accounts.jsx b/app/assets/javascripts/components/actions/accounts.jsx index a334e3c20e..327fb23f75 100644 --- a/app/assets/javascripts/components/actions/accounts.jsx +++ b/app/assets/javascripts/components/actions/accounts.jsx @@ -1,11 +1,22 @@ import api from '../api' -export const ACCOUNT_SET_SELF = 'ACCOUNT_SET_SELF'; +export const ACCOUNT_SET_SELF = 'ACCOUNT_SET_SELF'; + export const ACCOUNT_FETCH = 'ACCOUNT_FETCH'; export const ACCOUNT_FETCH_REQUEST = 'ACCOUNT_FETCH_REQUEST'; export const ACCOUNT_FETCH_SUCCESS = 'ACCOUNT_FETCH_SUCCESS'; export const ACCOUNT_FETCH_FAIL = 'ACCOUNT_FETCH_FAIL'; +export const ACCOUNT_FOLLOW = 'ACCOUNT_FOLLOW'; +export const ACCOUNT_FOLLOW_REQUEST = 'ACCOUNT_FOLLOW_REQUEST'; +export const ACCOUNT_FOLLOW_SUCCESS = 'ACCOUNT_FOLLOW_SUCCESS'; +export const ACCOUNT_FOLLOW_FAIL = 'ACCOUNT_FOLLOW_FAIL'; + +export const ACCOUNT_UNFOLLOW = 'ACCOUNT_UNFOLLOW'; +export const ACCOUNT_UNFOLLOW_REQUEST = 'ACCOUNT_UNFOLLOW_REQUEST'; +export const ACCOUNT_UNFOLLOW_SUCCESS = 'ACCOUNT_UNFOLLOW_SUCCESS'; +export const ACCOUNT_UNFOLLOW_FAIL = 'ACCOUNT_UNFOLLOW_FAIL'; + export function setAccountSelf(account) { return { type: ACCOUNT_SET_SELF, @@ -46,3 +57,69 @@ export function fetchAccountFail(id, error) { error: error }; }; + +export function followAccount(id) { + return (dispatch, getState) => { + dispatch(followAccountRequest(id)); + + api(getState).post(`/api/accounts/${id}/follow`).then(response => { + dispatch(followAccountSuccess(response.data)); + }).catch(error => { + dispatch(followAccountFail(error)); + }); + }; +}; + +export function unfollowAccount(id) { + return (dispatch, getState) => { + dispatch(unfollowAccountRequest(id)); + + api(getState).post(`/api/accounts/${id}/unfollow`).then(response => { + dispatch(unfollowAccountSuccess(response.data)); + }).catch(error => { + dispatch(unfollowAccountFail(error)); + }); + } +}; + +export function followAccountRequest(id) { + return { + type: ACCOUNT_FOLLOW_REQUEST, + id: id + }; +}; + +export function followAccountSuccess(account) { + return { + type: ACCOUNT_FOLLOW_SUCCESS, + account: account + }; +}; + +export function followAccountFail(error) { + return { + type: ACCOUNT_FOLLOW_FAIL, + error: error + }; +}; + +export function unfollowAccountRequest(id) { + return { + type: ACCOUNT_UNFOLLOW_REQUEST, + id: id + }; +}; + +export function unfollowAccountSuccess(account) { + return { + type: ACCOUNT_UNFOLLOW_SUCCESS, + account: account + }; +}; + +export function unfollowAccountFail(error) { + return { + type: ACCOUNT_UNFOLLOW_FAIL, + error: error + }; +}; diff --git a/app/assets/javascripts/components/actions/statuses.jsx b/app/assets/javascripts/components/actions/statuses.jsx index faf33ea1da..b1ddd5c8f8 100644 --- a/app/assets/javascripts/components/actions/statuses.jsx +++ b/app/assets/javascripts/components/actions/statuses.jsx @@ -1,6 +1,44 @@ -import api from '../api'; +import api from '../api'; +import axios from 'axios'; export const STATUS_FETCH = 'STATUS_FETCH'; export const STATUS_FETCH_REQUEST = 'STATUS_FETCH_REQUEST'; export const STATUS_FETCH_SUCCESS = 'STATUS_FETCH_SUCCESS'; export const STATUS_FETCH_FAIL = 'STATUS_FETCH_FAIL'; + +export function fetchStatusRequest(id) { + return { + type: STATUS_FETCH_REQUEST, + id: id + }; +}; + +export function fetchStatus(id) { + return (dispatch, getState) => { + const boundApi = api(getState); + + dispatch(fetchStatusRequest(id)); + + axios.all([boundApi.get(`/api/statuses/${id}`), boundApi.get(`/api/statuses/${id}/context`)]).then(values => { + dispatch(fetchStatusSuccess(values[0].data, values[1].data)); + }).catch(error => { + dispatch(fetchStatusFail(id, error)); + }); + }; +}; + +export function fetchStatusSuccess(status, context) { + return { + type: STATUS_FETCH_SUCCESS, + status: status, + context: context + }; +}; + +export function fetchStatusFail(id, error) { + return { + type: STATUS_FETCH_FAIL, + id: id, + error: error + }; +}; diff --git a/app/assets/javascripts/components/components/navigation_bar.jsx b/app/assets/javascripts/components/components/navigation_bar.jsx index 3470cd52f4..2e7d6e6e12 100644 --- a/app/assets/javascripts/components/components/navigation_bar.jsx +++ b/app/assets/javascripts/components/components/navigation_bar.jsx @@ -15,7 +15,7 @@ const NavigationBar = React.createClass({ render () { return (
- +
{this.props.account.get('acct')} diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index d8a2a77e0a..3882fc97fd 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -32,7 +32,16 @@ const Status = React.createClass({ }, handleClick () { - hashHistory.push(`/statuses/${this.props.status.get('id')}`); + const { status } = this.props; + hashHistory.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`); + }, + + handleAccountClick (id, e) { + if (e.button === 0) { + e.preventDefault(); + hashHistory.push(`/accounts/${id}`); + e.stopPropagation(); + } }, render () { @@ -46,7 +55,7 @@ const Status = React.createClass({
@@ -65,7 +74,7 @@ const Status = React.createClass({
- +
diff --git a/app/assets/javascripts/components/containers/root.jsx b/app/assets/javascripts/components/containers/root.jsx index 1ded95d3c4..e30330beb3 100644 --- a/app/assets/javascripts/components/containers/root.jsx +++ b/app/assets/javascripts/components/containers/root.jsx @@ -6,6 +6,10 @@ import { setAccessToken } fro 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(); @@ -55,10 +59,10 @@ const Root = React.createClass({ - - - - + + + + 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 0000000000..0a940b608b --- /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 =