@locusai/web 0.1.7 → 0.2.2

package/src/hooks/useAuthenticatedUser.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import { type User } from "@locusai/shared";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useAuth } from "@/context/AuthContext";
+import { isCloudMode } from "@/utils/env.utils";
+
+/**
+ * Hook for pages that require an authenticated user.
+ * Returns a guaranteed non-null User object.
+ * Redirects to login if user is not authenticated.
+ *
+ * Usage: Only use this in pages/components that are already protected
+ * by authentication middleware (wrapped with auth guards).
+ *
+ * @returns {User} The authenticated user (guaranteed non-null)
+ * @throws Redirects to login if not authenticated
+ */
+export function useAuthenticatedUser(): User {
+  const { user, isLoading, isAuthenticated } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    // Redirect to login if not authenticated (only in cloud mode)
+    if (!isLoading && !isAuthenticated && isCloudMode()) {
+      router.push("/login");
+    }
+  }, [isLoading, isAuthenticated, router]);
+
+  // Type assertion is safe here because:
+  // 1. This hook is only used in authenticated contexts
+  // 2. If user is null, we redirect to login above
+  // 3. The caller is responsible for ensuring this component is protected
+  return user as User;
+}

package/src/hooks/useAuthenticatedUserWithOrg.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { type User } from "@locusai/shared";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useAuth } from "@/context/AuthContext";
+import { isCloudMode } from "@/utils/env.utils";
+
+/**
+ * Hook for pages that require an authenticated user WITH an organization.
+ * Returns a guaranteed non-null User object with a non-null orgId.
+ * Redirects to login if user is not authenticated or has no organization.
+ *
+ * Usage: Only use this in pages/components that are already protected
+ * by authentication middleware and require organization context.
+ *
+ * @returns {User} The authenticated user with orgId (both guaranteed non-null)
+ * @throws Redirects to login if not authenticated or no organization
+ */
+export function useAuthenticatedUserWithOrg(): User & { orgId: string } {
+  const { user, isLoading, isAuthenticated } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    // Redirect to login if not authenticated (only in cloud mode)
+    if (!isLoading && !isAuthenticated && isCloudMode()) {
+      router.push("/login");
+    }
+
+    // Redirect to onboarding if no organization
+    if (!isLoading && isAuthenticated && user && !user.orgId && isCloudMode()) {
+      router.push("/onboarding/workspace");
+    }
+  }, [isLoading, isAuthenticated, user, router]);
+
+  // Type assertion is safe here because:
+  // 1. This hook is only used in authenticated contexts with org
+  // 2. If user is null or has no orgId, we redirect above
+  // 3. The caller is responsible for ensuring this component is protected
+  return user as User & { orgId: string };
+}

package/src/hooks/useBacklog.ts

