fix test failures, new export/backup solutions

2026-02-06 22:21:19 -08:00
parent f462b2e288
commit 08135ee36a
26 changed files with 4049 additions and 4087 deletions
@@ -1,45 +1,16 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { createPortal } from 'react-dom';
 import { Layout } from '../components/Layout';
 import { DrawingCard } from '../components/DrawingCard';
 import { Plus, Search, Loader2, Inbox, Trash2, Folder, ArrowRight, Copy, Upload, CheckSquare, Square, ArrowUp, ArrowDown, ChevronDown, FileText, Calendar, Clock } from 'lucide-react';
 import { useNavigate, useSearchParams, useLocation } from 'react-router-dom';
 import * as api from '../api';
 import type { DrawingSummary, Collection } from '../types';
+import type { DrawingSortField, SortDirection } from '../api';
 import { useDebounce } from '../hooks/useDebounce';
 import clsx from 'clsx';
 import { ConfirmModal } from '../components/ConfirmModal';
 import { useUpload } from '../context/UploadContext';
-
-type Point = { x: number; y: number };
-
-type SelectionBounds = {
-  left: number;
-  top: number;
-  right: number;
-  bottom: number;
-  width: number;
-  height: number;
-};
-
-const getSelectionBounds = (start: Point, current: Point): SelectionBounds => {
-  const left = Math.min(start.x, current.x);
-  const right = Math.max(start.x, current.x);
-  const top = Math.min(start.y, current.y);
-  const bottom = Math.max(start.y, current.y);
-  return {
-    left,
-    top,
-    right,
-    bottom,
-    width: right - left,
-    height: bottom - top,
-  };
-};
-
-const DragOverlayPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return createPortal(children, document.body);
-};
+import { DragOverlayPortal, getSelectionBounds, type Point, type SelectionBounds } from './dashboard/shared';

 const PAGE_SIZE = 24;

@@ -91,8 +62,7 @@ export const Dashboard: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const loaderRef = useRef<HTMLDivElement>(null);

-  type SortField = 'name' | 'createdAt' | 'updatedAt';
-  type SortDirection = 'asc' | 'desc';
+  type SortField = DrawingSortField;


  const searchInputRef = useRef<HTMLInputElement>(null);
