sync kanban task modal with url param via hook

Author: JM-Flores

apps/codebility/app/home/kanban/[projectId]/[id]/_components/KanbanBoard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import KanbanBoardsSearch from "@/app/home/kanban/_components/KanbanBoardsSearch";
 import { getMembers } from "@/app/home/projects/actions";
@@ -18,6 +18,7 @@ import KanbanColumnAddButton from "./kanban_modals/KanbanColumnAddButton";
 import KanbanColumnAddModal from "./kanban_modals/KanbanColumnAddModal";
 import KanbanBoardColumnContainer from "./KanbanBoardColumnContainer";
 import UserTaskFilter from "./UserTaskFilter";
+import { useKanbanTaskUrlModal } from "@/hooks/useKanbanTaskUrlModal";
 
 interface KanbanBoardProps {
   boardData: KanbanBoardType & { kanban_columns: KanbanColumnType[] };
@@ -32,6 +33,9 @@ interface KanbanBoardProps {
 function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
   const user = useUserStore((state) => state.user);
 
+  // Sync the Kanban task modal with the URL ?taskId param
+  useKanbanTaskUrlModal(boardData);
+
   // User permissions - simple boolean checks following YAGNI principle
   const canAddColumn = user?.role_id === 1 || user?.role_id === 5;
   const canAddMember = canAddColumn;

apps/codebility/app/home/kanban/[projectId]/[id]/_components/kanban_modals/KanbanTaskViewEditModal.tsx

@@ -3,6 +3,7 @@
 import { ReactNode, memo, useCallback } from "react";
 import { useModal } from "@/hooks/use-modal";
 import { ExtendedTask } from "@/types/home/codev";
+import { usePathname, useRouter } from "next/navigation";
 
 interface Props {
   children: ReactNode;
@@ -15,9 +16,12 @@ function KanbanTaskViewEditModal({
   task,
   onComplete,
 }: Props) {
+  const router = useRouter();
+  const pathname = usePathname();
   const { onOpen } = useModal();
 
   const handleClick = useCallback(() => {
+    router.push(`${pathname}?taskId=${task.id}`, { scroll: false });
     onOpen("taskViewModal", task, onComplete);
   }, [onOpen, task, onComplete]);
 

apps/codebility/hooks/useKanbanTaskUrlModal.ts

@@ -1,14 +1,12 @@
 "use client";
 
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useModal } from "@/hooks/use-modal";
 import { KanbanBoardType, KanbanColumnType } from "@/types/home/codev";
 
 /**
  * Syncs the Kanban task modal with the URL ?taskId param.
- * - Opens the modal automatically if taskId exists.
- * - Cleans the URL when the modal closes.
  */
 export function useKanbanTaskUrlModal(
   boardData: KanbanBoardType & { kanban_columns: KanbanColumnType[] }
@@ -24,25 +22,31 @@ export function useKanbanTaskUrlModal(
     [boardData.kanban_columns]
   );
 
+  // Track whether we've already opened the modal from the URL
+  const openedFromUrlRef = useRef(false);
+
   useEffect(() => {
     const taskId = searchParams.get("taskId");
 
-    // Open modal if taskId exists and modal is not already open
-    if (taskId && !isOpen) {
+    // Open modal only once from URL
+    if (taskId && !openedFromUrlRef.current) {
       const task = tasks.find((t) => t.id === taskId);
       if (task) {
         onOpen("taskViewModal", task);
+        openedFromUrlRef.current = true;
       }
     }
 
-    // Close modal → clean URL
+    // Clear URL if modal closed
     if (!isOpen && searchParams.has("taskId")) {
       router.replace(pathname, { scroll: false });
+      openedFromUrlRef.current = false; // reset so next URL param works
     }
 
     // If modal type changes away from taskViewModal, remove param
     if (isOpen && type !== "taskViewModal" && searchParams.has("taskId")) {
       router.replace(pathname, { scroll: false });
+      openedFromUrlRef.current = false;
     }
   }, [isOpen, type, tasks, onOpen, pathname, searchParams, router]);
 }