Merge pull request #25 from jmacuga/deleting-boards

Deleting boards fixed, added indexedDB garbage collection

Author: jmacuga

components/board/components/object-edit-indicator.tsx

@@ -18,7 +18,6 @@ export const ObjectEditIndicator = ({
 
   const { className, attrs } = shape;
 
-  // Handle className that can be either a string or an object with val property
   const getClassName = () => {
     if (typeof className === "string") {
       return className;
@@ -38,7 +37,6 @@ export const ObjectEditIndicator = ({
     radius = 0,
     points;
 
-  // Get transform attributes
   const scaleX = attrs.scaleX || 1;
   const scaleY = attrs.scaleY || 1;
   const rotation = attrs.rotation || 0;
@@ -65,30 +63,26 @@ export const ObjectEditIndicator = ({
       x = attrs.x;
       y = attrs.y;
       width = attrs.width * scaleX;
-      height = 30 * scaleY; // Approximate text height
+      height = 30 * scaleY;
       break;
 
     case "Line":
     case "Arrow":
       points = attrs.points || [];
       if (points.length >= 4) {
-        // Apply transformations to each point
         const transformedPoints = [];
         for (let i = 0; i < points.length; i += 2) {
           const px = points[i] * scaleX;
           const py = points[i + 1] * scaleY;
 
-          // Apply rotation if present
           if (rotation !== 0) {
             const radians = (rotation * Math.PI) / 180;
             const cos = Math.cos(radians);
             const sin = Math.sin(radians);
 
-            // Point position relative to the offset (rotation center)
             const rx = px - offsetX;
             const ry = py - offsetY;
 
-            // Rotated point
             const rotatedX = rx * cos - ry * sin + offsetX;
             const rotatedY = rx * sin + ry * cos + offsetY;
 
@@ -98,7 +92,6 @@ export const ObjectEditIndicator = ({
           }
         }
 
-        // Calculate bounding box from transformed points
         const xPoints = transformedPoints.filter(
           (_: number, i: number) => i % 2 === 0
         );
@@ -139,23 +132,18 @@ export const ObjectEditIndicator = ({
 
   const padding = 4;
 
-  // If the object is rotated, we need to apply the same rotation to the indicator
   const shouldRotate =
     rotation !== 0 && (shapeType === "Rect" || shapeType === "Text");
 
-  // Smart positioning for the label
-  // Check if we're close to right edge of viewport and adjust position accordingly
   const BADGE_WIDTH = Math.min(150, editorNames.length * 7 + 20);
   const VIEWPORT_WIDTH =
     typeof window !== "undefined" ? window.innerWidth : 1000;
   const VIEWPORT_HEIGHT =
     typeof window !== "undefined" ? window.innerHeight : 800;
 
-  // Calculate if the label would go outside the viewport
   const isNearRightEdge = x + width + BADGE_WIDTH + 10 > VIEWPORT_WIDTH;
   const isNearBottomEdge = y + 30 > VIEWPORT_HEIGHT;
 
-  // Adjust label position based on viewport boundaries
   const labelX = isNearRightEdge ? x - BADGE_WIDTH - 5 : x + width + 5;
   const labelY = isNearBottomEdge ? y - 30 : y;
 

components/board/hooks/use-active-users.tsx

@@ -11,6 +11,7 @@ import {
 import { AnyDocumentId } from "@automerge/automerge-repo";
 import { User } from "@/types/User";
 import { BoardContext } from "../context/board-context";
+import { UserStatusPayload } from "@/types/userStatusPayload";
 
 export type ActiveUser = User & {
   editingObjects?: string[];
@@ -62,7 +63,7 @@ export const useActiveUsers = () => {
   useEffect(() => {
     if (!session?.user || !isOnline) return;
 
-    const currentUser = {
+    const currentUser: UserStatusPayload = {
       user: {
         id: session.user.id as string,
         name: session.user.name || null,
@@ -149,7 +150,7 @@ export const useActiveUsers = () => {
 
   useEffect(() => {
     if (!session?.user) return;
-    const currentUser = {
+    const currentUser: UserStatusPayload = {
       user: {
         id: session.user.id as string,
         name: session.user.name || null,

components/board/hooks/use-sync-mode.tsx

@@ -12,10 +12,6 @@ const useSyncMode = () => {
   const clientSyncService = useClientSync();
   const { isOnline, setIsOnline } = useContext(BoardContext);
   const { networkStatus } = useNetworkStatusContext();
-  const { data: session } = useSession();
-  const handle = useHandle<LayerSchema>(
-    clientSyncService.getDocUrl() as AnyDocumentId
-  );
 
   useEffect(() => {
     if (networkStatus === "OFFLINE") {

components/boards/create-board-dialog.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -25,14 +23,20 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Plus } from "lucide-react";
-import { toast } from "sonner";
+import { toast } from "react-hot-toast";
 
 type FormData = {
   name: string;
 };
 
+interface ValidationError {
+  path: string;
+  message: string;
+}
+
 export function CreateBoardDialog({ teamId }: { teamId: string }) {
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const router = useRouter();
   const form = useForm<FormData>({
     resolver: zodResolver(schemaBoard),
@@ -43,6 +47,7 @@ export function CreateBoardDialog({ teamId }: { teamId: string }) {
 
   const onSubmit = async (data: FormData) => {
     try {
+      setIsSubmitting(true);
       const response = await fetch("/api/boards/create", {
         method: "POST",
         headers: {
@@ -52,43 +57,59 @@ export function CreateBoardDialog({ teamId }: { teamId: string }) {
         credentials: "include",
       });
 
-      const board = await response.json();
-      console.log("Board:", board);
+      const result = await response.json();
+
       if (response.ok) {
+        toast.success("Board created successfully");
+        setOpen(false);
+        form.reset();
         router.push(`/teams/${teamId}/boards/`);
-      } else {
-        throw new Error(board.message || "Failed to create board");
+        return;
       }
 
-      toast.success("Board created successfully");
-      setOpen(false);
-      form.reset();
+      if (!response.ok && result.errors) {
+        const apiErrors = result.errors as ValidationError[];
+        apiErrors.forEach((error) => {
+          if (error.path === "name") {
+            form.setError("name", {
+              type: "server",
+              message: error.message,
+            });
+          }
+        });
+
+        throw new Error(result.message || "Failed to create board");
+      } else {
+        throw new Error(result.message || "Failed to create board");
+      }
     } catch (error) {
       toast.error(
         error instanceof Error ? error.message : "Something went wrong"
       );
       console.error(error);
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button
-          className="bg-burnt-sienna hover:bg-burnt-sienna-darker ms-10"
-          aria-label="Create new board"
-        >
-          <Plus className="mr-2 h-4 w-4" />
+        <Button className="flex gap-1 items-center">
+          <Plus className="h-4 w-4" />
           Create Board
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create New Board</DialogTitle>
+          <DialogTitle className="text-xl font-bold">
+            Create a New Board
+          </DialogTitle>
           <DialogDescription>
-            Create a new board to start collaborating with your team.
+            Create a new board for your team to collaborate on
           </DialogDescription>
         </DialogHeader>
+
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
             <FormField
@@ -104,13 +125,17 @@ export function CreateBoardDialog({ teamId }: { teamId: string }) {
                 </FormItem>
               )}
             />
+
             <DialogFooter>
               <Button
-                type="submit"
-                className="bg-burnt-sienna hover:bg-burnt-sienna-darker"
-                disabled={form.formState.isSubmitting}
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
               >
-                {form.formState.isSubmitting ? "Creating..." : "Create Board"}
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isSubmitting}>
+                {isSubmitting ? "Creating..." : "Create Board"}
               </Button>
             </DialogFooter>
           </form>