@@ -112,7 +82,12 @@ export const Dashboard: React.FC = () => {
    setIsLoading(true);
    try {
      const [drawingsRes, collectionsData] = await Promise.all([
-        api.getDrawings(debouncedSearch, selectedCollectionId, { limit: PAGE_SIZE, offset: 0 }),
+        api.getDrawings(debouncedSearch, selectedCollectionId, {
+          limit: PAGE_SIZE,
+          offset: 0,
+          sortField: sortConfig.field,
+          sortDirection: sortConfig.direction,
+        }),
        api.getCollections()
      ]);
      setDrawings(drawingsRes.drawings);
@@ -124,7 +99,7 @@ export const Dashboard: React.FC = () => {
    } finally {
      setIsLoading(false);
    }
-  }, [debouncedSearch, selectedCollectionId]);
+  }, [debouncedSearch, selectedCollectionId, sortConfig.field, sortConfig.direction]);

  const fetchMore = useCallback(async () => {
    if (isFetchingMore || !hasMore || isLoading) return;
@@ -132,7 +107,9 @@ export const Dashboard: React.FC = () => {
    try {
      const drawingsRes = await api.getDrawings(debouncedSearch, selectedCollectionId, {
        limit: PAGE_SIZE,
-        offset: drawings.length
+        offset: drawings.length,
+        sortField: sortConfig.field,
+        sortDirection: sortConfig.direction,
      });
      setDrawings(prev => [...prev, ...drawingsRes.drawings]);
      setTotalCount(drawingsRes.totalCount);
@@ -141,7 +118,16 @@ export const Dashboard: React.FC = () => {
    } finally {
      setIsFetchingMore(false);
    }
-  }, [isFetchingMore, hasMore, isLoading, debouncedSearch, selectedCollectionId, drawings.length]);
+  }, [
+    isFetchingMore,
+    hasMore,
+    isLoading,
+    debouncedSearch,
+    selectedCollectionId,
+    drawings.length,
+    sortConfig.field,
+    sortConfig.direction,
+  ]);

  useEffect(() => {
    refreshData();
@@ -258,16 +244,7 @@ export const Dashboard: React.FC = () => {
    setDragCurrent({ x: e.clientX, y: e.clientY });
  };

-  const sortedDrawings = React.useMemo(() => {
-    return [...drawings].sort((a, b) => {
-      const { field, direction } = sortConfig;
-      const modifier = direction === 'asc' ? 1 : -1;
-      if (field === 'name') return a.name.localeCompare(b.name) * modifier;
-      if (field === 'createdAt') return (a.createdAt - b.createdAt) * modifier;
-      if (field === 'updatedAt') return (a.updatedAt - b.updatedAt) * modifier;
-      return 0;
-    });
-  }, [drawings, sortConfig]);
+  const sortedDrawings = drawings;

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
@@ -14,101 +14,19 @@ import { reconcileElements } from '../utils/sync';
 import { exportFromEditor } from '../utils/exportUtils';
 import * as api from '../api';
 import { useTheme } from '../context/ThemeContext';
+import {
+  UIOptions,
+  getColorFromString,
+  getFilesDelta,
+  getInitialsFromName,
+  haveSameElements,
+} from './editor/shared';
+import type { ElementVersionInfo } from './editor/shared';

 interface Peer extends UserIdentity {
  isActive: boolean;
 }

-interface ElementVersionInfo {
-  version: number;
-  versionNonce: number;
-}
-
-const haveSameElements = (a: readonly any[] = [], b: readonly any[] = []) => {
-  if (!a || !b) return false;
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    const left = a[i];
-    const right = b[i];
-    if (!left || !right) return false;
-    if (left.id !== right.id) return false;
-    if ((left.version ?? 0) !== (right.version ?? 0)) return false;
-    if ((left.versionNonce ?? 0) !== (right.versionNonce ?? 0)) return false;
-  }
-  return true;
-};
-
-const buildFileSignature = (file: any): string => {
-  const mimeType = typeof file?.mimeType === "string" ? file.mimeType : "";
-  const id = typeof file?.id === "string" ? file.id : "";
-  const dataURL = typeof file?.dataURL === "string" ? file.dataURL : "";
-  // Avoid keeping the whole dataURL for comparisons; use a cheap signature.
-  const prefix = dataURL.slice(0, 32);
-  const suffix = dataURL.slice(-32);
-  return `${id}|${mimeType}|${dataURL.length}|${prefix}|${suffix}`;
-};
-
-const getFilesDelta = (
-  previous: Record<string, any>,
-  next: Record<string, any>
-): Record<string, any> => {
-  const delta: Record<string, any> = {};
-  const prev = previous || {};
-  const nxt = next || {};
-
-  for (const fileId of Object.keys(nxt)) {
-    const nextFile = nxt[fileId];
-    const nextHasDataUrl = typeof nextFile?.dataURL === "string" && nextFile.dataURL.length > 0;
-    // Only sync files that actually have data; otherwise other tabs can't render yet.
-    if (!nextHasDataUrl) continue;
-
-    const prevFile = prev[fileId];
-    if (!prevFile) {
-      delta[fileId] = nextFile;
-      continue;
-    }
-
-    if (buildFileSignature(prevFile) !== buildFileSignature(nextFile)) {
-      delta[fileId] = nextFile;
-    }
-  }
-
-  return delta;
-};
-
-const UIOptions = {
-  canvasActions: {
-    saveToActiveFile: false,
-    loadScene: false,
-    export: { saveFileToDisk: false },
-    toggleTheme: true,
-  },
-};
-
-const getInitialsFromName = (name: string): string => {
-  const trimmed = name.trim();
-  if (!trimmed) return 'U';
-  const parts = trimmed.split(/\s+/).filter(Boolean);
-  if (parts.length >= 2) {
-    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
-  }
-  return trimmed.slice(0, 2).toUpperCase();
-};
-
-// Helper function to generate a color from a string (consistent hash)
-const getColorFromString = (str: string): string => {
-  const COLORS = [
-    "#ef4444", "#f97316", "#f59e0b", "#84cc16", "#22c55e", "#10b981",
-    "#14b8a6", "#06b6d4", "#0ea5e9", "#3b82f6", "#6366f1", "#8b5cf6",
-    "#a855f7", "#d946ef", "#ec4899", "#f43f5e",
-  ];
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return COLORS[Math.abs(hash) % COLORS.length];
-};
-
 export const Editor: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
@@ -0,0 +1,35 @@
+import React from "react";
+import { createPortal } from "react-dom";
+
+export type Point = { x: number; y: number };
+
+export type SelectionBounds = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+};
+
+export const getSelectionBounds = (
+  start: Point,
+  current: Point
+): SelectionBounds => {
+  const left = Math.min(start.x, current.x);
+  const right = Math.max(start.x, current.x);
+  const top = Math.min(start.y, current.y);
+  const bottom = Math.max(start.y, current.y);
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+  };
+};
+
+export const DragOverlayPortal: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => createPortal(children, document.body);
@@ -0,0 +1,86 @@
+export interface ElementVersionInfo {
+  version: number;
+  versionNonce: number;
+}
+
+export const haveSameElements = (a: readonly any[] = [], b: readonly any[] = []) => {
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const left = a[i];
+    const right = b[i];
+    if (!left || !right) return false;
+    if (left.id !== right.id) return false;
+    if ((left.version ?? 0) !== (right.version ?? 0)) return false;
+    if ((left.versionNonce ?? 0) !== (right.versionNonce ?? 0)) return false;
+  }
+  return true;
+};
+
+const buildFileSignature = (file: any): string => {
+  const mimeType = typeof file?.mimeType === "string" ? file.mimeType : "";
+  const id = typeof file?.id === "string" ? file.id : "";
+  const dataURL = typeof file?.dataURL === "string" ? file.dataURL : "";
+  const prefix = dataURL.slice(0, 32);
+  const suffix = dataURL.slice(-32);
+  return `${id}|${mimeType}|${dataURL.length}|${prefix}|${suffix}`;
+};
+
+export const getFilesDelta = (
+  previous: Record<string, any>,
+  next: Record<string, any>
+): Record<string, any> => {
+  const delta: Record<string, any> = {};
+  const prev = previous || {};
+  const nxt = next || {};
+
+  for (const fileId of Object.keys(nxt)) {
+    const nextFile = nxt[fileId];
+    const nextHasDataUrl = typeof nextFile?.dataURL === "string" && nextFile.dataURL.length > 0;
+    if (!nextHasDataUrl) continue;
+
+    const prevFile = prev[fileId];
+    if (!prevFile) {
+      delta[fileId] = nextFile;
+      continue;
+    }
+
+    if (buildFileSignature(prevFile) !== buildFileSignature(nextFile)) {
+      delta[fileId] = nextFile;
+    }
+  }
+
+  return delta;
+};
+
+export const UIOptions = {
+  canvasActions: {
+    saveToActiveFile: false,
+    loadScene: false,
+    export: { saveFileToDisk: false },
+    toggleTheme: true,
+  },
+};
+
+export const getInitialsFromName = (name: string): string => {
+  const trimmed = name.trim();
+  if (!trimmed) return 'U';
+  const parts = trimmed.split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+  }
+  return trimmed.slice(0, 2).toUpperCase();
+};
+
+export const getColorFromString = (str: string): string => {
+  const COLORS = [
+    "#ef4444", "#f97316", "#f59e0b", "#84cc16", "#22c55e", "#10b981",
+    "#14b8a6", "#06b6d4", "#0ea5e9", "#3b82f6", "#6366f1", "#8b5cf6",
+    "#a855f7", "#d946ef", "#ec4899", "#f43f5e",
+  ];
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return COLORS[Math.abs(hash) % COLORS.length];
+};