import React, { Fragment } from "react";
import type { FunctionComponent } from "react";
import type { BuildMainContainerChildProps } from "./BuildMainContainer";
import { useResource } from "@ldo/solid-react";
import { MediaPost } from "../media/MediaPost";
import { UploadButton } from "./UploadButton";

export const Dashboard: FunctionComponent<BuildMainContainerChildProps> = ({
  mainContainerUri,
}) => {
  const mainContainer = useResource(mainContainerUri);
  if (mainContainer.isDoingInitialFetch()) {
    return <p>Loading Main Container</p>;
  }

  return (
    <div>
      <div>
        <UploadButton mainContainer={mainContainer} />
      </div>
      <hr />
      {mainContainer.children().map((child) => (
        <Fragment key={child.uri}>
          <MediaPost uri={child.uri} />
          <hr />
        </Fragment>
      ))}
    </div>
  );
};