chore: Handle visual mode only via URL query parameters

Author: jperals

pages/app/app-context.tsx

@@ -14,26 +14,25 @@ interface AppUrlParams {
   visualRefresh: boolean;
   motionDisabled: boolean;
   appLayoutWidget: boolean;
-  mode?: Mode;
+  mode: Mode;
 }
 
 export interface AppContextType<T = unknown> {
-  mode: Mode;
   pageId?: string;
   urlParams: AppUrlParams & T;
   setUrlParams: (newParams: Partial<AppUrlParams & T>) => void;
   setMode: (newMode: Mode) => void;
 }
 
 const appContextDefaults: AppContextType = {
-  mode: Mode.Light,
   pageId: undefined,
   urlParams: {
     density: Density.Comfortable,
     direction: 'ltr',
     visualRefresh: THEME === 'default',
     motionDisabled: false,
     appLayoutWidget: false,
+    mode: Mode.Light,
   },
   setMode: () => {},
   setUrlParams: () => {},
@@ -74,34 +73,21 @@ function formatQuery(params: AppUrlParams) {
 export function AppContextProvider({ children }: { children: React.ReactNode }) {
   const history = useHistory();
   const location = useLocation();
-  const matchWithVisualMode = useRouteMatch<{ mode: Mode; pageId: string }>('/:mode(light|dark)/:pageId*');
-  const matchWithoutVisualMode = useRouteMatch<{ pageId: string }>('/:pageId*');
-  const pageId = (matchWithVisualMode ?? matchWithoutVisualMode)?.params.pageId ?? undefined;
+  const pageId = useRouteMatch<{ pageId: string }>('/:pageId*')?.params.pageId ?? undefined;
   const urlParams = parseQuery(location.search) as AppUrlParams;
-  const mode = matchWithVisualMode?.params.mode ?? urlParams.mode ?? Mode.Light;
 
   function setUrlParams(newParams: Partial<AppUrlParams>) {
     const formattedQuery = formatQuery({ ...urlParams, ...newParams });
-    if (matchWithVisualMode) {
-      const pathname = [matchWithVisualMode.params.mode, pageId].filter(segment => !!segment).join('/') + '/';
-      history.replace(`/${pathname}${formatQuery({ ...urlParams, ...newParams })}`);
-    } else {
-      const newUrl = pageId ? `/${pageId}${formattedQuery}` : formattedQuery;
-      history.replace(newUrl);
-    }
+    const newUrl = pageId ? `/${pageId}${formattedQuery}` : formattedQuery;
+    history.replace(newUrl);
   }
 
   function updateMode(newMode: Mode) {
-    if (matchWithVisualMode) {
-      const pathname = [newMode, pageId].filter(segment => !!segment).join('/') + '/';
-      history.replace('/' + pathname + location.search + location.hash);
-    } else {
-      setUrlParams({ mode: newMode });
-    }
+    setUrlParams({ mode: newMode });
   }
 
   return (
-    <AppContext.Provider value={{ mode, pageId, urlParams, setUrlParams: setUrlParams, setMode: updateMode }}>
+    <AppContext.Provider value={{ pageId, urlParams, setUrlParams: setUrlParams, setMode: updateMode }}>
       {children}
     </AppContext.Provider>
   );

pages/app/components/header.tsx

@@ -10,7 +10,7 @@ import ThemeSwitcher from './theme-switcher';
 import styles from './header.scss';
 
 export default function Header({ sticky }: { sticky?: boolean }) {
-  const { mode } = useContext(AppContext);
+  const { urlParams: mode } = useContext(AppContext);
   return (
     <>
       {/* #h selector for compatibility with global navigation */}

pages/app/components/theme-switcher.tsx

@@ -10,7 +10,7 @@ import SpaceBetween from '~components/space-between';
 import AppContext from '../app-context';
 
 export default function ThemeSwitcher() {
-  const { mode, urlParams, setUrlParams, setMode } = useContext(AppContext);
+  const { urlParams, setUrlParams, setMode } = useContext(AppContext);
 
   const vrSwitchProps: React.InputHTMLAttributes<HTMLInputElement> = {
     id: 'visual-refresh-toggle',
@@ -38,7 +38,7 @@ export default function ThemeSwitcher() {
         <input
           id="mode-toggle"
           type="checkbox"
-          checked={mode === 'dark'}
+          checked={urlParams.mode === 'dark'}
           onChange={event => setMode(event.target.checked ? Mode.Dark : Mode.Light)}
         />
         Dark mode

pages/app/index.tsx

@@ -57,9 +57,8 @@ function isAppLayoutPage(pageId?: string) {
 
 function App() {
   const {
-    mode,
     pageId,
-    urlParams: { density, motionDisabled },
+    urlParams: { density, mode, motionDisabled },
   } = useContext(AppContext);
 
   // AppLayout already contains <main>