Merge pull request #5 from goat-community/fix/fix-type-lint-errors

fix: Fix type lint errors
goat-community · Sep 14, 2023 · cd7bf8a · cd7bf8a
2 parents a3f7453 + 5f9e285
commit cd7bf8a
Show file tree

Hide file tree

Showing 9 changed files with 326 additions and 252 deletions.
diff --git a/.gitignore b/.gitignore
@@ -39,4 +39,5 @@ yarn-error.log*
 # others
 build_keycloak
 storybook-static
-*.jar
+*.jar
+/.idea
diff --git a/apps/goat/app/[lng]/(dashboard)/settings/settings/PersonalPreferences.tsx b/apps/goat/app/[lng]/(dashboard)/settings/settings/PersonalPreferences.tsx
@@ -3,15 +3,13 @@
 import React from "react";
 import { makeStyles } from "@/lib/theme";
 import { Box } from "@mui/material";
-import { Text } from "@p4b/ui/components/theme";
 import { v4 } from "uuid";
 import { SelectField } from "@p4b/ui/components/Inputs";
 import type { Option } from "@p4b/types/atomicComponents";
 import { useTranslation } from "react-i18next";
 import { useRouter, usePathname } from "next/navigation";
 import { Card } from "@p4b/ui/components/Surfaces";
 import { Typography, Divider, Switch } from "@mui/material";
