gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(theme): Toggle and persist theme locally

Browse Source
This commit is contained in:
Bouncey
2018-09-14 14:48:16 +01:00
committed by Stuart Taylor
parent c7a4b5b50f
commit 0c3856c0d2
5 changed files with 46 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/package-lock.json generated
View File

@ -12112,6 +12112,11 @@
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
"integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
}, },
"store": {
"version": "2.0.12",
"resolved": "https://registry.npmjs.org/store/-/store-2.0.12.tgz",
"integrity": "sha1-jFNOKguDH3K3X8XxEZhXxE711ZM="
},
"stream-browserify": { "stream-browserify": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",

1
client/package.json
View File

@ -33,6 +33,7 @@
"redux-actions": "^2.6.1", "redux-actions": "^2.6.1",
"redux-saga": "^0.16.0", "redux-saga": "^0.16.0",
"reselect": "^3.0.1", "reselect": "^3.0.1",
"store": "^2.0.12",
"validator": "^10.7.0" "validator": "^10.7.0"
}, },
"keywords": [ "keywords": [

2
client/src/html.js
View File

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
export default class HTML extends React.Component { export default class HTML extends React.Component {
render() { render() {
return ( return (
<html {...this.props.htmlAttributes} land='en'> <html id='__fcc-html' {...this.props.htmlAttributes} lang='en'>
<head> <head>
<meta charSet='utf-8' /> <meta charSet='utf-8' />
<meta content='ie=edge' httpEquiv='x-ua-compatible' /> <meta content='ie=edge' httpEquiv='x-ua-compatible' />

4
client/src/redux/index.js
View File

@ -7,6 +7,7 @@ import { createAppMountSaga } from './app-mount-saga';
import { createReportUserSaga } from './report-user-saga'; import { createReportUserSaga } from './report-user-saga';
import { createShowCertSaga } from './show-cert-saga'; import { createShowCertSaga } from './show-cert-saga';
import { createUpdateMyEmailSaga } from './update-email-saga'; import { createUpdateMyEmailSaga } from './update-email-saga';
import { createNightModeSaga } from './night-mode-saga';
import { types as settingsTypes } from './settings'; import { types as settingsTypes } from './settings';
@ -49,7 +50,8 @@ export const sagas = [
...createFetchUserSaga(types), ...createFetchUserSaga(types),
...createUpdateMyEmailSaga(types), ...createUpdateMyEmailSaga(types),
...createShowCertSaga(types), ...createShowCertSaga(types),
...createReportUserSaga(types) ...createReportUserSaga(types),
...createNightModeSaga({ ...types, ...settingsTypes })
]; ];
export const appMount = createAction(types.appMount); export const appMount = createAction(types.appMount);

36
client/src/redux/night-mode-saga.js Normal file
View File

@ -0,0 +1,36 @@
/* eslint-disable require-yield */
import { takeEvery } from 'redux-saga/effects';
import store from 'store';
const themeKey = 'fcc-theme';
const defaultTheme = 'default';
const nightTheme = 'night';
function setTheme(currentTheme = defaultTheme, theme) {
if (currentTheme !== theme) {
store.set(themeKey, theme);
}
const html = document.getElementById('__fcc-html');
html.classList.remove(theme === nightTheme ? defaultTheme : nightTheme);
html.classList.add(theme);
}
function* updateLocalThemeSaga({ payload }) {
const currentTheme = store.get(themeKey);
if ('user' in payload) {
const { theme = defaultTheme } = payload.user;
return setTheme(currentTheme, theme);
}
if ('theme' in payload) {
return setTheme(currentTheme, payload.theme);
}
return setTheme(currentTheme);
}
export function createNightModeSaga(types) {
return [
takeEvery(types.fetchUserComplete, updateLocalThemeSaga),
takeEvery(types.updateUserFlagComplete, updateLocalThemeSaga)
];
}