implemented-most redux-apis for GET

web-app/src/Components/FirstSec/FirstSec.css

@@ -55,6 +55,7 @@
   line-height: normal;
   letter-spacing: 0.8px;
   text-transform: uppercase;
+  cursor: pointer;
 }
 
 @media screen and (orientation: portrait) {

web-app/src/Components/FirstSec/FirstSec.jsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import './FirstSec.css'
+import { useNavigate } from 'react-router-dom'
 
 const FirstSec = () => {
+  const navigate = useNavigate();
   return (
     <div className='FirstSection'>
       <p className="heroP"><span className='Pcolours'>Boost</span> Your <span className='Pcolours'>Food Business</span> with Our Premier <span className='Pcolours'>Vendor Platform</span></p>
       <p className="heroP2">Join our network of successful vendors and reach a wider audience.</p>
-      <button className='firstbtn'>SELL WITH EATHUB</button>
+      <button onClick={() => {navigate('/signup')}} className='firstbtn'>SELL WITH EATHUB</button>
     </div>
   )
 }

web-app/src/Components/Table/OrderTable.jsx

@@ -2,55 +2,27 @@ import React, { useState, useEffect } from "react";
 import authService from "../../services/auth/authService";
 import "./orderTable.css";
 import foodImg from "../../Assets/images/foodImg.png";
+import { useGetOrderedMealQuery } from "../../model/auth/authServices";
 
 const OrderTable = () => {
-  const [loading, setLoading] = useState(true);
   const [tableData, setTableData] = useState([]);
 
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const response = await authService.getOrderedMeals();
-        if (response) {
-          setTableData(response.data.results);
-          console.log(response.data.results);
-        } else {
-          setTableData([]);
-        }
-        setLoading(false);
-        // console.log(response);
-      } catch (err) {
-        console.log(err);
-      }
-    }
-
-    fetchData();
-  }, []);
+  // using RTK to handle api state
+  const { data } = useGetOrderedMealQuery();
 
