Refactor initial index for filtering

.changeset/two-seas-shake.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Refactor initial index for filters

src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx

@@ -1,4 +1,4 @@
-import { ConditionalFilters } from "@dashboard/components/ConditionalFilter";
+import { ConditionalProductFilters } from "@dashboard/components/ConditionalFilter";
 import { Box, Button, Popover } from "@saleor/macaw-ui/next";
 import React from "react";
 
@@ -10,7 +10,7 @@ export const ExpressionFilters = () => (
     <Popover.Content align="start">
       <Box __minWidth="200px" __minHeight="100px" paddingX={4} paddingY={3}>
         <Popover.Arrow />
-        <ConditionalFilters />
+        <ConditionalProductFilters />
       </Box>
     </Popover.Content>
   </Popover>

src/components/ConditionalFilter/ConditionalFilters.tsx

@@ -0,0 +1,31 @@
+import {
+  _ExperimentalFilters,
+  Box,
+  Text,
+} from "@saleor/macaw-ui/next";
+import React from "react";
+import { FiltersArea } from "./FIltersArea";
+import { FilterValueProvider } from "./FilterValueProvider";
+import { FilterContainer } from "./FilterElement";
+
+interface ConditionalFiltersProps {
+  provider: FilterValueProvider
+  onConfirm: (value: FilterContainer) => void
+}
+
+export const ConditionalFilters = ({ provider, onConfirm }: ConditionalFiltersProps) => {
+  const handleConfirm = (value: FilterContainer) => {
+    provider.persist(value)
+    onConfirm(value)
+  }
+
+  return (
+    <Box>
+      {provider.loading ? (
+        <Text>Loading...</Text>
+      ) : (
+        <FiltersArea filterValue={provider.value} onConfirm={handleConfirm} />
+      )}
+    </Box>
+  );
+};

src/components/ConditionalFilter/FIltersArea.tsx

@@ -0,0 +1,88 @@
+import {
+  _ExperimentalFilters,
+  Box,
+  FilterEvent,
+} from "@saleor/macaw-ui/next";
+import React from "react";
+
+import { useProductFilterAPIProvider } from "./API/ProductFilterAPIProvider";
+import { useFilterContainer } from "./useFilterContainer";
+import { useFilterLeftOperandsProvider } from "./useFilterLeftOperands";
+import { FilterContainer } from "./FilterElement";
+
+interface FiltersAreaProps {
+  filterValue: FilterContainer
+  onConfirm: (value: FilterContainer) => void
+}
+
+export const FiltersArea = ({ filterValue, onConfirm }: FiltersAreaProps) => {
+  const apiProvider = useProductFilterAPIProvider();
+  const leftOperandsProvider = useFilterLeftOperandsProvider();
+
+  const {
+    value,
+    addEmpty,
+    removeAt,
+    updateLeftOperator,
+    updateRightOperator,
+    updateCondition,
+    updateRightOptions,
+    updateLeftOptions,
+  } = useFilterContainer(filterValue, apiProvider, leftOperandsProvider);
+
+  const handleStateChange = async (event: FilterEvent["detail"]) => {
+    if (!event) return
+
+    if (event.type === "row.add") {
+      addEmpty();
+    }
+
+    if (event.type === "row.remove") {
+      removeAt(event.path);
+    }
+
+    if (event.type === "leftOperator.onChange") {
+      updateLeftOperator(event.path, event.value);
+    }
+
+    if (event.type === "condition.onChange") {
+      updateCondition(event.path.split(".")[0], event.value);
+    }
+
+    if (event.type === "rightOperator.onChange") {
+      updateRightOperator(event.path.split(".")[0], event.value);
+    }
+
+    if (event.type === "rightOperator.onFocus") {
+      updateRightOptions(event.path.split(".")[0], "");
+    }
+
+    if (event.type === "rightOperator.onInputValueChange") {
+      updateRightOptions(event.path.split(".")[0], event.value);
+    }
+
+    if (event.type === "leftOperator.onInputValueChange") {
+      updateLeftOptions(event.path.split(".")[0], event.value);
+    }
+  };
+
+  return (
+    <Box>
+      <_ExperimentalFilters
+        leftOptions={leftOperandsProvider.operands}
+        // @ts-expect-error
+        value={value}
+        onChange={handleStateChange}
+      >
+        <_ExperimentalFilters.Footer>
+          <_ExperimentalFilters.AddRowButton>
+            Add new row
+          </_ExperimentalFilters.AddRowButton>
+          <_ExperimentalFilters.ConfirmButton onClick={() => onConfirm(value)}>
+            Confirm
+          </_ExperimentalFilters.ConfirmButton>
+        </_ExperimentalFilters.Footer>
+      </_ExperimentalFilters>
+    </Box>
+  );
+};

src/components/ConditionalFilter/index.tsx

@@ -1,99 +1,15 @@
-// @ts-strict-ignore
-import {
-  _ExperimentalFilters,
-  Box,
-  FilterEvent,
-  Text,
-} from "@saleor/macaw-ui/next";
 import React from "react";
-
-import { useProductFilterAPIProvider } from "./API/ProductFilterAPIProvider";
-import { useFilterContainer } from "./useFilterContainer";
-import { useFilterLeftOperandsProvider } from "./useFilterLeftOperands";
 import { useUrlValueProvider } from "./ValueProvider/useUrlValueProvider";
+import { ConditionalFilters } from "./ConditionalFilters";
+import { FilterContainer } from "./FilterElement";
 
-const FiltersArea = ({ provider, onConfirm }) => {
-  const apiProvider = useProductFilterAPIProvider();
-  const leftOperandsProvider = useFilterLeftOperandsProvider();
-
-  const {
-    value,
-    addEmpty,
-    removeAt,
-    updateLeftOperator,
-    updateRightOperator,
-    updateCondition,
-    updateRightOptions,
-    updateLeftOptions,
-  } = useFilterContainer(provider, apiProvider, leftOperandsProvider);
-
-  const handleStateChange = async (event: FilterEvent["detail"]) => {
-    if (event.type === "row.add") {
-      addEmpty();
-    }
-
-    if (event.type === "row.remove") {
-      removeAt(event.path);
-    }
-
-    if (event.type === "leftOperator.onChange") {
-      updateLeftOperator(event.path, event.value);
-    }
-
-    if (event.type === "condition.onChange") {
-      updateCondition(event.path.split(".")[0], event.value);
-    }
-
-    if (event.type === "rightOperator.onChange") {
-      updateRightOperator(event.path.split(".")[0], event.value);
-    }
-
-    if (event.type === "rightOperator.onFocus") {
-      updateRightOptions(event.path.split(".")[0], "");
-    }
-
-    if (event.type === "rightOperator.onInputValueChange") {
-      updateRightOptions(event.path.split(".")[0], event.value);
-    }
-
-    if (event.type === "leftOperator.onInputValueChange") {
-      updateLeftOptions(event.path.split(".")[0], event.value);
-    }
-  };
-
-  const handleConfirm = () => onConfirm(value);
+export const ConditionalProductFilters = () => {
+  const provider = useUrlValueProvider();
 
-  return (
-    <Box>
-      <_ExperimentalFilters
-        leftOptions={leftOperandsProvider.operands}
-        // @ts-expect-error
-        value={value}
-        onChange={handleStateChange}
-      >
-        <_ExperimentalFilters.Footer>
-          <_ExperimentalFilters.AddRowButton>
-            Add new row
-          </_ExperimentalFilters.AddRowButton>
-          <_ExperimentalFilters.ConfirmButton onClick={handleConfirm}>
-            Confirm
-          </_ExperimentalFilters.ConfirmButton>
-        </_ExperimentalFilters.Footer>
-      </_ExperimentalFilters>
-    </Box>
-  );
-};
+  // @ts-ignore
+  const handleConfirm = (value: FilterContainer) => {
 
-export const ConditionalFilters = () => {
-  const provider = useUrlValueProvider();
+  }
 
-  return (
-    <Box>
-      {provider.loading ? (
-        <Text>Loading...</Text>
-      ) : (
-        <FiltersArea provider={provider.value} onConfirm={provider.persist} />
-      )}
-    </Box>
-  );
-};
+  return <ConditionalFilters provider={provider} onConfirm={handleConfirm} />
+}