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

Style refactor client
builtbysuraj · Feb 6, 2024 · 0ef4aa7 · 0ef4aa7
2 parents 5e7c892 + 4ae9f3f
commit 0ef4aa7
Show file tree

Hide file tree

Showing 21 changed files with 184 additions and 39 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./public/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
       Online Shopping Site for Mobiles, Electronics, Furniture, Grocery,

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -23,6 +23,7 @@
     "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-image-gallery": "^1.3.0",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.0"

diff --git a/client/public/flipkart.png → client/src/assets/img/flipkart.png b/client/public/flipkart.png → client/src/assets/img/flipkart.png
diff --git a/client/public/flipkartPlus.png → client/src/assets/img/flipkartPlus.png b/client/public/flipkartPlus.png → client/src/assets/img/flipkartPlus.png
diff --git a/client/src/conf/index.ts b/client/src/conf/index.ts
@@ -1,3 +1,4 @@
 export const ENV = {
   API_BASE_URL: String(import.meta.env.VITE_API_BASE_URL),
+  SERVER_URL: String(import.meta.env.VITE_SERVER_URL),
 }
diff --git a/client/src/context/ServerStatusProvider.tsx b/client/src/context/ServerStatusProvider.tsx
@@ -0,0 +1,64 @@
+import axios from 'axios'
+import {
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+
+import { ENV } from '@/conf'
+
+type ServerStateType = {
+  status: boolean
+  message: string
+}
+
+export const ServerStatusContext = createContext<ServerStateType | null>(null)
+
+export default function ServerStatusProvider({ children }: PropsWithChildren) {
+  const [serverStatus, setServerStatus] = useState<ServerStateType>({
+    status: false,
+    message: '',
+  })
+
+  useEffect(() => {
+    const checkServerStatus = async () => {
+      try {
+        const { data } = await axios.get(`${ENV.SERVER_URL}/api/status`)
+
+        if (data.status) {
+          setServerStatus(data)
+        } else {
+          setServerStatus({ status: false, message: 'Server is not running' })
+        }
+      } catch (error) {
+        setServerStatus({ status: false, message: 'Wait for server to start' })
+      }
+    }
+
+    checkServerStatus()
+
+    const intervalId = setInterval(checkServerStatus, 10000)
+
+    // Clear interval on component unmount
+    return () => clearInterval(intervalId)
+  }, [])
+
+  return (
+    <ServerStatusContext.Provider value={serverStatus}>
+      {children}
+    </ServerStatusContext.Provider>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useServerStatus = () => {
+  const context = useContext(ServerStatusContext)
+  if (context === undefined) {
+    throw new Error(
+      'useServerStatus must be used within an ServerStatusProvider'
+    )
+  }
+  return context
+}
diff --git a/client/src/layouts/filters/SidebarFilters.tsx b/client/src/layouts/filters/SidebarFilters.tsx
@@ -1,12 +1,13 @@
 import { memo } from 'react'
-
-import CategoryFilter from './components/CategoryFilter'
-import PriceSliderFilter from './components/PriceSliderFilter'
-import RatingFilter from './components/RatingFilter'
-import SortProductsFilter from './components/SortProductsFilter'
-import AppliedFilters from './components/applied-filters/AppliedFilters'
-import BrandFilter from './components/brand-filter/BrandFilter'
-import ClearFilter from './components/clear-filter/ClearFilter'
+import {
+  AppliedFilters,
+  BrandFilter,
+  CategoryFilter,
+  ClearFilter,
+  PriceSliderFilter,
+  RatingFilter,
+  SortProductsFilter,
+} from './components'
 
 function SidebarFilters() {
   return (

diff --git a/client/src/layouts/filters/components/index.tsx b/client/src/layouts/filters/components/index.tsx
@@ -0,0 +1,17 @@
+import CategoryFilter from './CategoryFilter'
+import PriceSliderFilter from './PriceSliderFilter'
+import RatingFilter from './RatingFilter'
+import SortProductsFilter from './SortProductsFilter'
+import AppliedFilters from './applied-filters/AppliedFilters'
+import BrandFilter from './brand-filter/BrandFilter'
+import ClearFilter from './clear-filter/ClearFilter'
+
+export {
+  AppliedFilters,
+  BrandFilter,
+  CategoryFilter,
+  ClearFilter,
+  PriceSliderFilter,
+  RatingFilter,
+  SortProductsFilter,
+}
diff --git a/client/src/layouts/header/Header.tsx b/client/src/layouts/header/Header.tsx
@@ -7,8 +7,8 @@ import Input from '@/components/ui/Input'
 import useGetParams from '@/hooks/useGetParams'
 import useHandleDispatch from '@/hooks/useHandleDispatch'
 import { useAppSelector } from '@/state/store'
+import flipkart from '../../assets/img/flipkart.png'
 import styles from './Header.module.css'
-import flipkart from '/flipkart.png'
 
 function Header() {
   const cartData = useAppSelector((state) => state.cart)

diff --git a/client/src/layouts/index.ts → client/src/layouts/index.tsx b/client/src/layouts/index.ts → client/src/layouts/index.tsx
diff --git a/client/src/lazyComponents.ts b/client/src/lazyComponents.ts
@@ -10,15 +10,15 @@ const ProductListingPage = lazy(
 )
 const LoginPage = lazy(() => import('./pages/login/LoginPage'))
 const SignUpPage = lazy(() => import('./pages/signup/SignUpPage'))
-const PaymentSuccess = lazy(
-  () => import('./pages/payment-success/PaymentSuccess')
+const PaymentSuccessPage = lazy(
+  () => import('./pages/payment-success/PaymentSuccessPage')
 )
 
 export {
   CartPage,
   HomePage,
   LoginPage,
-  PaymentSuccess,
+  PaymentSuccessPage,
   ProductDetailsPage,
   ProductListingPage,
   SignUpPage,

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -1,4 +1,5 @@
 import { createRoot } from 'react-dom/client'
+import { Toaster } from 'react-hot-toast'
 import { Provider } from 'react-redux'
 import { RouterProvider } from 'react-router-dom'
 
@@ -13,6 +14,9 @@ import router from './routes'
 // Store
 import store from './state/store'
 
+// Context
+import ServerStatusProvider from './context/ServerStatusProvider'
+
 if (process.env.NODE_ENV === 'production') {
   console.log = () => {}
   console.warn = () => {}
@@ -21,6 +25,9 @@ if (process.env.NODE_ENV === 'production') {
 
 createRoot(document.querySelector('#root')!).render(
   <Provider store={store}>
-    <RouterProvider router={router} />
+    <ServerStatusProvider>
+      <Toaster />
+      <RouterProvider router={router} />
+    </ServerStatusProvider>
   </Provider>
 )
diff --git a/client/src/pages/cart/CartPage.tsx b/client/src/pages/cart/CartPage.tsx
@@ -1,27 +1,24 @@
 import { useAppSelector } from '@/state/store'
 import type { CartType } from '@/types'
 import styles from './CartPage.module.css'
-import CartItem from './components/cart-item/CartItem'
-import CartPriceDetails from './components/cart-price-details/CartPriceDetails'
-import EmptyCart from './components/empty-cart/EmptyCart'
-import PlaceOrder from './components/place-order/PlaceOrder'
+import { CartItem, CartPriceDetails, EmptyCart, PlaceOrder } from './components'
 
 export default function CartPage() {
   const cartData = useAppSelector((state) => state.cart)
 
-  if (!cartData?.length) {
-    return <EmptyCart />
-  }
+  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 className={styles.cartContainer}>
+        <div>
+          {cartData?.map((product: CartType) => (
+            <CartItem product={product} key={product.id} />
+          ))}
+          <PlaceOrder cartData={cartData} />
+        </div>
+        <CartPriceDetails cartData={cartData} />
       </div>
-      <CartPriceDetails cartData={cartData} />
-    </div>
+    </>
   )
 }
diff --git a/client/src/pages/cart/components/index.tsx b/client/src/pages/cart/components/index.tsx
@@ -0,0 +1,6 @@
+import CartItem from './cart-item/CartItem'
+import CartPriceDetails from './cart-price-details/CartPriceDetails'
+import EmptyCart from './empty-cart/EmptyCart'
+import PlaceOrder from './place-order/PlaceOrder'
+
+export { CartItem, CartPriceDetails, EmptyCart, PlaceOrder }
diff --git a/client/src/pages/cart/components/place-order/PlaceOrder.tsx b/client/src/pages/cart/components/place-order/PlaceOrder.tsx
@@ -1,16 +1,27 @@
 import axios from 'axios'
 
+import { useServerStatus } from '@/context/ServerStatusProvider'
 import { totalCartPrice } from '@/utils'
+import toast from 'react-hot-toast'
 import styles from './PlaceOrder.module.css'
 
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Razorpay: any
+  }
+}
+
 type Props = {
   cartData: []
 }
 
 export default function PlaceOrder({ cartData }: Props) {
+  const serverStatus = useServerStatus()
+
   const amount = totalCartPrice(cartData)
 
-  const handleCheckout = async () => {
+  const performCheckout = async () => {
     const {
       data: { key },
     } = await axios.get('http://www.localhost:5000/api/v1/get-key')
@@ -34,12 +45,25 @@ export default function PlaceOrder({ cartData }: Props) {
         address: 'Razorpay Corporate Office',
       },
     }
-    // @ts-expect-error Custom Razorpay script in index.html
+
     const razor = new window.Razorpay(options)
 
     razor.open()
   }
 
+  const handleCheckout = async () => {
+    if (!serverStatus?.status) {
+      // @ts-expect-error ...
+      return toast.error(serverStatus?.message)
+    }
+    if (serverStatus?.status)
+      toast.promise(performCheckout(), {
+        loading: 'Processing...',
+        success: <b>Done!</b>,
+        error: 'Server is not running',
+      })
+  }
+
   return (
     <div className={styles.placeOrder}>
       <button onClick={handleCheckout}>PLACE ORDER</button>

diff --git a/.../pages/payment-success/PaymentSuccess.tsx → ...es/payment-success/PaymentSuccessPage.tsx b/.../pages/payment-success/PaymentSuccess.tsx → ...es/payment-success/PaymentSuccessPage.tsx
@@ -3,7 +3,7 @@ import { useAppDispatch } from '@/state/store'
 import { useEffect } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
-export default function PaymentSuccess() {
+export default function PaymentSuccessPage() {
   const seachQuery = useSearchParams()[0]
   const referenceNum = seachQuery.get('reference')
 

diff --git a/client/src/pages/product-listing/components/product-card/ProductCard.tsx b/client/src/pages/product-listing/components/product-card/ProductCard.tsx
@@ -2,14 +2,14 @@ import Paper from '@mui/material/Paper'
 import Rating from '@mui/material/Rating'
 import { Link } from 'react-router-dom'
 
-import { ProductType } from '@/types'
+import type { ProductType } from '@/types'
 import styles from './ProductCard.module.css'
 
-type Props = {
+type ProductProps = {
   product: ProductType
 }
 
-export default function ProductCard({ product }: Props) {
+export default function ProductCard({ product }: ProductProps) {
   return (
     <div>
       <Link key={product.id} to={`/products/${product.id}`}>

diff --git a/client/src/routes.tsx b/client/src/routes.tsx
@@ -9,7 +9,7 @@ import {
   CartPage,
   HomePage,
   LoginPage,
-  PaymentSuccess,
+  PaymentSuccessPage,
   ProductDetailsPage,
   ProductListingPage,
   SignUpPage,
@@ -24,7 +24,7 @@ const router = createBrowserRouter(
       <Route path="/cart" element={<CartPage />} />
       <Route path="/login" element={<LoginPage />} />
       <Route path="/signup" element={<SignUpPage />} />
-      <Route path="/payment-success" element={<PaymentSuccess />} />
+      <Route path="/payment-success" element={<PaymentSuccessPage />} />
     </Route>
   )
 )

diff --git a/client/src/vite-env.d.ts b/client/src/vite-env.d.ts
@@ -3,5 +3,6 @@
 interface ImportMeta {
   env: {
     VITE_API_BASE_URL: string
+    VITE_SERVER_URL: string
   }
 }