@@ -0,0 +1,303 @@
+"use client";
+
+import {
+  type DragEndEvent,
+  type DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { type Sprint, SprintStatus, type Task } from "@locusai/shared";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { useSprintsQuery, useTasksQuery } from "@/hooks";
+import { useWorkspaceId } from "@/hooks/useWorkspaceId";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+
+export function useBacklog() {
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const {
+    data: tasks = [],
+    isLoading: tasksLoading,
+    refetch: refetchTasks,
+  } = useTasksQuery();
+  const {
+    data: sprints = [],
+    isLoading: sprintsLoading,
+    refetch: refetchSprints,
+  } = useSprintsQuery();
+
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+  const [isSprintModalOpen, setIsSprintModalOpen] = useState(false);
+  const [selectedTaskId, setSelectedTaskIdState] = useState<string | null>(
+    null
+  );
+
+  // Sync URL query param with state on mount
+  useEffect(() => {
+    const taskIdFromUrl = searchParams.get("taskId");
+    if (taskIdFromUrl) {
+      setSelectedTaskIdState(taskIdFromUrl);
+    }
+  }, [searchParams]);
+
+  const setSelectedTaskId = (id: string | null) => {
+    setSelectedTaskIdState(id);
+    if (id) {
+      router.push(`/backlog?taskId=${id}`, { scroll: false });
+    } else {
+      router.push("/backlog", { scroll: false });
+    }
+  };
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(
+    new Set(["active", "planned"])
+  );
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Handle query parameters for new task/sprint
+  useEffect(() => {
+    const createTask = searchParams.get("createTask");
+    const createSprint = searchParams.get("createSprint");
+
+    if (createTask === "true") {
+      setIsTaskModalOpen(true);
+      router.replace("/backlog");
+    } else if (createSprint === "true") {
+      setIsSprintModalOpen(true);
+      router.replace("/backlog");
+    }
+  }, [searchParams, router]);
+
+  // Sensors for drag and drop
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 },
+    })
+  );
+
+  // Group tasks efficiently
+  const { backlogTasks, activeSprint, plannedSprints, completedSprints } =
+    useMemo(() => {
+      return {
+        backlogTasks: tasks.filter((t) => !t.sprintId),
+        activeSprint: sprints.find((s) => s.status === SprintStatus.ACTIVE),
+        plannedSprints: sprints.filter(
+          (s) => s.status === SprintStatus.PLANNED
+        ),
+        completedSprints: sprints.filter(
+          (s) => s.status === SprintStatus.COMPLETED
+        ),
+      };
+    }, [tasks, sprints]);
+
+  const getSprintTasks = (sprintId: string) =>
+    tasks.filter((t) => t.sprintId === sprintId);
+
+  const toggleSection = (section: string) => {
+    const newExpanded = new Set(expandedSections);
+    if (newExpanded.has(section)) {
+      newExpanded.delete(section);
+    } else {
+      newExpanded.add(section);
+    }
+    setExpandedSections(newExpanded);
+  };
+
+  // Drag handlers
+  const handleDragStart = (event: DragStartEvent) => {
+    const task = tasks.find((t) => t.id === event.active.id);
+    setActiveTask(task || null);
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveTask(null);
+
+    if (!over) return;
+
+    const taskId = active.id as string;
+    const overId = over.id as string;
+
+    // Find the actual target container (sprint ID or "backlog")
+    let targetContainerId = overId;
+    const overTask = tasks.find((t) => t.id === overId);
+    if (overTask) {
+      targetContainerId = overTask.sprintId
+        ? `sprint-${overTask.sprintId}`
+        : "backlog";
+    }
+
+    let newSprintId: string | null = null;
+    if (targetContainerId === "backlog") {
+      newSprintId = null;
+    } else if (targetContainerId.startsWith("sprint-")) {
+      newSprintId = targetContainerId.replace("sprint-", "");
+    } else {
+      return;
+    }
+
+    const task = tasks.find((t) => t.id === taskId);
+    if (!task || task.sprintId === newSprintId) return;
+
+    // Optimistic update
+    const queryKey = queryKeys.tasks.list(workspaceId);
+    await queryClient.cancelQueries({ queryKey });
+
+    const previousTasks = queryClient.getQueryData<Task[]>(queryKey);
+
+    if (previousTasks) {
+      queryClient.setQueryData<Task[]>(
+        queryKey,
+        previousTasks.map((t) =>
+          t.id === taskId ? { ...t, sprintId: newSprintId } : t
+        )
+      );
+    }
+
+    try {
+      await locusClient.tasks.update(taskId, workspaceId, {
+        sprintId: newSprintId,
+      });
+      // Invalidate to ensure sync
+      queryClient.invalidateQueries({ queryKey });
+    } catch (error) {
+      // Rollback
+      if (previousTasks) {
+        queryClient.setQueryData(queryKey, previousTasks);
+      }
+      toast.error(
+        error instanceof Error ? error.message : "Failed to move task"
+      );
+    }
+  };
+
+  // Sprint actions
+  const handleCreateSprint = async (name: string) => {
+    try {
+      setIsSubmitting(true);
+      await locusClient.sprints.create(workspaceId, { name });
+      toast.success("Sprint created");
+      setIsSprintModalOpen(false);
+      refetchSprints();
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.sprints.list(workspaceId),
+      });
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create sprint"
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleStartSprint = async (sprintId: string) => {
+    try {
+      setIsSubmitting(true);
+      await locusClient.sprints.start(sprintId, workspaceId);
+      toast.success("Sprint started");
+      refetchSprints();
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.sprints.list(workspaceId),
+      });
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to start sprint"
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCompleteSprint = async (sprintId: string) => {
+    try {
+      setIsSubmitting(true);
+
+      // Optimistic update
+      const sprintKey = queryKeys.sprints.list(workspaceId);
+      const previousSprints = queryClient.getQueryData<Sprint[]>(sprintKey);
+
+      if (previousSprints) {
+        queryClient.setQueryData<Sprint[]>(
+          sprintKey,
+          previousSprints.map((s) =>
+            s.id === sprintId
+              ? {
+                  ...s,
+                  status: SprintStatus.COMPLETED,
+                  endDate: Date.now(),
+                }
+              : s
+          )
+        );
+      }
+
+      await locusClient.sprints.complete(sprintId, workspaceId);
+      toast.success("Sprint completed");
+
+      // Full sync
+      queryClient.invalidateQueries({ queryKey: sprintKey });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.tasks.list(workspaceId),
+      });
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to complete sprint"
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeleteTask = async (taskId: string) => {
+    try {
+      await locusClient.tasks.delete(taskId, workspaceId);
+      toast.success("Task deleted");
+      refetchTasks();
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete task"
+      );
+    }
+  };
+
+  const isLoading = tasksLoading || sprintsLoading;
+
+  return {
+    tasks,
+    sprints,
+    backlogTasks,
+    activeSprint,
+    plannedSprints,
+    completedSprints,
+    getSprintTasks,
+    isLoading,
+    isTaskModalOpen,
+    setIsTaskModalOpen,
+    isSprintModalOpen,
+    setIsSprintModalOpen,
+    selectedTaskId,
+    setSelectedTaskId,
+    activeTask,
+    expandedSections,
+    isSubmitting,
+    sensors,
+    toggleSection,
+    handleDragStart,
+    handleDragEnd,
+    handleCreateSprint,
+    handleStartSprint,
+    handleCompleteSprint,
+    handleDeleteTask,
+    refetchTasks,
+    refetchSprints,
+  };
+}

