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] 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>
+    </>
   )
 }