Settings persistence across pages (#329)

# What's Changed?

- Fixed settings persistence across all pages by giving the related
cookies a path of `/`
- Fixed persistence of dismissing the beta banner

closes #313

Co-authored-by: loiswells97 <[email protected]>
Co-authored-by: Lois Wells <[email protected]>
Co-authored-by: Lois Wells <[email protected]>
Co-authored-by: Patrick Cherry <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -25,6 +25,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 - Make sure button text is always centered (#328)
+- Make theme and font size persist across all pages of the app (#329)
+- Make dismissing the Beta banner persist across all pages of the app (#329)
 - Touch area of icon-only buttons (#330, #336)
 - Delete project action on project index page (#330)
 - Refactored project list loading to allow loading states to be shown (#330)

src/components/BetaBanner/BetaBanner.js

@@ -15,7 +15,7 @@ const BetaBanner = () => {
   const [cookies, setCookie] = useCookies(['betaBannerDismissed'])
 
   const closeBanner = () => {
-    setCookie('betaBannerDismissed', 'true')
+    setCookie('betaBannerDismissed', 'true', { path: '/' })
   }
   const showModal = () => { dispatch(showBetaModal()) }
   const isShowing = !cookies.betaBannerDismissed

src/components/Editor/FontSizeSelector/FontSizeSelector.js

@@ -4,25 +4,37 @@ import { useTranslation } from "react-i18next";
 import { FontIcon } from "../../../Icons";
 import './FontSizeSelector.scss'
 
+const COOKIE_PATHS = ['/', '/projects', '/python']
+
 const FontSizeSelector = () => {
-  const [ cookies , setCookie] = useCookies(['fontSize'])
+  const [ cookies , setCookie, removeCookie] = useCookies(['fontSize'])
   const fontSize = cookies.fontSize || "small"
   const { t } = useTranslation()
+
+  const setFontSize = (fontSize) => {
+    if (cookies.fontSize) {
+      COOKIE_PATHS.forEach((path) => {
+        removeCookie('fontSize', {path})
+      })
+    }
+    setCookie('fontSize', fontSize, { path: '/' })
+  }
+
   return (
     <div className='font-size-selector'>
-      <div className='font-btn font-btn--small' onClick={() => setCookie('fontSize', 'small')}>
+      <div className='font-btn font-btn--small' onClick={() => setFontSize('small')}>
         <div className={`font-btn__icon font-btn__icon--small ${fontSize==='small' ? 'font-btn__icon--active' : ''}`}>
           <FontIcon size={15}/>
         </div>
         <p>{t('header.settingsMenu.textSizeOptions.small')}</p>
       </div>
-      <div className='font-btn font-btn--medium' onClick={() => setCookie('fontSize', 'medium')}>
+      <div className='font-btn font-btn--medium' onClick={() => setFontSize('medium')}>
       <div className={`font-btn__icon font-btn__icon--medium ${fontSize==='medium' ? 'font-btn__icon--active' : ''}`}>
           <FontIcon size={23}/>
         </div>
         <p>{t('header.settingsMenu.textSizeOptions.medium')}</p>
       </div>
-      <div className='font-btn font-btn--large' onClick={() => setCookie('fontSize', 'large')}>
+      <div className='font-btn font-btn--large' onClick={() => setFontSize('large')}>
       <div className={`font-btn__icon font-btn__icon--large ${fontSize==='large' ? 'font-btn__icon--active' : ''}`}>
           <FontIcon size={36}/>
         </div>

src/components/ThemeToggle/ThemeToggle.js

@@ -5,20 +5,31 @@ import { useTranslation } from 'react-i18next';
 import './ThemeToggle.scss'
 import { MoonIcon, SunIcon } from '../../Icons';
 
+const COOKIE_PATHS = ['/', '/projects', '/python']
+
 const ThemeToggle = () => {
-  const [ cookies, setCookie ] = useCookies(['theme'])
+  const [ cookies, setCookie, removeCookie ] = useCookies(['theme'])
   const isDarkMode = cookies.theme==="dark" || (!cookies.theme && window.matchMedia("(prefers-color-scheme:dark)").matches)
   const { t } = useTranslation()
 
+  const setTheme = (theme) => {
+    if (cookies.theme) {
+      COOKIE_PATHS.forEach((path) => {
+        removeCookie('theme', {path})
+      })
+    }
+    setCookie('theme', theme, { path: '/' })
+  }
+
   return (
     <div className='theme-toggle'>
-      <div className='theme-btn theme-btn--light' onClick={() => setCookie('theme', 'light')}>
+      <div className='theme-btn theme-btn--light' onClick={() => setTheme('light')}>
         <div className={`theme-btn__icon theme-btn__icon--light ${!isDarkMode ? 'theme-btn__icon--active' : null}`}>
           <SunIcon />
         </div>
         <p>{t('header.settingsMenu.themeOptions.light')}</p>
       </div>
-      <div className='theme-btn theme-btn--dark' onClick={() => setCookie('theme', 'dark')}>
+      <div className='theme-btn theme-btn--dark' onClick={() => setTheme('dark')}>
         <div className={`theme-btn__icon theme-btn__icon--dark ${isDarkMode ? 'theme-btn__icon--active' : null}`}>
           <MoonIcon />
         </div>