Function Data

data-browser/src/routes/DataRoute.tsx:16–110

Renders the data of some Resource

()

/** Renders the data of some Resource */
function Data(): JSX.Element {
  const [subject] = useCurrentSubject();
  const resource = useResource(subject);
  const [textResponse, setTextResponse] = useState(null);
  const [textResponseLoading, setTextResponseLoading] = useState(false);
  const [err, setErr] = useState(null);
  const { agent } = useSettings();
  const store = useStore();

  if (resource.loading) {
    return <ContainerNarrow>Loading {subject}...</ContainerNarrow>;
  }
  if (resource.error) {
    return (
      <ContainerNarrow>
        <ErrorLook>{resource.getError().message}</ErrorLook>
      </ContainerNarrow>
    );
  }

  async function fetchAs(contentType: string) {
    let headers: HeadersInit = new Headers();
    headers.set('Accept', contentType);
    if (agent) {
      headers = await signRequest(subject, agent, headers);
    }
    setTextResponseLoading(true);
    try {
      const resp = await window.fetch(subject, { headers });
      const body = await resp.text();
      setTextResponseLoading(false);
      setTextResponse(body);
      setErr(null);
    } catch (e) {
      setTextResponseLoading(false);
      setErr(e);
    }
  }

  return (
    <ContainerNarrow about={subject}>
      <h1>data view</h1>
      <PropValRow columns>
        <PropertyLabel title='The URL of the resource'>subject:</PropertyLabel>
        <AtomicLink subject={subject}>{subject}</AtomicLink>
      </PropValRow>
      <AllProps resource={resource} editable columns />
      {resource.getCommitBuilder().hasUnsavedChanges() ? (
        <>
          <h2>⚠️ contains uncommitted changes</h2>
          <p>This means that (some) of your local changes are not yet saved.</p>
          {resource.commitError && (
            <ErrMessage>{resource.commitError.message}</ErrMessage>
          )}
          <Button onClick={() => resource.save(store)}>save</Button>
        </>
      ) : null}
      <div>