refactor: Refactor cart page components, add _redirects

.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;
+)

client/public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

client/src/pages/cart/CartPage.tsx

@@ -1,24 +1,20 @@
 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)
 
   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>
   )
 }

client/src/pages/cart/components/cart-item/CartItem.tsx → 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()
 

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

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}>

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'

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)

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>
   )

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