kanban board updates RSC

Author: DavidK4leido5

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

@@ -0,0 +1,95 @@
+"use client";
+
+
+
+import { useMemo } from "react";
+
+
+
+import type { SimpleMemberData } from "@/app/home/projects/actions";
+
+import { filterBoardByQuery } from "@/lib/kanban/board-mappers";
+
+import {
+
+  useKanbanBoardMeta,
+
+  useKanbanColumns,
+
+} from "@/store/kanban-board/KanbanBoardProvider";
+
+
+
+import KanbanBoard from "./_components/KanbanBoard";
+
+
+
+type KanbanBoardPageClientProps = {
+
+  projectId: string;
+
+  query?: string;
+
+  members: SimpleMemberData[];
+
+  draftCount: number;
+
+};
+
+
+
+export default function KanbanBoardPageClient({
+
+  projectId,
+
+  query = "",
+
+  members,
+
+  draftCount,
+
+}: KanbanBoardPageClientProps) {
+
+  const columns = useKanbanColumns();
+
+  const { board } = useKanbanBoardMeta();
+
+
+
+  const boardData = useMemo(() => {
+
+    const withColumns = { ...board, kanban_columns: columns };
+
+    return filterBoardByQuery(withColumns, query);
+
+  }, [board, columns, query]);
+
+
+
+  return (
+
+    <div className="w-full">
+
+      <div className="flex flex-col gap-4 pt-4">
+
+        <KanbanBoard
+
+          projectId={projectId}
+
+          boardData={boardData}
+
+          members={members}
+
+          draftCount={draftCount}
+
+        />
+
+      </div>
+
+    </div>
+
+  );
+
+}
+
+

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

@@ -6,7 +6,7 @@ import { createClientClientComponent } from "@/utils/supabase/client";
 import { Task } from "@/types/home/codev";
 import { IconArchive } from "@/public/assets/svgs";
 
-import { useModal } from "@/hooks/use-modal";
+import { useKanbanModal } from "@/hooks/use-modal-kanban";
 import toast from "react-hot-toast";
 import ArchiveTask from "./ArchiveTask";
 
