Start mapping selected filters to query variables (#3886)

* Initial variables mapping

* Changeset

.changeset/polite-eyes-look.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Start mapping selected filters to query variables

src/components/ConditionalFilter/FilterValueProvider.ts

@@ -1,7 +1,31 @@
 import { FilterContainer } from "./FilterElement";
 
+type QueryVars =
+  | {  OR: QueryVars, current?: FilterContainer[number] }
+  | {  AND: QueryVars, current?: FilterContainer[number] }
+
 export interface FilterValueProvider {
   value: FilterContainer;
+  queryVars: QueryVars;
   loading: boolean;
   persist: (newValue: FilterContainer) => void;
 }
+
+const toNested = (p: QueryVars, current: FilterContainer[number]): QueryVars => {
+  if (typeof current !== "string") {
+    return { ...p, current }
+  }
+
+  if (current === "AND") {
+    return { AND: p }
+  }
+
+  if (current === "OR") {
+    return { OR: p }
+  }
+
+  return p
+}
+
+export const createVariables = (filter: FilterContainer) =>
+  filter.reduceRight(toNested, {} as QueryVars)

src/components/ConditionalFilter/ValueProvider/useUrlValueProvider.ts

@@ -3,7 +3,7 @@ import useRouter from "use-react-router";
 
 import { useInitialAPIState } from "../API/initialState/useInitalAPIState";
 import { FilterContainer } from "../FilterElement";
-import { FilterValueProvider } from "../FilterValueProvider";
+import { createVariables,FilterValueProvider } from "../FilterValueProvider";
 import { useTokenArray } from "./TokenArray";
 import { UrlEntry } from "./UrlToken";
 
@@ -42,6 +42,7 @@ export const useUrlValueProvider = (): FilterValueProvider => {
 
   return {
     value,
+    queryVars: createVariables(value),
     loading,
     persist,
   };