Use collection entities

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

function SavedFeed({ collectionId }) {
  const {
    entities,
    loading,
    hasMore,
    sortBy,
    setSortBy,
    loadMore,
    refetch,
  } = useCollectionEntitiesWrapper({
    collectionId,
    defaultSortBy: "added",
    defaultSortDir: "desc",
    limit: 20,
  });

  return (
    <div>
      <select value={sortBy} onChange={(e) => setSortBy(e.target.value as any)}>
        <option value="added">Recently Added</option>
        <option value="new">Newest</option>
        <option value="top">Top Voted</option>
      </select>
      <ul>
        {entities.map((entity) => (
          <li key={entity.id}>{entity.title}</li>
        ))}
      </ul>
      {hasMore && (
        <button onClick={loadMore} disabled={loading}>
          Load more
        </button>
      )}
    </div>
  );
}