Use useContext for filters

src/components/app/App.jsx

@@ -1,16 +1,19 @@
-import { useState } from 'react'
+import { useContext, useState } from 'react'
 import { Header } from '../Header/Header'
 import { products as initialProducts } from '../../mocks/products.json'
 import { Products } from '../Products/Products'
 import { Footer } from '../Footer/Footer'
 import { IS_DEVELOPMENT } from '../../config'
 import './App.css'
+import { FiltersContext } from '../../context/filters'
 
 function useFilters() {
-  const [filters, setFilters] = useState({
-    category: 'all',
-    minPrice: 0,
-  })
+  // const [filters, setFilters] = useState({
+  //   category: 'all',
+  //   minPrice: 0,
+  // })
+
+  const { filters, setFilters } = useContext(FiltersContext)
 
   const filterProducts = (products) => {
     return products.filter((product) => {

src/context/filters.js → src/context/filters.jsx

@@ -1,13 +1,18 @@
-import { createContext } from 'react'
+import { createContext, useState } from 'react'
 
 export const FiltersContext = createContext()
 
 export function FiltersProvider({ children }) {
+  const [filters, setFilters] = useState({
+    category: 'all',
+    minPrice: 0,
+  })
+
   return (
     <FiltersContext.Provider
       value={{
-        category: 'all',
-        minPrice: 0,
+        filters,
+        setFilters,
       }}
     >
       {children}

src/main.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import { FiltersProvider } from './context/filters'
 import ReactDOM from 'react-dom/client'
 import App from './components/app/App'
 import './main.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
+  <FiltersProvider>
     <App />
-  </React.StrictMode>
+  </FiltersProvider>
 )