import { useState, useEffect, useCallback } from "react"; import { X, Plus, Check, Folder } from "lucide-react"; import { getCollections, addItemToCollection, getCollectionsContaining, } from "../api/client"; import { useAuth } from "../context/AuthContext"; import CollectionModal from "./CollectionModal"; export default function AddToCollectionModal({ isOpen, onClose, annotationUri, }) { const { user } = useAuth(); const [collections, setCollections] = useState([]); const [loading, setLoading] = useState(true); const [addingTo, setAddingTo] = useState(null); const [addedTo, setAddedTo] = useState(new Set()); const [createModalOpen, setCreateModalOpen] = useState(false); const [error, setError] = useState(null); const loadCollections = useCallback(async () => { try { setLoading(true); const [data, existingURIs] = await Promise.all([ getCollections(user?.did), annotationUri ? getCollectionsContaining(annotationUri) : [], ]); const items = Array.isArray(data) ? data : data.items || []; setCollections(items); setAddedTo(new Set(existingURIs || [])); } catch (err) { console.error(err); setError("Failed to load collections"); } finally { setLoading(false); } }, [user?.did, annotationUri]); useEffect(() => { if (isOpen && user) { if (!annotationUri) { setLoading(false); return; } loadCollections(); setError(null); } }, [isOpen, user, annotationUri, loadCollections]); const handleAdd = async (collectionUri) => { if (addedTo.has(collectionUri)) return; try { setAddingTo(collectionUri); await addItemToCollection(collectionUri, annotationUri); setAddedTo((prev) => new Set([...prev, collectionUri])); } catch (err) { console.error(err); alert("Failed to add to collection"); } finally { setAddingTo(null); } }; if (!isOpen) return null; return ( <>

e.stopPropagation()} >

Add to Collection

{loading ? (

Loading collections...

) : error ? (

{error}

) : collections.length === 0 ? (

No collections found

Create a collection to start organizing your items.

) : (

{collections.map((col) => { const isAdded = addedTo.has(col.uri); const isAdding = addingTo === col.uri; return ( ); })}

)}

setCreateModalOpen(false)} onSuccess={() => { loadCollections(); }} /> ); }