Use Redux store to keep track of layout

This commit is contained in:
kibigo! 2017-06-24 17:07:25 -07:00
parent ceb545c080
commit ddba5d3b8c
4 changed files with 22 additions and 15 deletions

View file

@ -24,6 +24,7 @@ addLocaleData(localeData);
const store = configureStore();
const initialState = JSON.parse(document.getElementById('initial-state').textContent);
if (localStorage) initialState.layout = localStorage.getItem('mastodon-layout');
store.dispatch(hydrateStore(initialState));
export default class Mastodon extends React.PureComponent {

View file

@ -74,21 +74,17 @@ class WrappedRoute extends React.Component {
}
function columnClass(columns) {
switch (columns) {
case "auto": return "auto-columns";
case "single": return "single-column";
case "multiple": return "multi-columns";
default: return "auto-columns";
}
}
const mapStateToProps = state => ({
layout: state.getIn(['settings', 'layout']),
});
@connect()
@connect(mapStateToProps)
export default class UI extends React.PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
children: PropTypes.node,
layout: PropTypes.string,
};
state = {
@ -184,15 +180,24 @@ export default class UI extends React.PureComponent {
}
render () {
const { width, draggingOver } = this.state;
const { width, draggingOver, layout } = this.state;
const { children } = this.props;
const columns = "auto";
const columnsClass = layout => {
switch (layout) {
case 'single':
return 'single-column';
case 'multiple':
return 'multiple-columns';
default:
return 'auto-columns';
}
}
return (
<div className={'ui ' + columnClass(columns)} ref={this.setRef}>
<div className={'ui ' + columnsClass(layout)} ref={this.setRef}>
<TabsBar />
<ColumnsAreaContainer singleColumn={isMobile(width, columns)}>
<ColumnsAreaContainer singleColumn={isMobile(width, layout)}>
<WrappedSwitch>
<Redirect from='/' to='/getting-started' exact />
<WrappedRoute path='/getting-started' component={GettingStarted} content={children} />

View file

@ -2,9 +2,9 @@ const LAYOUT_BREAKPOINT = 1024;
export function isMobile(width, columns) {
switch (columns) {
case "multiple":
case 'multiple':
return false;
case "single":
case 'single':
return true;
default:
return width <= LAYOUT_BREAKPOINT;

View file

@ -6,6 +6,7 @@ import uuid from '../uuid';
const initialState = Immutable.Map({
onboarded: false,
layout: 'auto',
home: Immutable.Map({
shows: Immutable.Map({