From 73f5dfdd0c88a88696239291eb9b02193ce4aee1 Mon Sep 17 00:00:00 2001
From: builtbysuraj <surajgupta3553@gmail.com>
Date: Thu, 8 Feb 2024 03:16:41 +0530
Subject: [PATCH 1/2] refactor: Refactor cart page components, add _redirects

---
 .husky/pre-commit                             | 46 ++++++++++++++++++-
 client/public/_redirects                      |  1 +
 client/src/pages/cart/CartPage.tsx            | 20 ++++----
 .../CartItemCard.module.css}                  |  0
 .../CartItemCard.tsx}                         |  4 +-
 .../cart/components/cart-items/CartItems.tsx  | 15 ++++++
 .../cart-price-details/CartPriceDetails.tsx   |  8 ++--
 client/src/pages/cart/components/index.tsx    |  2 +-
 .../components/place-order/PlaceOrder.tsx     |  8 ++--
 .../product-listing/ProductListingPage.tsx    |  5 +-
 .../components/products/Products.tsx          | 13 +++---
 11 files changed, 87 insertions(+), 35 deletions(-)
 create mode 100644 client/public/_redirects
 rename client/src/pages/cart/components/{cart-item/CartItem.module.css => cart-item-card/CartItemCard.module.css} (100%)
 rename client/src/pages/cart/components/{cart-item/CartItem.tsx => cart-item-card/CartItemCard.tsx} (94%)
 create mode 100644 client/src/pages/cart/components/cart-items/CartItems.tsx

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 2312dc5..abb0d7a 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1,45 @@
-npx lint-staged
+#npx lint-staged
+
+
+echo '
+💅🛠️ Formatting and testing project before committing...
+'
+
+# Check tsconfig standards
+npm run check-types ||
+(
+    echo '
+    TypeScript Check Failed. ❌ 
+    Make the required changes listed above, add changes and try to commit again.
+    '
+    false;
+)
+
+
+# Check ESLint Standards
+npm run check-lint ||
+(
+    echo ' 
+    ESLint Check Failed. ❌
+    Make the required changes listed above, add changes and try to commit again.
+    '
+     false; 
+)
+
+
+# Check Prettier standards
+npm run check-format-client ||
+(
+    echo '
+    Prettier Check Failed. ❌
+    Run npm run format, add changes and try commit again.';
+    false;
+)
+
+npm run check-format-server ||
+(
+    echo '
+    Prettier Check Failed. ❌
+    Run npm run format, add changes and try commit again.';
+    false;
+)
\ No newline at end of file
diff --git a/client/public/_redirects b/client/public/_redirects
new file mode 100644
index 0000000..f824337
--- /dev/null
+++ b/client/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
\ No newline at end of file
diff --git a/client/src/pages/cart/CartPage.tsx b/client/src/pages/cart/CartPage.tsx
index 998531f..372b37c 100644
--- a/client/src/pages/cart/CartPage.tsx
+++ b/client/src/pages/cart/CartPage.tsx
@@ -1,7 +1,7 @@
 import { useAppSelector } from '@/state/store'
-import type { CartType } from '@/types'
 import styles from './CartPage.module.css'
