Merge pull request #20 from builtbysuraj/style-refactor-client

Refactor client merge

.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/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

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>

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

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

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

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