ntasicc
/
coffee-ts


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
							import { SelectChangeEvent } from '@mui/material';
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';

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

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

  const handleSortChange = (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;