Lift up providers

src/components/ConditionalFilter/ConditionalFilters.tsx

@@ -1,27 +1,36 @@
 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 {
-  provider: FilterValueProvider
+  valueProvider: FilterValueProvider
+  apiProvider: FilterAPIProvider
+  leftOperandsProvider: LeftOperandsProvider
   onConfirm: (value: FilterContainer) => void
 }
 
-export const ConditionalFilters = ({ provider, onConfirm }: ConditionalFiltersProps) => {
+export const ConditionalFilters = ({ valueProvider, apiProvider, leftOperandsProvider, onConfirm }: ConditionalFiltersProps) => {
   const handleConfirm = (value: FilterContainer) => {
-    provider.persist(value)
+    valueProvider.persist(value)
     onConfirm(value)
   }
 
   return (
     <Box>
-      {provider.loading ? (
+      {valueProvider.loading ? (
         <Text>Loading...</Text>
       ) : (
-        <FiltersArea filterValue={provider.value} onConfirm={handleConfirm} />
+        <FiltersArea
+          apiProvider={apiProvider}
+          leftOperandsProvider={leftOperandsProvider}
+          filterValue={valueProvider.value}
+          onConfirm={handleConfirm}
+        />
       )}
     </Box>
   );

src/components/ConditionalFilter/FIltersArea.tsx

@@ -5,20 +5,19 @@ import {
 } from "@saleor/macaw-ui/next";
 import React from "react";
 
-import { useProductFilterAPIProvider } from "./API/ProductFilterAPIProvider";
+import { FilterAPIProvider } from "./API/FilterAPIProvider";
 import { FilterContainer } from "./FilterElement";
+import { LeftOperandsProvider } from "./LeftOperandsProvider";
 import { useFilterContainer } from "./useFilterContainer";
-import { useFilterLeftOperandsProvider } from "./useFilterLeftOperands";
 
 interface FiltersAreaProps {
   filterValue: FilterContainer
+  apiProvider: FilterAPIProvider
+  leftOperandsProvider: LeftOperandsProvider
   onConfirm: (value: FilterContainer) => void
 }
 
-export const FiltersArea = ({ filterValue, onConfirm }: FiltersAreaProps) => {
-  const apiProvider = useProductFilterAPIProvider();
-  const leftOperandsProvider = useFilterLeftOperandsProvider();
-
+export const FiltersArea = ({ filterValue, apiProvider, leftOperandsProvider, onConfirm }: FiltersAreaProps) => {
   const {
     value,
     addEmpty,

src/components/ConditionalFilter/FiltersArea.tsx

@@ -5,20 +5,19 @@ import {
 } from "@saleor/macaw-ui/next";
 import React from "react";
 
-import { useProductFilterAPIProvider } from "./API/ProductFilterAPIProvider";
+import { FilterAPIProvider } from "./API/FilterAPIProvider";
 import { FilterContainer } from "./FilterElement";
+import { LeftOperandsProvider } from "./LeftOperandsProvider";
 import { useFilterContainer } from "./useFilterContainer";
-import { useFilterLeftOperandsProvider } from "./useFilterLeftOperands";
 
 interface FiltersAreaProps {
   filterValue: FilterContainer
+  apiProvider: FilterAPIProvider
+  leftOperandsProvider: LeftOperandsProvider
   onConfirm: (value: FilterContainer) => void
 }
 
-export const FiltersArea = ({ filterValue, onConfirm }: FiltersAreaProps) => {
-  const apiProvider = useProductFilterAPIProvider();
-  const leftOperandsProvider = useFilterLeftOperandsProvider();
-
+export const FiltersArea = ({ filterValue, apiProvider, leftOperandsProvider, onConfirm }: FiltersAreaProps) => {
   const {
     value,
     addEmpty,

src/components/ConditionalFilter/index.tsx

@@ -1,15 +1,24 @@
 import React from "react";
 
+import { useProductFilterAPIProvider } from "./API/ProductFilterAPIProvider";
 import { ConditionalFilters } from "./ConditionalFilters";
 import { FilterContainer } from "./FilterElement";
+import { useFilterLeftOperandsProvider } from "./useFilterLeftOperands";
 import { useUrlValueProvider } from "./ValueProvider/useUrlValueProvider";
 
 export const ConditionalProductFilters = () => {
   const provider = useUrlValueProvider();
+  const apiProvider = useProductFilterAPIProvider();
+  const leftOperandsProvider = useFilterLeftOperandsProvider();
 
   // @ts-expect-error
   const handleConfirm = (value: FilterContainer) => {
   }
 
-  return <ConditionalFilters provider={provider} onConfirm={handleConfirm} />
+  return <ConditionalFilters
+    valueProvider={provider}
+    apiProvider={apiProvider}
+    leftOperandsProvider={leftOperandsProvider}
+    onConfirm={handleConfirm}
+  />
 }