ntasicc
/
coffee


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							import { Box } from '@mui/system';
import Head from 'next/head';
import { useState } from 'react';
import FilterSort from '../../components/filter-sort/FilterSort';
import LoadingSpinner from '../../components/loader/basic-spinner/LoadSpinner';
import ProductsGrid from '../../components/products-grid/ProductsGrid';
import ProductsHero from '../../components/products-hero/ProductsHero';
import { useInfiniteProducts } from '../../hooks/useInfiniteQuery';

const Products = () => {
  const [filter, setFilter] = useState('');
  const [sort, setSort] = useState('');
  const { data, isLoading, fetchNextPage, hasNextPage } = useInfiniteProducts(
    filter,
    sort
  );

  const handleProductTypeChange = (event) => {
    const filterText = event.target.value;
    setFilter(filterText);
  };

  const handleSortChange = (event) => {
    const sort = event.target.value;
    setSort(sort);
  };

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Head>
        <title>NextJS template</title>
        <meta name="description" content="Random data with pagination..." />
      </Head>
      <ProductsHero />
      <FilterSort
        handleProductTypeChange={handleProductTypeChange}
        productType={filter}
        sort={sort}
        handleSortChange={handleSortChange}
      />
      <ProductsGrid
        allProducts={data}
        sort={sort}
        productType={filter}
        fetchNextPage={fetchNextPage}
        hasNextPage={hasNextPage}
      />
    </Box>
  );
};

export default Products;