@@ -19,7 +19,7 @@ export default function ArchiveColumn({ projectId, boardId }: ArchiveColumnProps
   const [archivedTasks, setArchivedTasks] = useState<Task[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [supabase, setSupabase] = useState<any>(null);
-  const { onOpen } = useModal();
+  const { onOpen } = useKanbanModal();
 
   const searchParams = useSearchParams();
   const highlightTaskId = searchParams.get("taskId");

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

@@ -1,15 +1,15 @@
 "use client";
 
-import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
+import dynamic from "next/dynamic";
 import { useSearchParams } from "next/navigation";
 import Link from "next/link";
 import KanbanBoardsSearch from "@/app/home/kanban/_components/KanbanBoardsSearch";
-import { getMembers } from "@/app/home/projects/actions";
+import type { SimpleMemberData } from "@/app/home/projects/actions";
 import pathsConfig from "@/config/paths.config";
 import { ArrowRightIcon, IconArchive, IconSearch } from "@/public/assets/svgs";
 import { useUserStore } from "@/store/codev-store";
 import { KanbanBoardType, KanbanColumnType } from "@/types/home/codev";
-import { useQuery } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 import { Archive } from "lucide-react";
 
@@ -19,77 +19,87 @@ import ArchiveColumn from "./ArchiveColumn";
 import KanbanAddMembersButton from "./kanban_modals/KanbanAddMembersButton";
 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";
-import { getDraftCount } from "../actions";
+import { useMemberTaskFilter } from "@/hooks/use-member-task-filter";
+
+const KanbanBoardColumnContainer = dynamic(
+  () => import("./KanbanBoardColumnContainer"),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="overflow-x-auto overflow-y-hidden">
+        <ol className="flex min-h-[calc(100vh-12rem)] w-full flex-wrap gap-4 p-2 md:p-4">
+          {Array.from({ length: 4 }).map((_, index) => (
+            <li
+              key={index}
+              className="relative flex h-full w-[calc(100vw-2rem)] min-w-[280px] flex-col overflow-hidden rounded-xl border border-gray-200 bg-gray-50 shadow-sm dark:border-white/10 dark:bg-white/5 md:w-[350px] md:min-w-[350px] lg:w-[400px] lg:min-w-[400px]"
+            >
+              <div className="border-b border-gray-200 bg-gradient-to-r from-gray-100 to-gray-50 p-4 dark:border-white/20 dark:from-white/10 dark:to-white/15">
+                <div className="h-6 w-32 animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+              </div>
+              <div className="flex flex-col gap-3 p-3">
+                {Array.from({ length: 2 }).map((__, taskIndex) => (
+                  <div
+                    key={taskIndex}
+                    className="h-24 animate-pulse rounded-xl bg-gray-100 dark:bg-white/10"
+                  />
+                ))}
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+    ),
+  },
+);
 
 interface KanbanBoardProps {
   boardData: KanbanBoardType & { kanban_columns: KanbanColumnType[] };
   projectId: string;
+  members: SimpleMemberData[];
+  draftCount: number;
 }
 
-function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
+function KanbanBoard({
+  boardData,
+  projectId,
+  members: allMembers,
+  draftCount,
+}: KanbanBoardProps) {
   const user = useUserStore((state) => state.user);
 
   useKanbanTaskUrlModal(boardData);
 
+  const { activeFilter, handleFilterClick, loadingMemberId } =
+    useMemberTaskFilter();
+
   const canAddColumn = user?.role_id === 1 || user?.role_id === 5;
   const canAddMember = canAddColumn;
 
   const searchParams = useSearchParams();
   const viewParam = searchParams.get("view");
 
-  const [activeFilter, setActiveFilter] = useState<string | null>(null);
   const [showArchive, setShowArchive] = useState(viewParam === "archive");
-  const [draftCount, setDraftCount] = useState<number>(0);
-
-  const { data: allMembers = [], isLoading: isMembersLoading } = useQuery({
-    queryKey: ["members", projectId],
-    queryFn: async () => {
-      const result = await getMembers(projectId);
-      return result.data || [];
-    },
-    enabled: !!projectId,
-    staleTime: 5 * 60 * 1000,
-    refetchOnWindowFocus: false,
-  });
 
   const members = useMemo(
     () =>
-      allMembers.map((user) => ({
-        userId: user.id,
-        userName: `${user.first_name} ${user.last_name}`,
-        imageUrl: user.image_url,
-        isActive: activeFilter === user.id,
+      allMembers.map((member) => ({
+        userId: member.id,
+        userName: `${member.first_name} ${member.last_name}`,
+        imageUrl: member.image_url,
+        isActive: activeFilter === member.id,
+        isLoading: loadingMemberId === member.id,
       })),
-    [allMembers, activeFilter],
+    [allMembers, activeFilter, loadingMemberId],
   );
 
-  useEffect(() => {
-    if (user?.id && projectId) {
-      loadDraftCount();
-    }
-  }, [user?.id, projectId]);
-
-  const loadDraftCount = async () => {
-    if (!user?.id || !projectId) return;
-    const result = await getDraftCount(projectId, user.id);
-    if (result.success && result.count !== undefined) {
-      setDraftCount(result.count);
-    }
-  };
-
   useEffect(() => {
     if (viewParam === "archive") {
       setShowArchive(true);
     }
   }, [viewParam]);
 
-  const handleFilterClick = useCallback((userId: string) => {
-    setActiveFilter((prev) => (prev === userId ? null : userId));
-  }, []);
-
   if (!boardData) {
     return (
       <div className="text-center text-red-500">Board data not found.</div>
@@ -277,7 +287,6 @@ function KanbanBoard({ boardData, projectId }: KanbanBoardProps) {
                 {!showArchive ? (
                   <KanbanBoardColumnContainer
                     projectId={projectId}
-                    columns={boardData.kanban_columns || []}
                     activeFilter={activeFilter}
                   />
                 ) : (