-  // when data is loading
-  if (loading) {
-    return <>Loading Orders</>;
-  }
-
-  // in the case of empty data
-  if (Object.keys(tableData).length === 0) {
-    return <div className="order-contain">
-      <h5>Empty Orders!</h5>
-      <table>
-        <tbody>
-          <tr></tr>
-        </tbody>
-      </table>
-    </div>;
-  }
+  useEffect(() => {
+    if (data) {
+      setTableData(data.results || []); // Use data.results if it matches your API response structure
+    } 
+  }, [data]);
 
   return (
     <div className="order-container">
       <h5>Recent Orders</h5>
       <table>
         <tbody>
-          {tableData.map((order) => {
-            return (
+          {tableData && tableData.length > 0 ? (
+            tableData.map((order) => (
               <tr key={order.id}>
                 <td>
                   <span className="food">
@@ -68,8 +40,12 @@ const OrderTable = () => {
                   {order.status}
                 </td>
               </tr>
-            );
-          })}
+            ))
+          ) : (
+            <tr>
+              <td colSpan="4">No recent orders available.</td>
+            </tr>
+          )}
         </tbody>
       </table>
     </div>

web-app/src/Components/Table/orderTable.css

@@ -1,8 +1,13 @@
 .order-container{
+    width: 100%;
+    max-inline-size: 70vw;
     padding: 1rem;
+    margin-top: 2rem;
     display: flex;
     flex-direction: column;
     color: rgba(0, 0, 0, 0.713) ;
+    box-shadow: 2px 4px 10px 1px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
 }
 
 .order-container h5{

web-app/src/Pages/dashboard/pages/menu/EmptyMenu.jsx

@@ -15,7 +15,7 @@ const EmptyMenu = () => {
       };
   return (
     <div className="menu-section">
-      <span className="empty-menu">
+      <span className="empty-menu" style={{marginTop: 50}}>
       <Lottie options={defaultOptions} height={400} width={400} />
         <h1>Your Menu List is currently Empty!</h1>
         <button className="menu-btn">

web-app/src/Pages/dashboard/pages/menu/Menu.jsx

@@ -6,49 +6,38 @@ import authService from "../../../../services/auth/authService";
 import "./menu.css";
 import Preloader from "../../../../layouts/Preloader/Preloader";
 import EmptyMenu from "./EmptyMenu";
+import { useGetMenuListQuery, useGetMenuQuery } from "../../../../model/auth/authServices";
 
 
 const Menu = () => {
   const [meals, setMeals] = useState([]);
   const [loading, setLoading] = useState(false);
 
+  // using RTK to handle Api Request
+  const { data } = useGetMenuListQuery("menuList", {refetchOnFocus: true});
 
   const handleDelete = async(id) => {
     setLoading(true);
     try{
       await authService.deleteMeal(id);
-      await fetchData();
+      await authService.getMealList();
     }catch (err) {
       console.error(err);
     }finally {
       setLoading(false);
     }
   }
 
-  const fetchData = async () => {
-    setLoading(true);
-    try {
-      const response = await authService.getMealList();
-      setMeals(response.data.results);
-    } catch (err) {
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
   useEffect(() => {
-    fetchData();
-  }, []);
+    if(data) {
+      setMeals(data.results)
+    }
+  }, [data]);
 
   if(loading){
     return <Preloader />;
   }
 
-  if (meals.length === 0) {
-    return <EmptyMenu />;
-  }
-
   return (
   // to improve performance, abstract table below into smaller component
     <div className="menu-section">
@@ -74,7 +63,8 @@ const Menu = () => {
             </tr>
           </thead>
           <tbody>
-            {meals.map((meal) => {
+            {meals && meals.length > 0 ? 
+            (meals.map((meal) => {
               return (
                 <tr key={meal.id}>
                   <td>
@@ -99,7 +89,8 @@ const Menu = () => {
                   </td>
                 </tr>
               );
-            })}
+            })
+            ): (<EmptyMenu />)}
           </tbody>
         </table>
       </div>

web-app/src/Pages/dashboard/pages/order/Order.jsx

@@ -5,12 +5,16 @@ import "./order.css";
 import foodImg from "../../../../Assets/images/foodImg.png";
 import Preloader from "../../../../layouts/Preloader/Preloader";
 import EmptyOrder from "./EmptyOrder";
+import { useGetOrderedMealQuery } from "../../../../model/auth/authServices";
 
 const Order = () => {
   const [loading, setLoading] = useState(true);
   const [tableData, setTableData] = useState([]);
   const [status, setStatus] = useState("");
 
+    // using RTK to handle api state
+    const { data } = useGetOrderedMealQuery("userOrders", {refetchOnFocus: true});
+
 
   /* To decide whether to accept or decline
  orders coming through for vendors */
@@ -34,34 +38,10 @@ const Order = () => {
   };
 
   useEffect(() => {
-    async function fetchData() {
-      try {
-        const response = await authService.getOrderedMeals();
-        if (response) {
-          setTableData(response.data.results);
-          console.log(response.data.results);
-        } else {
-          setTableData([]);
-        }
-        setLoading(false);
-        // console.log(response);
-      } catch (err) {
-        console.log(err);
-      }
-    }
-
-    fetchData();
-  }, []);
-
-  // when data is loading
-  if (loading) {
-    return <Preloader />;
-  }
-
-  // in the case of empty data
-  if (Object.keys(tableData).length === 0) {
-    return <EmptyOrder />;
-  }
+    if (data) {
+      setTableData(data.results || []); // Use data.results if it matches your API response structure
+    } 
+  }, [data]);
 
   return (
     <div className="order">
@@ -87,7 +67,8 @@ const Order = () => {
             </tr>
           </thead>
           <tbody>
-            {tableData.map((order, index) => {
+            {tableData && tableData.length > 0 ? (
+              tableData.map((order, index) => {
               return (
                 // to improve performance, abstract table below into smaller component
                 <tr key={order.id}>
@@ -128,8 +109,10 @@ const Order = () => {
                     </div>
                   </td>
                 </tr>
-              );
-            })}
+              )
+            })): (
+              <EmptyOrder />
+            )}
           </tbody>
         </table>
       </div>

web-app/src/Pages/dashboard/pages/order/order.css

@@ -2,10 +2,10 @@
 
 .menu-section{
   display: flex;
-  margin-left: 300px;
+  /* margin-left: 300px; */
   justify-content: center;
   align-items: center;
-  width: 100vw;
+  width: 80vw;
 }
 
 .order-head {

web-app/src/Pages/dashboard/pages/overview/Overview.jsx

@@ -8,23 +8,16 @@ import Preloader from "../../../../layouts/Preloader/Preloader";
 import "./overview.css";
 
 const Overview = () => {
-  const [loading, setLoading] = useState(true);
   // for performance in re-rendering
   const WidgetMemo = React.memo(Widget);
   const ProgressBarMemo = React.memo(ProgressBar);
   const DashChartsMemo = React.memo(DashCharts);
   const LocationMemo = React.memo(Location);
   const OrderTableMemo = React.memo(OrderTable);
 
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000); // Set a delay time for the preloader to show before hiding it
-  }, []);
 
   return (
     <div className="overview-section">
-      {loading && <Preloader />}
       <div className="overview-dropdown">
         <select>
           <option value="msg">Overview: All-time</option>
@@ -37,7 +30,7 @@ const Overview = () => {
       </div>
       <div className="charts">
         <DashChartsMemo />
-        <LocationMemo />
+        {/* <LocationMemo /> */}
       </div>
       <div className="orders">
         <OrderTableMemo />

web-app/src/Pages/dashboard/pages/overview/overview.css

@@ -31,12 +31,6 @@
     width: 70vw;
 }
 
-.orders{
-    width: 100%;
-    margin-top: 2rem;
-    box-shadow: 2px 4px 10px 1px rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
-}
 
 @media  (max-width: 1080px) {
     .overview-section {

web-app/src/Pages/dashboard/pages/profile/Profile.jsx

@@ -13,6 +13,7 @@ const Profile = () => {
     image: "",
     kitchenDescription: "",
   });
+
   // New inputs
   const [kitchenDescription, setKitchenDescription] = useState("");
   const maxLength = 450;
@@ -34,7 +35,7 @@ const Profile = () => {
     setIsImageUploaded(true);
     setShowImage(true);
     setFile(event.target.files[0]);
-    console.log(event.target.files[0]);
+    // console.log(event.target.files[0]);
   };
 
   // Getting Pre-existing data
@@ -55,6 +56,7 @@ const Profile = () => {
       }
     }
     fetchData();
+    // console.log(glbData);
   }, [glbData]);
 
   if (loading) {

web-app/src/helper/requireAuth.js

@@ -12,17 +12,14 @@ const ProtectedRoute = () => {
   const [chartData, setChartData] = useState({});
   const navigate = useNavigate();
 
-  const { data, isFetching } = useGetVendorProfileQuery("userDetails", {refetchOnReconnect: true});
-
-  console.log(data); // user object
-
+  const { data } = useGetVendorProfileQuery("userDetails", {refetchOnReconnect: true});
   // Checks if the Vendor has Logged in from token stored in LocalStorage
   let userLoggedIn = authService.getVendorStatus();
 
   useEffect(() => {
+    setChartData(data);
     // always change back to !userLoggedIn
     if (!userLoggedIn) {
-      setChartData(data);
       return navigate("/login");
     }
   }, []);