diff options
Diffstat (limited to 'app/assets')
8 files changed, 142 insertions, 18 deletions
diff --git a/app/assets/javascripts/components/actions/compose.jsx b/app/assets/javascripts/components/actions/compose.jsx index cf5345078..de4fe7445 100644 --- a/app/assets/javascripts/components/actions/compose.jsx +++ b/app/assets/javascripts/components/actions/compose.jsx @@ -49,9 +49,10 @@ export function submitComposeRequest() { }; } -export function submitComposeSuccess(response) { +export function submitComposeSuccess(status) { return { - type: COMPOSE_SUBMIT_SUCCESS + type: COMPOSE_SUBMIT_SUCCESS, + status: status }; } diff --git a/app/assets/javascripts/components/actions/interactions.jsx b/app/assets/javascripts/components/actions/interactions.jsx new file mode 100644 index 000000000..281d3be87 --- /dev/null +++ b/app/assets/javascripts/components/actions/interactions.jsx @@ -0,0 +1,81 @@ +import api from '../api' + +export const REBLOG = 'REBLOG'; +export const REBLOG_REQUEST = 'REBLOG_REQUEST'; +export const REBLOG_SUCCESS = 'REBLOG_SUCCESS'; +export const REBLOG_FAIL = 'REBLOG_FAIL'; + +export const FAVOURITE = 'FAVOURITE'; +export const FAVOURITE_REQUEST = 'FAVOURITE_REQUEST'; +export const FAVOURITE_SUCCESS = 'FAVOURITE_SUCCESS'; +export const FAVOURITE_FAIL = 'FAVOURITE_FAIL'; + +export function reblog(status) { + return function (dispatch, getState) { + dispatch(reblogRequest(status)); + + api(getState).post(`/api/statuses/${status.get('id')}/reblog`).then(function (response) { + dispatch(reblogSuccess(status, response.data)); + }).catch(function (error) { + dispatch(reblogFail(status, error)); + }); + }; +} + +export function reblogRequest(status) { + return { + type: REBLOG_REQUEST, + status: status + }; +} + +export function reblogSuccess(status, response) { + return { + type: REBLOG_SUCCESS, + status: status, + response: response + }; +} + +export function reblogFail(status, error) { + return { + type: REBLOG_FAIL, + status: status, + error: error + }; +} + +export function favourite(status) { + return function (dispatch, getState) { + dispatch(favouriteRequest(status)); + + api(getState).post(`/api/statuses/${status.get('id')}/favourite`).then(function (response) { + dispatch(favouriteSuccess(status, response.data)); + }).catch(function (error) { + dispatch(favouriteFail(status, error)); + }); + }; +} + +export function favouriteRequest(status) { + return { + type: FAVOURITE_REQUEST, + status: status + }; +} + +export function favouriteSuccess(status, response) { + return { + type: FAVOURITE_SUCCESS, + status: status, + response: response + }; +} + +export function favouriteFail(status, error) { + return { + type: FAVOURITE_FAIL, + status: status, + error: error + }; +} diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx index c23f977e4..b41752890 100644 --- a/app/assets/javascripts/components/components/icon_button.jsx +++ b/app/assets/javascripts/components/components/icon_button.jsx @@ -6,12 +6,14 @@ const IconButton = React.createClass({ title: React.PropTypes.string.isRequired, icon: React.PropTypes.string.isRequired, onClick: React.PropTypes.func.isRequired, - size: React.PropTypes.number + size: React.PropTypes.number, + active: React.PropTypes.bool }, getDefaultProps () { return { - size: 18 + size: 18, + active: false }; }, @@ -24,7 +26,7 @@ const IconButton = React.createClass({ render () { return ( - <a href='#' title={this.props.title} className='icon-button' onClick={this.handleClick} style={{ display: 'inline-block', fontSize: `${this.props.size}px`, width: `${this.props.size}px`, height: `${this.props.size}px`, lineHeight: `${this.props.size}px`}}> + <a href='#' title={this.props.title} className={`icon-button ${this.props.active ? 'active' : ''}`} onClick={this.handleClick} style={{ display: 'inline-block', fontSize: `${this.props.size}px`, width: `${this.props.size}px`, height: `${this.props.size}px`, lineHeight: `${this.props.size}px`}}> <i className={`fa fa-fw fa-${this.props.icon}`}></i> </a> ); diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index e17df86d9..7885360e6 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -8,7 +8,9 @@ const Status = React.createClass({ propTypes: { status: ImmutablePropTypes.map.isRequired, - onReply: React.PropTypes.func + onReply: React.PropTypes.func, + onFavourite: React.PropTypes.func, + onReblog: React.PropTypes.func }, mixins: [PureRenderMixin], @@ -17,6 +19,14 @@ const Status = React.createClass({ this.props.onReply(this.props.status); }, + handleFavouriteClick () { + this.props.onFavourite(this.props.status); + }, + + handleReblogClick () { + this.props.onReblog(this.props.status); + }, + render () { var content = { __html: this.props.status.get('content') }; var status = this.props.status; @@ -43,8 +53,8 @@ const Status = React.createClass({ <div style={{ marginTop: '10px', overflow: 'hidden' }}> <div style={{ float: 'left', marginRight: '10px'}}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div> - <div style={{ float: 'left', marginRight: '10px'}}><IconButton title='Reblog' icon='retweet' /></div> - <div style={{ float: 'left'}}><IconButton title='Favourite' icon='star' /></div> + <div style={{ float: 'left', marginRight: '10px'}}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div> + <div style={{ float: 'left'}}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick} /></div> </div> </div> ); diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx index 5a89d6d60..5bd21edec 100644 --- a/app/assets/javascripts/components/components/status_list.jsx +++ b/app/assets/javascripts/components/components/status_list.jsx @@ -5,7 +5,10 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; const StatusList = React.createClass({ propTypes: { - statuses: ImmutablePropTypes.list.isRequired + statuses: ImmutablePropTypes.list.isRequired, + onReply: React.PropTypes.func, + onReblog: React.PropTypes.func, + onFavourite: React.PropTypes.func }, mixins: [PureRenderMixin], @@ -15,7 +18,7 @@ const StatusList = React.createClass({ <div style={{ overflowY: 'scroll', flex: '1 1 auto' }}> <div> {this.props.statuses.map((status) => { - return <Status key={status.get('id')} status={status} onReply={this.props.onReply} />; + return <Status key={status.get('id')} status={status} onReply={this.props.onReply} onReblog={this.props.onReblog} onFavourite={this.props.onFavourite} />; })} </div> </div> diff --git a/app/assets/javascripts/components/containers/status_list_container.jsx b/app/assets/javascripts/components/containers/status_list_container.jsx index 9cdd7f4c2..cc6333a81 100644 --- a/app/assets/javascripts/components/containers/status_list_container.jsx +++ b/app/assets/javascripts/components/containers/status_list_container.jsx @@ -1,6 +1,7 @@ -import { connect } from 'react-redux'; -import StatusList from '../components/status_list'; -import { replyCompose } from '../actions/compose'; +import { connect } from 'react-redux'; +import StatusList from '../components/status_list'; +import { replyCompose } from '../actions/compose'; +import { reblog, favourite } from '../actions/interactions'; const mapStateToProps = function (state, props) { return { @@ -12,6 +13,14 @@ const mapDispatchToProps = function (dispatch) { return { onReply: function (status) { dispatch(replyCompose(status)); + }, + + onFavourite: function (status) { + dispatch(favourite(status)); + }, + + onReblog: function (status) { + dispatch(reblog(status)); } }; }; diff --git a/app/assets/javascripts/components/reducers/timelines.jsx b/app/assets/javascripts/components/reducers/timelines.jsx index 2e0f70c24..983518df7 100644 --- a/app/assets/javascripts/components/reducers/timelines.jsx +++ b/app/assets/javascripts/components/reducers/timelines.jsx @@ -1,16 +1,30 @@ -import { TIMELINE_SET, TIMELINE_UPDATE } from '../actions/timelines'; -import Immutable from 'immutable'; +import { TIMELINE_SET, TIMELINE_UPDATE } from '../actions/timelines'; +import { REBLOG_SUCCESS, FAVOURITE_SUCCESS } from '../actions/interactions'; +import Immutable from 'immutable'; const initialState = Immutable.Map(); +function updateMatchingStatuses(state, needle, callback) { + return state.map(function (list) { + return list.map(function (status) { + if (status.get('id') === needle.get('id')) { + return callback(status); + } + + return status; + }); + }); +}; + export default function timelines(state = initialState, action) { switch(action.type) { case TIMELINE_SET: return state.set(action.timeline, Immutable.fromJS(action.statuses)); case TIMELINE_UPDATE: - return state.update(action.timeline, function (list) { - return list.unshift(Immutable.fromJS(action.status)); - }); + return state.update(action.timeline, list => list.unshift(Immutable.fromJS(action.status))); + case REBLOG_SUCCESS: + case FAVOURITE_SUCCESS: + return updateMatchingStatuses(state, action.status, () => Immutable.fromJS(action.response)); default: return state; } diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 11f4cb49f..4050babf9 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -22,6 +22,10 @@ color: #535b72; cursor: default; } + + &.active { + color: #2b90d9; + } } .compose-drawer__textarea { |