fix: Added debounce for color fill

goat-community · Sep 12, 2023 · 5f9e285 · 5f9e285
1 parent a5654ae
commit 5f9e285
Show file tree

Hide file tree

Showing 4 changed files with 178 additions and 110 deletions.
diff --git a/apps/goat/components/map/panels/mapStyle/ColorOptionFill.tsx b/apps/goat/components/map/panels/mapStyle/ColorOptionFill.tsx
@@ -2,33 +2,52 @@ import BasicAccordion from "@p4b/ui/components/BasicAccordion";
 import { makeStyles } from "@/lib/theme";
 import Box from "@p4b/ui/components/Box";
 import { Divider, TextField, Typography } from "@mui/material";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import {
   setLayerFillColor,
   setLayerFillOutLineColor,
 } from "@/lib/store/styling/slice";
 import { useAppDispatch } from "@/hooks/useAppDispatch";
-import { selectMapLayer } from '@/lib/store/styling/selectors'
+import { selectMapLayer } from "@/lib/store/styling/selectors";
+import { useDebounce } from "@/hooks/useDebounce";
 
 const ColorOptionFill = () => {
-  const mapLayer = useSelector(selectMapLayer)
+  const mapLayer = useSelector(selectMapLayer);
+
+  const [fillColor, setFillColor] = useState<string>(
+    mapLayer?.paint?.["fill-color"] || "",
+  );
+  const [strokeColor, setStrokeColor] = useState<string>(
+    mapLayer?.paint?.["fill-outline-color"] || "",
+  );
 
   const { classes } = useStyles();
   const dispatch = useAppDispatch();
 
+  const fillColorDebounce = useDebounce(fillColor, 100);
+  const strokeColorDebounce = useDebounce(strokeColor, 100);
+
   const handleFillColorChange = (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
-    dispatch(setLayerFillColor({ key: "fill-color", val: event.target.value }));
+    setFillColor(event.target.value);
   };
 
   const handleStrokeColorChange = (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
-    dispatch(setLayerFillOutLineColor(event.target.value));
+    setStrokeColor(event.target.value);
   };
 
+  useEffect(() => {
+    dispatch(setLayerFillColor({ key: "fill-color", val: fillColorDebounce }));
+  }, [fillColorDebounce, dispatch]);
+
+  useEffect(() => {
+    dispatch(setLayerFillOutLineColor(strokeColorDebounce));
+  }, [strokeColorDebounce, dispatch]);
+
   // const handleFillOpacityChange = (
   //   event: React.ChangeEvent<HTMLInputElement>,
   // ) => {

diff --git a/apps/goat/components/map/panels/mapStyle/ColorOptionLine.tsx b/apps/goat/components/map/panels/mapStyle/ColorOptionLine.tsx
@@ -2,24 +2,37 @@ import BasicAccordion from "@p4b/ui/components/BasicAccordion";
 import { makeStyles } from "@/lib/theme";
 import Box from "@p4b/ui/components/Box";
 import { TextField, Typography } from "@mui/material";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { setLayerFillColor } from "@/lib/store/styling/slice";
 import { useAppDispatch } from "@/hooks/useAppDispatch";
 import { selectMapLayer } from "@/lib/store/styling/selectors";
+import { useDebounce } from "@/hooks/useDebounce";
 
 const ColorOptionLine = () => {
   const mapLayer = useSelector(selectMapLayer);
 
+  const [lineFillColor, setLineFillColor] = useState<string>(
+    mapLayer?.paint?.["line-color"] || "",
+  );
+
   const { classes } = useStyles();
   const dispatch = useAppDispatch();
 
-  const handleFillColorChange = (
-    event: React.ChangeEvent<HTMLInputElement>
+  const lineFillColorDebounce = useDebounce(lineFillColor, 100);
+
+  const handleLineFillColorChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
   ) => {
-    dispatch(setLayerFillColor({ key: "line-color", val: event.target.value }));
+    setLineFillColor(event.target.value);
   };
 
+  useEffect(() => {
+    dispatch(
+      setLayerFillColor({ key: "line-color", val: lineFillColorDebounce }),
+    );
+  }, [lineFillColorDebounce, dispatch]);
+
   return (
     <BasicAccordion title="Color" variant="secondary">
       <Box className={classes.root}>
@@ -30,8 +43,8 @@ const ColorOptionLine = () => {
               type="color"
               size="small"
               className={classes.inputs}
-              value={mapLayer?.paint?.["line-color"]}
-              onChange={handleFillColorChange}
+              value={lineFillColor}
+              onChange={handleLineFillColorChange}
             />
           </Box>
         </Box>

diff --git a/apps/goat/components/map/panels/mapStyle/ColorOptionSymbol.tsx b/apps/goat/components/map/panels/mapStyle/ColorOptionSymbol.tsx
@@ -2,122 +2,141 @@ import BasicAccordion from "@p4b/ui/components/BasicAccordion";
 import { makeStyles } from "@/lib/theme";
 import Box from "@p4b/ui/components/Box";
 import { Divider, TextField, Typography } from "@mui/material";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import {
-  setIconFillColor,
-  setLayerFillOutLineColor,
+    setIconFillColor,
+    setLayerFillOutLineColor,
 } from "@/lib/store/styling/slice";
 import { useAppDispatch } from "@/hooks/useAppDispatch";
 import { selectMapLayer } from "@/lib/store/styling/selectors";
+import { useDebounce } from "@/hooks/useDebounce";
 
 const ColorOptionSymbol = () => {
-  const mapLayer = useSelector(selectMapLayer);
-  const { classes } = useStyles();
-  const dispatch = useAppDispatch();
+    const mapLayer = useSelector(selectMapLayer);
 
-  const handleFillColorChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    dispatch(setIconFillColor(event.target.value));
-  };
+    const [fillIconColor, setFillIconColor] = useState<string>(
+        mapLayer?.paint?.["icon-color"] || "",
+    );
+    const [iconStrokeColor, setIconStrokeColor] = useState<string>(
+        mapLayer?.paint?.["fill-outline-color"] || "",
+    );
 
-  const handleStrokeColorChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    dispatch(setLayerFillOutLineColor(event.target.value));
-  };
+    const { classes } = useStyles();
+    const dispatch = useAppDispatch();
 
-  // const handleFillOpacityChange = (
-  //   event: React.ChangeEvent<HTMLInputElement>,
-  // ) => {
-  //   setFillOpacity(event.target.value);
-  // };
+    const fillIconColorDebounce = useDebounce(fillIconColor, 100);
+    const iconStrokeColorDebounce = useDebounce(iconStrokeColor, 100);
 
-  // const handleStrokeOpacityChange = (
-  //   esvent: React.ChangeEvent<HTMLInputElement>,
-  // ) => {
-  //   setStrokeOpacity(event.target.value);
-  // };
+    const handleFillColorChange = (
+        event: React.ChangeEvent<HTMLInputElement>,
+    ) => {
+        setFillIconColor(event.target.value);
+    };
 
-  return (
-    <BasicAccordion title="Color" variant="secondary">
-      <Box className={classes.root}>
-        <Box className={classes.colorContainer}>
-          <Typography variant="body1">Fill</Typography>
-          <Box className={classes.inputsContainer}>
-            <TextField
-              type="color"
-              size="small"
-              className={classes.inputs}
-              value={mapLayer?.paint?.["icon-color"]}
-              onChange={handleFillColorChange}
-            />
-            {/*<TextField*/}
-            {/*  type="number"*/}
-            {/*  size="small"*/}
-            {/*  className={classes.inputs}*/}
-            {/*  value={fillOpacity}*/}
-            {/*  onChange={handleFillOpacityChange}*/}
-            {/*/>*/}
-          </Box>
-        </Box>
-        <Divider className={classes.divider} />
-        <Box className={classes.colorContainer}>
-          <Typography variant="body1">Stroke</Typography>
-          <Box className={classes.inputsContainer}>
-            <TextField
-              type="color"
-              size="small"
-              className={classes.inputs}
-              value={mapLayer?.paint?.["fill-outline-color"]}
-              onChange={handleStrokeColorChange}
-            />
-            {/*<TextField*/}
-            {/*  type="number"*/}
-            {/*  size="small"*/}
-            {/*  className={classes.inputs}*/}
-            {/*  value={strokeOpacity}*/}
-            {/*  onChange={handleStrokeOpacityChange}*/}
-            {/*/>*/}
-          </Box>
-        </Box>
-      </Box>
-    </BasicAccordion>
-  );
+    const handleStrokeColorChange = (
+        event: React.ChangeEvent<HTMLInputElement>,
+    ) => {
+        setIconStrokeColor(event.target.value);
+    };
+
+    useEffect(() => {
+        dispatch(setIconFillColor(fillIconColorDebounce));
+    }, [fillIconColorDebounce, dispatch]);
+
+    useEffect(() => {
+        dispatch(setLayerFillOutLineColor(iconStrokeColorDebounce));
+    }, [iconStrokeColorDebounce, dispatch]);
+
+    // const handleFillOpacityChange = (
+    //   event: React.ChangeEvent<HTMLInputElement>,
+    // ) => {
+    //   setFillOpacity(event.target.value);
+    // };
+    // const handleStrokeOpacityChange = (
+    //   esvent: React.ChangeEvent<HTMLInputElement>,
+    // ) => {
+    //   setStrokeOpacity(event.target.value);
+    // };
+
+    return (
+        <BasicAccordion title="Color" variant="secondary">
+            <Box className={classes.root}>
+                <Box className={classes.colorContainer}>
+                    <Typography variant="body1">Fill</Typography>
+                    <Box className={classes.inputsContainer}>
+                        <TextField
+                            type="color"
+                            size="small"
+                            className={classes.inputs}
+                            value={fillIconColor}
+                            onChange={handleFillColorChange}
+                        />
+                        {/*<TextField*/}
+                        {/*  type="number"*/}
+                        {/*  size="small"*/}
+                        {/*  className={classes.inputs}*/}
+                        {/*  value={fillOpacity}*/}
+                        {/*  onChange={handleFillOpacityChange}*/}
+                        {/*/>*/}
+                    </Box>
+                </Box>
+                <Divider className={classes.divider} />
+                <Box className={classes.colorContainer}>
+                    <Typography variant="body1">Stroke</Typography>
+                    <Box className={classes.inputsContainer}>
+                        <TextField
+                            type="color"
+                            size="small"
+                            className={classes.inputs}
+                            value={iconStrokeColor}
+                            onChange={handleStrokeColorChange}
+                        />
+                        {/*<TextField*/}
+                        {/*  type="number"*/}
+                        {/*  size="small"*/}
+                        {/*  className={classes.inputs}*/}
+                        {/*  value={strokeOpacity}*/}
+                        {/*  onChange={handleStrokeOpacityChange}*/}
+                        {/*/>*/}
+                    </Box>
+                </Box>
+            </Box>
+        </BasicAccordion>
+    );
 };
 
 const useStyles = makeStyles({ name: { ColorOptionSymbol } })((theme) => ({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    rowGap: "16px",
-  },
-  colorContainer: {
-    display: "flex",
-    flexDirection: "column",
-    rowGap: "8px",
-  },
-  inputsContainer: {
-    display: "flex",
-    columnGap: "4px",
-  },
-  inputs: {
-    width: "50%",
-    "& .MuiInputBase-root": {
-      height: "32px",
-      padding: "2px 8px",
+    root: {
+        display: "flex",
+        flexDirection: "column",
+        rowGap: "16px",
+    },
+    colorContainer: {
+        display: "flex",
+        flexDirection: "column",
+        rowGap: "8px",
+    },
+    inputsContainer: {
+        display: "flex",
+        columnGap: "4px",
+    },
+    inputs: {
+        width: "50%",
+        "& .MuiInputBase-root": {
+            height: "32px",
+            padding: "2px 8px",
+        },
+        input: {
+            padding: "unset",
+            height: "100%",
+        },
     },
-    input: {
-      padding: "unset",
-      height: "100%",
+    divider: {
+        width: "100%",
+        borderTop: "none",
+        borderBottom: `1px solid ${theme.colors.palette.focus}`,
     },
-  },
-  divider: {
-    width: "100%",
-    borderTop: "none",
-    borderBottom: `1px solid ${theme.colors.palette.focus}`,
-  },
 }));
 
 export default ColorOptionSymbol;
diff --git a/apps/goat/hooks/useDebounce.tsx b/apps/goat/hooks/useDebounce.tsx
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export const useDebounce = (value: string, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return String(debouncedValue).toLowerCase();
+};