fix: show toggle theme button when THEME_COOKIE_NAME config is set (#19)

edly-io · Aug 19, 2024 · cc49624 · cc49624
1 parent 48428ac
commit cc49624
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 156 deletions.
diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
@@ -157,7 +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 />
+              <div className="mr-3"><ThemeToggleButton /></div>
               {loggedIn
                 ? (
                   <>

diff --git a/src/ThemeToggleButton.jsx b/src/ThemeToggleButton.jsx
@@ -3,6 +3,8 @@ import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';
 
 const ThemeToggleButton = () => {
+  const themeCookieName = getConfig().THEME_COOKIE_NAME ? getConfig().THEME_COOKIE_NAME : null;
+
   const getNextWeek = () => {
     const today = new Date();
     return new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
@@ -11,7 +13,6 @@ const ThemeToggleButton = () => {
   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 = '';
@@ -26,6 +27,10 @@ const ThemeToggleButton = () => {
     cookies.set(themeCookieName, themeName, options);
   };
 
+  if (!themeCookieName) {
+    return <div />;
+  }
+
   return (
     <div className="theme-toggle-button">
       <span id="darkmode" role="button" tabIndex="0" onClick={onToggleTheme} onKeyDown={onToggleTheme}>

diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap
@@ -43,44 +43,9 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
         className="nav secondary-menu-container align-items-center ml-auto"
       >
         <div
-          className="theme-toggle-button"
+          className="mr-3"
         >
-          <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>
         <a
           className="btn mr-2 btn-link"
@@ -183,46 +148,7 @@ 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 />
   <div
     className="mobile-menu"
   >
@@ -306,44 +232,9 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
         className="nav secondary-menu-container align-items-center ml-auto"
       >
         <div
-          className="theme-toggle-button"
+          className="mr-3"
         >
-          <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>
         <div
           className="menu null"
@@ -496,46 +387,7 @@ 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 />
   <div
     className="mobile-menu"
   >