@locusai/web 0.1.7 → 0.2.2

package/src/hooks/useLoginForm.ts

@@ -0,0 +1,84 @@
+/**
+ * Hook for login form management
+ * Handles OTP flow: email -> OTP verification
+ */
+"use client";
+
+import { type User } from "@locusai/shared";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useAuth } from "@/context/AuthContext";
+import { locusClient } from "@/lib/api-client";
+
+type LoginStep = "email" | "otp";
+
+interface UseLoginFormReturn {
+  step: LoginStep;
+  email: string;
+  otp: string;
+  loading: boolean;
+  setEmail: (email: string) => void;
+  setOtp: (otp: string) => void;
+  handleSendOtp: (e: React.FormEvent) => Promise<void>;
+  handleVerify: (e: React.FormEvent) => Promise<void>;
+  goBackToEmail: () => void;
+}
+
+/**
+ * Custom hook for managing login form state and logic
+ * Separates form logic from UI
+ */
+export function useLoginForm(): UseLoginFormReturn {
+  const { login } = useAuth();
+  const [step, setStep] = useState<LoginStep>("email");
+  const [email, setEmail] = useState("");
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSendOtp = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await locusClient.auth.requestLoginOtp(email);
+      setStep("otp");
+      toast.success("Verification code sent to your email");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to send OTP"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVerify = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const response = await locusClient.auth.verifyLogin({ email, otp });
+      login(response.token, response.user as User);
+      toast.success("Welcome back!");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Invalid code");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const goBackToEmail = () => {
+    setStep("email");
+    setOtp("");
+  };
+
+  return {
+    step,
+    email,
+    otp,
+    loading,
+    setEmail,
+    setOtp,
+    handleSendOtp,
+    handleVerify,
+    goBackToEmail,
+  };
+}

package/src/hooks/useMutationWithToast.ts

@@ -0,0 +1,56 @@
+"use client";
+
+import {
+  type QueryKey,
+  useMutation,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { toast } from "sonner";
+
+interface UseMutationWithToastConfig<T, DTO> {
+  mutationFn: (data: DTO) => Promise<T>;
+  successMessage?: string;
+  errorMessage?: string;
+  onSuccess?: (data: T) => void;
+  invalidateKeys?: QueryKey[];
+}
+
+/**
+ * Enhanced mutation hook with automatic toast notifications and query invalidation.
+ *
+ * Handles common mutation patterns:
+ * - Success/error toast notifications
+ * - Automatic query cache invalidation
+ * - Consistent error handling
+ *
+ * @example
+ * const mutation = useMutationWithToast({
+ *   mutationFn: (data) => api.create(data),
+ *   successMessage: "Created successfully",
+ *   invalidateKeys: [queryKeys.items.all()],
+ *   onSuccess: () => closeModal(),
+ * });
+ */
+export function useMutationWithToast<T, DTO = void>({
+  mutationFn,
+  successMessage = "Success",
+  errorMessage,
+  onSuccess,
+  invalidateKeys = [],
+}: UseMutationWithToastConfig<T, DTO>) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn,
+    onSuccess: (data) => {
+      toast.success(successMessage);
+      invalidateKeys.forEach((key) => {
+        queryClient.invalidateQueries({ queryKey: key });
+      });
+      onSuccess?.(data);
+    },
+    onError: (error: Error) => {
+      toast.error(errorMessage ?? error.message ?? "An error occurred");
+    },
+  });
+}

package/src/hooks/useOrganizationQuery.ts

@@ -0,0 +1,55 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useAuth } from "@/context";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+
+/**
+ * Organization Members Query Hook
+ */
+export function useOrganizationMembersQuery() {
+  const { user } = useAuth();
+  const orgId = user?.orgId;
+
+  return useQuery({
+    queryKey: orgId ? queryKeys.organizations.members(orgId) : [],
+    queryFn: () =>
+      orgId
+        ? locusClient.organizations.listMembers(orgId)
+        : Promise.resolve([]),
+    enabled: !!orgId,
+  });
+}
+
+/**
+ * Invitations Query Hook
+ */
+export function useInvitationsQuery(options?: { enabled?: boolean }) {
+  const { user } = useAuth();
+  const orgId = user?.orgId;
+
+  return useQuery({
+    queryKey: orgId ? queryKeys.invitations.list(orgId) : [],
+    queryFn: () =>
+      orgId ? locusClient.invitations.list(orgId) : Promise.resolve([]),
+    enabled: !!orgId && (options?.enabled ?? true),
+  });
+}
+
+/**
+ * Organization Detail Query Hook
+ */
+export function useOrganizationQuery() {
+  const { user } = useAuth();
+  const orgId = user?.orgId;
+
+  return useQuery({
+    queryKey: orgId ? queryKeys.organizations.detail(orgId) : [],
+    queryFn: () =>
+      orgId
+        ? locusClient.organizations.getById(orgId)
+        : Promise.reject("No orgId"),
+    enabled: !!orgId,
+  });
+}

package/src/hooks/useRegisterForm.ts

