Skip to content

Commit

Permalink
fix: show toggle theme button when THEME_COOKIE_NAME config is set (#19)
Browse files Browse the repository at this point in the history
  • Loading branch information
hinakhadim committed Aug 19, 2024
1 parent 48428ac commit cc49624
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 156 deletions.
2 changes: 1 addition & 1 deletion src/DesktopHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
? (
<>
Expand Down
7 changes: 6 additions & 1 deletion src/ThemeToggleButton.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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 = '';
Expand All @@ -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}>
Expand Down
160 changes: 6 additions & 154 deletions src/__snapshots__/Header.test.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
>
Expand Down

0 comments on commit cc49624

Please sign in to comment.