freeCodeCamp/client/epics/night-mode-epic.js

60 lines
1.5 KiB
JavaScript

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);
}