package/src/hooks/useBoard.ts

@@ -0,0 +1,230 @@
+"use client";
+
+import {
+  type DragEndEvent,
+  type DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { SprintStatus, type Task, TaskStatus } from "@locusai/shared";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { BOARD_STATUSES } from "@/components/board/constants";
+import { useSprintsQuery, useTasksQuery } from "@/hooks";
+import { useWorkspaceId } from "@/hooks/useWorkspaceId";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+
+export function useBoard() {
+  const workspaceId = useWorkspaceId();
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const {
+    data: tasks = [],
+    isLoading: tasksLoading,
+    refetch,
+  } = useTasksQuery();
+  const { data: sprints = [], isLoading: sprintsLoading } = useSprintsQuery();
+
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [selectedTaskId, setSelectedTaskIdState] = useState<string | null>(
+    null
+  );
+
+  // Sync URL query param with state on mount
+  useEffect(() => {
+    const taskIdFromUrl = searchParams.get("taskId");
+    if (taskIdFromUrl) {
+      setSelectedTaskIdState(taskIdFromUrl);
+    }
+  }, [searchParams]);
+
+  const setSelectedTaskId = (id: string | null) => {
+    setSelectedTaskIdState(id);
+    if (id) {
+      router.push(`/board?taskId=${id}`, { scroll: false });
+    } else {
+      router.push("/board", { scroll: false });
+    }
+  };
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [priorityFilter, setPriorityFilter] = useState<string | null>(null);
+  const [roleFilter, setRoleFilter] = useState<string | null>(null);
+  const [view, setView] = useState<"board" | "mindmap">("board");
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 },
+    })
+  );
+
+  // Get active sprint
+  const activeSprint = useMemo(
+    () => sprints.find((s) => s.status === SprintStatus.ACTIVE),
+    [sprints]
+  );
+
+  // Filter tasks
+  const filteredTasks = useMemo(() => {
+    return tasks.filter((task) => {
+      // Sprint filter (Always show active sprint only if it exists)
+      if (activeSprint) {
+        if (task.sprintId !== activeSprint.id) return false;
+      } else {
+        // If no active sprint, show nothing on board (it will hit empty state)
+        return false;
+      }
+      // Search filter
+      if (
+        searchQuery &&
+        !task.title.toLowerCase().includes(searchQuery.toLowerCase())
+      ) {
+        return false;
+      }
+      // Priority filter
+      if (priorityFilter && task.priority !== priorityFilter) {
+        return false;
+      }
+      // Role filter
+      if (roleFilter && task.assigneeRole !== roleFilter) {
+        return false;
+      }
+      return true;
+    });
+  }, [tasks, activeSprint, searchQuery, priorityFilter, roleFilter]);
+
+  // Group by status
+  const tasksByStatus = useMemo(() => {
+    return BOARD_STATUSES.reduce(
+      (acc, status) => {
+        acc[status.key] = filteredTasks.filter((t) => t.status === status.key);
+        return acc;
+      },
+      {} as Record<TaskStatus, Task[]>
+    );
+  }, [filteredTasks]);
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const task = tasks.find((t) => t.id === event.active.id);
+    setActiveTask(task || null);
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+    setActiveTask(null);
+
+    if (!over) return;
+
+    const taskId = active.id as string;
+    const overId = over.id as string;
+
+    // Resolve target status
+    const overTask = tasks.find((t) => t.id === overId);
+    const newStatus = overTask ? overTask.status : (overId as TaskStatus);
+
+    const task = tasks.find((t) => t.id === taskId);
+    if (!task || task.status === newStatus) return;
+
+    // Optimistic update
+    const previousTasks = queryClient.getQueryData<Task[]>(
+      queryKeys.tasks.list(workspaceId)
+    );
+
+    if (previousTasks) {
+      queryClient.setQueryData<Task[]>(
+        queryKeys.tasks.list(workspaceId),
+        previousTasks.map((t) =>
+          t.id === taskId ? { ...t, status: newStatus } : t
+        )
+      );
+    }
+
+    try {
+      await locusClient.tasks.update(taskId, workspaceId, {
+        status: newStatus,
+      });
+      // No need to refetch if optimistic update is successful,
+      // but we should eventually to stay in sync.
+      // queryClient.invalidateQueries({ queryKey: queryKeys.tasks.list(workspaceId) });
+    } catch (error) {
+      // Rollback
+      if (previousTasks) {
+        queryClient.setQueryData(
+          queryKeys.tasks.list(workspaceId),
+          previousTasks
+        );
+      }
+      toast.error(
+        error instanceof Error ? error.message : "Failed to update task"
+      );
+    }
+  };
+
+  const handleDeleteTask = async (taskId: string) => {
+    const previousTasks = queryClient.getQueryData<Task[]>(
+      queryKeys.tasks.list(workspaceId)
+    );
+
+    if (previousTasks) {
+      queryClient.setQueryData<Task[]>(
+        queryKeys.tasks.list(workspaceId),
+        previousTasks.filter((t) => t.id !== taskId)
+      );
+    }
+
+    try {
+      await locusClient.tasks.delete(taskId, workspaceId);
+      toast.success("Task deleted");
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.tasks.list(workspaceId),
+      });
+    } catch (error) {
+      // Rollback
+      if (previousTasks) {
+        queryClient.setQueryData(
+          queryKeys.tasks.list(workspaceId),
+          previousTasks
+        );
+      }
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete task"
+      );
+    }
+  };
+
+  const isLoading = tasksLoading || sprintsLoading;
+  const shouldShowEmptyState = !activeSprint;
+
+  return {
+    tasks,
+    activeSprint,
+    filteredTasks,
+    tasksByStatus,
+    activeTask,
+    isLoading,
+    shouldShowEmptyState,
+    isCreateModalOpen,
+    setIsCreateModalOpen,
+    selectedTaskId,
+    setSelectedTaskId,
+    searchQuery,
+    setSearchQuery,
+    priorityFilter,
+    setPriorityFilter,
+    roleFilter,
+    setRoleFilter,
+    view,
+    setView,
+    sensors,
+    handleDragStart,
+    handleDragEnd,
+    handleDeleteTask,
+    refetch,
+  };
+}

