dark mode

config/jest/setupTests.js

@@ -1,4 +1,5 @@
 import chalk from 'chalk';
+Object.entries = require('object.entries'); // because jest doesn't import babel
 import config from '../../public/config/config.json';
 
 // Override console.error() for invalid or failed propTypes by throwing an Error
@@ -30,6 +31,12 @@ global.window.URL.createObjectURL = () => {};
 // Stub msSaveBlob
 global.window.navigator.msSaveBlob = () => {};
 
+global.MutationObserver = class {
+  constructor(callback) {}
+  disconnect() {}
+  observe(element, initObject) {}
+}
+
 beforeEach(() => {
   // mock sessionStorage - feature flags config
   sessionStorage.setItem('config', JSON.stringify(config));

package.json

@@ -10,6 +10,7 @@
     "body-parser": "^1.18.2",
     "bunyan": "^1.8.12",
     "css-box-shadow": "^1.0.0-3",
+    "darkreader": "^4.7.15",
     "date-fns": "^1.29.0",
     "draft-js": "^0.10.4",
     "draft-js-plugins-editor": "^2.1.1",
@@ -104,6 +105,7 @@
     "node-mocks-http": "^1.7.6",
     "node-sass": "^4.7.2",
     "object-assign": "4.1.1",
+    "object.entries": "^1.1.0",
     "pa11y-ci": "^1.3.1",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",

public/config/config.json

@@ -11,6 +11,7 @@
     "complete_bidding": true,
     "data_sync_admin": true,
     "available_positions": false,
+    "personalization": true,
     "persona_auth": true
   }
 }

public/config/config_dev.json

@@ -11,6 +11,7 @@
     "complete_bidding": true,
     "data_sync_admin": true,
     "available_positions": false,
+    "personalization": true,
     "persona_auth": true
   }
 }

src/Components/AccountDropdown/AccountDropdown.jsx

@@ -4,7 +4,11 @@ import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdow
 import PropTypes from 'prop-types';
 import { get, compact, values } from 'lodash';
 import Avatar from '../Avatar';
+import DarkModeToggle from './DarkModeToggle';
 import { EMPTY_FUNCTION, USER_PROFILE } from '../../Constants/PropTypes';
