From cc496242dc7aa92ffd65f7ee61b4696a5d9461e9 Mon Sep 17 00:00:00 2001
From: Hina Khadim <hina.khadim@arbisoft.com>
Date: Mon, 19 Aug 2024 12:08:36 +0500
Subject: [PATCH] fix: show toggle theme button when THEME_COOKIE_NAME config
 is set (#19)

---
 src/DesktopHeader.jsx                  |   2 +-
 src/ThemeToggleButton.jsx              |   7 +-
 src/__snapshots__/Header.test.jsx.snap | 160 +------------------------
 3 files changed, 13 insertions(+), 156 deletions(-)

diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
index d915f7812..791aac8e4 100644
--- 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
index 862e4d01e..5b66f4ab2 100644
--- 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
index eb320bef2..d96affcb8 100644
--- 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"
   >