Re-organizing components to be more modular, adding loading bars
parent
f820edb463
commit
337462aa5e
|
@ -6,4 +6,4 @@ window.ReactDOM = require('react-dom');
|
||||||
|
|
||||||
//= require_tree ./components
|
//= require_tree ./components
|
||||||
|
|
||||||
window.Root = require('./components/containers/root');
|
window.Mastodon = require('./components/containers/mastodon');
|
||||||
|
|
|
@ -1,50 +0,0 @@
|
||||||
import ColumnsArea from './columns_area';
|
|
||||||
import Column from './column';
|
|
||||||
import Drawer from './drawer';
|
|
||||||
import ComposeFormContainer from '../containers/compose_form_container';
|
|
||||||
import FollowFormContainer from '../containers/follow_form_container';
|
|
||||||
import UploadFormContainer from '../containers/upload_form_container';
|
|
||||||
import StatusListContainer from '../containers/status_list_container';
|
|
||||||
import NotificationsContainer from '../containers/notifications_container';
|
|
||||||
import NavigationContainer from '../containers/navigation_container';
|
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
|
||||||
|
|
||||||
const Frontend = React.createClass({
|
|
||||||
|
|
||||||
mixins: [PureRenderMixin],
|
|
||||||
|
|
||||||
render () {
|
|
||||||
return (
|
|
||||||
<div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
|
|
||||||
<Drawer>
|
|
||||||
<div style={{ flex: '1 1 auto' }}>
|
|
||||||
<NavigationContainer />
|
|
||||||
<ComposeFormContainer />
|
|
||||||
<UploadFormContainer />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FollowFormContainer />
|
|
||||||
</Drawer>
|
|
||||||
|
|
||||||
<ColumnsArea>
|
|
||||||
<Column icon='home' heading='Home'>
|
|
||||||
<StatusListContainer type='home' />
|
|
||||||
</Column>
|
|
||||||
|
|
||||||
<Column icon='at' heading='Mentions'>
|
|
||||||
<StatusListContainer type='mentions' />
|
|
||||||
</Column>
|
|
||||||
|
|
||||||
<Column>
|
|
||||||
{this.props.children}
|
|
||||||
</Column>
|
|
||||||
</ColumnsArea>
|
|
||||||
|
|
||||||
<NotificationsContainer />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Frontend;
|
|
|
@ -1,6 +1,5 @@
|
||||||
import { Provider } from 'react-redux';
|
import { Provider } from 'react-redux';
|
||||||
import configureStore from '../store/configureStore';
|
import configureStore from '../store/configureStore';
|
||||||
import Frontend from '../components/frontend';
|
|
||||||
import { setTimeline, updateTimeline, deleteFromTimelines, refreshTimeline } from '../actions/timelines';
|
import { setTimeline, updateTimeline, deleteFromTimelines, refreshTimeline } from '../actions/timelines';
|
||||||
import { setAccessToken } from '../actions/meta';
|
import { setAccessToken } from '../actions/meta';
|
||||||
import { setAccountSelf } from '../actions/accounts';
|
import { setAccountSelf } from '../actions/accounts';
|
||||||
|
@ -10,10 +9,11 @@ import Account fro
|
||||||
import Settings from '../features/settings';
|
import Settings from '../features/settings';
|
||||||
import Status from '../features/status';
|
import Status from '../features/status';
|
||||||
import Subscriptions from '../features/subscriptions';
|
import Subscriptions from '../features/subscriptions';
|
||||||
|
import UI from '../features/ui';
|
||||||
|
|
||||||
const store = configureStore();
|
const store = configureStore();
|
||||||
|
|
||||||
const Root = React.createClass({
|
const Mastodon = React.createClass({
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
token: React.PropTypes.string.isRequired,
|
token: React.PropTypes.string.isRequired,
|
||||||
|
@ -58,7 +58,7 @@ const Root = React.createClass({
|
||||||
return (
|
return (
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<Router history={hashHistory}>
|
<Router history={hashHistory}>
|
||||||
<Route path='/' component={Frontend}>
|
<Route path='/' component={UI}>
|
||||||
<Route path='/settings' component={Settings} />
|
<Route path='/settings' component={Settings} />
|
||||||
<Route path='/subscriptions' component={Subscriptions} />
|
<Route path='/subscriptions' component={Subscriptions} />
|
||||||
<Route path='/statuses/:statusId' component={Status} />
|
<Route path='/statuses/:statusId' component={Status} />
|
||||||
|
@ -71,4 +71,4 @@ const Root = React.createClass({
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default Root;
|
export default Mastodon;
|
|
@ -31,12 +31,12 @@ const Status = React.createClass({
|
||||||
mixins: [PureRenderMixin],
|
mixins: [PureRenderMixin],
|
||||||
|
|
||||||
componentWillMount () {
|
componentWillMount () {
|
||||||
this.props.dispatch(fetchStatus(this.props.params.statusId));
|
this.props.dispatch(fetchStatus(Number(this.props.params.statusId)));
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillReceiveProps (nextProps) {
|
componentWillReceiveProps (nextProps) {
|
||||||
if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
|
if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
|
||||||
this.props.dispatch(fetchStatus(nextProps.params.statusId));
|
this.props.dispatch(fetchStatus(Number(nextProps.params.statusId)));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import CharacterCounter from './character_counter';
|
import CharacterCounter from './character_counter';
|
||||||
import Button from './button';
|
import Button from '../../../components/button';
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import ReplyIndicator from './reply_indicator';
|
import ReplyIndicator from './reply_indicator';
|
|
@ -1,4 +1,4 @@
|
||||||
import IconButton from './icon_button';
|
import IconButton from '../../../components/icon_button';
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
|
|
||||||
const FollowForm = React.createClass({
|
const FollowForm = React.createClass({
|
|
@ -1,8 +1,8 @@
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import Avatar from './avatar';
|
import Avatar from '../../../components/avatar';
|
||||||
import IconButton from './icon_button';
|
import IconButton from '../../../components/icon_button';
|
||||||
import DisplayName from './display_name';
|
import DisplayName from '../../../components/display_name';
|
||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
|
|
||||||
const NavigationBar = React.createClass({
|
const NavigationBar = React.createClass({
|
|
@ -1,8 +1,8 @@
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import Avatar from './avatar';
|
import Avatar from '../../../components/avatar';
|
||||||
import IconButton from './icon_button';
|
import IconButton from '../../../components/icon_button';
|
||||||
import DisplayName from './display_name';
|
import DisplayName from '../../../components/display_name';
|
||||||
|
|
||||||
const ReplyIndicator = React.createClass({
|
const ReplyIndicator = React.createClass({
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
import Button from './button';
|
import Button from '../../../components/button';
|
||||||
|
|
||||||
const UploadButton = React.createClass({
|
const UploadButton = React.createClass({
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import UploadButton from './upload_button';
|
import UploadButton from './upload_button';
|
||||||
import IconButton from './icon_button';
|
import IconButton from '../../../components/icon_button';
|
||||||
|
|
||||||
const UploadForm = React.createClass({
|
const UploadForm = React.createClass({
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import ComposeForm from '../components/compose_form';
|
import ComposeForm from '../components/compose_form';
|
||||||
import { changeCompose, submitCompose, cancelReplyCompose } from '../actions/compose';
|
import { changeCompose, submitCompose, cancelReplyCompose } from '../../../actions/compose';
|
||||||
|
|
||||||
function selectStatus(state) {
|
function selectStatus(state) {
|
||||||
let statusId = state.getIn(['compose', 'in_reply_to'], null);
|
let statusId = state.getIn(['compose', 'in_reply_to'], null);
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import FollowForm from '../components/follow_form';
|
import FollowForm from '../components/follow_form';
|
||||||
import { changeFollow, submitFollow } from '../actions/follow';
|
import { changeFollow, submitFollow } from '../../../actions/follow';
|
||||||
|
|
||||||
const mapStateToProps = function (state, props) {
|
const mapStateToProps = function (state, props) {
|
||||||
return {
|
return {
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { NotificationStack } from 'react-notification';
|
import { NotificationStack } from 'react-notification';
|
||||||
import { dismissNotification } from '../actions/notifications';
|
import { dismissNotification } from '../../../actions/notifications';
|
||||||
|
|
||||||
const mapStateToProps = (state, props) => {
|
const mapStateToProps = (state, props) => {
|
||||||
return {
|
return {
|
|
@ -1,8 +1,8 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import StatusList from '../components/status_list';
|
import StatusList from '../../../components/status_list';
|
||||||
import { replyCompose } from '../actions/compose';
|
import { replyCompose } from '../../../actions/compose';
|
||||||
import { reblog, favourite } from '../actions/interactions';
|
import { reblog, favourite } from '../../../actions/interactions';
|
||||||
import { selectStatus } from '../reducers/timelines';
|
import { selectStatus } from '../../../reducers/timelines';
|
||||||
|
|
||||||
const mapStateToProps = function (state, props) {
|
const mapStateToProps = function (state, props) {
|
||||||
return {
|
return {
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import UploadForm from '../components/upload_form';
|
import UploadForm from '../components/upload_form';
|
||||||
import { uploadCompose, undoUploadCompose } from '../actions/compose';
|
import { uploadCompose, undoUploadCompose } from '../../../actions/compose';
|
||||||
|
|
||||||
const mapStateToProps = function (state, props) {
|
const mapStateToProps = function (state, props) {
|
||||||
return {
|
return {
|
|
@ -0,0 +1,56 @@
|
||||||
|
import ColumnsArea from './components/columns_area';
|
||||||
|
import Column from './components/column';
|
||||||
|
import Drawer from './components/drawer';
|
||||||
|
import ComposeFormContainer from './containers/compose_form_container';
|
||||||
|
import FollowFormContainer from './containers/follow_form_container';
|
||||||
|
import UploadFormContainer from './containers/upload_form_container';
|
||||||
|
import StatusListContainer from './containers/status_list_container';
|
||||||
|
import NotificationsContainer from './containers/notifications_container';
|
||||||
|
import NavigationContainer from './containers/navigation_container';
|
||||||
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||||
|
import LoadingBar from 'react-redux-loading-bar';
|
||||||
|
|
||||||
|
const UI = React.createClass({
|
||||||
|
|
||||||
|
propTypes: {
|
||||||
|
router: React.PropTypes.object
|
||||||
|
},
|
||||||
|
|
||||||
|
mixins: [PureRenderMixin],
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<div style={{ flex: '0 0 auto', display: 'flex', width: '100%', height: '100%', background: '#1a1c23' }}>
|
||||||
|
<Drawer>
|
||||||
|
<div style={{ flex: '1 1 auto' }}>
|
||||||
|
<NavigationContainer />
|
||||||
|
<ComposeFormContainer />
|
||||||
|
<UploadFormContainer />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FollowFormContainer />
|
||||||
|
</Drawer>
|
||||||
|
|
||||||
|
<ColumnsArea>
|
||||||
|
<Column icon='home' heading='Home'>
|
||||||
|
<StatusListContainer type='home' />
|
||||||
|
</Column>
|
||||||
|
|
||||||
|
<Column icon='at' heading='Mentions'>
|
||||||
|
<StatusListContainer type='mentions' />
|
||||||
|
</Column>
|
||||||
|
|
||||||
|
<Column>
|
||||||
|
{this.props.children}
|
||||||
|
</Column>
|
||||||
|
</ColumnsArea>
|
||||||
|
|
||||||
|
<NotificationsContainer />
|
||||||
|
<LoadingBar style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
export default UI;
|
|
@ -1,4 +1,16 @@
|
||||||
import * as constants from '../actions/compose';
|
import {
|
||||||
|
COMPOSE_CHANGE,
|
||||||
|
COMPOSE_REPLY,
|
||||||
|
COMPOSE_REPLY_CANCEL,
|
||||||
|
COMPOSE_SUBMIT_REQUEST,
|
||||||
|
COMPOSE_SUBMIT_SUCCESS,
|
||||||
|
COMPOSE_SUBMIT_FAIL,
|
||||||
|
COMPOSE_UPLOAD_REQUEST,
|
||||||
|
COMPOSE_UPLOAD_SUCCESS,
|
||||||
|
COMPOSE_UPLOAD_FAIL,
|
||||||
|
COMPOSE_UPLOAD_UNDO,
|
||||||
|
COMPOSE_UPLOAD_PROGRESS
|
||||||
|
} from '../actions/compose';
|
||||||
import { TIMELINE_DELETE } from '../actions/timelines';
|
import { TIMELINE_DELETE } from '../actions/timelines';
|
||||||
import Immutable from 'immutable';
|
import Immutable from 'immutable';
|
||||||
|
|
||||||
|
@ -13,41 +25,41 @@ const initialState = Immutable.Map({
|
||||||
|
|
||||||
export default function compose(state = initialState, action) {
|
export default function compose(state = initialState, action) {
|
||||||
switch(action.type) {
|
switch(action.type) {
|
||||||
case constants.COMPOSE_CHANGE:
|
case COMPOSE_CHANGE:
|
||||||
return state.set('text', action.text);
|
return state.set('text', action.text);
|
||||||
case constants.COMPOSE_REPLY:
|
case COMPOSE_REPLY:
|
||||||
return state.withMutations(map => {
|
return state.withMutations(map => {
|
||||||
map.set('in_reply_to', action.status.get('id'));
|
map.set('in_reply_to', action.status.get('id'));
|
||||||
map.set('text', `@${action.status.getIn(['account', 'acct'])} `);
|
map.set('text', `@${action.status.getIn(['account', 'acct'])} `);
|
||||||
});
|
});
|
||||||
case constants.COMPOSE_REPLY_CANCEL:
|
case COMPOSE_REPLY_CANCEL:
|
||||||
return state.withMutations(map => {
|
return state.withMutations(map => {
|
||||||
map.set('in_reply_to', null);
|
map.set('in_reply_to', null);
|
||||||
map.set('text', '');
|
map.set('text', '');
|
||||||
});
|
});
|
||||||
case constants.COMPOSE_SUBMIT_REQUEST:
|
case COMPOSE_SUBMIT_REQUEST:
|
||||||
return state.set('is_submitting', true);
|
return state.set('is_submitting', true);
|
||||||
case constants.COMPOSE_SUBMIT_SUCCESS:
|
case COMPOSE_SUBMIT_SUCCESS:
|
||||||
return state.withMutations(map => {
|
return state.withMutations(map => {
|
||||||
map.set('text', '');
|
map.set('text', '');
|
||||||
map.set('is_submitting', false);
|
map.set('is_submitting', false);
|
||||||
map.set('in_reply_to', null);
|
map.set('in_reply_to', null);
|
||||||
map.update('media_attachments', list => list.clear());
|
map.update('media_attachments', list => list.clear());
|
||||||
});
|
});
|
||||||
case constants.COMPOSE_SUBMIT_FAIL:
|
case COMPOSE_SUBMIT_FAIL:
|
||||||
return state.set('is_submitting', false);
|
return state.set('is_submitting', false);
|
||||||
case constants.COMPOSE_UPLOAD_REQUEST:
|
case COMPOSE_UPLOAD_REQUEST:
|
||||||
return state.set('is_uploading', true);
|
return state.set('is_uploading', true);
|
||||||
case constants.COMPOSE_UPLOAD_SUCCESS:
|
case COMPOSE_UPLOAD_SUCCESS:
|
||||||
return state.withMutations(map => {
|
return state.withMutations(map => {
|
||||||
map.update('media_attachments', list => list.push(Immutable.fromJS(action.media)));
|
map.update('media_attachments', list => list.push(Immutable.fromJS(action.media)));
|
||||||
map.set('is_uploading', false);
|
map.set('is_uploading', false);
|
||||||
});
|
});
|
||||||
case constants.COMPOSE_UPLOAD_FAIL:
|
case COMPOSE_UPLOAD_FAIL:
|
||||||
return state.set('is_uploading', false);
|
return state.set('is_uploading', false);
|
||||||
case constants.COMPOSE_UPLOAD_UNDO:
|
case COMPOSE_UPLOAD_UNDO:
|
||||||
return state.update('media_attachments', list => list.filterNot(item => item.get('id') === action.media_id));
|
return state.update('media_attachments', list => list.filterNot(item => item.get('id') === action.media_id));
|
||||||
case constants.COMPOSE_UPLOAD_PROGRESS:
|
case COMPOSE_UPLOAD_PROGRESS:
|
||||||
return state.set('progress', Math.round((action.loaded / action.total) * 100));
|
return state.set('progress', Math.round((action.loaded / action.total) * 100));
|
||||||
case TIMELINE_DELETE:
|
case TIMELINE_DELETE:
|
||||||
if (action.id === state.get('in_reply_to')) {
|
if (action.id === state.get('in_reply_to')) {
|
||||||
|
|
|
@ -1,4 +1,9 @@
|
||||||
import * as constants from '../actions/follow';
|
import {
|
||||||
|
FOLLOW_CHANGE,
|
||||||
|
FOLLOW_SUBMIT_REQUEST,
|
||||||
|
FOLLOW_SUBMIT_SUCCESS,
|
||||||
|
FOLLOW_SUBMIT_FAIL
|
||||||
|
} from '../actions/follow';
|
||||||
import Immutable from 'immutable';
|
import Immutable from 'immutable';
|
||||||
|
|
||||||
const initialState = Immutable.Map({
|
const initialState = Immutable.Map({
|
||||||
|
@ -6,17 +11,17 @@ const initialState = Immutable.Map({
|
||||||
is_submitting: false
|
is_submitting: false
|
||||||
});
|
});
|
||||||
|
|
||||||
export default function compose(state = initialState, action) {
|
export default function follow(state = initialState, action) {
|
||||||
switch(action.type) {
|
switch(action.type) {
|
||||||
case constants.FOLLOW_CHANGE:
|
case FOLLOW_CHANGE:
|
||||||
return state.set('text', action.text);
|
return state.set('text', action.text);
|
||||||
case constants.FOLLOW_SUBMIT_REQUEST:
|
case FOLLOW_SUBMIT_REQUEST:
|
||||||
return state.set('is_submitting', true);
|
return state.set('is_submitting', true);
|
||||||
case constants.FOLLOW_SUBMIT_SUCCESS:
|
case FOLLOW_SUBMIT_SUCCESS:
|
||||||
return state.withMutations(map => {
|
return state.withMutations(map => {
|
||||||
map.set('text', '').set('is_submitting', false);
|
map.set('text', '').set('is_submitting', false);
|
||||||
});
|
});
|
||||||
case constants.FOLLOW_SUBMIT_FAIL:
|
case FOLLOW_SUBMIT_FAIL:
|
||||||
return state.set('is_submitting', false);
|
return state.set('is_submitting', false);
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
|
|
|
@ -4,11 +4,13 @@ import meta from './meta';
|
||||||
import compose from './compose';
|
import compose from './compose';
|
||||||
import follow from './follow';
|
import follow from './follow';
|
||||||
import notifications from './notifications';
|
import notifications from './notifications';
|
||||||
|
import { loadingBarReducer } from 'react-redux-loading-bar';
|
||||||
|
|
||||||
export default combineReducers({
|
export default combineReducers({
|
||||||
timelines,
|
timelines,
|
||||||
meta,
|
meta,
|
||||||
compose,
|
compose,
|
||||||
follow,
|
follow,
|
||||||
notifications
|
notifications,
|
||||||
|
loadingBar: loadingBarReducer,
|
||||||
});
|
});
|
||||||
|
|
|
@ -24,7 +24,7 @@ function notificationFromError(state, error) {
|
||||||
return state.push(n);
|
return state.push(n);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function meta(state = initialState, action) {
|
export default function notifications(state = initialState, action) {
|
||||||
switch(action.type) {
|
switch(action.type) {
|
||||||
case COMPOSE_SUBMIT_FAIL:
|
case COMPOSE_SUBMIT_FAIL:
|
||||||
case COMPOSE_UPLOAD_FAIL:
|
case COMPOSE_UPLOAD_FAIL:
|
||||||
|
|
|
@ -45,7 +45,7 @@ export function selectStatus(state, id) {
|
||||||
return status;
|
return status;
|
||||||
};
|
};
|
||||||
|
|
||||||
function statusToMaps(state, status) {
|
function normalizeStatus(state, status) {
|
||||||
// Separate account
|
// Separate account
|
||||||
let account = status.get('account');
|
let account = status.get('account');
|
||||||
status = status.set('account', account.get('id'));
|
status = status.set('account', account.get('id'));
|
||||||
|
@ -55,7 +55,7 @@ function statusToMaps(state, status) {
|
||||||
|
|
||||||
if (reblog !== null) {
|
if (reblog !== null) {
|
||||||
status = status.set('reblog', reblog.get('id'));
|
status = status.set('reblog', reblog.get('id'));
|
||||||
state = statusToMaps(state, reblog);
|
state = normalizeStatus(state, reblog);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Replies
|
// Replies
|
||||||
|
@ -80,26 +80,26 @@ function statusToMaps(state, status) {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
function timelineToMaps(state, timeline, statuses) {
|
function normalizeTimeline(state, timeline, statuses) {
|
||||||
statuses.forEach((status, i) => {
|
statuses.forEach((status, i) => {
|
||||||
state = statusToMaps(state, status);
|
state = normalizeStatus(state, status);
|
||||||
state = state.setIn([timeline, i], status.get('id'));
|
state = state.setIn([timeline, i], status.get('id'));
|
||||||
});
|
});
|
||||||
|
|
||||||
return state;
|
return state;
|
||||||
};
|
};
|
||||||
|
|
||||||
function accountTimelineToMaps(state, accountId, statuses) {
|
function normalizeAccountTimeline(state, accountId, statuses) {
|
||||||
statuses.forEach((status, i) => {
|
statuses.forEach((status, i) => {
|
||||||
state = statusToMaps(state, status);
|
state = normalizeStatus(state, status);
|
||||||
state = state.updateIn(['accounts_timelines', accountId], Immutable.List(), list => list.set(i, status.get('id')));
|
state = state.updateIn(['accounts_timelines', accountId], Immutable.List(), list => list.set(i, status.get('id')));
|
||||||
});
|
});
|
||||||
|
|
||||||
return state;
|
return state;
|
||||||
};
|
};
|
||||||
|
|
||||||
function updateTimelineWithMaps(state, timeline, status) {
|
function updateTimeline(state, timeline, status) {
|
||||||
state = statusToMaps(state, status);
|
state = normalizeStatus(state, status);
|
||||||
state = state.update(timeline, list => list.unshift(status.get('id')));
|
state = state.update(timeline, list => list.unshift(status.get('id')));
|
||||||
state = state.updateIn(['accounts_timelines', status.getIn(['account', 'id'])], Immutable.List(), list => list.unshift(status.get('id')));
|
state = state.updateIn(['accounts_timelines', status.getIn(['account', 'id'])], Immutable.List(), list => list.unshift(status.get('id')));
|
||||||
|
|
||||||
|
@ -114,20 +114,20 @@ function deleteStatus(state, id) {
|
||||||
return state.deleteIn(['statuses', id]);
|
return state.deleteIn(['statuses', id]);
|
||||||
};
|
};
|
||||||
|
|
||||||
function accountToMaps(state, account) {
|
function normalizeAccount(state, account) {
|
||||||
return state.setIn(['accounts', account.get('id')], account);
|
return state.setIn(['accounts', account.get('id')], account);
|
||||||
};
|
};
|
||||||
|
|
||||||
function contextToMaps(state, status, ancestors, descendants) {
|
function normalizeContext(state, status, ancestors, descendants) {
|
||||||
state = statusToMaps(state, status);
|
state = normalizeStatus(state, status);
|
||||||
|
|
||||||
let ancestorsIds = ancestors.map(ancestor => {
|
let ancestorsIds = ancestors.map(ancestor => {
|
||||||
state = statusToMaps(state, ancestor);
|
state = normalizeStatus(state, ancestor);
|
||||||
return ancestor.get('id');
|
return ancestor.get('id');
|
||||||
}).toOrderedSet();
|
}).toOrderedSet();
|
||||||
|
|
||||||
let descendantsIds = descendants.map(descendant => {
|
let descendantsIds = descendants.map(descendant => {
|
||||||
state = statusToMaps(state, descendant);
|
state = normalizeStatus(state, descendant);
|
||||||
return descendant.get('id');
|
return descendant.get('id');
|
||||||
}).toOrderedSet();
|
}).toOrderedSet();
|
||||||
|
|
||||||
|
@ -140,14 +140,14 @@ function contextToMaps(state, status, ancestors, descendants) {
|
||||||
export default function timelines(state = initialState, action) {
|
export default function timelines(state = initialState, action) {
|
||||||
switch(action.type) {
|
switch(action.type) {
|
||||||
case TIMELINE_SET:
|
case TIMELINE_SET:
|
||||||
return timelineToMaps(state, action.timeline, Immutable.fromJS(action.statuses));
|
return normalizeTimeline(state, action.timeline, Immutable.fromJS(action.statuses));
|
||||||
case TIMELINE_UPDATE:
|
case TIMELINE_UPDATE:
|
||||||
return updateTimelineWithMaps(state, action.timeline, Immutable.fromJS(action.status));
|
return updateTimeline(state, action.timeline, Immutable.fromJS(action.status));
|
||||||
case TIMELINE_DELETE:
|
case TIMELINE_DELETE:
|
||||||
return deleteStatus(state, action.id);
|
return deleteStatus(state, action.id);
|
||||||
case REBLOG_SUCCESS:
|
case REBLOG_SUCCESS:
|
||||||
case FAVOURITE_SUCCESS:
|
case FAVOURITE_SUCCESS:
|
||||||
return statusToMaps(state, Immutable.fromJS(action.response));
|
return normalizeStatus(state, Immutable.fromJS(action.response));
|
||||||
case ACCOUNT_SET_SELF:
|
case ACCOUNT_SET_SELF:
|
||||||
return state.withMutations(map => {
|
return state.withMutations(map => {
|
||||||
map.setIn(['accounts', action.account.id], Immutable.fromJS(action.account));
|
map.setIn(['accounts', action.account.id], Immutable.fromJS(action.account));
|
||||||
|
@ -157,11 +157,11 @@ export default function timelines(state = initialState, action) {
|
||||||
case FOLLOW_SUBMIT_SUCCESS:
|
case FOLLOW_SUBMIT_SUCCESS:
|
||||||
case ACCOUNT_FOLLOW_SUCCESS:
|
case ACCOUNT_FOLLOW_SUCCESS:
|
||||||
case ACCOUNT_UNFOLLOW_SUCCESS:
|
case ACCOUNT_UNFOLLOW_SUCCESS:
|
||||||
return accountToMaps(state, Immutable.fromJS(action.account));
|
return normalizeAccount(state, Immutable.fromJS(action.account));
|
||||||
case STATUS_FETCH_SUCCESS:
|
case STATUS_FETCH_SUCCESS:
|
||||||
return contextToMaps(state, Immutable.fromJS(action.status), Immutable.fromJS(action.context.ancestors), Immutable.fromJS(action.context.descendants));
|
return normalizeContext(state, Immutable.fromJS(action.status), Immutable.fromJS(action.context.ancestors), Immutable.fromJS(action.context.descendants));
|
||||||
case ACCOUNT_TIMELINE_FETCH_SUCCESS:
|
case ACCOUNT_TIMELINE_FETCH_SUCCESS:
|
||||||
return accountTimelineToMaps(state, action.id, Immutable.fromJS(action.statuses));
|
return normalizeAccountTimeline(state, action.id, Immutable.fromJS(action.statuses));
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,10 @@
|
||||||
import { createStore, applyMiddleware, compose } from 'redux';
|
import { createStore, applyMiddleware, compose } from 'redux';
|
||||||
import thunk from 'redux-thunk';
|
import thunk from 'redux-thunk';
|
||||||
import appReducer from '../reducers';
|
import appReducer from '../reducers';
|
||||||
|
import { loadingBarMiddleware } from 'react-redux-loading-bar';
|
||||||
|
|
||||||
export default function configureStore(initialState) {
|
export default function configureStore(initialState) {
|
||||||
return createStore(appReducer, initialState, compose(applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f));
|
return createStore(appReducer, initialState, compose(applyMiddleware(thunk, loadingBarMiddleware({
|
||||||
}
|
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],
|
||||||
|
})), window.devToolsExtension ? window.devToolsExtension() : f => f));
|
||||||
|
};
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
= react_component 'Root', default_props, class: 'app-holder', prerender: false
|
= react_component 'Mastodon', default_props, class: 'app-holder', prerender: false
|
||||||
|
|
|
@ -21,6 +21,7 @@
|
||||||
"react-immutable-proptypes": "^2.1.0",
|
"react-immutable-proptypes": "^2.1.0",
|
||||||
"react-notification": "^6.1.1",
|
"react-notification": "^6.1.1",
|
||||||
"react-redux": "^4.4.5",
|
"react-redux": "^4.4.5",
|
||||||
|
"react-redux-loading-bar": "^2.3.3",
|
||||||
"react-router": "^2.8.0",
|
"react-router": "^2.8.0",
|
||||||
"redux": "^3.5.2",
|
"redux": "^3.5.2",
|
||||||
"redux-immutable": "^3.0.8",
|
"redux-immutable": "^3.0.8",
|
||||||
|
|
Reference in New Issue