From ade1b90eda0b7ff59ca0e7548ef5877e0948a2fe Mon Sep 17 00:00:00 2001
From: hinakhadim <hina.khadim@arbisoft.com>
Date: Fri, 9 Aug 2024 16:33:35 +0500
Subject: [PATCH 1/3] feat: read theme cookies

---
 package-lock.json                      | 56 ++++++++++++++++----------
 package.json                           |  3 +-
 src/DesktopHeader.jsx                  |  2 +
 src/MobileHeader.jsx                   |  2 +
 src/ThemeToggleButton.jsx              | 28 +++++++++++++
 src/learning-header/LearningHeader.jsx |  2 +
 6 files changed, 71 insertions(+), 22 deletions(-)
 create mode 100644 src/ThemeToggleButton.jsx

diff --git a/package-lock.json b/package-lock.json
index 89847a22d..44fcbe9d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,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"
       },
       "devDependencies": {
         "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
@@ -2254,6 +2255,12 @@
         "redux": "^4.0.4"
       }
     },
+    "node_modules/@edx/frontend-platform/node_modules/@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==",
+      "dev": true
+    },
     "node_modules/@edx/frontend-platform/node_modules/axios": {
       "version": "0.28.1",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.28.1.tgz",
@@ -2266,6 +2273,25 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/@edx/frontend-platform/node_modules/cookie": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
+      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@edx/frontend-platform/node_modules/universal-cookie": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
+      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
+      "dev": true,
+      "dependencies": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
     "node_modules/@edx/new-relic-source-map-webpack-plugin": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@edx/new-relic-source-map-webpack-plugin/-/new-relic-source-map-webpack-plugin-2.1.0.tgz",
@@ -4455,10 +4481,9 @@
       }
     },
     "node_modules/@types/cookie": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
-      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==",
-      "dev": true
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
     },
     "node_modules/@types/eslint": {
       "version": "8.56.10",
@@ -7008,7 +7033,6 @@
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
       "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -18065,22 +18089,12 @@
       }
     },
     "node_modules/universal-cookie": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
-      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
-      "dev": true,
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.2.0.tgz",
+      "integrity": "sha512-PvcyflJAYACJKr28HABxkGemML5vafHmiL4ICe3e+BEKXRMt0GaFLZhAwgv637kFFnnfiSJ8e6jknrKkMrU+PQ==",
       "dependencies": {
-        "@types/cookie": "^0.3.3",
-        "cookie": "^0.4.0"
-      }
-    },
-    "node_modules/universal-cookie/node_modules/cookie": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
-      "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.6.0"
       }
     },
     "node_modules/universalify": {
diff --git a/package.json b/package.json
index e55e2f6c2..82fd52d4b 100644
--- 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
index 05cc9372d..eac778a49 100644
--- 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';
@@ -152,6 +153,7 @@ class DesktopHeader extends React.Component {
             >
               {this.renderMainMenu()}
             </nav>
+            <ThemeToggleButton />
             <nav
               aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
               className="nav secondary-menu-container align-items-center ml-auto"
diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx
index 767e0c8c7..e26c539de 100644
--- 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
new file mode 100644
index 000000000..04521af17
--- /dev/null
+++ b/src/ThemeToggleButton.jsx
@@ -0,0 +1,28 @@
+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 onToggleHandle = (themeName) => {
+    const cookies = new Cookies();
+    console.log('---egtt---', getConfig());
+    const options = { domain: 'local.edly.io', path: '/', expires: getNextWeek() };
+
+    if (themeName === 'dark') {
+      document.body.classList.add('indigo-dark-theme');
+    } else {
+      document.body.classList.remove('indigo-dark-theme');
+    }
+    cookies.set('indigo-theme-type', themeName, options);
+  };
+
+  return (
+    <div><button type="button" onClick={() => onToggleHandle('light')}>Light</button><button type="button" onClick={() => onToggleHandle('dark')}>Dark</button></div>
+  );
+};
+
+export default ThemeToggleButton;
diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
index 576aa6768..dccccefe1 100644
--- 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}

From 40d40c055c5f66bba44e153a85efb677f4fca481 Mon Sep 17 00:00:00 2001
From: hinakhadim <hina.khadim@arbisoft.com>
Date: Mon, 12 Aug 2024 13:49:42 +0500
Subject: [PATCH 2/3] styled the toggle theme buutton

---
 src/DesktopHeader.jsx     |  2 +-
 src/ThemeToggleButton.jsx | 34 ++++++++++++++++++++++++++--------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
index eac778a49..d915f7812 100644
--- a/src/DesktopHeader.jsx
+++ b/src/DesktopHeader.jsx
@@ -153,11 +153,11 @@ class DesktopHeader extends React.Component {
             >
               {this.renderMainMenu()}
             </nav>
-            <ThemeToggleButton />
             <nav
               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/ThemeToggleButton.jsx b/src/ThemeToggleButton.jsx
index 04521af17..3015f768e 100644
--- a/src/ThemeToggleButton.jsx
+++ b/src/ThemeToggleButton.jsx
@@ -7,21 +7,39 @@ const ThemeToggleButton = () => {
     return new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
   };
 
-  const onToggleHandle = (themeName) => {
+  const onToggleTheme = () => {
     const cookies = new Cookies();
-    console.log('---egtt---', getConfig());
-    const options = { domain: 'local.edly.io', path: '/', expires: getNextWeek() };
+    const serverURL = new URL(getConfig().LMS_BASE_URL);
+    const themeCookieName = getConfig().THEME_COOKIE_NAME;
 
-    if (themeName === 'dark') {
-      document.body.classList.add('indigo-dark-theme');
-    } else {
+    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('indigo-theme-type', themeName, options);
+    cookies.set(themeCookieName, themeName, options);
   };
 
   return (
-    <div><button type="button" onClick={() => onToggleHandle('light')}>Light</button><button type="button" onClick={() => onToggleHandle('dark')}>Dark</button></div>
+    <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>
   );
 };
 

From eb16402b620feab694d25684f7d03dfd5fe8f2eb Mon Sep 17 00:00:00 2001
From: hinakhadim <hina.khadim@arbisoft.com>
Date: Thu, 15 Aug 2024 10:57:40 +0500
Subject: [PATCH 3/3] fix: update test snapshots

---
 src/ThemeToggleButton.jsx              |   1 +
 src/__snapshots__/Header.test.jsx.snap | 160 +++++++++++++++++++++++++
 2 files changed, 161 insertions(+)

diff --git a/src/ThemeToggleButton.jsx b/src/ThemeToggleButton.jsx
index 3015f768e..862e4d01e 100644
--- a/src/ThemeToggleButton.jsx
+++ b/src/ThemeToggleButton.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';
 
diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap
index c34c5706e..eb320bef2 100644
--- 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"
   >