refactor theme state to use query parsms, less effects

digdir · Jun 24, 2024 · b6b49f5 · b6b49f5
1 parent f7b6403
commit b6b49f5
Showing 1 changed file with 47 additions and 40 deletions.
diff --git a/apps/theme/app/page.tsx b/apps/theme/app/page.tsx
@@ -41,42 +41,28 @@ export default function Home() {
   const brandTwoTheme = useThemeStore((state) => state.brandTwoTheme);
   const brandThreeTheme = useThemeStore((state) => state.brandThreeTheme);
   const borderRadius = useThemeStore((state) => state.borderRadius);
+  const selectedColor = useThemeStore((state) => state.selectedColor);
   const setAccentTheme = useThemeStore((state) => state.setAccentTheme);
   const setNeutralTheme = useThemeStore((state) => state.setNeutralTheme);
   const setBrandOneTheme = useThemeStore((state) => state.setBrandOneTheme);
   const setBrandTwoTheme = useThemeStore((state) => state.setBrandTwoTheme);
   const setBrandThreeTheme = useThemeStore((state) => state.setBrandThreeTheme);
   const setBorderRadius = useThemeStore((state) => state.setBorderRadius);
 
-  const selectedColor = useThemeStore((state) => state.selectedColor);
-
   const [accentError, setAccentError] = useState<ColorError>('none');
   const [neutralError, setNeutralError] = useState<ColorError>('none');
   const [brandOneError, setBrandOneError] = useState<ColorError>('none');
   const [brandTwoError, setBrandTwoError] = useState<ColorError>('none');
   const [brandThreeError, setBrandThreeError] = useState<ColorError>('none');
 
-  const [themeMode, setThemeMode] = useState<Mode>('light');
-  const [contrastMode, setContrastMode] = useState<ContrastMode>('aa');
-
   const router = useRouter();
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const params = new URLSearchParams(searchParams);
   const colorModalRef = useRef<HTMLDialogElement>(null);
 
-  /* get theme from query on initial load */
-  useEffect(() => {
-    const theme = params.get('theme') as Mode;
-    const borderRadius = params.get('borderRadius') as string;
-    if (theme) {
-      setThemeMode(theme);
-    }
-    if (borderRadius) {
-      setBorderRadius(borderRadius);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const themeMode = (params.get('theme') as Mode) || 'light';
+  const contrastMode = (params.get('contrastMode') as ContrastMode) || 'aa';
 
   useEffect(() => {
     mapTokens();
@@ -122,15 +108,7 @@ export default function Home() {
     return () => {
       window.removeEventListener('scroll', isSticky);
     };
-  });
-
-  /* Set border radius token when it changes */
-  useEffect(() => {
-    const previewElem = document.getElementById('preview');
-    if (previewElem) {
-      previewElem.style.setProperty('--ds-border-radius-base', borderRadius);
-    }
-  }, [borderRadius]);
+  }, []);
 
   /**
    * Check if the header should be sticky
@@ -212,16 +190,51 @@ export default function Home() {
     }
   };
 
-  const themeQuerySetter = (themeMode: Mode) => {
-    params.set('theme', themeMode);
+  /**
+   * Set the query params
+   *
+   * TODO: Add support for setting colors
+   */
+  const setQueryParams = ({
+    theme,
+    borderRadius,
+    contrastMode,
+  }: {
+    colors?: ThemeInfo;
+    theme?: Mode;
+    borderRadius?: string;
+    contrastMode?: ContrastMode;
+  }) => {
+    theme && params.set('theme', theme);
+    typeof borderRadius === 'string' &&
+      params.set('borderRadius', borderRadius);
+    contrastMode && params.set('contrastMode', contrastMode);
+
     router.replace(`${pathname}?${params.toString()}`, { scroll: false });
   };
 
-  const borderQuerySetter = (borderRadius: string) => {
-    params.set('borderRadius', borderRadius);
-    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+  const updateBoderRadius = (radius: string) => {
+    const previewElem = document.getElementById('preview');
+    if (previewElem) {
+      previewElem.style.setProperty('--ds-border-radius-base', radius);
+    }
+
+    setBorderRadius(radius);
+    setQueryParams({ borderRadius: radius });
+  };
+
+  const updateTheme = (theme: Mode) => {
+    setQueryParams({ theme });
   };
 
+  /* get theme from query on initial load */
+  useEffect(() => {
+    const borderRadius = params.get('borderRadius') as string;
+    if (typeof borderRadius === 'string') {
+      updateBoderRadius(borderRadius);
+    }
+  }, []);
+
   /**
    * Get the color error for a color
    *
@@ -273,22 +286,16 @@ export default function Home() {
               updateColor(colorType, color, theme);
             }}
             onContrastModeChanged={(mode) => {
-              setContrastMode(mode);
-            }}
-            onBorderRadiusChanged={(radius) => {
-              setBorderRadius(radius);
-              borderQuerySetter(radius);
+              setQueryParams({ contrastMode: mode });
             }}
+            onBorderRadiusChanged={updateBoderRadius}
             borderRadius={borderRadius}
           />
           <Scales themeMode={themeMode} />
 
           <Previews
             themeMode={themeMode}
-            onThemeModeChange={(themeMode: Mode) => {
-              setThemeMode(themeMode);
-              themeQuerySetter(themeMode);
-            }}
+            onThemeModeChange={updateTheme}
           />
         </Container>
       </main>