package/src/hooks/useDashboardLayout.ts

@@ -0,0 +1,49 @@
+/**
+ * Hook for dashboard layout routing and protection logic
+ *
+ * Handles redirecting unauthenticated users away from dashboard
+ * and managing the authenticated dashboard UI state
+ */
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { useAuth } from "@/context/AuthContext";
+import { isCloudMode } from "@/utils/env.utils";
+
+interface UseDashboardLayoutReturn {
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  shouldShowUI: boolean;
+}
+
+/**
+ * Manages dashboard layout routing and protection
+ * Returns flags to determine what to render
+ *
+ * @returns Dashboard layout state flags
+ */
+export function useDashboardLayout(): UseDashboardLayoutReturn {
+  const { isAuthenticated, isLoading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    // Skip redirect if still loading or not in cloud mode
+    if (isLoading || !isCloudMode()) {
+      return;
+    }
+
+    // Redirect unauthenticated users to login
+    if (!isAuthenticated) {
+      router.push("/login");
+    }
+  }, [isLoading, isAuthenticated, router]);
+
+  return {
+    isLoading,
+    isAuthenticated,
+    // Show UI only if authenticated or still loading
+    // Hide UI if unauthenticated (to avoid flash before redirect)
+    shouldShowUI: isAuthenticated || isLoading,
+  };
+}