@@ -0,0 +1,216 @@
+/**
+ * Hook for registration form management
+ * Handles 6-step registration flow with email, OTP, profile, organization, workspace, and invites
+ */
+"use client";
+
+import { type User } from "@locusai/shared";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useAuth } from "@/context/AuthContext";
+import { locusClient } from "@/lib/api-client";
+import { deduplicateEmails, validateInvitationEmails } from "@/lib/validation";
+
+type RegisterStep =
+  | "email"
+  | "otp"
+  | "profile"
+  | "organization"
+  | "workspace"
+  | "invite";
+
+interface UseRegisterFormReturn {
+  step: RegisterStep;
+  loading: boolean;
+  email: string;
+  otp: string;
+  name: string;
+  companyName: string;
+  teamSize: string;
+  userRole: string;
+  workspaceName: string;
+  invitedEmails: string[];
+  currentInviteEmail: string;
+  currentStepIndex: number;
+  totalSteps: number;
+  setEmail: (email: string) => void;
+  setOtp: (otp: string) => void;
+  setName: (name: string) => void;
+  setCompanyName: (name: string) => void;
+  setTeamSize: (size: string) => void;
+  setUserRole: (role: string) => void;
+  setWorkspaceName: (name: string) => void;
+  setCurrentInviteEmail: (email: string) => void;
+  goToStep: (step: RegisterStep) => void;
+  nextStep: () => void;
+  handleSendOtp: (e: React.FormEvent) => Promise<void>;
+  handleVerifyOtp: (e: React.FormEvent) => void;
+  handleAddInvite: () => void;
+  handleRemoveInvite: (email: string) => void;
+  handleCompleteRegistration: (e?: React.FormEvent) => Promise<void>;
+}
+
+/**
+ * Custom hook for managing multi-step registration form
+ * Separates form logic from UI components
+ */
+export function useRegisterForm(): UseRegisterFormReturn {
+  const { login } = useAuth();
+  const [step, setStep] = useState<RegisterStep>("email");
+  const [loading, setLoading] = useState(false);
+
+  // Form state
+  const [email, setEmail] = useState("");
+  const [otp, setOtp] = useState("");
+  const [name, setName] = useState("");
+  const [companyName, setCompanyName] = useState("");
+  const [teamSize, setTeamSize] = useState<string>("");
+  const [userRole, setUserRole] = useState<string>("");
+  const [workspaceName, setWorkspaceName] = useState("");
+  const [invitedEmails, setInvitedEmails] = useState<string[]>([]);
+  const [currentInviteEmail, setCurrentInviteEmail] = useState("");
+
+  const steps: RegisterStep[] = [
+    "email",
+    "otp",
+    "profile",
+    "organization",
+    "workspace",
+    "invite",
+  ];
+  const currentStepIndex = steps.indexOf(step) + 1;
+  const totalSteps = steps.length;
+
+  const handleSendOtp = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await locusClient.auth.requestRegisterOtp(email);
+      setStep("otp");
+      toast.success("Verification code sent to your email");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to send OTP"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleVerifyOtp = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (otp.length === 6) {
+      setStep("profile");
+    } else {
+      toast.error("Please enter a valid 6-digit code");
+    }
+  };
+
+  const handleAddInvite = () => {
+    if (!currentInviteEmail.trim()) {
+      toast.error("Please enter an email address");
+      return;
+    }
+
+    if (currentInviteEmail.includes("@")) {
+      const normalized = currentInviteEmail.toLowerCase();
+      if (invitedEmails.includes(normalized)) {
+        toast.error("Email already added");
+        return;
+      }
+      setInvitedEmails([...invitedEmails, normalized]);
+      setCurrentInviteEmail("");
+    } else {
+      toast.error("Invalid email address");
+    }
+  };
+
+  const handleRemoveInvite = (emailToRemove: string) => {
+    setInvitedEmails(invitedEmails.filter((e) => e !== emailToRemove));
+  };
+
+  const handleCompleteRegistration = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+
+    // Validate invites
+    const { valid: validEmails, invalid: invalidEmails } =
+      validateInvitationEmails(invitedEmails);
+
+    if (invalidEmails.length > 0) {
+      toast.error(`Invalid email addresses: ${invalidEmails.join(", ")}`);
+      return;
+    }
+
+    // Deduplicate emails
+    const deduped = deduplicateEmails(validEmails);
+
+    setLoading(true);
+    try {
+      const response = await locusClient.auth.completeRegistration({
+        email,
+        otp,
+        name,
+        companyName: companyName || undefined,
+        teamSize: teamSize as "solo" | "2-10" | "11-50" | "51-200" | "200+",
+        userRole: userRole as
+          | "developer"
+          | "designer"
+          | "product_manager"
+          | "other",
+        workspaceName: workspaceName || undefined,
+        invitedEmails: deduped.length > 0 ? deduped : undefined,
+      });
+
+      login(response.token, response.user as User);
+      toast.success("Account created successfully!");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Registration failed"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const goToStep = (newStep: RegisterStep) => {
+    setStep(newStep);
+  };
+
+  const nextStep = () => {
+    const currentIndex = steps.indexOf(step);
+    if (currentIndex < steps.length - 1) {
+      setStep(steps[currentIndex + 1]);
+    }
+  };
+
+  return {
+    step,
+    loading,
+    email,
+    otp,
+    name,
+    companyName,
+    teamSize,
+    userRole,
+    workspaceName,
+    invitedEmails,
+    currentInviteEmail,
+    currentStepIndex,
+    totalSteps,
+    setEmail,
+    setOtp,
+    setName,
+    setCompanyName,
+    setTeamSize,
+    setUserRole,
+    setWorkspaceName,
+    setCurrentInviteEmail,
+    goToStep,
+    nextStep,
+    handleSendOtp,
+    handleVerifyOtp,
+    handleAddInvite,
+    handleRemoveInvite,
+    handleCompleteRegistration,
+  };
+}

