feat: add categories page

pooriaset · pooriaset · commit 01ebee65b12b · 2024-12-23T19:22:22.000+03:30
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -26,6 +26,7 @@
     "toastify",
     "Tooman",
     "usehooks",
+    "webp",
     "Woocommerce",
     "Yekan",
     "چنده"
diff --git a/next.config.mjs b/next.config.mjs
@@ -18,7 +18,7 @@ const nextConfig = {
       },
       {
         protocol: 'https',
-        hostname: 'api.nextwoo.ir',
+        hostname: 'nextwoo.ir',
       },
       {
         protocol: 'https',
diff --git a/public/assets/images/all-product.webp b/public/assets/images/all-product.webp
diff --git a/src/app/[locale]/(main)/(container)/cart/hooks/useCheckoutItems.tsx b/src/app/[locale]/(main)/(container)/cart/hooks/useCheckoutItems.tsx
@@ -107,7 +107,10 @@ const useCheckoutItems = ({ content }: { content: CartContentFragment }) => {
         />
       ),
     },
-    {
+  ];
+
+  if (totalProfit > 0) {
+    items.push({
       key: (
         <Typography color="error" variant="body2" sx={{ fontWeight: 600 }}>
           {t('pages.cart.box.yourProfit')}
@@ -122,8 +125,8 @@ const useCheckoutItems = ({ content }: { content: CartContentFragment }) => {
           }}
         />
       ),
-    },
-  ];
+    });
+  }
 
   return items;
 };
diff --git a/src/app/[locale]/(main)/(homepage)/components/MainCategories.tsx b/src/app/[locale]/(main)/(homepage)/components/MainCategories.tsx
@@ -3,7 +3,7 @@
 import Image from '@/components/common/Image';
 import { useAppContext } from '@/hooks/useAppContext';
 import { ChevronLeft } from '@mui/icons-material';
-import { Box, Grid, Link, Stack } from '@mui/material';
+import { Box, Grid, Link, Stack, Typography } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import { FC } from 'react';
 
