From 0988c4d6b4e7748f6f40d77dbdfa41d6511268b7 Mon Sep 17 00:00:00 2001
From: Benjamin Clark <clarkben@meta.com>
Date: Mon, 19 Aug 2024 17:35:20 -0400
Subject: [PATCH] Fix an issue that was causing the current selected themes to
 become desynced after the navigator was used.

---
 site/src/ThemeSelector.jsx | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/site/src/ThemeSelector.jsx b/site/src/ThemeSelector.jsx
index ce6c6fb..8a3b6f0 100644
--- a/site/src/ThemeSelector.jsx
+++ b/site/src/ThemeSelector.jsx
@@ -19,6 +19,39 @@ import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 
+// Should convert this logic to be dynamic once manifests are a thing!
+function themeFromType (type) {
+  switch (type) {
+    case "boundary":
+    case "division":
+    case "division_area":
+    case "division_boundary":
+      return 'divisions';
+
+    case "land":
+    case "land_cover":
+    case "land_use":
+    case "water":
+    case "infrastructure":
+      return "base";
+
+    case "segment":
+    case "connector":
+      return "transportation";
+
+    case "building":
+    case "building_part":
+      return "buildings"
+
+    case "place":
+      return "places";
+
+    case "address":
+      return "addresses"
+  }
+  return '';
+}
+
 const muiTheme = createTheme({
   typography: {
     allVariants: {
@@ -74,10 +107,15 @@ const ThemeSelector = ({
 
   useEffect(() => {
     const newSelectedTypes = {};
+    const newSelectedThemes = {};
+
     visibleTypes.forEach((type) => {
       newSelectedTypes[type] = true;
+      newSelectedThemes[themeFromType(type)] = true;
     });
+
     setSelectedTypesState(newSelectedTypes);
+    setSelectedThemes(newSelectedThemes);
   }, [visibleTypes]);
 
   const handleThemeChange = (theme) => {