feat: Add server status check context

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

client/src/context/ServerStatusProvider.tsx

@@ -0,0 +1,55 @@
+import { ENV } from '@/conf'
+import {
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+
+export const ServerStatusContext = createContext<string | null>(null)
+
+export default function ServerStatusProvider({ children }: PropsWithChildren) {
+  const [serverStatus, setServerStatus] = useState<string | null>('')
+
+  useEffect(() => {
+    const checkServerStatus = () => {
+      fetch(`${ENV.SERVER_URL}/api/status`)
+        .then((response) => response.json())
+        .then((data) => {
+          if (data.status) {
+            setServerStatus(data.message)
+          } else {
+            setServerStatus('Server is not running')
+          }
+        })
+        .catch(() => setServerStatus('Server is not running'))
+    }
+
+    // Call immediately
+    checkServerStatus()
+
+    // Then call every 5 seconds
+    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
+}

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 (

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

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,

client/src/main.tsx

@@ -13,6 +13,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 +24,8 @@ if (process.env.NODE_ENV === 'production') {
 
 createRoot(document.querySelector('#root')!).render(
   <Provider store={store}>
-    <RouterProvider router={router} />
+    <ServerStatusProvider>
+      <RouterProvider router={router} />
+    </ServerStatusProvider>
   </Provider>
 )

client/src/pages/cart/CartPage.tsx

@@ -1,27 +1,30 @@
+import { useServerStatus } from '@/context/ServerStatusProvider'
 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)
+  const serverStatus = useServerStatus()
+  console.log(serverStatus)
 
   if (!cartData?.length) {
     return <EmptyCart />
   }
 
   return (
-    <div className={styles.cartContainer}>
-      <div>
-        {cartData?.map((product: CartType) => (
-          <CartItem product={product} key={product.id} />
-        ))}
-        <PlaceOrder cartData={cartData} />
+    <>
+      {serverStatus === 'Server is not running' && <h4>{serverStatus}</h4>}
+      <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>
+    </>
   )
 }

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 }

client/src/pages/payment-success/PaymentSuccess.tsx → client/src/pages/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')
 

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

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

client/src/vite-env.d.ts

@@ -3,5 +3,6 @@
 interface ImportMeta {
   env: {
     VITE_API_BASE_URL: string
+    VITE_SERVER_URL: string
   }
 }

server/src/app.js

@@ -20,6 +20,10 @@ app.use(cookieParser())
 import { Payment } from './models/payment.model.js'
 import paymentRoute from './routes/payment.routes.js'
 
+app.get('/api/status', (req, res) => {
+  res.json({ status: true, message: 'Server is running' })
+})
+
 app.use('/api/v1', paymentRoute)
 
 app.get('/api/v1/get-key', (req, res) =>
@@ -33,10 +37,8 @@ app.get('/verify-payment', async (req, res) => {
     const payment = await Payment.findOne({ razorpay_payment_id: paymentId })
 
     if (payment) {
-      // console.log(payment)
       res.json({ success: true })
     } else {
-      // console.log(payment)
       res.json({ success: false })
     }
   } catch (error) {