add custom tabs component

radekm2000 · Mar 6, 2024 · ef68475 · ef68475
1 parent 203d533
commit ef68475
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 25 deletions.
diff --git a/client/ecommerce/src/components/ProfileInfo.tsx b/client/ecommerce/src/components/ProfileInfo.tsx
@@ -92,9 +92,6 @@ export const ProfileInfo = ({ user }: { user: ExtendedUserWithProfile }) => {
             <Typography sx={{ fontSize: "24px", color: "#171717" }}>
               {user.username}
             </Typography>
-            <Typography sx={{ color: "#4D4D4D", fontSize: "16px" }}>
-              good reputation
-            </Typography>
           </Box>
         </Box>
       ) : (

diff --git a/client/ecommerce/src/components/TabPanel.tsx b/client/ecommerce/src/components/TabPanel.tsx
@@ -0,0 +1,183 @@
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { useState } from "react";
+import { ProductWithImageAndUser } from "../types/types";
+import { Card, CardContent, CardMedia, Grid, Link } from "@mui/material";
+import { useMediaQuery } from "../hooks/useMediaQuery";
+import StarBorderOutlinedIcon from "@mui/icons-material/StarBorderOutlined";
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+  memberProducts?: ProductWithImageAndUser[];
+  reviews?: unknown[];
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+  const below700 = useMediaQuery(700);
+  const below1200 = useMediaQuery(1200);
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && props.memberProducts && (
+        <Box
+          sx={{
+            maxWidth: "1260px",
+            width: "100%",
+            display: "column",
+            padding: "20x",
+          }}
+        >
+          {props.memberProducts && (
+            <Typography
+              sx={{ fontSize: "16px", color: "#171717", padding: "16px" }}
+            >
+              {props.memberProducts?.length} items
+            </Typography>
+          )}
+          <Grid container>
+            {props.memberProducts?.map((product, index) => (
+              <Grid
+                item
+                key={index}
+                xs={below700 ? 6 : 4}
+                md={below1200 ? 3 : 3}
+                lg={below1200 ? 3 : 12 / 5}
+                xl={12 / 5}
+              >
+                <Card
+                  elevation={0}
+                  sx={{
+                    width: "fit-content",
+                    height: "fit-content",
+                    padding: "8px",
+                  }}
+                >
+                  <Link href={`/products/${product.id}-${product.title}`}>
+                    <CardMedia
+                      alt={product.title}
+                      component="img"
+                      sx={{ width: "100%", height: "330px", cursor: "pointer" }}
+                      image={product.images[0].imageUrl}
+                    ></CardMedia>
+                  </Link>
+                  <CardContent>
+                    <Typography sx={{ fontSize: "14px", color: "#171717" }}>
+                      PLN {product.price}.00
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+      )}
+      {props.reviews && props.reviews.length === 0 ? (
+        <Box
+          sx={{
+            maxWidth: "1260px",
+            width: "100%",
+            display: "flex",
+            marginTop: "20px",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <StarBorderOutlinedIcon sx={{ height: "64px", width: "64px" }} />
+          <Typography sx={{ fontWeight: "600", fontSize: "24px" }}>
+            No reviews yet
+          </Typography>
+          <Typography
+            sx={{ fontWeight: "400", fontSize: "16px", color: "#4D4D4D" }}
+          >
+            Collecting reviews takes time, so check back soon
+          </Typography>
+        </Box>
+      ) : (
+        <Box sx={{ marginTop: "20px" }}>
+          {props.reviews?.map((review) => (
+            <Typography>{review?.description}</Typography>
+          ))}
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
+export default function BasicTabs({
+  memberProducts,
+}: {
+  memberProducts: ProductWithImageAndUser[];
+}) {
+  const [value, setValue] = useState(0);
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+        <Tabs
+          sx={{
+            "&& .Mui-selected": {
+              color: "black",
+            },
+          }}
+          TabIndicatorProps={{ style: { background: "#007782" } }}
+          value={value}
+          onChange={handleChange}
+          aria-label="basic tabs example"
+        >
+          <Tab
+            sx={{
+              textTransform: "none",
+            }}
+            label="Wardrobe"
+            {...a11yProps(0)}
+          />
+          <Tab
+            sx={{ textTransform: "none" }}
+            label="Reviews"
+            {...a11yProps(1)}
+          />
+        </Tabs>
+      </Box>
+      <CustomTabPanel
+        value={value}
+        index={0}
+        memberProducts={memberProducts}
+      ></CustomTabPanel>
+      <CustomTabPanel
+        reviews={
+          [
+            //   {
+            //     description: "very good",
+            //   },
+            //   {
+            //     description: "very bad user",
+            //   },
+          ]
+        }
+        value={value}
+        index={1}
+      ></CustomTabPanel>
+    </Box>
+  );
+}
diff --git a/client/ecommerce/src/components/conversation-details/ConversationDetailsNavbar.tsx b/client/ecommerce/src/components/conversation-details/ConversationDetailsNavbar.tsx
@@ -1,7 +1,4 @@
 import { Box, Button, Typography } from "@mui/material";
-import { Conversation } from "../../types/types";
-import { useUserContext } from "../../contexts/UserContext";
-import { getRecipientFromConversation } from "../../utils/getRecipientFromConversation";
 import ClearIcon from "@mui/icons-material/Clear";
 export const ConversationDetailsNavbar = ({
   setIsConversationDetailsOpen,

diff --git a/client/ecommerce/src/components/pages/Member.tsx b/client/ecommerce/src/components/pages/Member.tsx
@@ -4,19 +4,22 @@ import {
   CardContent,
   CardMedia,
   Grid,
+  Tab,
+  Tabs,
   Typography,
 } from "@mui/material";
 import { Link, useParams } from "wouter";
 import { ProfileInfo } from "../ProfileInfo";
 import { useAllProducts } from "../../hooks/useAllProducts";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import { useUserInfo } from "../../hooks/useUserInfo";
+import BasicTabs from "../TabPanel";
 
 export const Member = () => {
   const below700 = useMediaQuery(700);
   const below1200 = useMediaQuery(1200);
   const params = useParams();
-  
+
   const userId = params?.userId;
   const { data: user, isLoading: isUserLoading } = useUserInfo(
     parseInt(userId!)
@@ -61,17 +64,19 @@ export const Member = () => {
         sx={{
           maxWidth: "1260px",
           width: "100%",
-          display: "flex",
+          display: "column",
           padding: "20x",
         }}
       >
-        <Typography
+        <BasicTabs memberProducts={memberProducts} />
+
+        {/* <Typography
           sx={{ fontSize: "16px", color: "#171717", padding: "16px" }}
         >
           {memberProducts.length} items
-        </Typography>
+        </Typography> */}
       </Box>
-      <Box
+      {/* <Box
         sx={{
           maxWidth: "1260px",
           width: "100%",
@@ -114,7 +119,7 @@ export const Member = () => {
             </Grid>
           ))}
         </Grid>
-      </Box>
+      </Box> */}
     </Box>
   );
 };
diff --git a/client/ecommerce/src/components/pages/MenCatalog.tsx b/client/ecommerce/src/components/pages/MenCatalog.tsx
@@ -30,10 +30,7 @@ export const MenCatalog = () => {
   const [order, setOrder] = useState("");
   const { user } = useUserContext();
   const [category] = useState<string>("Men");
-  console.log("chosen brand");
-  console.log(brand);
-  console.log(user);
-  console.log(order);
+
   useEffect(() => {
     const params = new URLSearchParams();
     if (brand && order) {
@@ -52,7 +49,7 @@ export const MenCatalog = () => {
   const { data: products, isLoading: isProductsLoading } = useFilteredProducts(
     brand,
     order,
-    category,
+    category
   );
 
   if (isProductsLoading) {
@@ -61,7 +58,6 @@ export const MenCatalog = () => {
   if (!products) {
     return;
   }
-  console.log(products);
   const handlePriceSelected = (price: string) => {
     setOrder(price);
   };

diff --git a/client/ecommerce/src/components/pages/Product.tsx b/client/ecommerce/src/components/pages/Product.tsx
@@ -10,7 +10,6 @@ import { sendProductInfoToCheckout } from "../../api/axios";
 import { useStripe } from "@stripe/react-stripe-js";
 import { useMutation } from "@tanstack/react-query";
 import { useUserContext } from "../../contexts/UserContext";
-import { useEffect, useState } from "react";
 import { useDeleteProduct } from "../../hooks/useDeleteProduct";
 
 export const Product = () => {

diff --git a/server/ecommerce/src/products/products.service.ts b/server/ecommerce/src/products/products.service.ts
@@ -245,7 +245,6 @@ export class ProductsService {
 
   async sortByPrice(order: Order, products: Product[]) {
     const sortedProducts = [...products];
-    console.log(order);
 
     if (order === 'price_high_to_low') {
       sortedProducts.sort((a, b) => b.price - a.price);
@@ -261,7 +260,7 @@ export class ProductsService {
     return products.filter((product) => product.brand === brand);
   }
 
-  public isValidBrand(brand: any): boolean {
+  public isValidBrand(brand: any): brand is Brand {
     const validBrands: Brand[] = [
       'Zara',
       'Reserved',
@@ -274,9 +273,10 @@ export class ProductsService {
     return validBrands.includes(brand);
   }
 
-  public isValidOrder(order: string): boolean {
+  public isValidOrder(order: string): order is Order {
     console.log(order);
     const validOrders: Order[] = ['price_high_to_low', 'price_low_to_high'];
+
     return validOrders.includes(order as Order);
   }
 

diff --git a/server/ecommerce/src/utils/ZodExceptionFilter.ts b/server/ecommerce/src/utils/ZodExceptionFilter.ts
@@ -18,7 +18,5 @@ export class ZodExceptionFilter extends BaseExceptionFilter {
     });
   }
 
-  private isZodError = (err: any): err is ZodError => {
-    return err.name === 'ZodError';
-  };
+  private isZodError = (err: any): err is ZodError => err.name === 'ZodError';
 }