@@ -24,12 +24,12 @@ const MainCategories: FC<MainCategoriesProps> = ({ items }) => {
         params.set('categoryId', item.id.toString());
 
         return (
-          <Grid key={item.id} item xs={6} md={3}>
+          <Grid key={item.id} item xs={4} md={4} lg={2}>
             <Link href={`/search?${params.toString()}`}>
               <Stack spacing={1} alignItems="end">
                 <Box
                   width="100%"
-                  height={isMobile ? 150 : 210}
+                  height={isMobile ? 100 : 210}
                   sx={{
                     bgcolor: grey[100],
                     borderRadius: 2,
@@ -50,14 +50,16 @@ const MainCategories: FC<MainCategoriesProps> = ({ items }) => {
                 </Box>
 
                 <Stack direction="row" spacing={1}>
-                  {item.title}
-                  <ChevronLeft
-                    fontSize="small"
-                    sx={{
-                      transform: (theme) =>
-                        theme.direction === 'ltr' ? 'rotate(180deg)' : null,
-                    }}
-                  />
+                  <Typography variant="body2">{item.title}</Typography>
+                  {!isMobile && (
+                    <ChevronLeft
+                      fontSize="small"
+                      sx={{
+                        transform: (theme) =>
+                          theme.direction === 'ltr' ? 'rotate(180deg)' : null,
+                      }}
+                    />
+                  )}
                 </Stack>
               </Stack>
             </Link>
diff --git a/src/app/[locale]/(main)/(homepage)/page.tsx b/src/app/[locale]/(main)/(homepage)/page.tsx
@@ -24,6 +24,9 @@ import SlidersSkeleton from './components/SlidersSkeleton';
 const getCategories = async () => {
   const { data } = await getClient().query<GetMainCategoriesQuery>({
     query: GET_MAIN_CATEGORIES,
+    variables: {
+      first: 6,
+    },
   });
 
   const items =
diff --git a/src/app/[locale]/(main)/categories/components/MenuCategoryItem.tsx b/src/app/[locale]/(main)/categories/components/MenuCategoryItem.tsx
@@ -0,0 +1,30 @@
+import { Stack, Typography } from '@mui/material';
+import { FC } from 'react';
+
+export interface MenuCategoryItemProps {
+  name: string | null;
+  selected: boolean;
+  onClick: VoidFunction;
+}
+const MenuCategoryItem: FC<MenuCategoryItemProps> = ({
+  name,
+  selected,
+  onClick,
+}) => {
+  return (
+    <Stack
+      onClick={onClick}
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        height: 65,
+        backgroundColor: (theme) =>
+          selected ? theme.palette.background.default : theme.palette.grey[200],
+      }}
+    >
+      <Typography variant="body2">{name}</Typography>
+    </Stack>
+  );
+};
+
+export default MenuCategoryItem;
diff --git a/src/app/[locale]/(main)/categories/components/SubCategories.tsx b/src/app/[locale]/(main)/categories/components/SubCategories.tsx
@@ -0,0 +1,60 @@
+import { Link } from '@/navigation';
+import { ChevronRight } from '@mui/icons-material';
+import { Stack, Typography } from '@mui/material';
+import { FC } from 'react';
+import SubCategoryItem from './SubCategoryItem';
+
+export interface SubCategoriesProps {
+  parentId: string | null;
+  name: string;
+  items: any[];
+}
+
+const SubCategories: FC<SubCategoriesProps> = ({ name, parentId, items }) => {
+  if (!parentId) {
+    return null;
+  }
+
+  return (
+    <Stack px={1.5} flexGrow={1}>
+      <Stack component={Link} href="#" height={65} justifyContent="center">
+        <Typography
+          variant="body2"
+          color="primary"
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          مشاهده همه کالاهای {name}{' '}
+          <ChevronRight
+            fontSize="small"
+            sx={{
+              transform: (theme) =>
+                theme.direction === 'rtl' ? 'rotate(180deg)' : null,
+            }}
+          />
+        </Typography>
+      </Stack>
+      <Stack direction="row" px={1.5} flexWrap="wrap" gap={1}>
+        {items.map((item) => {
+          return (
+            <SubCategoryItem
+              src={item.image.sourceUrl}
+              name={item.name}
+              id={item.name}
+            />
+          );
+        })}
+
+        <SubCategoryItem
+          src={'/assets/images/all-product.webp'}
+          name={'همه کالاها'}
+          id={parentId}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default SubCategories;
diff --git a/src/app/[locale]/(main)/categories/components/SubCategoryItem.tsx b/src/app/[locale]/(main)/categories/components/SubCategoryItem.tsx
@@ -0,0 +1,53 @@
+import Image from '@/components/common/Image';
+import { Link } from '@/navigation';
+import { Stack, Typography } from '@mui/material';
+import { FC } from 'react';
+
+export interface SubCategoryItemProps {
+  id: string;
+  name: string;
+  src: string;
+}
+const SubCategoryItem: FC<SubCategoryItemProps> = ({ id, src, name }) => {
+  return (
+    <Stack
+      spacing={1}
+      width="30%"
+      alignItems="center"
+      component={Link}
+      href="#"
+      sx={{
+        height: 'fit-content',
+        maxHeight: 'auto',
+      }}
+    >
+      <Stack
+        alignItems="center"
+        justifyContent="center"
+        sx={{
+          bgcolor: (theme) => theme.palette.grey[200],
+          borderRadius: 1.5,
+          height: 'fit-content',
+        }}
+      >
+        <Image width={82} height={82} src={src} alt={name} />
+      </Stack>
+      <Typography
+        color="text.primary"
+        variant="body2"
+        sx={{
+          // whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          display: '-webkit-box',
+          '-webkit-line-clamp': '2',
+          '-webkit-box-orient': 'vertical',
+        }}
+      >
+        {name}
+      </Typography>
+    </Stack>
+  );
+};
+
+export default SubCategoryItem;
diff --git a/src/app/[locale]/(main)/categories/loading.tsx b/src/app/[locale]/(main)/categories/loading.tsx
@@ -0,0 +1,45 @@
+import { Skeleton, Stack } from '@mui/material';
+import React from 'react';
+
+const Loading = () => {
+  return (
+    <Stack direction="row" alignItems="flex-start">
+      <Stack overflow="auto">
+        {new Array(4).fill(1).map((_item, index) => {
+          return (
+            <Skeleton
+              key={index.toString()}
+              variant="rectangular"
+              width={115}
+              height={65}
+              sx={{
+                borderRadius: 0,
+                borderBottom: '1px solid ',
+                borderColor: (theme) => theme.palette.divider,
+              }}
+            />
+          );
+        })}
+      </Stack>
+      <Stack
+        px={1.5}
+        gap={1}
+        flexWrap="wrap"
+        justifyContent="center"
+        direction="row"
+        flexGrow={1}
+      >
+        {new Array(6).fill(1).map((_item, index) => {
+          return (
+            <Stack spacing={0.5} width="30%" key={index.toString()}>
+              <Skeleton variant="rectangular" height={100} />
+              <Skeleton variant="text" width="100%" />
+            </Stack>
+          );
+        })}
+      </Stack>
+    </Stack>
+  );
+};
+
+export default Loading;
diff --git a/src/app/[locale]/(main)/categories/page.tsx b/src/app/[locale]/(main)/categories/page.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import { GET_ALL_CATEGORIES_QUERY } from '@/graphql/queries/categories';
+import { CategoriesQuery } from '@/graphql/types/graphql';
+import { useQuery } from '@apollo/client';
+import { Stack } from '@mui/material';
+import { useEffect, useState } from 'react';
+import MenuCategoryItem from './components/MenuCategoryItem';
+import SubCategories from './components/SubCategories';
+import Loading from './loading';
+
+const page = () => {
+  const { data, loading } = useQuery<CategoriesQuery>(
+    GET_ALL_CATEGORIES_QUERY,
+    {
+      variables: {
+        first: 10000,
+      },
+    },
+  );
+
+  const categories = data?.productCategories?.nodes || [];
+
+  const [selected, setSelected] = useState<any>(null);
+
+  useEffect(() => {
+    if (!loading) {
+      setSelected(categories[0]);
+    }
+  }, [loading]);
+
+  if (loading || !selected) {
+    return <Loading />;
+  }
+
+  return (
+    <Stack overflow="auto" direction="row">
+      <Stack
+        overflow="auto"
+        sx={{
+          minWidth: 110,
+        }}
+      >
+        {categories
+          .filter((category) => !category.parentId)
+          .map((category) => {
+            return (
+              <MenuCategoryItem
+                selected={category.id === selected.id}
+                {...category}
+                key={category.id}
+                onClick={() => setSelected(category)}
+              />
+            );
+          })}
+      </Stack>
+      <SubCategories
+        name={selected.name}
+        parentId={selected.id}
+        items={categories.filter(
+          (category) => category.parentId === selected.id,
+        )}
+      />
+    </Stack>
+  );
+};
+
+export default page;
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
diff --git a/src/app/[locale]/test/page.tsx b/src/app/[locale]/test/page.tsx
diff --git a/src/components/VariableProductItem/VariableProductItem.tsx b/src/components/VariableProductItem/VariableProductItem.tsx
diff --git a/src/graphql/queries/categories.ts b/src/graphql/queries/categories.ts

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ const nextConfig = {`
`18`	`18`	`},`
`19`	`19`	`{`
`20`	`20`	`protocol: 'https',`
`21`		`- hostname: 'api.nextwoo.ir',`
	`21`	`+ hostname: 'nextwoo.ir',`
`22`	`22`	`},`
`23`	`23`	`{`
`24`	`24`	`protocol: 'https',`