import * as React from "react";
import { AllProjectStore } from "./all_projects_store";
import { ProjectRepository } from "../data/project_repository";
import { LoadPage } from "../../../core/ui/pages/load_page";
import { observer } from "mobx-react-lite";
import { SelectProjectScreenPath } from "../../select_project/presentation/select_project";

export const AllProjectScreenPath = "/";
 
export const AllProjectScreen: React.FunctionComponent = observer(() => {
  const [allProjectStore] = React.useState(
    () => new AllProjectStore(new ProjectRepository())
  );

  return (
    <>
      <LoadPage
        largeText={"Projects"}
        needBackButton={false}
        minText="create project?"
        path={SelectProjectScreenPath}
        isError={allProjectStore.isError}
        isLoading={allProjectStore.isLoading}
        children={
          <div>
            {allProjectStore.projectsModels?.map((el) => {
              return <div>{el.description}</div>;
            })}
          </div>
        }
      />
    </>
  );
});