get current project id and folder id

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx

@@ -2,13 +2,13 @@
 import { Button } from "@nextui-org/react";
 import { useRouter } from "next/navigation";
 
-export default function Page() {
+export default function Page({ params }: { params: { projectId: string, folderId: string } }) {
   const router = useRouter();
   return (
     <>
       <Button
         className="ms-5 mt-3"
-        onClick={() => router.push(`/projects/1/folders/1/cases/`)}
+        onClick={() => router.push(`/projects/${params.projectId}/folders/${params.folderId}/cases/`)}
       >
         Back
       </Button>

frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx

@@ -32,7 +32,7 @@ async function fetchCases(url) {
   }
 }
 
-export default function Page({ params }: { params: { folderId: string } }) {
+export default function Page({ params }: { params: { projectId: string, folderId: string } }) {
   const router = useRouter();
   const [cases, setCases] = useState([]);
   const url = `${apiServer}/cases?folderId=${params.folderId}`;
@@ -57,7 +57,7 @@ export default function Page({ params }: { params: { folderId: string } }) {
           key={index}
           onClick={() =>
             router.push(
-              `/projects/1/folders/${params.folderId}/cases/${testCase.id}`
+              `/projects/${params.projectId}/folders/${params.folderId}/cases/${testCase.id}`
             )
           }
         >

frontend/app/projects/[projectId]/sidebar.tsx

@@ -2,8 +2,10 @@
 import { Menu, MenuItem } from "@nextui-org/react";
 import { HomeIcon, PagesIcon, PlayIcon } from "@/components/icons";
 import { useRouter } from "next/navigation";
+import useGetCurrentIds from "@/utils/useGetCurrentIds";
 
 export default function Sidebar() {
+  const { projectId } = useGetCurrentIds();
   const router = useRouter();
   return (
     <div className="w-64 bg-white border-r-1">
@@ -11,21 +13,21 @@ export default function Sidebar() {
         <MenuItem
           startContent={<HomeIcon size={28} />}
           className="p-3"
-          onClick={() => router.push("/projects/1/home")}
+          onClick={() => router.push(`/projects/${projectId}/home`)}
         >
           Home
         </MenuItem>
         <MenuItem
           startContent={<PagesIcon size={28} />}
           className="p-3"
-          onClick={() => router.push("/projects/1/folders")}
+          onClick={() => router.push(`/projects/${projectId}/folders`)}
         >
           Test Cases
         </MenuItem>
         <MenuItem
           startContent={<PlayIcon size={28} />}
           className="p-3"
-          onClick={() => router.push("/projects/1/runs")}
+          onClick={() => router.push(`/projects/${projectId}/runs`)}
         >
           Test Runs
         </MenuItem>

frontend/utils/useGetCurrentIds.ts

@@ -0,0 +1,41 @@
+'use client'
+import { usePathname } from 'next/navigation'
+import { useState, useEffect } from "react";
+
+type ProjectFolderIds = {
+  projectId: number | null;
+  folderId: number | null;
+};
+
+/**
+ * Custom hook that extracts projectId and folderId from the current path.
+ * Example: For the path '/projects/1/folders/3/cases', projectId would be 1 and folderId would be 3.
+ */
+const useGetCurrentIds = (): ProjectFolderIds => {
+  const pathname = usePathname()
+  const [projectId, setProjectId] = useState<number | null>(null);
+  const [folderId, setFolderId] = useState<number | null>(null);
+
+  useEffect(() => {
+    const currentPath = pathname;
+    const pathSegments = currentPath.split("/").filter(Boolean);
+
+    const projectIdIndex = pathSegments.indexOf("projects") + 1;
+    const folderIdIndex = pathSegments.indexOf("folders") + 1;
+
+    const newProjectId =
+      projectIdIndex !== -1 ? parseInt(pathSegments[projectIdIndex], 10) : null;
+    const newFolderId =
+      folderIdIndex !== -1 ? parseInt(pathSegments[folderIdIndex], 10) : null;
+
+    setProjectId(newProjectId);
+    setFolderId(newFolderId);
+  }, [pathname]);
+
+  return {
+    projectId,
+    folderId,
+  };
+};
+
+export default useGetCurrentIds;