fix: show toggle theme button when THEME_COOKIE_NAME config is set

edly-io · Aug 19, 2024 · 0a4a1a5 · 0a4a1a5
1 parent e600fa9
commit 0a4a1a5
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 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}>