Refactor filter container (#3867)

* Refactor filter container

* Changeset

* Lint

.changeset/plenty-deers-mate.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Refactoring FilterContainer in filter feature

src/components/ConditionalFilter/API/getAPIOptions.tsx

@@ -1,7 +1,6 @@
 import { ApolloClient } from "@apollo/client";
 
-import { FilterElement } from "../FilterElement";
+import { FilterContainer, FilterElement } from "../FilterElement";
-import { FilterContainer } from "../useFilterContainer";
 import {
   AttributeChoicesHandler,
   AttributesHandler,

src/components/ConditionalFilter/FilterElement/FilterElement.ts

@@ -164,3 +164,6 @@ export class FilterElement {
     return null;
   }
 }
+
+
+export type FilterContainer = Array<string | FilterElement | FilterContainer>;

src/components/ConditionalFilter/FilterElement/index.ts

@@ -1,2 +1,2 @@
 export { Condition } from "./Condition"
-export { FilterElement } from "./FilterElement"
+export { type FilterContainer,FilterElement } from "./FilterElement"

src/components/ConditionalFilter/FilterValueProvider.ts

@@ -1,4 +1,4 @@
-import { FilterContainer } from "./useFilterContainer";
+import { FilterContainer } from "./FilterElement";
 
 export interface FilterValueProvider {
   value: FilterContainer;

src/components/ConditionalFilter/ValueProvider/TokenArray/index.ts

@@ -4,8 +4,7 @@ import { parse, ParsedQs } from "qs";
 import { useRef } from "react";
 
 import { InitialStateResponse } from "../../API/InitialStateResponse";
-import { FilterElement } from "../../FilterElement";
+import { FilterContainer, FilterElement } from "../../FilterElement";
-import { FilterContainer } from "../../useFilterContainer";
 import { UrlEntry, UrlToken } from "../UrlToken";
 import {
   emptyFetchingParams,

src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts

@@ -4,8 +4,8 @@ import { stringify } from "qs";
 import useRouter from "use-react-router";
 
 import { useInitialAPIState } from "../API/initialState/useInitalAPIState";
+import { FilterContainer } from "../FilterElement";
 import { FilterValueProvider } from "../FilterValueProvider";
-import { FilterContainer } from "../useFilterContainer";
 import { useTokenArray } from "./TokenArray";
 
 const prepareStructure = filterValue =>

src/components/ConditionalFilter/useContainerState.ts

@@ -0,0 +1,60 @@
+import { useState } from "react";
+
+import { FilterContainer,FilterElement } from "./FilterElement";
+
+type StateCallback = (el: FilterElement) => void
+type Element = FilterContainer[number]
+
+export const useContainerState = (initialValue: FilterContainer) => {
+  const [value, setValue] = useState(initialValue);
+
+  const isFilterElement = (elIndex: number, index: number, el: Element): el is FilterElement => {
+    return elIndex === index && typeof el !== "string" && !Array.isArray(el)
+  }
+
+  const updateFilterElement = (index: number, cb: StateCallback) => (el: Element, elIndex: number) => {
+    if (isFilterElement(elIndex, index, el)) {
+      cb(el);
+    }
+
+    return el;
+  }
+
+  const updateAt = (position: string, cb: StateCallback) => {
+    const index = parseInt(position, 10);
+    setValue(v => v.map(updateFilterElement(index, cb)));
+  }
+
+  const removeAt = (position: string) => {
+    const index = parseInt(position, 10);
+
+    if (value.length > 0) {
+      setValue(v =>
+        v.filter((_, elIndex) => ![index - 1, index].includes(elIndex)),
+      );
+      return;
+    }
+
+    setValue(v => v.filter((_, elIndex) => ![index].includes(elIndex)));
+  };
+
+  const createEmpty = () => {
+    const newValue: FilterContainer = [];
+
+    if (value.length > 0) {
+      newValue.push("OR");
+    }
+
+    newValue.push(FilterElement.createEmpty());
+
+    setValue(v => v.concat(newValue));
+  };
+
+
+  return {
+    createEmpty,
+    updateAt,
+    removeAt,
+    value,
+  }
+}

src/components/ConditionalFilter/useFilterContainer.ts

@@ -1,115 +1,36 @@
-// @ts-strict-ignore
+import { FilterContainer } from "./FilterElement";
-import { useState } from "react";
-
-import { FilterElement } from "./FilterElement";
 import { ConditionValue, ItemOption } from "./FilterElement/ConditionValue";
-
+import { useContainerState } from "./useContainerState";
-export type FilterContainer = Array<string | FilterElement | FilterContainer>;
 
 export const useFilterContainer = (initialValue: FilterContainer) => {
-  const [value, setValue] = useState(initialValue);
+  const { value, updateAt, removeAt, createEmpty } = useContainerState(initialValue)
 
   const addEmpty = () => {
-    const newValue = [];
+    createEmpty()
-    if (value.length > 0) {
-      newValue.push("OR");
-    }
-
-    newValue.push(FilterElement.createEmpty());
-
-    setValue(v => v.concat(newValue));
-  };
-
-  const removeAt = (position: string) => {
-    const index = parseInt(position, 10);
-
-    if (value.length > 0) {
-      setValue(v =>
-        v.filter((_, elIndex) => ![index - 1, index].includes(elIndex)),
-      );
-      return;
-    }
-
-    setValue(v => v.filter((_, elIndex) => ![index].includes(elIndex)));
   };
 
   const updateLeftOperator = (position: string, leftOperator: any) => {
-    const index = parseInt(position, 10);
+    updateAt(position, (el) => el.updateLeftOperator(leftOperator))
-    setValue(v =>
-      v.map((el, elIndex) => {
-        if (elIndex === index && typeof el !== "string" && !Array.isArray(el)) {
-          el.updateLeftOperator(leftOperator);
-        }
-
-        return el;
-      }),
-    );
   };
 
   const updateLeftLoadingState = (position: string, loading: boolean) => {
-    const index = parseInt(position, 10);
+    updateAt(position, (el) => el.updateLeftLoadingState(loading))
-    setValue(v =>
-      v.map((el, elIndex) => {
-        if (elIndex === index && typeof el !== "string" && !Array.isArray(el)) {
-          el.updateLeftLoadingState(loading);
-        }
-
-        return el;
-      }),
-    );
   };
 
   const updateRightOperator = (position: string, rightOperator: ConditionValue) => {
-    const index = parseInt(position, 10);
+    updateAt(position, (el) => el.updateRightOperator(rightOperator))
-    setValue(v =>
-      v.map((el, elIndex) => {
-        if (elIndex === index && typeof el !== "string" && !Array.isArray(el)) {
-          el.updateRightOperator(rightOperator);
-        }
-
-        return el;
-      }),
-    );
   };
 
   const updateRightOptions = (position: string, options: ItemOption[]) => {
-    const index = parseInt(position, 10);
+    updateAt(position, (el) => el.updateRightOptions(options))
-    setValue(v =>
-      v.map((el, elIndex) => {
-        if (elIndex === index && typeof el !== "string" && !Array.isArray(el)) {
-          el.updateRightOptions(options);
-        }
-
-        return el;
-      }),
-    );
   };
 
   const updateRightLoadingState = (position: string, loading: boolean) => {
-    const index = parseInt(position, 10);
+    updateAt(position, (el) => el.updateRightLoadingState(loading))
-    setValue(v =>
-      v.map((el, elIndex) => {
-        if (elIndex === index && typeof el !== "string" && !Array.isArray(el)) {
-          el.updateRightLoadingState(loading);
-        }
-
-        return el;
-      }),
-    );
   };
 
   const updateCondition = (position: string, conditionValue: any) => {
-    const index = parseInt(position, 10);
+    updateAt(position, (el) => el.updateCondition(conditionValue))
-
-    setValue(v =>
-      v.map((el, elIndex) => {
-        if (elIndex === index && typeof el !== "string" && !Array.isArray(el)) {
-          el.updateCondition(conditionValue);
-        }
-
-        return el;
-      }),
-    );
   };
 
   return {