feat: add toggle theme button (#18)

* feat: read theme cookies * styled the toggle theme buutton * fix: update test snapshots
edly-io · Aug 15, 2024 · 48428ac · 48428ac
1 parent f25b9b3
commit 48428ac
Show file tree

Hide file tree

Showing 7 changed files with 250 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,7 +64,8 @@
     "babel-polyfill": "6.26.0",
     "jest-environment-jsdom": "^29.7.0",
     "react-responsive": "8.2.0",
-    "react-transition-group": "4.4.5"
+    "react-transition-group": "4.4.5",
+    "universal-cookie": "^7.2.0"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",

diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
+import ThemeToggleButton from './ThemeToggleButton';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
@@ -156,6 +157,7 @@ class DesktopHeader extends React.Component {
               aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
               className="nav secondary-menu-container align-items-center ml-auto"
             >
+              <ThemeToggleButton />
               {loggedIn
                 ? (
                   <>

diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx
@@ -6,6 +6,7 @@ import { getConfig } from '@edx/frontend-platform';
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import { LinkedLogo, Logo } from './Logo';
+import ThemeToggleButton from './ThemeToggleButton';
 
 // i18n
 import messages from './Header.messages';
@@ -154,6 +155,7 @@ class MobileHeader extends React.Component {
         <div className={`logo-holder ${logoClasses}`}>
           { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
         </div>
+        <ThemeToggleButton />
         {userMenu.length > 0 || loggedOutItems.length > 0 ? (
           <div className="mobile-menu">
             <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">

diff --git a/src/ThemeToggleButton.jsx b/src/ThemeToggleButton.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import Cookies from 'universal-cookie';
+
+const ThemeToggleButton = () => {
+  const getNextWeek = () => {
+    const today = new Date();
+    return new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
+  };
+
+  const onToggleTheme = () => {
+    const cookies = new Cookies();
+    const serverURL = new URL(getConfig().LMS_BASE_URL);
+    const themeCookieName = getConfig().THEME_COOKIE_NAME;
+
+    const options = { domain: serverURL.hostname, path: '/', expires: getNextWeek() };
+    let themeName = '';
+
+    if (cookies.get(themeCookieName) === 'dark') {
+      document.body.classList.remove('indigo-dark-theme');
+      themeName = 'light';
+    } else {
+      document.body.classList.add('indigo-dark-theme');
+      themeName = 'dark';
+    }
+    cookies.set(themeCookieName, themeName, options);
+  };
+
+  return (
+    <div className="theme-toggle-button">
+      <span id="darkmode" role="button" tabIndex="0" onClick={onToggleTheme} onKeyDown={onToggleTheme}>
+        <div className="darkmode_icon">
+          <span className="ray" />
+          <span className="ray" />
+          <span className="ray" />
+          <span className="ray" />
+          <span className="ray" />
+          <span className="ray" />
+          <span className="ray" />
+          <span className="ray" />
+        </div>
+      </span>
+    </div>
+  );
+};
+
+export default ThemeToggleButton;
diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap
@@ -42,6 +42,46 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
         aria-label="Secondary"
         className="nav secondary-menu-container align-items-center ml-auto"
       >
+        <div
+          className="theme-toggle-button"
+        >
+          <span
+            id="darkmode"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="0"
+          >
+            <div
+              className="darkmode_icon"
+            >
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+            </div>
+          </span>
+        </div>
         <a
           className="btn mr-2 btn-link"
           href="http://localhost:18000/login"
@@ -143,6 +183,46 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
       />
     </a>
   </div>
+  <div
+    className="theme-toggle-button"
+  >
+    <span
+      id="darkmode"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      <div
+        className="darkmode_icon"
+      >
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+      </div>
+    </span>
+  </div>
   <div
     className="mobile-menu"
   >
@@ -225,6 +305,46 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
         aria-label="Secondary"
         className="nav secondary-menu-container align-items-center ml-auto"
       >
+        <div
+          className="theme-toggle-button"
+        >
+          <span
+            id="darkmode"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="button"
+            tabIndex="0"
+          >
+            <div
+              className="darkmode_icon"
+            >
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+              <span
+                className="ray"
+              />
+            </div>
+          </span>
+        </div>
         <div
           className="menu null"
           onKeyDown={[Function]}
@@ -376,6 +496,46 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
       />
     </a>
   </div>
+  <div
+    className="theme-toggle-button"
+  >
+    <span
+      id="darkmode"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      <div
+        className="darkmode_icon"
+      >
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+        <span
+          className="ray"
+        />
+      </div>
+    </span>
+  </div>
   <div
     className="mobile-menu"
   >

diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
@@ -6,6 +6,7 @@ import { AppContext } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
+import ThemeToggleButton from '../ThemeToggleButton';
 import messages from './messages';
 
 const LinkedLogo = ({
@@ -60,6 +61,7 @@ const LearningHeader = ({
             </a>
           </div>
         </div>
+        <ThemeToggleButton />
         {showUserDropdown && authenticatedUser && (
         <AuthenticatedUserDropdown
           username={authenticatedUser.username}