ntasicc
/
coffee-ts


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

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

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

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

  };

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

export default ProductsContent;