From ff4f9c164fc7ba7ee6e36172bc56cdc30960c42a Mon Sep 17 00:00:00 2001 From: Radek <104318242+radekm2000@users.noreply.github.com> Date: Tue, 16 Apr 2024 15:00:50 +0200 Subject: [PATCH] refactor product component --- client/ecommerce/src/App.tsx | 19 -- .../src/components/DisplayUserProducts.tsx | 13 +- .../ProductPage/DisplayUserInfo.tsx | 9 +- .../SpecificProduct/ProductMainContent.tsx | 64 +++++ .../SpecificProduct/ProductSidebar.tsx | 156 ++++++++++++ .../src/components/pages/AddProduct.tsx | 1 - .../src/components/pages/Followings.tsx | 3 +- .../src/components/pages/Product.tsx | 224 +++--------------- 8 files changed, 259 insertions(+), 230 deletions(-) create mode 100644 client/ecommerce/src/components/SpecificProduct/ProductMainContent.tsx create mode 100644 client/ecommerce/src/components/SpecificProduct/ProductSidebar.tsx diff --git a/client/ecommerce/src/App.tsx b/client/ecommerce/src/App.tsx index e252530..c1266d5 100644 --- a/client/ecommerce/src/App.tsx +++ b/client/ecommerce/src/App.tsx @@ -1,29 +1,10 @@ import { Toaster } from "react-hot-toast"; -import { Login } from "./components/pages/Login"; -import { Register } from "./components/pages/Register"; -import { Redirect, Route, Switch } from "wouter"; -import { MainPage } from "./components/pages/MainPage"; import { UserProvider } from "./contexts/UserContext"; -import { AddProduct } from "./components/pages/AddProduct"; -import { Product } from "./components/pages/Product"; -import { Member } from "./components/pages/Member"; -import { Followers } from "./components/pages/Followers"; -import { Followings } from "./components/pages/Followings"; -import { MenCatalog } from "./components/pages/MenCatalog"; -import { WomenCatalog } from "./components/pages/WomenCatalog"; -import { Inbox } from "./components/pages/Inbox"; -import SearchTextResults from "./components/pages/SearchTextResults"; -import { EditProfile } from "./components/pages/EditProfile"; import { ProductProvider } from "./contexts/ProductContext"; -import { PaymentSuccess } from "./components/pages/PaymentSuccess"; -import { PaymentCancel } from "./components/pages/PaymentCancel"; import { Elements } from "@stripe/react-stripe-js"; import { loadStripe } from "@stripe/stripe-js"; import { ChatNotificationsProvider } from "./contexts/ChatNotificationsContext"; import { ProductNotificationProvider } from "./contexts/ProductNotificationContext"; -import { Layout } from "./components/Layout"; -import { AdminDashboard } from "./components/pages/AdminDashboard"; -import { RoutePath } from "./config/constants/navigation"; import { Routes } from "./routes/Routes"; const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_KEY); diff --git a/client/ecommerce/src/components/DisplayUserProducts.tsx b/client/ecommerce/src/components/DisplayUserProducts.tsx index d7b3ae7..d63a72a 100644 --- a/client/ecommerce/src/components/DisplayUserProducts.tsx +++ b/client/ecommerce/src/components/DisplayUserProducts.tsx @@ -15,18 +15,10 @@ import { calculateGridWidth } from "../utils/calculateGridWidth"; export const DisplayUserProducts = ({ products, - setLocation, }: { products: ProductWithImageAndUser[]; - setLocation: ( - to: string, - options?: - | { - replace?: boolean | undefined; - } - | undefined - ) => void; }) => { + const [, setLocation] = useLocation(); const handleOnProductClick = (productId: number, productTitle: string) => { const url = `/products/${productId}-${productTitle}`; setLocation(url, { replace: true }); @@ -36,7 +28,6 @@ export const DisplayUserProducts = ({ const below1050 = useMediaQuery(1050); const below1200 = useMediaQuery(1200); - const below1600 = useMediaQuery(1600); return ( - PLN {product.price}.00 + USD {product.price}.00 diff --git a/client/ecommerce/src/components/ProductPage/DisplayUserInfo.tsx b/client/ecommerce/src/components/ProductPage/DisplayUserInfo.tsx index 57e5ee2..4a9b6b4 100644 --- a/client/ecommerce/src/components/ProductPage/DisplayUserInfo.tsx +++ b/client/ecommerce/src/components/ProductPage/DisplayUserInfo.tsx @@ -9,6 +9,7 @@ import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight"; import { Link, useLocation } from "wouter"; import { useUserInfo } from "../../hooks/useUserInfo"; import { calculateMedian } from "../../utils/calculateMedian"; +import { FallbackProgress } from "../../utils/FallbackProgress"; export const DisplayUserInfo = ({ userId, product, @@ -32,15 +33,13 @@ export const DisplayUserInfo = ({ setFollowButtonClicked(isFollowed(user)); }, [user]); const mutation = useFollowUser(user?.id); - if (isMeUserInfoLoading) { - return "isLoading..."; + if (isMeUserInfoLoading || isUserLoading) { + return ; } if (!product) { return; } - if (isUserLoading) { - return "userLoading..."; - } + if (!user) { return; } diff --git a/client/ecommerce/src/components/SpecificProduct/ProductMainContent.tsx b/client/ecommerce/src/components/SpecificProduct/ProductMainContent.tsx new file mode 100644 index 0000000..57205f6 --- /dev/null +++ b/client/ecommerce/src/components/SpecificProduct/ProductMainContent.tsx @@ -0,0 +1,64 @@ +import { Box, Typography } from "@mui/material"; +import { ProductWithImageAndUser } from "../../types/types"; +import { DisplayUserProducts } from "../DisplayUserProducts"; +import { useMediaQuery } from "../../hooks/useMediaQuery"; + +type ProductMainContentProps = { + product: ProductWithImageAndUser; + userProducts: ProductWithImageAndUser[] | undefined; +}; + +export const ProductMainContent = (props: ProductMainContentProps) => { + const below960 = useMediaQuery(960); + const below800 = useMediaQuery(800); + + const productsWithoutMainOne = props.userProducts?.filter( + (p) => p.id != props.product.id + ); + return ( + + + + + Member's items ({props.userProducts?.length}) + + + + + + + ); +}; diff --git a/client/ecommerce/src/components/SpecificProduct/ProductSidebar.tsx b/client/ecommerce/src/components/SpecificProduct/ProductSidebar.tsx new file mode 100644 index 0000000..b21b3fb --- /dev/null +++ b/client/ecommerce/src/components/SpecificProduct/ProductSidebar.tsx @@ -0,0 +1,156 @@ +import { Box, Button, Typography } from "@mui/material"; +import { DisplayUserInfo } from "../ProductPage/DisplayUserInfo"; +import { ProductWithImageAndUser } from "../../types/types"; + +type ProductProps = { + product: ProductWithImageAndUser; + below960: boolean; + productAuthorId: number; + userId: number; + handleCheckout: ( + e: React.MouseEvent + ) => Promise; + handleDeleteProduct: ( + e: React.MouseEvent + ) => Promise; +}; + +export const ProductSidebar = (props: ProductProps ) => { + return ( + + + + + USD {props.product.price}.00 + + + + + + BRAND + + + {props.product.brand} + + + + + CATEGORY + + + {props.product.category.toUpperCase()} + + + + + {props.product?.title} + + {props.product?.description} + + + + + {props.productAuthorId === props.userId ? ( + + ) : ( + + )} + + + + + ); +}; diff --git a/client/ecommerce/src/components/pages/AddProduct.tsx b/client/ecommerce/src/components/pages/AddProduct.tsx index 3912488..9bc98e7 100644 --- a/client/ecommerce/src/components/pages/AddProduct.tsx +++ b/client/ecommerce/src/components/pages/AddProduct.tsx @@ -18,7 +18,6 @@ import toast from "react-hot-toast"; import { Redirect } from "wouter"; import { useUserContext } from "../../contexts/UserContext"; import { useAddAdminNotification } from "../../hooks/useAddAdminNotification"; -import axios from "axios"; //important note -------------- // change button component prop to label if you want to upload files diff --git a/client/ecommerce/src/components/pages/Followings.tsx b/client/ecommerce/src/components/pages/Followings.tsx index 1b71535..e7eacb5 100644 --- a/client/ecommerce/src/components/pages/Followings.tsx +++ b/client/ecommerce/src/components/pages/Followings.tsx @@ -7,6 +7,7 @@ import { useEffect, useState } from "react"; import { UserWithFollows } from "../../types/types"; import { useUserContext } from "../../contexts/UserContext"; import { useFollowUser } from "../../utils/followUser"; +import { FallbackProgress } from "../../utils/FallbackProgress"; export const Followings = () => { const { user: meUser } = useUserContext(); @@ -42,7 +43,7 @@ export const Followings = () => { }; if (isUserLoading) { - return "isLoading..."; + return } if (!user) { return; diff --git a/client/ecommerce/src/components/pages/Product.tsx b/client/ecommerce/src/components/pages/Product.tsx index ade346e..21d2a7b 100644 --- a/client/ecommerce/src/components/pages/Product.tsx +++ b/client/ecommerce/src/components/pages/Product.tsx @@ -13,6 +13,26 @@ import { useUserContext } from "../../contexts/UserContext"; import { useDeleteProduct } from "../../hooks/useDeleteProduct"; import { useAddAdminNotification } from "../../hooks/useAddAdminNotification"; import { ProductSkeleton } from "../skeletons/ProductSkeleton"; +import { ProductSidebar } from "../SpecificProduct/ProductSidebar"; +import { ReactNode } from "react"; +import { ProductMainContent } from "../SpecificProduct/ProductMainContent"; + +const Container = ({ children }: { children: ReactNode }) => { + return ( + + {children} + + ); +}; export const Product = () => { const stripe = useStripe(); @@ -79,16 +99,7 @@ export const Product = () => { }); }; return ( - + { flexDirection: below960 ? "column" : "row", }} > - - - - - Member's items ({userProducts?.length}) - - - - - - - - - - - USD {product?.price}.00 - - - - - - BRAND - - - {product?.brand} - - - - - CATEGORY - - - {product?.category.toUpperCase()} - - - - - - {product?.title} - - - {product?.description} - - - - - {productAuthorId === user.id ? ( - - ) : ( - - )} - - - - + + { /> - + ); };