Refactor initial index for filtering (#3893)

* Refactor initial index

* Changeset

* Ignore handler

* Fix linter

* Fix linter

* Lift up providers

* Delete FIltersArea.tsx

.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,37 @@
+import { Box, Text } from "@saleor/macaw-ui/next";
+import React from "react";
+
+import { FilterAPIProvider } from "./API/FilterAPIProvider";
+import { FilterContainer } from "./FilterElement";
+import { FiltersArea } from "./FiltersArea";
+import { FilterValueProvider } from "./FilterValueProvider";
+import { LeftOperandsProvider } from "./LeftOperandsProvider";
+
+interface ConditionalFiltersProps {
+  valueProvider: FilterValueProvider
+  apiProvider: FilterAPIProvider
+  leftOperandsProvider: LeftOperandsProvider
+  onConfirm: (value: FilterContainer) => void
+}
+
+export const ConditionalFilters = ({ valueProvider, apiProvider, leftOperandsProvider, onConfirm }: ConditionalFiltersProps) => {
+  const handleConfirm = (value: FilterContainer) => {
+    valueProvider.persist(value)
+    onConfirm(value)
+  }
+
+  return (
+    <Box>
+      {valueProvider.loading ? (
+        <Text>Loading...</Text>
+      ) : (
+        <FiltersArea
+          apiProvider={apiProvider}
+          leftOperandsProvider={leftOperandsProvider}
+          filterValue={valueProvider.value}
+          onConfirm={handleConfirm}
+        />
+      )}
+    </Box>
+  );
+};

src/components/ConditionalFilter/FiltersArea.tsx

@@ -0,0 +1,87 @@
+import {
+  _ExperimentalFilters,
+  Box,
+  FilterEvent,
+} from "@saleor/macaw-ui/next";
+import React from "react";
+
+import { FilterAPIProvider } from "./API/FilterAPIProvider";
+import { FilterContainer } from "./FilterElement";
+import { LeftOperandsProvider } from "./LeftOperandsProvider";
+import { useFilterContainer } from "./useFilterContainer";
+
+interface FiltersAreaProps {
+  filterValue: FilterContainer
+  apiProvider: FilterAPIProvider
+  leftOperandsProvider: LeftOperandsProvider
+  onConfirm: (value: FilterContainer) => void
+}
+
+export const FiltersArea = ({ filterValue, apiProvider, leftOperandsProvider, onConfirm }: FiltersAreaProps) => {
+  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,24 @@
-// @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 { ConditionalFilters } from "./ConditionalFilters";
+import { FilterContainer } from "./FilterElement";
 import { useFilterLeftOperandsProvider } from "./useFilterLeftOperands";
 import { useUrlValueProvider } from "./ValueProvider/useUrlValueProvider";
 
-const FiltersArea = ({ provider, onConfirm }) => {
+export const ConditionalProductFilters = () => {
+  const provider = useUrlValueProvider();
   const apiProvider = useProductFilterAPIProvider();
   const leftOperandsProvider = useFilterLeftOperandsProvider();
 
-  const {
+  // @ts-expect-error
-    value,
+  const handleConfirm = (value: FilterContainer) => {
-    addEmpty,
+  }
-    removeAt,
-    updateLeftOperator,
-    updateRightOperator,
-    updateCondition,
-    updateRightOptions,
-    updateLeftOptions,
-  } = useFilterContainer(provider, apiProvider, leftOperandsProvider);
 
-  const handleStateChange = async (event: FilterEvent["detail"]) => {
+  return <ConditionalFilters
-    if (event.type === "row.add") {
+    valueProvider={provider}
-      addEmpty();
+    apiProvider={apiProvider}
-    }
+    leftOperandsProvider={leftOperandsProvider}
-
+    onConfirm={handleConfirm}
-    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);
-
-  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>
-  );
-};
-
-export const ConditionalFilters = () => {
-  const provider = useUrlValueProvider();
-
-  return (
-    <Box>
-      {provider.loading ? (
-        <Text>Loading...</Text>
-      ) : (
-        <FiltersArea provider={provider.value} onConfirm={provider.persist} />
-      )}
-    </Box>
-  );
-};