251208:0010 Backend & Frontend Debug

frontend/components/drawings/list.tsx

@@ -1,9 +1,7 @@
 "use client";
 
-import { Drawing } from "@/types/drawing";
 import { DrawingCard } from "@/components/drawings/card";
-import { drawingApi } from "@/lib/api/drawings";
-import { useEffect, useState } from "react";
+import { useDrawings } from "@/hooks/use-drawing";
 import { Loader2 } from "lucide-react";
 
 interface DrawingListProps {
@@ -11,26 +9,12 @@ interface DrawingListProps {
 }
 
 export function DrawingList({ type }: DrawingListProps) {
-  const [drawings, setDrawings] = useState<Drawing[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: drawings, isLoading, isError } = useDrawings(type, { type });
 
-  useEffect(() => {
-    const fetchDrawings = async () => {
-      setLoading(true);
-      try {
-        const data = await drawingApi.getAll({ type });
-        setDrawings(data);
-      } catch (error) {
-        console.error("Failed to fetch drawings", error);
-      } finally {
-        setLoading(false);
-      }
-    };
+  // Note: The hook handles switching services based on type.
+  // The params { type } might be redundant if getAll doesn't use it, but safe to pass.
 
-    fetchDrawings();
-  }, [type]);
-
-  if (loading) {
+  if (isLoading) {
     return (
       <div className="flex justify-center py-12">
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
@@ -38,7 +22,15 @@ export function DrawingList({ type }: DrawingListProps) {
     );
   }
 
-  if (drawings.length === 0) {
+  if (isError) {
+    return (
+       <div className="text-center py-12 text-red-500">
+         Failed to load drawings.
+       </div>
+    );
+  }
+
+  if (!drawings || drawings.length === 0) {
     return (
       <div className="text-center py-12 text-muted-foreground border rounded-lg border-dashed">
         No drawings found.
@@ -48,8 +40,8 @@ export function DrawingList({ type }: DrawingListProps) {
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6">
-      {drawings.map((drawing) => (
-        <DrawingCard key={drawing.drawing_id} drawing={drawing} />
+      {drawings.map((drawing: any) => (
+        <DrawingCard key={drawing[type === 'CONTRACT' ? 'contract_drawing_id' : 'shop_drawing_id'] || drawing.id || drawing.drawing_id} drawing={drawing} />
       ))}
     </div>
   );