Managing Collections

import { useCollections } from "@sublay/react-js";

function CollectionsPanel() {
  const {
    currentCollection,
    subCollections,
    loading,
    openCollection,
    goBack,
    goToRoot,
    createCollection,
    updateCollection,
    deleteCollection,
    addToCollection,
    removeFromCollection,
  } = useCollections();

  if (loading) return <p>Loading...</p>;
  if (!currentCollection) return null;

  return (
    <div>
      <h2>{currentCollection.name}</h2>
      <ul>
        {subCollections.map((col) => (
          <li key={col.id} onClick={() => openCollection(col)}>
            {col.name} ({col.entityCount} items)
          </li>
        ))}
      </ul>
      {currentCollection.parentId && (
        <button onClick={goBack}>Back</button>
      )}
    </div>
  );
}

// Navigate into a sub-collection
openCollection(subCollection);

// Go up one level
goBack();

// Jump back to the root
goToRoot();

await createCollection({ collectionName: "To Read" });

await updateCollection({
  collectionId: collection.id,
  update: { name: "New Name" },
});

await deleteCollection({ collection });

// Save entity to the currently viewed collection
await addToCollection({ entityId: entity.id });

// Remove entity from the currently viewed collection
await removeFromCollection({ entityId: entity.id });

const result = await isEntitySaved({ entityId: entity.id });
// result.saved — true if saved in any collection
// result.collections — list of { id, name } for each collection containing it

const specificResult = await isEntitySaved({ entityId: entity.id, collectionId: collection.id });
// specificResult.inSpecificCollection — true if in that specific collection

import { useCollectionEntitiesWrapper } from "@sublay/react-js";

function CollectionFeed({ collectionId }) {
  const { entities, loading, hasMore, loadMore } = useCollectionEntitiesWrapper({
    collectionId,
    defaultSortBy: "added",
  });

  return (
    <ul>
      {entities.map((entity) => (
        <li key={entity.id}>{entity.title}</li>
      ))}
      {hasMore && <button onClick={loadMore}>Load more</button>}
    </ul>
  );
}