Function Collection

data-browser/src/views/CollectionPage.tsx:47–225

A View for collections. Contains logic for switching between various views.

({ resource }: ResourcePageProps)

/** A View for collections. Contains logic for switching between various views. */
function Collection({ resource }: ResourcePageProps): JSX.Element {
  const title = useTitle(resource);
  const [description] = useString(resource, properties.description);
  const viewportWidth = useViewport();
  // If a user is on a smaller screen, it's probably best to show a Cardlist
  const defaultView = viewportWidth < 700 ? 0 : 1;
  const [displayStyleIndex, setDisplayStyle] = useLocalStorage(
    'CollectionDisplayStyle',
    defaultView,
  );
  const [members] = useArray(resource, properties.collection.members);
  const [valueFilter] = useString(resource, properties.collection.value);
  const [propertyFilter] = useString(resource, properties.collection.property);
  // We use the currentPage and totalpages from the Collection Resource itself - not the query param. This gives us a default value.
  const [currentPage] = useNumber(resource, properties.collection.currentPage);
  const [totalPages] = useNumber(resource, properties.collection.totalPages);
  // Query parameters for Collections
  const [, setPage] = useSubjectParam('current_page');
  const [sortBy, setSortBy] = useSubjectParam('sort_by');

  // We kind of assume here that all Collections will be filtered by an `is-a` prop and `Class` value.
  // But we can also have a collection of thing that share the same creator.
  // If that happens, we need a different approach to rendering the Headers
  const classResource = useResource(valueFilter);
  const [requiredProps] = useArray(classResource, properties.requires);
  const [recommendedProps] = useArray(classResource, properties.recommends);
  const propsArrayFull = requiredProps.concat(recommendedProps);

  // Info about the current Class
  const [classDescription] = useString(classResource, properties.description);
  const [classTitle] = useString(classResource, properties.shortname);
  const [showClassDescription, setShowClassDescription] = React.useState(false);

  const isClass = valueFilter && propertyFilter == properties.isA;

  const store = useStore();

  React.useEffect(() => {
    // Always refresh the collection when opening this page.
    // We don't have cool collection invalidation yet.
    store.fetchResource(resource.getSubject());
  }, []);

  function handleToggleView() {
    setDisplayStyle(getNextDisplayStyleIndex());
  }

  function getNextDisplayStyleIndex() {
    let newIndex = displayStyleIndex + 1;
    if (newIndex >= displayStyles.length) {
      newIndex = 0;
    }
    return newIndex;
  }

  function handlePrevPage() {
    if (currentPage !== 0) {
      setPage(currentPage - 1);