finished routes

Author: codermehraj

client/components/dashboard-componenets/mainContent/stsManagerContents/RoutesPanel.tsx

@@ -9,9 +9,11 @@ import { getCookie } from "@/lib/cookieFunctions";
 import { AddNewAreaModal } from "@/components/modals/stsControl/addNewArea";
 import { AddNewRouteModal } from "@/components/modals/stsControl/AddNewRoute";
 import useGetAllArea from "@/hooks/dataQuery/useGetAllArea";
+import useGetAllRoutes from "@/hooks/dataQuery/useGetAllRoutes";
 
 export default function RoutesPanel() {
   const { areaData, fetchAllArea } = useGetAllArea();
+  const { routesData, fetchAllRoutes } = useGetAllRoutes();
   const areas = [
     "akhalia",
     "akhalia",
@@ -85,9 +87,11 @@ export default function RoutesPanel() {
 
   useEffect(() => {
     fetchAllArea();
+    fetchAllRoutes();    
   }, []);
 
   useEffect(() => {}, [areaData]);
+  useEffect(() => {}, [routesData]);
 
   return (
     <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6  max-h-[calc(100vh-60px)] overflow-scroll">
@@ -131,10 +135,10 @@ export default function RoutesPanel() {
               <h1 className="pl-6 pt-6 text-2xl font-bold">ROUTES LIST</h1>
               <br />
               <div className="flex flex-wrap gap-4 mt-4 ml-4">
-                {routes.map((route, index) => (
+                {routesData.map((route, index) => (
                   <div className="bg-slate-100 px-4 py-2 rounded-lg shadow-md w-full md:w-auto">
                     <p className="text-2xl font-bold text-blue-800">{route.name}</p>
-                    <p className="text-lg text-slate-500 font-semibold">{route.area}</p>
+                    <p className="text-lg text-slate-500 font-semibold">{route.areaName}</p>
                     <p className="text-md">{route.description}</p>
                   </div>
                 ))}

client/components/modals/stsControl/AddNewRoute.tsx

@@ -35,8 +35,8 @@ export const AddNewRouteModal: React.FC<DialogWrapperProps> = ({ children }) =>
   const [RouteName, setRouteName] = useState("");
   const [RouteDetails, setRouteDetails] = useState("");
   const { areaData, fetchAllArea } = useGetAllArea();
-  const handleSaveChanges = async () => {
-    axios.post(apiRoutes.route.create, { name:RouteName, stsId:getCookie(stsId), description: RouteDetails }, {
+  const handleSaveChanges = async () => {    
+    axios.post(apiRoutes.route.create, { name:RouteName, stsId:getCookie(stsId), description: RouteDetails, areaId: areaId }, {
       headers: {
         Authorization: `Bearer ${getCookie("token")}`,
         },
@@ -66,9 +66,9 @@ export const AddNewRouteModal: React.FC<DialogWrapperProps> = ({ children }) =>
       </DialogTrigger>
       <DialogContent className="w-[825px]">
         <DialogHeader>
-          <DialogTitle>Add New Area</DialogTitle>
+          <DialogTitle>Add New Route</DialogTitle>
           <DialogDescription>
-            Add new area here. Click save when you're done.
+            Add new route here. Click save when you're done.
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
@@ -78,7 +78,7 @@ export const AddNewRouteModal: React.FC<DialogWrapperProps> = ({ children }) =>
             </Label>
             <Input
               id="vehicleNumber"
-              placeholder="Area Name"
+              placeholder="Enter Route Name"
               value={RouteName}
               onChange={(e) => setRouteName(e.target.value)}
               className="col-span-3"
@@ -87,7 +87,7 @@ export const AddNewRouteModal: React.FC<DialogWrapperProps> = ({ children }) =>
         </div>
         <div className="grid grid-cols-4 items-center gap-4">
               <Label htmlFor="role" className="text-right">
-                Role
+                Select Area
               </Label>
               <Select
                 value={areaId}
@@ -96,7 +96,7 @@ export const AddNewRouteModal: React.FC<DialogWrapperProps> = ({ children }) =>
                 <SelectTrigger className="col-span-3">
                   <SelectValue
                     id="role"
-                    placeholder="Select role for the user"
+                    placeholder="Select area of the route"
                   />
                 </SelectTrigger>
                 <SelectContent>
@@ -118,7 +118,7 @@ export const AddNewRouteModal: React.FC<DialogWrapperProps> = ({ children }) =>
             </Label>
             <Input
               id="vehicleNumber"
-              placeholder="Area Name"
+              placeholder="Enter Route Details"
               value={RouteDetails}
               onChange={(e) => setRouteDetails(e.target.value)}
               className="col-span-3"

client/hooks/dataQuery/useGetAllRoutes.tsx

@@ -0,0 +1,57 @@
+"use client";
+import { apiRoutes } from "@/data/apiRoutes";
+import { jwtToken } from "@/data/cookieNames";
+import {
+  Contractor,
+  admin,
+  landfillManager,
+  stsManager,
+  unassigned,
+} from "@/data/roles";
+import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
+import axios from "axios";
+import { useState, useEffect, use } from "react";
+
+export default function useGetAllRoutes() {
+  const [routesData, setRoutesData] = useState<
+    {
+      id: string;
+      name: string;
+      description: string;
+      areaId: string;
+      stsId: string;
+      areaName: string;
+    }[]
+  >([]);
+
+  async function fetchAllRoutes() {
+    try {
+      const res = await axios.get(apiRoutes.route.getAll, {
+        headers: {
+          Authorization: `Bearer ${await getCookie(jwtToken)}`,
+        },
+      });
+      const routesList = res.data.map((route: any) => {
+        return route?.stsId === getCookie("stsId") ? {
+            name: route?.name || "No Name",
+            areaName: route?.area?.name || "No Area",
+            description: route?.description || "No Description",
+        } : null;
+      });
+      await setRoutesData(routesList);
+      console.log(routesList);
+    } catch (error: any) {
+      message.error(
+        error?.response?.data?.message +
+          "Error fetching routes data... Are you authorized?"
+      );
+    }
+  }
+
+  useEffect(() => {
+    fetchAllRoutes();
+  }, []);
+
+  return { fetchAllRoutes, routesData };
+}

server/src/controllers/routeArea.ts

@@ -4,20 +4,27 @@ import { Request, Response } from "express";
 const prisma = new PrismaClient();
 
 const addRoute = async (req: Request, res: Response) => {
-  const { name, description, stsId } = req.body;
+  const { name, description, stsId, areaId } = req.body;
   const newRoute = await prisma.route.create({
     data: {
       name,
       description,
       stsId,
+      areaId
     },
   });
 
   res.status(201).json(newRoute);
 };
 
 const getAllRoutes = async (req: Request, res: Response) => {
-  const routes = await prisma.route.findMany();
+  const routes = await prisma.route.findMany(
+    {
+      include: {
+        area: true,
+      },
+    }
+  );
   res.status(200).json(routes);
 };