Function DrivePage

data-browser/src/views/DrivePage.tsx:16–56

A View for Drives, which function similar to a homepage or dashboard.

({ resource }: ResourcePageProps)

/** A View for Drives, which function similar to a homepage or dashboard. */
function DrivePage({ resource }: ResourcePageProps): JSX.Element {
  const title = useTitle(resource);
  const [children] = useArray(resource, properties.children);
  const { baseURL, setBaseURL } = useSettings();

  return (
    <ContainerNarrow about={resource.getSubject()}>
      {baseURL !== resource.getSubject() && (
        <Button onClick={() => setBaseURL(resource.getSubject())}>
          Set as current drive
        </Button>
      )}
      <ValueForm resource={resource} propertyURL={properties.description} />
      <Card>
        <h3>{title} children:</h3>
        <CardInsideFull>
          {children.map(child => {
            return (
              <CardRow key={child}>
                <ResourceInline subject={child} />
              </CardRow>
            );
          })}
          <CardRow>
            <AtomicLink path={paths.new}>
              <FaPlus /> Create new resource
            </AtomicLink>
          </CardRow>
        </CardInsideFull>
      </Card>
      {baseURL.startsWith('http://localhost') && (
        <p>
          You are running Atomic-Server on `localhost`, which means that it will
          not be available from any other machine than your current local
          device. If you want your Atomic-Server to be available from the web,
          you should set this up at a Domain on a server.
        </p>
      )}
    </ContainerNarrow>
  );
}

export default DrivePage;