diff --git a/app/javascript/flavours/glitch/actions/app.js b/app/javascript/flavours/glitch/actions/app.js deleted file mode 100644 index de2d93e29..000000000 --- a/app/javascript/flavours/glitch/actions/app.js +++ /dev/null @@ -1,6 +0,0 @@ -export const APP_LAYOUT_CHANGE = 'APP_LAYOUT_CHANGE'; - -export const changeLayout = layout => ({ - type: APP_LAYOUT_CHANGE, - layout, -}); diff --git a/app/javascript/flavours/glitch/actions/app.ts b/app/javascript/flavours/glitch/actions/app.ts new file mode 100644 index 000000000..1fc441609 --- /dev/null +++ b/app/javascript/flavours/glitch/actions/app.ts @@ -0,0 +1,7 @@ +import { createAction } from '@reduxjs/toolkit'; + +type ChangeLayoutPayload = { + layout: 'mobile' | 'single-column' | 'multi-column'; +}; +export const changeLayout = + createAction('APP_LAYOUT_CHANGE'); diff --git a/app/javascript/flavours/glitch/features/ui/index.jsx b/app/javascript/flavours/glitch/features/ui/index.jsx index aee6743dc..cc7937e5e 100644 --- a/app/javascript/flavours/glitch/features/ui/index.jsx +++ b/app/javascript/flavours/glitch/features/ui/index.jsx @@ -378,7 +378,7 @@ class UI extends React.Component { if (layout !== this.props.layout) { this.handleLayoutChange.cancel(); - this.props.dispatch(changeLayout(layout)); + this.props.dispatch(changeLayout({ layout })); } else { this.handleLayoutChange(); } diff --git a/app/javascript/flavours/glitch/reducers/meta.js b/app/javascript/flavours/glitch/reducers/meta.js index 7a38a9090..c38dc6096 100644 --- a/app/javascript/flavours/glitch/reducers/meta.js +++ b/app/javascript/flavours/glitch/reducers/meta.js @@ -1,5 +1,5 @@ import { STORE_HYDRATE } from 'flavours/glitch/actions/store'; -import { APP_LAYOUT_CHANGE } from 'flavours/glitch/actions/app'; +import { changeLayout } from 'flavours/glitch/actions/app'; import { Map as ImmutableMap } from 'immutable'; import { layoutFromWindow } from 'flavours/glitch/is_mobile'; @@ -16,8 +16,8 @@ export default function meta(state = initialState, action) { return state.merge(action.state.get('meta')) .set('permissions', action.state.getIn(['role', 'permissions'])) .set('layout', layoutFromWindow(action.state.getIn(['local_settings', 'layout']))); - case APP_LAYOUT_CHANGE: - return state.set('layout', action.layout); + case changeLayout.type: + return state.set('layout', action.payload.layout); default: return state; }