//= require_tree ./components
-window.Root = require('./components/containers/root');
+window.Mastodon = require('./components/containers/mastodon');
+++ /dev/null
-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;
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 Settings from '../features/settings';
import Status from '../features/status';
import Subscriptions from '../features/subscriptions';
+import UI from '../features/ui';
const store = configureStore();
-const Root = React.createClass({
+const Mastodon = React.createClass({
propTypes: {
token: React.PropTypes.string.isRequired,
return (
<Provider store={store}>
<Router history={hashHistory}>
- <Route path='/' component={Frontend}>
+ <Route path='/' component={UI}>
<Route path='/settings' component={Settings} />
<Route path='/subscriptions' component={Subscriptions} />
<Route path='/statuses/:statusId' component={Status} />
});
-export default Root;
+export default Mastodon;
mixins: [PureRenderMixin],
componentWillMount () {
- this.props.dispatch(fetchStatus(this.props.params.statusId));
+ this.props.dispatch(fetchStatus(Number(this.props.params.statusId)));
},
componentWillReceiveProps (nextProps) {
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)));
}
},
import CharacterCounter from './character_counter';
-import Button from './button';
+import Button from '../../../components/button';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ReplyIndicator from './reply_indicator';
-import IconButton from './icon_button';
+import IconButton from '../../../components/icon_button';
import PureRenderMixin from 'react-addons-pure-render-mixin';
const FollowForm = React.createClass({
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from './avatar';
-import IconButton from './icon_button';
-import DisplayName from './display_name';
+import Avatar from '../../../components/avatar';
+import IconButton from '../../../components/icon_button';
+import DisplayName from '../../../components/display_name';
import { Link } from 'react-router';
const NavigationBar = React.createClass({
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from './avatar';
-import IconButton from './icon_button';
-import DisplayName from './display_name';
+import Avatar from '../../../components/avatar';
+import IconButton from '../../../components/icon_button';
+import DisplayName from '../../../components/display_name';
const ReplyIndicator = React.createClass({
import PureRenderMixin from 'react-addons-pure-render-mixin';
-import Button from './button';
+import Button from '../../../components/button';
const UploadButton = React.createClass({
import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
import UploadButton from './upload_button';
-import IconButton from './icon_button';
+import IconButton from '../../../components/icon_button';
const UploadForm = React.createClass({
import { connect } from 'react-redux';
import ComposeForm from '../components/compose_form';
-import { changeCompose, submitCompose, cancelReplyCompose } from '../actions/compose';
+import { changeCompose, submitCompose, cancelReplyCompose } from '../../../actions/compose';
function selectStatus(state) {
let statusId = state.getIn(['compose', 'in_reply_to'], null);
import { connect } from 'react-redux';
import FollowForm from '../components/follow_form';
-import { changeFollow, submitFollow } from '../actions/follow';
+import { changeFollow, submitFollow } from '../../../actions/follow';
const mapStateToProps = function (state, props) {
return {
import { connect } from 'react-redux';
import { NotificationStack } from 'react-notification';
-import { dismissNotification } from '../actions/notifications';
+import { dismissNotification } from '../../../actions/notifications';
const mapStateToProps = (state, props) => {
return {
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';
+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 {
import { connect } from 'react-redux';
import UploadForm from '../components/upload_form';
-import { uploadCompose, undoUploadCompose } from '../actions/compose';
+import { uploadCompose, undoUploadCompose } from '../../../actions/compose';
const mapStateToProps = function (state, props) {
return {
--- /dev/null
+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;
-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 Immutable from 'immutable';
export default function compose(state = initialState, action) {
switch(action.type) {
- case constants.COMPOSE_CHANGE:
+ case COMPOSE_CHANGE:
return state.set('text', action.text);
- case constants.COMPOSE_REPLY:
+ case COMPOSE_REPLY:
return state.withMutations(map => {
map.set('in_reply_to', action.status.get('id'));
map.set('text', `@${action.status.getIn(['account', 'acct'])} `);
});
- case constants.COMPOSE_REPLY_CANCEL:
+ case COMPOSE_REPLY_CANCEL:
return state.withMutations(map => {
map.set('in_reply_to', null);
map.set('text', '');
});
- case constants.COMPOSE_SUBMIT_REQUEST:
+ case COMPOSE_SUBMIT_REQUEST:
return state.set('is_submitting', true);
- case constants.COMPOSE_SUBMIT_SUCCESS:
+ case COMPOSE_SUBMIT_SUCCESS:
return state.withMutations(map => {
map.set('text', '');
map.set('is_submitting', false);
map.set('in_reply_to', null);
map.update('media_attachments', list => list.clear());
});
- case constants.COMPOSE_SUBMIT_FAIL:
+ case COMPOSE_SUBMIT_FAIL:
return state.set('is_submitting', false);
- case constants.COMPOSE_UPLOAD_REQUEST:
+ case COMPOSE_UPLOAD_REQUEST:
return state.set('is_uploading', true);
- case constants.COMPOSE_UPLOAD_SUCCESS:
+ case COMPOSE_UPLOAD_SUCCESS:
return state.withMutations(map => {
map.update('media_attachments', list => list.push(Immutable.fromJS(action.media)));
map.set('is_uploading', false);
});
- case constants.COMPOSE_UPLOAD_FAIL:
+ case COMPOSE_UPLOAD_FAIL:
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));
- case constants.COMPOSE_UPLOAD_PROGRESS:
+ case COMPOSE_UPLOAD_PROGRESS:
return state.set('progress', Math.round((action.loaded / action.total) * 100));
case TIMELINE_DELETE:
if (action.id === state.get('in_reply_to')) {
-import * as constants from '../actions/follow';
-import Immutable from 'immutable';
+import {
+ FOLLOW_CHANGE,
+ FOLLOW_SUBMIT_REQUEST,
+ FOLLOW_SUBMIT_SUCCESS,
+ FOLLOW_SUBMIT_FAIL
+} from '../actions/follow';
+import Immutable from 'immutable';
const initialState = Immutable.Map({
text: '',
is_submitting: false
});
-export default function compose(state = initialState, action) {
+export default function follow(state = initialState, action) {
switch(action.type) {
- case constants.FOLLOW_CHANGE:
+ case FOLLOW_CHANGE:
return state.set('text', action.text);
- case constants.FOLLOW_SUBMIT_REQUEST:
+ case FOLLOW_SUBMIT_REQUEST:
return state.set('is_submitting', true);
- case constants.FOLLOW_SUBMIT_SUCCESS:
+ case FOLLOW_SUBMIT_SUCCESS:
return state.withMutations(map => {
map.set('text', '').set('is_submitting', false);
});
- case constants.FOLLOW_SUBMIT_FAIL:
+ case FOLLOW_SUBMIT_FAIL:
return state.set('is_submitting', false);
default:
return state;
-import { combineReducers } from 'redux-immutable';
-import timelines from './timelines';
-import meta from './meta';
-import compose from './compose';
-import follow from './follow';
-import notifications from './notifications';
+import { combineReducers } from 'redux-immutable';
+import timelines from './timelines';
+import meta from './meta';
+import compose from './compose';
+import follow from './follow';
+import notifications from './notifications';
+import { loadingBarReducer } from 'react-redux-loading-bar';
export default combineReducers({
timelines,
meta,
compose,
follow,
- notifications
+ notifications,
+ loadingBar: loadingBarReducer,
});
return state.push(n);
};
-export default function meta(state = initialState, action) {
+export default function notifications(state = initialState, action) {
switch(action.type) {
case COMPOSE_SUBMIT_FAIL:
case COMPOSE_UPLOAD_FAIL:
return status;
};
-function statusToMaps(state, status) {
+function normalizeStatus(state, status) {
// Separate account
let account = status.get('account');
status = status.set('account', account.get('id'));
if (reblog !== null) {
status = status.set('reblog', reblog.get('id'));
- state = statusToMaps(state, reblog);
+ state = normalizeStatus(state, reblog);
}
// Replies
});
};
-function timelineToMaps(state, timeline, statuses) {
+function normalizeTimeline(state, timeline, statuses) {
statuses.forEach((status, i) => {
- state = statusToMaps(state, status);
+ state = normalizeStatus(state, status);
state = state.setIn([timeline, i], status.get('id'));
});
return state;
};
-function accountTimelineToMaps(state, accountId, statuses) {
+function normalizeAccountTimeline(state, accountId, statuses) {
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')));
});
return state;
};
-function updateTimelineWithMaps(state, timeline, status) {
- state = statusToMaps(state, status);
+function updateTimeline(state, timeline, status) {
+ state = normalizeStatus(state, status);
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')));
return state.deleteIn(['statuses', id]);
};
-function accountToMaps(state, account) {
+function normalizeAccount(state, account) {
return state.setIn(['accounts', account.get('id')], account);
};
-function contextToMaps(state, status, ancestors, descendants) {
- state = statusToMaps(state, status);
+function normalizeContext(state, status, ancestors, descendants) {
+ state = normalizeStatus(state, status);
let ancestorsIds = ancestors.map(ancestor => {
- state = statusToMaps(state, ancestor);
+ state = normalizeStatus(state, ancestor);
return ancestor.get('id');
}).toOrderedSet();
let descendantsIds = descendants.map(descendant => {
- state = statusToMaps(state, descendant);
+ state = normalizeStatus(state, descendant);
return descendant.get('id');
}).toOrderedSet();
export default function timelines(state = initialState, action) {
switch(action.type) {
case TIMELINE_SET:
- return timelineToMaps(state, action.timeline, Immutable.fromJS(action.statuses));
+ return normalizeTimeline(state, action.timeline, Immutable.fromJS(action.statuses));
case TIMELINE_UPDATE:
- return updateTimelineWithMaps(state, action.timeline, Immutable.fromJS(action.status));
+ return updateTimeline(state, action.timeline, Immutable.fromJS(action.status));
case TIMELINE_DELETE:
return deleteStatus(state, action.id);
case REBLOG_SUCCESS:
case FAVOURITE_SUCCESS:
- return statusToMaps(state, Immutable.fromJS(action.response));
+ return normalizeStatus(state, Immutable.fromJS(action.response));
case ACCOUNT_SET_SELF:
return state.withMutations(map => {
map.setIn(['accounts', action.account.id], Immutable.fromJS(action.account));
case FOLLOW_SUBMIT_SUCCESS:
case ACCOUNT_FOLLOW_SUCCESS:
case ACCOUNT_UNFOLLOW_SUCCESS:
- return accountToMaps(state, Immutable.fromJS(action.account));
+ return normalizeAccount(state, Immutable.fromJS(action.account));
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:
- return accountTimelineToMaps(state, action.id, Immutable.fromJS(action.statuses));
+ return normalizeAccountTimeline(state, action.id, Immutable.fromJS(action.statuses));
default:
return state;
}
import { createStore, applyMiddleware, compose } from 'redux';
-import thunk from 'redux-thunk';
-import appReducer from '../reducers';
+import thunk from 'redux-thunk';
+import appReducer from '../reducers';
+import { loadingBarMiddleware } from 'react-redux-loading-bar';
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));
+};
-= react_component 'Root', default_props, class: 'app-holder', prerender: false
+= react_component 'Mastodon', default_props, class: 'app-holder', prerender: false
"react-immutable-proptypes": "^2.1.0",
"react-notification": "^6.1.1",
"react-redux": "^4.4.5",
+ "react-redux-loading-bar": "^2.3.3",
"react-router": "^2.8.0",
"redux": "^3.5.2",
"redux-immutable": "^3.0.8",
cat aescling's git repositories / mastodon.git / commitdiff