package/src/hooks/useSprintsQuery.ts

@@ -0,0 +1,38 @@
+"use client";
+
+import { type Sprint } from "@locusai/shared";
+import { useQuery } from "@tanstack/react-query";
+import { locusClient } from "@/lib/api-client";
+import { queryKeys } from "@/lib/query-keys";
+import { useWorkspaceIdOptional } from "./useWorkspaceId";
+
+/**
+ * Sprints Query Hook
+ * Centralizes sprint fetching logic.
+ */
+export function useSprintsQuery() {
+  const workspaceId = useWorkspaceIdOptional();
+
+  return useQuery<Sprint[]>({
+    queryKey: queryKeys.sprints.list(workspaceId),
+    queryFn: () =>
+      workspaceId ? locusClient.sprints.list(workspaceId) : Promise.resolve([]),
+    enabled: !!workspaceId,
+  });
+}
+
+/**
+ * Active Sprint Query Hook
+ */
+export function useActiveSprintQuery() {
+  const workspaceId = useWorkspaceIdOptional();
+
+  return useQuery<Sprint | null>({
+    queryKey: queryKeys.sprints.active(workspaceId),
+    queryFn: () =>
+      workspaceId
+        ? locusClient.sprints.getActive(workspaceId)
+        : Promise.resolve(null),
+    enabled: !!workspaceId,
+  });
+}

package/src/hooks/useTaskDescription.ts

@@ -0,0 +1,102 @@
+/**
+ * Task Description Hook
+ *
+ * Extracts state management for task description editing.
+ * Handles title and description editing with save functionality.
+ */
+
+"use client";
+
+import { type Task } from "@locusai/shared";
+import { useCallback, useState } from "react";
+
+interface UseTaskDescriptionProps {
+  task: Task;
+  onUpdate: (updates: Partial<Task>) => void;
+}
+
+interface UseTaskDescriptionReturn {
+  // Title state
+  isEditingTitle: boolean;
+  editTitle: string;
+
+  // Description state
+  editDesc: string;
+  descMode: "edit" | "preview";
+
+  // Handlers
+  setIsEditingTitle: (val: boolean) => void;
+  setEditTitle: (val: string) => void;
+  handleTitleSave: () => void;
+  setEditDesc: (val: string) => void;
+  handleDescSave: () => void;
+  setDescMode: (mode: "edit" | "preview") => void;
+
+  // Quick actions
+  toggleEditMode: () => void;
+  cancelEdit: () => void;
+}
+
+/**
+ * Hook for managing task description editing
+ *
+ * Handles state for:
+ * - Title editing mode and content
+ * - Description editing mode and content
+ * - Save operations for both
+ *
+ * @example
+ * const {
+ *   isEditingTitle,
+ *   editTitle,
+ *   handleTitleSave,
+ *   // ... other handlers
+ * } = useTaskDescription({ task, onUpdate });
+ */
+export function useTaskDescription({
+  task,
+  onUpdate,
+}: UseTaskDescriptionProps): UseTaskDescriptionReturn {
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editTitle, setEditTitle] = useState(task.title);
+  const [editDesc, setEditDesc] = useState(task.description || "");
+  const [descMode, setDescMode] = useState<"edit" | "preview">("preview");
+
+  const handleTitleSave = useCallback(() => {
+    if (editTitle !== task.title && editTitle.trim()) {
+      onUpdate({ title: editTitle });
+    }
+    setIsEditingTitle(false);
+  }, [editTitle, task.title, onUpdate]);
+
+  const handleDescSave = useCallback(() => {
+    if (editDesc !== task.description) {
+      onUpdate({ description: editDesc });
+    }
+  }, [editDesc, task.description, onUpdate]);
+
+  const toggleEditMode = useCallback(() => {
+    setDescMode(descMode === "edit" ? "preview" : "edit");
+  }, [descMode]);
+
+  const cancelEdit = useCallback(() => {
+    setEditTitle(task.title);
+    setEditDesc(task.description || "");
+    setIsEditingTitle(false);
+  }, [task]);
+
+  return {
+    isEditingTitle,
+    editTitle,
+    editDesc,
+    descMode,
+    setIsEditingTitle,
+    setEditTitle,
+    handleTitleSave,
+    setEditDesc,
+    handleDescSave,
+    setDescMode,
+    toggleEditMode,
+    cancelEdit,
+  };
+}