ntasicc
/
coffee
İzle 1
Yıldızla 0
Çatalla 0
Kod Sorunlar 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
Kaynağa Gözat

feat: improve cart responsiveness

improvements
Lazar Kostic 3 yıl önce
ebeveyn
ba336ebad7
işleme
b804f481e3
7 değiştirilmiş dosya ile 81 ekleme ve 87 silme
Görünümü Böl Farklılık Durumunu Göster
  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 Dosyayı Görüntüle

@@ -13,8 +13,6 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
return (
<Card
sx={{
ml: { xs: 2, md: 10 },
mr: { xs: 1, md: 10, lg: 1 },
backgroundColor: '#f2f2f2',
p: 2,
mb: 2,

+ 17
- 9
components/cart-content/CartContent.jsx Dosyayı Görüntüle

@@ -1,4 +1,4 @@
import { Grid, Typography } from '@mui/material';
import { Typography } from '@mui/material';
import { Box } from '@mui/system';
import { destroyCookie } from 'nookies';
import { useEffect } from 'react';
@@ -47,19 +47,27 @@ const CartContent = () => {
};

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']} />
<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
data={{ totalPrice: totalPrice, totalQuantity: totalQuantity }}
></OrderSummaryCard>
</Box>
</Grid>
</Grid>
</Box>
</Box>
);
};


+ 1
- 1
components/checkout-content/CheckoutContent.jsx Dosyayı Görüntüle

@@ -41,7 +41,7 @@ const CheckoutContent = () => {
};

return (
<Box 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', 'Checkout']}

+ 60
- 0
components/products-content/ProductsContent.jsx Dosyayı Görüntüle

@@ -0,0 +1,60 @@
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 Dosyayı Görüntüle

@@ -47,7 +47,7 @@ const ProductsGrid = ({
width: 150,
color: 'white',
':hover': {
bgcolor: 'primary.main', // theme.palette.primary.main
bgcolor: 'primary.main',
color: 'white',
},
}}

+ 0
- 19
hooks/useFetchProductData.js Dosyayı Görüntüle

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

export const useFetchSingleProduct = (customID) => {
return useQuery(
@@ -8,21 +7,3 @@ export const useFetchSingleProduct = (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 Dosyayı Görüntüle

@@ -1,60 +1,7 @@
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 [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;

Write Preview
Loading…
İptal
Kaydet