fix(nightModeEpic): Colocate in app
This moves epic into main app and prevents it running server side
This commit is contained in:
@ -1,59 +0,0 @@
|
|||||||
import _ from 'lodash';
|
|
||||||
import { Observable } from 'rx';
|
|
||||||
import { ofType } from 'redux-epic';
|
|
||||||
import store from 'store';
|
|
||||||
|
|
||||||
import { themes } from '../../common/utils/themes.js';
|
|
||||||
import { postJSON$ } from '../../common/utils/ajax-stream.js';
|
|
||||||
import {
|
|
||||||
types,
|
|
||||||
|
|
||||||
postThemeComplete,
|
|
||||||
createErrorObservable,
|
|
||||||
|
|
||||||
themeSelector,
|
|
||||||
usernameSelector,
|
|
||||||
csrfSelector
|
|
||||||
} from '../../common/app/redux';
|
|
||||||
|
|
||||||
function persistTheme(theme) {
|
|
||||||
store.set('fcc-theme', theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function nightModeSaga(
|
|
||||||
actions,
|
|
||||||
{ getState },
|
|
||||||
{ document: { body } }
|
|
||||||
) {
|
|
||||||
const toggleBodyClass = actions
|
|
||||||
::ofType(
|
|
||||||
types.fetchUser.complete,
|
|
||||||
types.toggleNightMode,
|
|
||||||
types.postThemeComplete
|
|
||||||
)
|
|
||||||
.map(_.flow(getState, themeSelector))
|
|
||||||
// catch existing night mode users
|
|
||||||
.do(persistTheme)
|
|
||||||
.do(theme => {
|
|
||||||
if (theme === themes.night) {
|
|
||||||
body.classList.add(themes.night);
|
|
||||||
} else {
|
|
||||||
body.classList.remove(themes.night);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.ignoreElements();
|
|
||||||
|
|
||||||
const postThemeEpic = actions::ofType(types.toggleNightMode)
|
|
||||||
.debounce(250)
|
|
||||||
.flatMapLatest(() => {
|
|
||||||
const _csrf = csrfSelector(getState());
|
|
||||||
const theme = themeSelector(getState());
|
|
||||||
const username = usernameSelector(getState());
|
|
||||||
return postJSON$('/update-my-theme', { _csrf, theme })
|
|
||||||
.pluck('updatedTo')
|
|
||||||
.map(theme => postThemeComplete(username, theme))
|
|
||||||
.catch(createErrorObservable);
|
|
||||||
});
|
|
||||||
|
|
||||||
return Observable.merge(toggleBodyClass, postThemeEpic);
|
|
||||||
}
|
|
64
common/app/redux/night-mode-epic.js
Normal file
64
common/app/redux/night-mode-epic.js
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
import _ from 'lodash';
|
||||||
|
import { Observable } from 'rx';
|
||||||
|
import { ofType } from 'redux-epic';
|
||||||
|
import store from 'store';
|
||||||
|
|
||||||
|
import { themes } from '../../utils/themes.js';
|
||||||
|
import { postJSON$ } from '../../utils/ajax-stream.js';
|
||||||
|
import {
|
||||||
|
types,
|
||||||
|
|
||||||
|
postThemeComplete,
|
||||||
|
createErrorObservable,
|
||||||
|
|
||||||
|
themeSelector,
|
||||||
|
usernameSelector,
|
||||||
|
csrfSelector
|
||||||
|
} from './index.js';
|
||||||
|
|
||||||
|
function persistTheme(theme) {
|
||||||
|
store.set('fcc-theme', theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function nightModeEpic(
|
||||||
|
actions,
|
||||||
|
{ getState },
|
||||||
|
{ document }
|
||||||
|
) {
|
||||||
|
return Observable.of(document)
|
||||||
|
// if document is undefined we do nothing (ssr trap)
|
||||||
|
.filter(Boolean)
|
||||||
|
.flatMap(({ body }) => {
|
||||||
|
const toggleBodyClass = actions
|
||||||
|
::ofType(
|
||||||
|
types.fetchUser.complete,
|
||||||
|
types.toggleNightMode,
|
||||||
|
types.postThemeComplete
|
||||||
|
)
|
||||||
|
.map(_.flow(getState, themeSelector))
|
||||||
|
// catch existing night mode users
|
||||||
|
.do(persistTheme)
|
||||||
|
.do(theme => {
|
||||||
|
if (theme === themes.night) {
|
||||||
|
body.classList.add(themes.night);
|
||||||
|
} else {
|
||||||
|
body.classList.remove(themes.night);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.ignoreElements();
|
||||||
|
|
||||||
|
const postThemeEpic = actions::ofType(types.toggleNightMode)
|
||||||
|
.debounce(250)
|
||||||
|
.flatMapLatest(() => {
|
||||||
|
const _csrf = csrfSelector(getState());
|
||||||
|
const theme = themeSelector(getState());
|
||||||
|
const username = usernameSelector(getState());
|
||||||
|
return postJSON$('/update-my-theme', { _csrf, theme })
|
||||||
|
.pluck('updatedTo')
|
||||||
|
.map(theme => postThemeComplete(username, theme))
|
||||||
|
.catch(createErrorObservable);
|
||||||
|
});
|
||||||
|
|
||||||
|
return Observable.merge(toggleBodyClass, postThemeEpic);
|
||||||
|
});
|
||||||
|
}
|
Reference in New Issue
Block a user