ntasicc
/
coffee
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Štítky Mezníky
Nový požadavek na natažení

#8 feat: improve cart responsiveness

Sloučený
lazarkostic sloučil 1 revizí z větve improvements do větve master před před 3 roky
Konverzace 0 Revize 1 Změněné soubory 7
  1. 0
    2
      components/cards/cart-card/CartCard.jsx
  2. 17
    9
      components/cart-content/CartContent.jsx
  3. 1
    1
      components/checkout-content/CheckoutContent.jsx
  4. 60
    0
      components/products-content/ProductsContent.jsx
  5. 1
    1
      components/products-grid/ProductsGrid.jsx
  6. 0
    19
      hooks/useFetchProductData.js
  7. 2
    55
      pages/products/index.js

+ 0
- 2
components/cards/cart-card/CartCard.jsx Zobrazit soubor

return ( return (
<Card <Card
sx={{ sx={{
ml: { xs: 2, md: 10 },
mr: { xs: 1, md: 10, lg: 1 },
backgroundColor: '#f2f2f2', backgroundColor: '#f2f2f2',
p: 2, p: 2,
mb: 2, mb: 2,

+ 17
- 9
components/cart-content/CartContent.jsx Zobrazit soubor

import { Grid, Typography } from '@mui/material';
import { Typography } from '@mui/material';
import { Box } from '@mui/system'; import { Box } from '@mui/system';
import { destroyCookie } from 'nookies'; import { destroyCookie } from 'nookies';
import { useEffect } from 'react'; import { useEffect } from 'react';
}; };


return ( return (
<Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
<Box sx={{ py: 10, height: '100%', width: '100%' }}>
<StepTitle title="Items in Your Cart" breadcrumbsArray={['Cart']} /> <StepTitle title="Items in Your Cart" breadcrumbsArray={['Cart']} />
<Grid item lg={8} xs={12} sx={{ mt: 2 }}>
{mapProductsToDom()}
</Grid>
<Grid item lg={4} xs={12}>
<Box sx={{ mr: { md: 12 }, mt: 2, ml: { xs: 2, md: 12, lg: 0 } }}>
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', lg: 'row' },
mr: { xs: 2, md: 12 },
ml: { xs: 2, md: 12 },
}}
>
<Box sx={{ mt: 2, mr: { lg: 2, minWidth: '65%' } }}>
{mapProductsToDom()}
</Box>

<Box sx={{ mt: 2 }}>
<OrderSummaryCard <OrderSummaryCard
data={{ totalPrice: totalPrice, totalQuantity: totalQuantity }} data={{ totalPrice: totalPrice, totalQuantity: totalQuantity }}
></OrderSummaryCard> ></OrderSummaryCard>
</Box> </Box>
</Grid>
</Grid>
</Box>
</Box>
); );
}; };



+ 1
- 1
components/checkout-content/CheckoutContent.jsx Zobrazit soubor

}; };


return ( return (
<Box container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
<Box sx={{ py: 10, height: '100%', width: '100%' }}>
<StepTitle <StepTitle
title="Items in Your Cart" title="Items in Your Cart"
breadcrumbsArray={['Cart', 'Checkout']} breadcrumbsArray={['Cart', 'Checkout']}

+ 60
- 0
components/products-content/ProductsContent.jsx Zobrazit soubor

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 = () => {
const [filter, setFilter] = useState('');
const [sort, setSort] = useState('');
const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
useInfiniteProducts(filter, sort);

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

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

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}
/>
{isLoading ? (
<LoadingSpinner />
) : (
<ProductsGrid
allProducts={data}
sort={sort}
productType={filter}
fetchNextPage={fetchNextPage}
hasNextPage={hasNextPage}
isFetchingNextPage={isFetchingNextPage}
/>
)}
</Box>
);
};

export default ProductsContent;

+ 1
- 1
components/products-grid/ProductsGrid.jsx Zobrazit soubor

width: 150, width: 150,
color: 'white', color: 'white',
':hover': { ':hover': {
bgcolor: 'primary.main', // theme.palette.primary.main
bgcolor: 'primary.main',
color: 'white', color: 'white',
}, },
}} }}

+ 0
- 19
hooks/useFetchProductData.js Zobrazit soubor

import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { getProductData } from '../requests/products/producDataRequest'; import { getProductData } from '../requests/products/producDataRequest';
import { getProductsByCategory } from '../requests/products/productsByCategoryRequest';


export const useFetchSingleProduct = (customID) => { export const useFetchSingleProduct = (customID) => {
return useQuery( return useQuery(
async () => await getProductData(customID) async () => await getProductData(customID)
); );
}; };

export const useFetchSimilarProducts = (category) => {
return useQuery(
['products', category],
async () => await getProductsByCategory(category),
{
enabled: !!category,
}
);
};

export const useFetchProductsByCategory = (productType) => {
return useQuery(
['filteredProducts', productType],
async () => await getProductsByCategory(productType),
{ enabled: productType === 'Mug' || productType === 'Coffee' }
);
};

+ 2
- 55
pages/products/index.js Zobrazit soubor

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';
import ProductsContent from '../../components/products-content/ProductsContent';


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

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

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

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}
/>
{isLoading ? (
<LoadingSpinner />
) : (
<ProductsGrid
allProducts={data}
sort={sort}
productType={filter}
fetchNextPage={fetchNextPage}
hasNextPage={hasNextPage}
isFetchingNextPage={isFetchingNextPage}
/>
)}
</Box>
);
return <ProductsContent />;
}; };


export default Products; export default Products;

Zapsat Náhled
Načítá se…
Zrušit
Uložit