save night mode in option cookie #676 (#692)

* save night mode in option cookie #676

* moved add night-mode class to componentDidMount

* fixed color of bismaalah for night mode

src/components/GlobalNav/Surah/index.js

@@ -40,7 +40,10 @@ const GlobalNavSurah = ({ chapter, chapters, setOption, options, ...props }) =>
           isToggled={options.isReadingMode}
           onToggle={setOption}
         />
-        <NightModeToggle />
+        <NightModeToggle
+          isNightMode={options.isNightMode}
+          onToggle={setOption}
+        />
       </NavDropdown>,
       <div className="navbar-form navbar-left hidden-xs hidden-sm">
         <SearchInput className="search-input" />
@@ -64,7 +67,10 @@ const GlobalNavSurah = ({ chapter, chapters, setOption, options, ...props }) =>
         isToggled={options.isReadingMode}
         onToggle={setOption}
       />,
-      <NightModeToggle />
+      <NightModeToggle
+        isNightMode={options.isNightMode}
+        onToggle={setOption}
+      />
     ]}
   />
 );

src/components/NightModeToggle/index.js

@@ -1,21 +1,38 @@
 /* global document */
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 class NightModeToggle extends Component {
-  state = {
-    isNightMode: false,
-  };
+  static propTypes = {
+    isNightMode: PropTypes.bool.isRequired,
+    onToggle: PropTypes.func.isRequired
+  }
+
+  componentDidMount() {
+    const { isNightMode } = this.props;
+
+    if (isNightMode) {
+      document.body.classList.add('night-mode');
+    }
+  }
 
   toggleNightMode = () => {
-    document.body.classList.toggle('night-mode');
+    const { isNightMode, onToggle } = this.props;
+
+    if (isNightMode) {
+      document.body.classList.remove('night-mode');
+    } else {
+      document.body.classList.add('night-mode');
+    }
 
-    this.setState({ isNightMode: !this.state.isNightMode });
+    onToggle({ isNightMode: !isNightMode });
   }
 
   render() {
+    const { isNightMode } = this.props;
+
     return (
-      <li className={this.state.isNightMode && 'active'}>
+      <li className={isNightMode && 'active'}>
         <a
           tabIndex="-1"
           className="pointer"

src/components/SurahInfo/index.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react';
 import { surahType } from 'types';
 import Loader from 'quran-components/lib/Loader';
 
-
 const style = require('./style.scss');
 
 const SurahInfo = ({ chapter, isShowingSurahInfo, onClose }) => {

src/redux/actions/options.js

@@ -14,6 +14,10 @@ export function isReadingMode(globalState) {
   return globalState.options.isReadingMode;
 }
 
+export function isNightMode(globalState) {
+  return globalState.options.isNightMode;
+}
+
 export function setOption(payload) {
   const options = cookie.load('options') || {}; // protect against first timers.
 

src/redux/modules/options.js

@@ -9,6 +9,7 @@ import {
 
 const initialState = {
   isReadingMode: false,
+  isNightMode: false,
   isShowingSurahInfo: false,
   loadingRecitations: false,
   loadingTranslations: false,

src/styles/nightmode.scss

@@ -6,7 +6,7 @@
     fill: #fff;
   }
 
-  .bismillah, .text-arabic b{
+  #bismillah, .text-arabic b{
     color: #fff;
   }