-import { CartItem, CartPriceDetails, EmptyCart, PlaceOrder } from './components'
+import { CartPriceDetails, EmptyCart, PlaceOrder } from './components'
+import CartItems from './components/cart-items/CartItems'
 
 export default function CartPage() {
   const cartData = useAppSelector((state) => state.cart)
@@ -9,16 +9,12 @@ export default function CartPage() {
   if (!cartData?.length) return <EmptyCart />
 
   return (
-    <>
-      <div className={styles.cartContainer}>
-        <div>
-          {cartData?.map((product: CartType) => (
-            <CartItem product={product} key={product.id} />
-          ))}
-          <PlaceOrder cartData={cartData} />
-        </div>
-        <CartPriceDetails cartData={cartData} />
+    <div className={styles.cartContainer}>
+      <div>
+        <CartItems />
+        <PlaceOrder />
       </div>
-    </>
+      <CartPriceDetails />
+    </div>
   )
 }
diff --git a/client/src/pages/cart/components/cart-item/CartItem.module.css b/client/src/pages/cart/components/cart-item-card/CartItemCard.module.css
similarity index 100%
rename from client/src/pages/cart/components/cart-item/CartItem.module.css
rename to client/src/pages/cart/components/cart-item-card/CartItemCard.module.css
diff --git a/client/src/pages/cart/components/cart-item/CartItem.tsx b/client/src/pages/cart/components/cart-item-card/CartItemCard.tsx
similarity index 94%
rename from client/src/pages/cart/components/cart-item/CartItem.tsx
rename to client/src/pages/cart/components/cart-item-card/CartItemCard.tsx
index 88f3acf..6445b73 100644
--- a/client/src/pages/cart/components/cart-item/CartItem.tsx
+++ b/client/src/pages/cart/components/cart-item-card/CartItemCard.tsx
@@ -2,13 +2,13 @@ import useHandleDispatch from '@/hooks/useHandleDispatch'
 import type { CartType } from '@/types'
 import { cx } from '@/utils'
 import fa from '../../../../assets/img/fa.png'
-import styles from './CartItem.module.css'
+import styles from './CartItemCard.module.css'
 
 type CartItemProps = {
   product: CartType
 }
 
-export default function CartItem({ product }: CartItemProps) {
+export default function CartItemCard({ product }: CartItemProps) {
   const { handleRemoveFromCart, handleDecrementCartItem, handleAddToCart } =
     useHandleDispatch()
 
diff --git a/client/src/pages/cart/components/cart-items/CartItems.tsx b/client/src/pages/cart/components/cart-items/CartItems.tsx
new file mode 100644
index 0000000..9bd3cb6
--- /dev/null
+++ b/client/src/pages/cart/components/cart-items/CartItems.tsx
@@ -0,0 +1,15 @@
+import { useAppSelector } from '@/state/store'
+import type { CartType } from '@/types'
+import CartItemCard from '../cart-item-card/CartItemCard'
+
+export default function CartItems() {
+  const cartData = useAppSelector((state) => state.cart)
+
+  return (
+    <>
+      {cartData?.map((product: CartType) => (
+        <CartItemCard product={product} key={product.id} />
+      ))}
+    </>
+  )
+}
diff --git a/client/src/pages/cart/components/cart-price-details/CartPriceDetails.tsx b/client/src/pages/cart/components/cart-price-details/CartPriceDetails.tsx
index 0fbd8fe..fe17bac 100644
--- a/client/src/pages/cart/components/cart-price-details/CartPriceDetails.tsx
+++ b/client/src/pages/cart/components/cart-price-details/CartPriceDetails.tsx
@@ -1,15 +1,13 @@
 import { Divider } from '@mui/material'
 
-import type { CartType } from '@/types'
+import { useAppSelector } from '@/state/store'
 import { calculateTotalDiscount, cx, totalCartPrice } from '@/utils'
 import shield from '../../../../assets/img/shield.svg'
 import styles from './CartPriceDetails.module.css'
 
-type CartDataProps = {
-  cartData: CartType[]
-}
+export default function CartPriceDetails() {
+  const cartData = useAppSelector((state) => state.cart)
 
-export default function CartPriceDetails({ cartData }: CartDataProps) {
   return (
     <div>
       <div className={styles.cartPrice}>
diff --git a/client/src/pages/cart/components/index.tsx b/client/src/pages/cart/components/index.tsx
index ddc74c5..6932f36 100644
--- a/client/src/pages/cart/components/index.tsx
+++ b/client/src/pages/cart/components/index.tsx
@@ -1,4 +1,4 @@
-import CartItem from './cart-item/CartItem'
+import CartItem from './cart-items/CartItems'
 import CartPriceDetails from './cart-price-details/CartPriceDetails'
 import EmptyCart from './empty-cart/EmptyCart'
 import PlaceOrder from './place-order/PlaceOrder'
diff --git a/client/src/pages/cart/components/place-order/PlaceOrder.tsx b/client/src/pages/cart/components/place-order/PlaceOrder.tsx
index 8e1a225..d5e3263 100644
--- a/client/src/pages/cart/components/place-order/PlaceOrder.tsx
+++ b/client/src/pages/cart/components/place-order/PlaceOrder.tsx
@@ -1,6 +1,7 @@
 import axios from 'axios'
 
 import useServerStatus from '@/hooks/useServerStatus'
+import { useAppSelector } from '@/state/store'
 import { totalCartPrice } from '@/utils'
 import toast from 'react-hot-toast'
 import styles from './PlaceOrder.module.css'
@@ -12,11 +13,8 @@ declare global {
   }
 }
 
-type CartDataProps = {
-  cartData: []
-}
-
-export default function PlaceOrder({ cartData }: CartDataProps) {
+export default function PlaceOrder() {
+  const cartData = useAppSelector((state) => state.cart)
   const serverStatus = useServerStatus()
 
   const amount = totalCartPrice(cartData)
diff --git a/client/src/pages/product-listing/ProductListingPage.tsx b/client/src/pages/product-listing/ProductListingPage.tsx
index ecd5f4e..4dbf5e6 100644
--- a/client/src/pages/product-listing/ProductListingPage.tsx
+++ b/client/src/pages/product-listing/ProductListingPage.tsx
@@ -6,16 +6,17 @@ import { SidebarFilters } from '@/layouts'
 import Products from './components/products/Products'
 
 function ProductListingPage() {
-  const { filteredData, isLoading } = useFilter()
+  const { isLoading } = useFilter()
 
   if (isLoading) return <Loader />
+
   return (
     <div style={{ display: 'flex', margin: '0.5rem', gap: '10px' }}>
       <aside style={{ flex: 1 }}>
         <SidebarFilters />
       </aside>
       <div style={{ flex: 4.6 }}>
-        <Products filteredData={filteredData} />
+        <Products />
       </div>
     </div>
   )
diff --git a/client/src/pages/product-listing/components/products/Products.tsx b/client/src/pages/product-listing/components/products/Products.tsx
index 55a30a6..141ea76 100644
--- a/client/src/pages/product-listing/components/products/Products.tsx
+++ b/client/src/pages/product-listing/components/products/Products.tsx
@@ -1,16 +1,15 @@
+import useFilter from '@/hooks/useFilters'
 import type { ProductType } from '@/types'
 import ProductCard from '../product-card/ProductCard'
 
-type Props = {
-  filteredData: ProductType[]
-}
+export default function Products() {
+  const { filteredData } = useFilter()
 
-export default function Products({ filteredData }: Props) {
   return (
-    <div>
-      {filteredData?.map((product) => (
+    <>
+      {filteredData?.map((product: ProductType) => (
         <ProductCard product={product} key={product.id} />
       ))}
-    </div>
+    </>
   )
 }

From f3b93915e1033c85adfa43e647d9dfd0f4a90ac8 Mon Sep 17 00:00:00 2001
From: builtbysuraj <surajgupta3553@gmail.com>
Date: Sat, 10 Feb 2024 21:16:07 +0530
Subject: [PATCH 2/2] refactor: Remove RIG and display product details

---
 client/src/components/form/Form.tsx           |  2 +-
 client/src/layouts/header/Header.tsx          |  4 +---
 .../ProductDetailsPage.module.css             | 16 ++++++++++---
 .../product-details/ProductDetailsPage.tsx    | 24 +++++++++----------
 client/src/routes.tsx                         |  5 ++--
 5 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/client/src/components/form/Form.tsx b/client/src/components/form/Form.tsx
index 5f273ee..143989a 100644
--- a/client/src/components/form/Form.tsx
+++ b/client/src/components/form/Form.tsx
@@ -27,7 +27,7 @@ export default function From({
       </div>
       <div className={styles.right}>
         <form className={styles.form}>
-          <input type="text" placeholder="Enter Email/Username" />
+          <input type="text" placeholder="Username" />
           <input type="password" placeholder="Password" />
           <small className={styles.fromSmall}>
             By continuing, you agree to Flipkart's
diff --git a/client/src/layouts/header/Header.tsx b/client/src/layouts/header/Header.tsx
index 3206b79..928b9e4 100644
--- a/client/src/layouts/header/Header.tsx
+++ b/client/src/layouts/header/Header.tsx
@@ -41,9 +41,7 @@ function Header() {
             <button className={styles.headerLoginBtn}>Login</button>
           </Link>
         </div>
-        <div>
-          <Link to="/products">All products</Link>
-        </div>
+        <div>{/* <Link to="/products">All products</Link> */}</div>
         <div>
           <Link to="#">Become a Seller</Link>
         </div>
diff --git a/client/src/pages/product-details/ProductDetailsPage.module.css b/client/src/pages/product-details/ProductDetailsPage.module.css
index 5b8cc7d..de7c63c 100644
--- a/client/src/pages/product-details/ProductDetailsPage.module.css
+++ b/client/src/pages/product-details/ProductDetailsPage.module.css
@@ -7,9 +7,19 @@
   margin-top: 1rem;
 }
 
-.image-gallery-wrapper {
-  max-width: 40rem;
-  min-height: 30rem;
+.product-image {
+  height: 20rem;
+  width: 20rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.product-image img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
 }
 
 .go-to-cart-page,
diff --git a/client/src/pages/product-details/ProductDetailsPage.tsx b/client/src/pages/product-details/ProductDetailsPage.tsx
index 89706fe..436ab70 100644
--- a/client/src/pages/product-details/ProductDetailsPage.tsx
+++ b/client/src/pages/product-details/ProductDetailsPage.tsx
@@ -1,12 +1,11 @@
 import { Link, useParams } from 'react-router-dom'
-// @ts-expect-error - no type defination for RIG
-import ImageGallery from 'react-image-gallery'
 
 import Loader from '@/components/loader/Loader'
 import useHandleDispatch from '@/hooks/useHandleDispatch'
 import { useGetProductByIdQuery } from '@/state/services/productApi'
 import { useAppSelector } from '@/state/store'
-import { getOriginalAndThumbnailImg, isItemInCart } from '@/utils'
+import { isItemInCart } from '@/utils'
+import { Rating } from '@mui/material'
 import styles from './ProductDetailsPage.module.css'
 
 export default function ProductDetailsPage() {
@@ -17,19 +16,11 @@ export default function ProductDetailsPage() {
   const cartData = useAppSelector((state) => state.cart)
   if (isFetching || !data) return <Loader />
 
-  const Images = getOriginalAndThumbnailImg(data.images)
-
   return (
     <div className={styles.productDetailsContainer}>
       <div>
-        <div className={styles.imageGalleryWrapper}>
-          <ImageGallery
-            items={Images}
-            thumbnailPosition="left"
-            showPlayButton={false}
-            showFullscreenButton={false}
-            lazyLoad={true}
-          />
+        <div className={styles.productImage}>
+          <img src={data.thumbnail} alt={data.title} />
         </div>
         {isItemInCart(cartData, data) ? (
           <Link to="/cart">
@@ -48,6 +39,13 @@ export default function ProductDetailsPage() {
       </div>
       <div>
         <h3>{data?.title}</h3>
+        <p>{data.description}</p>
+        <p>{data.stock}</p>
+        <Rating name="read-only" value={data.rating} readOnly size="small" />
+        <p>{data.category}</p>
+        <p>{data.brand}</p>
+        <p>${data.price}</p>
+        <p>{data.discountPercentage}%</p>
       </div>
     </div>
   )
diff --git a/client/src/routes.tsx b/client/src/routes.tsx
index c646fa6..0ed667c 100644
--- a/client/src/routes.tsx
+++ b/client/src/routes.tsx
@@ -7,7 +7,6 @@ import {
 import App from './App'
 import {
   CartPage,
-  HomePage,
   LoginPage,
   PaymentSuccessPage,
   ProductDetailsPage,
@@ -18,8 +17,8 @@ import {
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route element={<App />}>
-      <Route path="/" element={<HomePage />} />
-      <Route path="/products" element={<ProductListingPage />} />
+      {/* <Route path="/" element={<HomePage />} /> */}
+      <Route path="/" element={<ProductListingPage />} />
       <Route path="/products/:id" element={<ProductDetailsPage />} />
       <Route path="/cart" element={<CartPage />} />
       <Route path="/login" element={<LoginPage />} />