+import { checkFlag } from '../../flags';
+
+const getUseDarkMode = () => checkFlag('flags.personalization');
 
 export class AccountDropdown extends Component {
 
@@ -65,6 +69,10 @@ export class AccountDropdown extends Component {
               <strong>{displayName}</strong>
             </div>
             <Link className="account-dropdown--identity account-dropdown--segment account-dropdown-link" to="/profile/dashboard" onClick={this.hideDropdown}>Dashboard</Link>
+            {
+              getUseDarkMode() &&
+              <DarkModeToggle className="unstyled-button account-dropdown--identity account-dropdown--segment account-dropdown-link account-dropdown-link--button" />
+            }
             <Link className="account-dropdown--identity account-dropdown--segment account-dropdown-link" to="/logout" onClick={this.logout}>Logout</Link>
           </DropdownContent>
         </div>

src/Components/AccountDropdown/DarkModeToggle.jsx

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { setDarkModePreference } from '../../actions/preferences';
+import { EMPTY_FUNCTION } from '../../Constants/PropTypes';
+
+class DarkModeToggle extends Component {
+
+  constructor(props) {
+    super(props);
+    this.onClickUnset = this.onClickUnset.bind(this);
+    this.onClickSet = this.onClickSet.bind(this);
+  }
+
+  onClickUnset() {
+    this.props.set(false);
+  }
+
+  onClickSet() {
+    this.props.set(true);
+  }
+
+  render() {
+    const { isDarkMode, set, ...rest } = this.props;
+    return (
+      isDarkMode ?
+        <button className="unstyled-button" onClick={this.onClickUnset} {...rest}>Disable Dark Mode</button>
+        :
+        <button className="unstyled-button" onClick={this.onClickSet} {...rest}>Enable Dark Mode</button>
+    );
+  }
+}
+
+DarkModeToggle.propTypes = {
+  isDarkMode: PropTypes.bool,
+  set: PropTypes.func,
+};
+
+DarkModeToggle.defaultProps = {
+  isDarkMode: false,
+  set: EMPTY_FUNCTION,
+};
+
+const mapStateToProps = state => ({
+  isDarkMode: state.darkModePreference,
+});
+
+export const mapDispatchToProps = dispatch => ({
+  set: bool => dispatch(setDarkModePreference(bool)),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DarkModeToggle);

src/Components/AccountDropdown/DarkModeToggle.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { testDispatchFunctions } from '../../testUtilities/testUtilities';
+import DarkModeToggle, { mapDispatchToProps } from './DarkModeToggle';
+
+describe('DarkModeToggle', () => {
+  const props = {
+    isDarkMode: false,
+    set: () => {},
+  };
+
+  it('is defined', () => {
+    const wrapper = shallow(
+      <DarkModeToggle.WrappedComponent {...props} />,
+    );
+    expect(wrapper).toBeDefined();
+  });
+
+  it('it displays "Disable" when isDarkMode === true', () => {
+    const wrapper = shallow(
+      <DarkModeToggle.WrappedComponent {...props} isDarkMode />,
+    );
+    expect(wrapper.find('button').text()).toBe('Disable Dark Mode');
+  });
+
+  it('it displays "Enable" when isDarkMode !== true', () => {
+    const wrapper = shallow(
+      <DarkModeToggle.WrappedComponent {...props} />,
+    );
+    expect(wrapper.find('button').text()).toBe('Enable Dark Mode');
+  });
+
+  it('calls the set function', () => {
+    let val = true;
+    const onClick = v => val = v; // eslint-disable-line
+    const wrapper = shallow(
+      <DarkModeToggle.WrappedComponent {...props} isDarkMode set={onClick} />,
+    );
+    const click = () => wrapper.find('button').simulate('click');
+    click();
+    expect(val).toBe(false);
+    wrapper.setProps({ isDarkMode: false });
+    wrapper.update();
+    click();
+    expect(val).toBe(true);
+  });
+});
+
+describe('mapDispatchToProps', () => {
+  testDispatchFunctions(mapDispatchToProps, { bool: [true] });
+});

src/Components/AccountDropdown/__snapshots__/AccountDropdown.test.jsx.snap

@@ -46,6 +46,9 @@ exports[`AccountDropdown matches snapshot 1`] = `
       >
         Dashboard
       </Link>
+      <Connect(DarkModeToggle)
+        className="unstyled-button account-dropdown--identity account-dropdown--segment account-dropdown-link account-dropdown-link--button"
+      />
       <Link
         className="account-dropdown--identity account-dropdown--segment account-dropdown-link"
         onClick={[Function]}
@@ -111,6 +114,9 @@ exports[`AccountDropdown matches snapshot when shouldDisplayName is true 1`] = `
       >
         Dashboard
       </Link>
+      <Connect(DarkModeToggle)
+        className="unstyled-button account-dropdown--identity account-dropdown--segment account-dropdown-link account-dropdown-link--button"
+      />
       <Link
         className="account-dropdown--identity account-dropdown--segment account-dropdown-link"
         onClick={[Function]}

src/Containers/DarkMode/DarkMode.jsx

@@ -0,0 +1,55 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import {
+    enable as enableDarkMode,
+    disable as disableDarkMode,
+} from 'darkreader';
+import { checkFlag } from '../../flags';
+
+const getUseDarkMode = () => checkFlag('flags.personalization');
+
+const setMode = (value) => {
+  if (!value || !getUseDarkMode()) {
+    disableDarkMode();
+  } else {
+    enableDarkMode({
+      brightness: 100,
+      contrast: 90,
+      sepia: 10,
+    });
+  }
+};
+
+class DarkMode extends Component {
+
+  componentWillMount() {
+    const { isDarkMode } = this.props;
+    setMode(isDarkMode);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { isDarkMode } = nextProps;
+    setMode(isDarkMode);
+  }
+
+  render() {
+    return (
+      <div />
+    );
+  }
+}
+
+DarkMode.propTypes = {
+  isDarkMode: PropTypes.bool,
+};
+
+DarkMode.defaultProps = {
+  isDarkMode: false,
+};
+
+const mapStateToProps = state => ({
+  isDarkMode: state.darkModePreference,
+});
+
+export default connect(mapStateToProps)(DarkMode);

src/Containers/DarkMode/DarkMode.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import DarkMode from './DarkMode';
+
+describe('DarkMode', () => {
+  const props = {
+    isDarkMode: true,
+  };
+
+  it('is defined', () => {
+    const wrapper = shallow(
+      <DarkMode.WrappedComponent {...props} />,
+    );
+    expect(wrapper).toBeDefined();
+  });
+});

src/Containers/DarkMode/index.js

@@ -0,0 +1 @@
+export { default } from './DarkMode';

src/Containers/Main/Main.jsx

@@ -8,6 +8,7 @@ import Header from '../../Components/Header/Header';
 import Footer from '../../Components/Footer/Footer';
 import Glossary from '../../Containers/Glossary';
 import AuthorizedWrapper from '../../Containers/AuthorizedWrapper';
+import DarkMode from '../../Containers/DarkMode';
 import checkIndexAuthentication from '../../lib/check-auth';
 import { store, history } from '../../store';
 import PageMeta from '../../Containers/PageMeta';
@@ -24,6 +25,7 @@ const Main = props => (
       <ConnectedRouter history={history}>
         <ScrollContext>
           <div>
+            <DarkMode />
             <PageMeta history={history} />
             <Header {...props} isAuthorized={isAuthorized} />
             <main id="main-content">

src/Containers/PreferenceWrapper/PreferenceWrapper.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { setSortPreference } from '../../actions/sortPreferences';
+import { setSortPreference } from '../../actions/preferences';
 
 export class PreferenceWrapper extends Component {
   constructor(props) {

src/actions/sortPreferences.js → src/actions/preferences.js

@@ -6,8 +6,21 @@ export function sortPreference(key, value) {
   };
 }
 
+export function darkModePreference(value) {
+  return {
+    type: 'SET_DARK_MODE_PREFERENCE',
+    value,
+  };
+}
+
 export function setSortPreference(key, value) {
   return (dispatch) => {
     dispatch(sortPreference(key, value));
   };
 }
+
+export function setDarkModePreference(value) {
+  return (dispatch) => {
+    dispatch(darkModePreference(value));
+  };
+}

src/actions/sortPreferences.test.js → src/actions/preferences.test.js

@@ -1,5 +1,5 @@
 import { setupAsyncMocks } from '../testUtilities/testUtilities';
-import * as actions from './sortPreferences';
+import * as actions from './preferences';
 
 const { mockStore } = setupAsyncMocks();
 

src/reducers/index.js

@@ -36,7 +36,7 @@ import feedback from './feedback';
 import features from './features';
 import toast from './toast';
 import clientView from './clientView';
-import sortPreferences from './sortPreferences';
+import preferences from './preferences';
 import aboutContent from './aboutContent';
 import homeBannerContent from './homeBannerContent';
 import logs from './logs';
@@ -78,7 +78,7 @@ export default combineReducers({
   ...features,
   ...toast,
   ...clientView,
-  ...sortPreferences,
+  ...preferences,
   ...aboutContent,
   ...homeBannerContent,
   ...logs,

src/reducers/preferences/index.js

@@ -0,0 +1,3 @@
+import preferences, { darkModePreference } from './preferences';
+
+export default { preferences, darkModePreference };

src/reducers/sortPreferences/sortPreferences.js → src/reducers/preferences/preferences.js

@@ -27,3 +27,13 @@ export default function sortPreferences(state = SORT_PREFERENCES_WITHOUT_OPTIONS
       return state;
   }
 }
+
+export function darkModePreference(state = false, action) {
+  switch (action.type) {
+    case 'SET_DARK_MODE_PREFERENCE': {
+      return action.value;
+    }
+    default:
+      return state;
+  }
+}

src/reducers/sortPreferences/sortPreferences.test.js → src/reducers/preferences/preferences.test.js

@@ -1,9 +1,9 @@
-import sortPreferences from './sortPreferences';
+import preferences from './preferences';
 import { POSITION_SEARCH_SORTS_TYPE } from '../../Constants/Sort';
 
 describe('reducers', () => {
   it('can set reducer SET_SORT_PREFERENCE', () => {
-    expect(sortPreferences({}, { type: 'SET_SORT_PREFERENCE', key: POSITION_SEARCH_SORTS_TYPE, value: 'title' }))
+    expect(preferences({}, { type: 'SET_SORT_PREFERENCE', key: POSITION_SEARCH_SORTS_TYPE, value: 'title' }))
       .toBeDefined();
   });
 });

src/sass/_dropdown.scss

@@ -21,6 +21,10 @@
     width: 100%;
   }
 
+  .account-dropdown-link--button {
+    font-weight: bold;
+  }
+
   .account-dropdown-link:hover,
   .account-dropdown-link:focus {
     background: $blue-primary;

src/store.js

@@ -17,7 +17,7 @@ import IndexSagas from './index-sagas';
 const persistConfig = {
   key: 'root',
   storage,
-  whitelist: ['sortPreferences'], // only persist sortPreferences reducer
+  whitelist: ['preferences', 'darkModePreference'], // only persist some reducers
 };
 
 // Setup the middleware to watch between the Reducers and the Actions