feat!(frontend): BUG TO FIX - added in handleClick for projects and t…

…his sends you to a project map with project/workspace_id/project_name - the map does not load but the url routing works fine. [2024-11-17]

BREAKING CHANGE: BUG TO FIX - added in handleClick for projects and this sends you to a project map with project/workspace_id/project_name - the map does not load but the url routing works fine.

gridwalk-ui/src/app/workspace/[workspaceId]/workspaceProjects.tsx

@@ -4,7 +4,7 @@ import { Plus } from "lucide-react";
 import { CreateProjectModal } from "./projectModal";
 import { useWorkspaces } from "../workspaceContext";
 import { createProject } from "./actions";
-
+import { useRouter } from "next/navigation";
 interface WorkspaceProjectsClientProps {
   workspaceId: string;
   initialProjects: string[];
@@ -14,10 +14,10 @@ export default function WorkspaceProjectsClient({
   workspaceId,
   initialProjects,
 }: WorkspaceProjectsClientProps) {
+  const router = useRouter();
   const { workspaces } = useWorkspaces();
   const [projects, setProjects] = useState(initialProjects);
   const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
-
   const currentWorkspace = workspaces.find((w) => w.id === workspaceId);
 
   const handleCreateProject = async (name: string) => {
@@ -26,7 +26,6 @@ export default function WorkspaceProjectsClient({
         name: name.trim(),
         workspace_id: workspaceId,
       });
-
       setProjects((prevProjects) => [...prevProjects, newProject.name]);
       setIsProjectDialogOpen(false);
     } catch (error: unknown) {
@@ -37,6 +36,13 @@ export default function WorkspaceProjectsClient({
     }
   };
 
+  const handleProjectClick = (projectName: string) => {
+    const safeProjectName = encodeURIComponent(
+      projectName.toLowerCase().replace(/\s+/g, "-"),
+    );
+    router.push(`/project/${workspaceId}/${safeProjectName}`);
+  };
+
   return (
     <div className="w-full min-h-screen bg-gray-50">
       <div className="p-4 sm:p-6">
@@ -67,7 +73,8 @@ export default function WorkspaceProjectsClient({
               {projects.map((project, index) => (
                 <div
                   key={index}
-                  className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
+                  onClick={() => handleProjectClick(project)}
+                  className="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer" // Added cursor-pointer
                 >
                   <h3 className="font-medium text-gray-900">{project}</h3>
                 </div>