From bb6c04406bc4798ad4fd06d4fe67ef72c42d3dd7 Mon Sep 17 00:00:00 2001
From: Arctic Ice Studio <development@arcticicestudio.com>
Date: Tue, 4 Dec 2018 06:11:52 +0100
Subject: [PATCH] Rewrite the `Root` core container as class-based component

The `Root` component has been changed from a SFC to a class component to
store the currently active state and handle the theme mode toggle logic
through a function. It also migrated the currently used simple
"styled-component" theme (1) (provided through the `<ThemeProvider`
component) to the styled-theming theme (2) that provides the initially
implemented theme (GH-53).

References:
  (1) https://www.styled-components.com/docs/advanced#theming
  (2) https://github.com/styled-components/styled-theming

Associated epic: GH-51
GH-57
---
 src/components/containers/core/Root/Root.jsx | 89 +++++++++++++++++---
 src/components/containers/core/Root/index.js |  5 +-
 2 files changed, 80 insertions(+), 14 deletions(-)

diff --git a/src/components/containers/core/Root/Root.jsx b/src/components/containers/core/Root/Root.jsx
index f2d17d41..0d43d898 100644
--- a/src/components/containers/core/Root/Root.jsx
+++ b/src/components/containers/core/Root/Root.jsx
@@ -7,12 +7,20 @@
  * License:    MIT
  */
 
-import React, { Fragment } from "react";
+import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
 import { ThemeProvider, createGlobalStyle } from "styled-components";
 import modernNormalize from "styled-modern-normalize";
 
-import theme, { globals, normalize, MODE_BRIGHT_SNOW_FLURRY } from "styles/theme";
+import theme, {
+  globals,
+  normalize,
+  MODE_BRIGHT_SNOW_FLURRY,
+  MODE_DARK_NIGHT_FROST,
+  THEME_KEY_MODE
+} from "styles/theme";
+import { SESSIONSTORAGE_KEY_THEME_MODE } from "config/stores/caches/constants";
+import { readSessionCache, writeSessionCache } from "utils";
 
 import "inter-ui/inter-ui.css";
 import "typeface-rubik/index.css";
@@ -45,21 +53,76 @@ const GlobalThemeModeContext = React.createContext(MODE_BRIGHT_SNOW_FLURRY);
 const GlobalThemeMode = GlobalThemeModeContext.Consumer;
 
 /**
- * The root container with injected global CSS styles.
+ * The root container with injected global theme mode and CSS styles.
  *
  * @author Arctic Ice Studio <development@arcticicestudio.com>
  * @author Sven Greb <development@svengreb.de>
  * @since 0.1.0
  */
-const Root = ({ children }) => (
-  <Fragment>
-    <GlobalStyle />
-    <ThemeProvider theme={theme}>{children}</ThemeProvider>
-  </Fragment>
-);
+export default class Root extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired
+  };
 
-Root.propTypes = {
-  children: PropTypes.node.isRequired
-};
+  /**
+   * Constructs the compnent with the given `props` and persists the default theme mode if the key is not already stored
+   * in the session storage.
+   *
+   * @method constructor
+   * @param {object} props The React component's `props`.
+   * @since 0.2.0
+   */
+  constructor(props) {
+    super(props);
+    if (!readSessionCache(SESSIONSTORAGE_KEY_THEME_MODE)) {
+      writeSessionCache(SESSIONSTORAGE_KEY_THEME_MODE, MODE_BRIGHT_SNOW_FLURRY);
+    }
+  }
 
-export default Root;
+  state = {
+    themeMode: readSessionCache(SESSIONSTORAGE_KEY_THEME_MODE) || MODE_BRIGHT_SNOW_FLURRY
+  };
+
+  /**
+   * Toggles the global theme mode and persists it in the browser's session storage.
+   * The function is exposed through the global theme mode context provider component.
+   *
+   * @method toggleThemeMode
+   * @return {void}
+   * @since 0.2.0
+   */
+  toggleThemeMode = () => {
+    /* eslint-disable-next-line babel/no-unused-expressions */
+    readSessionCache(SESSIONSTORAGE_KEY_THEME_MODE) === MODE_BRIGHT_SNOW_FLURRY
+      ? writeSessionCache(SESSIONSTORAGE_KEY_THEME_MODE, MODE_DARK_NIGHT_FROST)
+      : writeSessionCache(SESSIONSTORAGE_KEY_THEME_MODE, MODE_BRIGHT_SNOW_FLURRY);
+    this.setState(({ themeMode }) => ({
+      themeMode: themeMode === MODE_BRIGHT_SNOW_FLURRY ? MODE_DARK_NIGHT_FROST : MODE_BRIGHT_SNOW_FLURRY
+    }));
+  };
+
+  render() {
+    const { children } = this.props;
+    const { themeMode } = this.state;
+
+    const themeModeContextValue = {
+      toggleThemeMode: this.toggleThemeMode,
+      [THEME_KEY_MODE]: themeMode
+    };
+    const composedTheme = {
+      ...themeModeContextValue,
+      ...theme
+    };
+
+    return (
+      <Fragment>
+        <GlobalThemeModeContext.Provider value={themeModeContextValue}>
+          <GlobalStyle theme={themeModeContextValue} />
+          <ThemeProvider theme={composedTheme}>{children}</ThemeProvider>
+        </GlobalThemeModeContext.Provider>
+      </Fragment>
+    );
+  }
+}
+
+export { GlobalThemeMode };
diff --git a/src/components/containers/core/Root/index.js b/src/components/containers/core/Root/index.js
index 5fd68692..f110db04 100644
--- a/src/components/containers/core/Root/index.js
+++ b/src/components/containers/core/Root/index.js
@@ -7,4 +7,7 @@
  * License:    MIT
  */
 
-export { default } from "./Root";
+import Root, { GlobalThemeMode } from "./Root";
+
+export { GlobalThemeMode };
+export default Root;