text: import React, { Component, Fragment, useState } from "react";
  import "./App.css";
  import ProductList from "./components/ProductList/ProductList";
  import NavBar from "./components/NavBar/NavBar";
  import Wrapper from "./components/hoc/Wrapper";
  import ProductsProvider, {
    useProducts,
    useProductsActions,
  } from "./components/Providers/ProductsProvider";
  import Filter from "./components/Filter/Filter";
  import SearchBar from "./common/Search/SearchBar";
  
  const App = () => {
    const products = useProducts();
    const setProducts = useProductsActions();
    console.log("App  ", products);
  
    return (
      <Fragment>
        <ProductsProvider>
          <NavBar />
          <SearchBar />
          <Filter />
          <ProductList />
        </ProductsProvider>
      </Fragment>
    );
  };
  
  export default Wrapper(App, "container");
  