-import { useTheme } from "@/lib/theme";
 
 function removeNrOfElementsFromArray(pathname: string, len: number) {
   const parts = pathname.split("/");
@@ -27,7 +25,6 @@ const PersonalPreferences = () => {
   const { i18n } = useTranslation("home");
   const router = useRouter();
   const pathname = usePathname();
-  const theme = useTheme();
 
   const options: Option[] = [
     {
@@ -40,7 +37,7 @@ const PersonalPreferences = () => {
     },
   ];
 
-  const changeLanguage = (locale) => {
+  const changeLanguage = (locale: string) => {
     i18n.changeLanguage(locale);
     const pathnameWithoutLocale = removeNrOfElementsFromArray(pathname, 2);
     router.push(`/${locale}/${pathnameWithoutLocale}`);

diff --git a/apps/goat/components/map/Layers.tsx b/apps/goat/components/map/Layers.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { Source, Layer as MapLayer } from "react-map-gl";
 import type { XYZ_Layer } from "@/types/map/layer";
 import { useSelector } from "react-redux";
@@ -23,6 +23,31 @@ const Layers = (props: LayersProps) => {
 
   const { layers, addLayer } = props;
 
+  const getQuery = useCallback(() => {
+    if (Object.keys(filters).length) {
+      if (Object.keys(filters).length === 1) {
+        return filters[Object.keys(filters)[0]];
+      } else {
+        if (logicalOperator === "match_all_expressions") {
+          return and_operator(Object.keys(filters).map((key) => filters[key]));
+        } else {
+          return or_operator(Object.keys(filters).map((key) => filters[key]));
+        }
+      }
+    }
+  }, [filters, logicalOperator]);
+
+  const clusterLayer: LayerProps = {
+    id: "clusters",
+    type: "circle",
+    source: "composite",
+    "source-layer": "default",
+    paint: {
+      "circle-color": "#51bbd6",
+      "circle-radius": 5,
+    },
+  };
+
   useEffect(() => {
     const filterJson = getQuery();
     if (filterJson) {
@@ -55,32 +80,7 @@ const Layers = (props: LayersProps) => {
         },
       ]);
     }
-  }, [filters]);
-
-  function getQuery() {
-    if (Object.keys(filters).length) {
-      if (Object.keys(filters).length === 1) {
-        return filters[Object.keys(filters)[0]];
-      } else {
-        if (logicalOperator === "match_all_expressions") {
-          return and_operator(Object.keys(filters).map((key) => filters[key]));
-        } else {
-          return or_operator(Object.keys(filters).map((key) => filters[key]));
-        }
-      }
-    }
-  }
-
-  const clusterLayer: LayerProps = {
-    id: "clusters",
-    type: "circle",
-    source: "composite",
-    "source-layer": "default",
-    paint: {
-      "circle-color": "#51bbd6",
-      "circle-radius": 5,
-    },
-  };
+  }, [addLayer, filters, getQuery, logicalOperator, sampleLayerID]);
 
   return (
     <>

diff --git a/apps/goat/components/map/panels/filter/FilterOptionField.tsx b/apps/goat/components/map/panels/filter/FilterOptionField.tsx
@@ -1,5 +1,5 @@
 import type { ComparerMode } from "@/types/map/filtering";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { useDispatch } from "react-redux";
 import { addExpression, addFilter } from "@/lib/store/mapFilters/slice";
 import {
@@ -33,7 +33,10 @@ interface FilterResultProps {
 
 const FilterOptionField = (props: FilterResultProps) => {
   const { comparer, prop, expression } = props;
-  const newExpressionToModify = { ...expression };
+  const newExpressionToModify = useMemo(
+    () => ({ ...expression }),
+    [expression],
+  );
   const [firstInput, setFirstInput] = useState<string>(
     newExpressionToModify.firstInput,
   );
@@ -43,36 +46,6 @@ const FilterOptionField = (props: FilterResultProps) => {
 
   const dispatch = useDispatch();
 
-  const sendQuery = React.useMemo(
-    () =>
-      debounce((request: { input: string; input2?: string }) => {
-        if (
-          request.input ||
-          (comparer &&
-            ![
-              "is_blank",
-              "is_not_blank",
-              "is_empty_string",
-              "is_not_empty_string",
-            ].includes(comparer.value))
-        ) {
-          newExpressionToModify.firstInput = request.input;
-          dispatch(addExpression(newExpressionToModify));
-          setFirstInput(request.input);
-          if (request.input2) {
-            newExpressionToModify.secondInput = request.input2;
-            dispatch(addExpression(newExpressionToModify));
-            setSecondInput(request.input2);
-          }
-
-          handleFilter(request.input, request.input2);
-        } else {
-          handleFilter("excludes");
-        }
-      }, 1000),
-    [comparer],
-  );
-
   useEffect(() => {
     if (secondInput !== newExpressionToModify.secondInput) {
       sendQuery({
@@ -102,84 +75,117 @@ const FilterOptionField = (props: FilterResultProps) => {
     setSecondInput(newValue);
   }
 
-  const handleFilter = (value: string, value2?: string) => {
-    if (!comparer) return;
-    let query;
-    if (value) {
-      switch (comparer.value) {
-        case "is":
-          query = is(
-            prop,
-            comparer.type === "number" ? parseInt(value) : value,
-          );
-          break;
-        case "is_not":
-          query = is_not(prop, value);
-          break;
-        case "includes":
-        case "excludes":
-          query = excludes(prop, ["playground", "bus_stop"]);
-          break;
-        case "starts_with":
-          if (typeof value === "string") {
-            query = starts_with(prop, value);
-          }
-          break;
-        case "ends_with":
-          if (typeof value === "string") {
-            query = ends_with(prop, value);
-          }
-          break;
-        case "contains_the_text":
-          if (typeof value === "string") {
-            query = contains_the_text(prop, value);
-          }
-          break;
-        case "does_not_contains_the_text":
-          if (typeof value === "string") {
-            query = does_not_contains_the_text(prop, value);
-          }
-          break;
-        case "is_blank":
-          query = is_blank(prop);
-          break;
-        case "is_not_blank":
-          query = is_not_blank(prop);
-          break;
-        case "is_empty_string":
-          query = is_empty_string(prop);
-          break;
-        case "is_not_empty_string":
-          query = is_not_empty_string(prop);
-          break;
-        case "is_at_least":
-          query = is_at_least(prop, parseInt(value));
-          break;
-        case "is_at_most":
-          query = is_at_most(prop, parseInt(value));
-          break;
-        case "is_less_than":
-          query = is_less_than(prop, parseInt(value));
-          break;
-        case "is_greater_than":
-          query = is_greater_than(prop, parseInt(value));
-          break;
-        case "is_between":
-          query = is_between(
-            prop,
-            parseInt(value),
-            parseInt(value2 ? value2 : "0"),
-          );
-          break;
-        default:
-          return;
+  const handleFilter = useCallback(
+    (value: string, value2?: string) => {
+      if (!comparer) return;
+      let query;
+      if (value) {
+        switch (comparer.value) {
+          case "is":
+            query = is(
+              prop,
+              comparer.type === "number" ? parseInt(value) : value,
+            );
+            break;
+          case "is_not":
+            query = is_not(prop, value);
+            break;
+          case "includes":
+          case "excludes":
+            query = excludes(prop, ["playground", "bus_stop"]);
+            break;
+          case "starts_with":
+            if (typeof value === "string") {
+              query = starts_with(prop, value);
+            }
+            break;
+          case "ends_with":
+            if (typeof value === "string") {
+              query = ends_with(prop, value);
+            }
+            break;
+          case "contains_the_text":
+            if (typeof value === "string") {
+              query = contains_the_text(prop, value);
+            }
+            break;
+          case "does_not_contains_the_text":
+            if (typeof value === "string") {
+              query = does_not_contains_the_text(prop, value);
+            }
+            break;
+          case "is_blank":
+            query = is_blank(prop);
+            break;
+          case "is_not_blank":
+            query = is_not_blank(prop);
+            break;
+          case "is_empty_string":
+            query = is_empty_string(prop);
+            break;
+          case "is_not_empty_string":
+            query = is_not_empty_string(prop);
+            break;
+          case "is_at_least":
+            query = is_at_least(prop, parseInt(value));
+            break;
+          case "is_at_most":
+            query = is_at_most(prop, parseInt(value));
+            break;
+          case "is_less_than":
+            query = is_less_than(prop, parseInt(value));
+            break;
+          case "is_greater_than":
+            query = is_greater_than(prop, parseInt(value));
+            break;
+          case "is_between":
+            query = is_between(
+              prop,
+              parseInt(value),
+              parseInt(value2 ? value2 : "0"),
+            );
+            break;
+          default:
+            return;
+        }
+      } else {
+        query = "";
       }
-    } else {
-      query = "";
-    }
 
-    dispatch(addFilter({ query, expression: expression.id }));
-  };
+      dispatch(addFilter({ query, expression: expression.id }));
+    },
+    [comparer, dispatch, expression.id, prop],
+  );
+
+  const sendQuery = React.useMemo(
+    () =>
+      debounce((request: { input: string; input2?: string }) => {
+        if (
+          request.input ||
+          (comparer &&
+            ![
+              "is_blank",
+              "is_not_blank",
+              "is_empty_string",
+              "is_not_empty_string",
+            ].includes(comparer.value))
+        ) {
+          newExpressionToModify.firstInput = request.input;
+          dispatch(addExpression(newExpressionToModify));
+          setFirstInput(request.input);
+          if (request.input2) {
+            newExpressionToModify.secondInput = request.input2;
+            dispatch(addExpression(newExpressionToModify));
+            setSecondInput(request.input2);
+          }
+
+          handleFilter(request.input, request.input2);
+        } else {
+          handleFilter("excludes");
+        }
+      }, 1000),
+    [comparer, dispatch, handleFilter, newExpressionToModify],
+  );
 
   if (!comparer) return null;