Cleanup custom colors and layout handling (#97)

src/App.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import firebase from "./firebase";
 import "./styles.css";
 
@@ -23,15 +23,47 @@ import AboutPage from "./pages/AboutPage";
 import ConductPage from "./pages/ConductPage";
 import LegalPage from "./pages/LegalPage";
 import ProfilePage from "./pages/ProfilePage";
-import { lightTheme, darkTheme } from "./themes";
+import { lightTheme, darkTheme, withCardColors } from "./themes";
+
+function makeThemes(customColors) {
+  let parsed;
+  try {
+    parsed = JSON.parse(customColors);
+  } catch (error) {
+    console.log("failed to parse custom colors", error);
+    parsed = {};
+  }
+  return {
+    parsedCustomColors: parsed,
+    customLightTheme: withCardColors(lightTheme, parsed.light),
+    customDarkTheme: withCardColors(darkTheme, parsed.dark),
+  };
+}
+
+function makeKeyboardLayout(keyboardLayoutName, customKeyboardLayout) {
+  const emptyLayout = { verticalLayout: "", horizontalLayout: "" };
+  if (keyboardLayoutName !== "Custom") {
+    return standardLayouts[keyboardLayoutName] || emptyLayout;
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(customKeyboardLayout);
+  } catch (error) {
+    console.log("failed to parse custom keyboard layout", error);
+    parsed = {};
+  }
+  return { ...emptyLayout, ...parsed };
+}
 
 function App() {
   const [authUser, setAuthUser] = useState(null);
   const [user, setUser] = useState(null);
   const [themeType, setThemeType] = useStorage("theme", "light");
-  const [customLightTheme, setCustomLightTheme] = useState(lightTheme);
-  const [customDarkTheme, setCustomDarkTheme] = useState(darkTheme);
   const [customColors, setCustomColors] = useStorage("customColors", "{}");
+  const { parsedCustomColors, customLightTheme, customDarkTheme } = useMemo(
+    () => makeThemes(customColors),
+    [customColors]
+  );
   const [keyboardLayoutName, setKeyboardLayoutName] = useStorage(
     "keyboardLayout",
     "QWERTY"
@@ -40,6 +72,10 @@ function App() {
     "customKeyboardLayout",
     "{}"
   );
+  const keyboardLayout = useMemo(
+    () => makeKeyboardLayout(keyboardLayoutName, customKeyboardLayout),
+    [keyboardLayoutName, customKeyboardLayout]
+  );
   const [layoutOrientation, setLayoutOrientation] = useStorage(
     "layout",
     "portrait"
@@ -95,22 +131,6 @@ function App() {
     };
   }, [authUser]);
 
-  useEffect(() => {
-    const parsedCustoms = JSON.parse(customColors);
-    if (parsedCustoms.light) {
-      setCustomLightTheme({
-        ...lightTheme,
-        setCard: { ...lightTheme.setCard, ...parsedCustoms.light },
-      });
-    }
-    if (parsedCustoms.dark) {
-      setCustomDarkTheme({
-        ...darkTheme,
-        setCard: { ...darkTheme.setCard, ...parsedCustoms.dark },
-      });
-    }
-  }, [customColors]);
-
   const handleChangeTheme = () => {
     setThemeType(themeType === "light" ? "dark" : "light");
   };
@@ -119,15 +139,6 @@ function App() {
     setCustomColors(JSON.stringify(custom));
   };
 
-  const keyboardLayout =
-    keyboardLayoutName !== "Custom"
-      ? standardLayouts[keyboardLayoutName]
-      : {
-          verticalLayout: "",
-          horizontalLayout: "",
-          ...JSON.parse(customKeyboardLayout),
-        };
-
   return (
     <ThemeProvider
       theme={themeType === "light" ? customLightTheme : customDarkTheme}
@@ -160,7 +171,7 @@ function App() {
               <Navbar
                 themeType={themeType}
                 handleChangeTheme={handleChangeTheme}
-                customColors={JSON.parse(customColors)}
+                customColors={parsedCustomColors}
                 handleCustomColors={handleCustomColors}
               />
               <Switch>

src/components/ColorChoiceDialog.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { makeStyles, withTheme } from "@material-ui/core/styles";
+import { ThemeProvider, makeStyles, withTheme } from "@material-ui/core/styles";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import Grid from "@material-ui/core/Grid";
@@ -10,7 +10,7 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import { ChromePicker } from "react-color";
 
 import ResponsiveSetCard from "./ResponsiveSetCard";
-import { darkTheme, lightTheme } from "../themes";
+import { darkTheme, lightTheme, withCardColors } from "../themes";
 
 const useStyles = makeStyles({
   colorPickerColumn: {
@@ -33,71 +33,55 @@ function ColorChoiceDialog(props) {
   }
 
   function handleSubmit() {
-    onClose({ red: red, green: green, purple: purple });
+    onClose({ red, green, purple });
   }
 
   function handleReset() {
-    if (theme.palette.type === "light") {
-      setRed(lightTheme.setCard.red);
-      setGreen(lightTheme.setCard.green);
-      setPurple(lightTheme.setCard.purple);
-    }
-    if (theme.palette.type === "dark") {
-      setRed(darkTheme.setCard.red);
-      setGreen(darkTheme.setCard.green);
-      setPurple(darkTheme.setCard.purple);
-    }
+    const resetTo = theme.palette.type === "light" ? lightTheme : darkTheme;
+    setRed(resetTo.setCard.red);
+    setGreen(resetTo.setCard.green);
+    setPurple(resetTo.setCard.purple);
   }
 
   return (
     <Dialog open={open} onClose={handleClose} maxWidth="xl">
       <DialogTitle>{title}</DialogTitle>
       <DialogContent>
-        <Grid container spacing={3}>
-          <Grid item xs={12} md={4} className={classes.colorPickerColumn}>
-            <ResponsiveSetCard
-              width={225}
-              value="0000"
-              colorOverride={{ red: red, green: green, purple: purple }}
-            />
-            <ChromePicker
-              color={purple}
-              onChangeComplete={(result) => setPurple(result.hex)}
-            />
+        <ThemeProvider theme={withCardColors(theme, { red, green, purple })}>
+          <Grid container spacing={3}>
+            <Grid item xs={12} md={4} className={classes.colorPickerColumn}>
+              <ResponsiveSetCard width={225} value="0000" />
+              <ChromePicker
+                color={purple}
+                onChangeComplete={(result) => setPurple(result.hex)}
+              />
+            </Grid>
+            <Grid item xs={12} md={4} className={classes.colorPickerColumn}>
+              <ResponsiveSetCard width={225} value="1000" />
+              <ChromePicker
+                color={green}
+                onChangeComplete={(result) => setGreen(result.hex)}
+              />
+            </Grid>
+            <Grid item xs={12} md={4} className={classes.colorPickerColumn}>
+              <ResponsiveSetCard width={225} value="2000" />
+              <ChromePicker
+                color={red}
+                onChangeComplete={(result) => setRed(result.hex)}
+              />
+            </Grid>
           </Grid>
-          <Grid item xs={12} md={4} className={classes.colorPickerColumn}>
-            <ResponsiveSetCard
-              width={225}
-              value="1000"
-              colorOverride={{ red: red, green: green, purple: purple }}
-            />
-            <ChromePicker
-              color={green}
-              onChangeComplete={(result) => setGreen(result.hex)}
-            />
+          <Grid container direction="row" justifyContent="center">
+            <Button
+              onClick={handleReset}
+              variant="outlined"
+              color="secondary"
+              style={{ marginTop: "15px" }}
+            >
+              Set Colors to Default
+            </Button>
           </Grid>
-          <Grid item xs={12} md={4} className={classes.colorPickerColumn}>
-            <ResponsiveSetCard
-              width={225}
-              value="2000"
-              colorOverride={{ red: red, green: green, purple: purple }}
-            />
-            <ChromePicker
-              color={red}
-              onChangeComplete={(result) => setRed(result.hex)}
-            />
-          </Grid>
-        </Grid>
-        <Grid container direction="row" justify="center">
-          <Button
-            onClick={handleReset}
-            variant="outlined"
-            color="secondary"
-            style={{ marginTop: "15px" }}
-          >
-            Set Colors to Default
-          </Button>
-        </Grid>
+        </ThemeProvider>
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="primary">

src/components/Navbar.js

@@ -58,8 +58,7 @@ function Navbar({
   function handleChangeCardColors(colorMap) {
     setChangeCardColors(false);
     if (colorMap) {
-      customColors[themeType] = colorMap;
-      handleCustomColors(customColors);
+      handleCustomColors({ ...customColors, [themeType]: colorMap });
     }
   }
 

src/components/ResponsiveSetCard.js

@@ -77,14 +77,7 @@ function ResponsiveSetCard(props) {
   const contentHeight = height - 2 * margin;
   const { color, shape, shade, border, number } = cardTraits(value);
 
-  // Override is used to help visualize new colors in color picker dialog.
-  const COLORS = props.colorOverride
-    ? [
-        props.colorOverride.purple,
-        props.colorOverride.green,
-        props.colorOverride.red,
-      ]
-    : [theme.setCard.purple, theme.setCard.green, theme.setCard.red];
+  const COLORS = [theme.setCard.purple, theme.setCard.green, theme.setCard.red];
 
   const BORDERS = ["3px solid", "4px dotted", "6px double"];
 
@@ -136,7 +129,6 @@ function ResponsiveSetCard(props) {
             shape={shape}
             shade={shade}
             size={Math.round(contentHeight * 0.36)}
-            colorOverride={props.colorOverride}
           />
         ))}
       {hinted && (

src/themes.js

@@ -111,3 +111,9 @@ export const lightTheme = createTheme({
   },
   setFoundEntry: "rgba(130, 170, 100, 0.15)",
 });
+
+export function withCardColors(theme, colors) {
+  return colors
+    ? { ...theme, setCard: { ...theme.setCard, ...colors } }
+    : theme;
+}