Space Lists

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

function SpaceDirectory() {
  const {
    spaces,
    loading,
    hasMore,
    fetchSpaces,
    loadMore,
  } = useSpaceList({ listId: "directory" });

  useEffect(() => {
    fetchSpaces({ sortBy: "newest" });
  }, []);

  return (
    <div>
      {spaces.map((space) => (
        <div key={space.id}>{space.name}</div>
      ))}
      {hasMore && (
        <button onClick={loadMore} disabled={loading}>
          Load more
        </button>
      )}
    </div>
  );
}

// Search by name
fetchSpaces({ sortBy: "newest", searchName: "gaming" });

// Search across all fields (name, slug, description)
fetchSpaces({ sortBy: "newest", searchAny: "design" });

// Filter to spaces the current user is a member of
fetchSpaces({ sortBy: "newest", memberOf: true });

// Fetch only child spaces of a parent
fetchSpaces({ sortBy: "newest", parentSpaceId: "parent-space-id" });

// Fetch top-level spaces only
fetchSpaces({ sortBy: "newest", parentSpaceId: null });

const { createSpace, deleteSpace } = useSpaceList({ listId: "my-list" });

// Create a new space and insert it into the list
const newSpace = await createSpace({
  name: "New Community",
  readingPermission: "anyone",
  postingPermission: "members",
  requireJoinApproval: true,
  insertPosition: "first", // or "last"
});

// Delete a space and remove it from the list
await deleteSpace({ spaceId: "space-id" });

const allSpaces = useSpaceList({ listId: "all" });
const mySpaces = useSpaceList({ listId: "my-spaces" });

// Both lists are independent
allSpaces.fetchSpaces({ sortBy: "newest" });
mySpaces.fetchSpaces({ sortBy: "newest", memberOf: true });