webstudio/ui/src/features/all_projects/presentation/all_projects_screen.tsx

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";
import { useNavigate } from "react-router-dom";
import { Button } from "antd";
import { PipelineInstanceScreenPath } from "../../pipeline_instance_main_screen/pipeline_instance_screen";

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

  React.useEffect(() => {
    allProjectStore.init();
  }, [allProjectStore]);

  return (
    <>
      <LoadPage
        largeText={"Projects"}
        needBackButton={false}
        minText="create project?"
        path={SelectProjectScreenPath}
        isError={allProjectStore.isError}
        isLoading={allProjectStore.isLoading}
        children={
          <div>
            <h1>Projects</h1>
            <h5 style={{ backgroundColor: "ButtonShadow" }}>
              <Button
                onClick={() => {
                  navigate(PipelineInstanceScreenPath + allProjectStore.activePipeline?.projectUUID ?? "");
                }}
              >
                Project main panel
              </Button>
              {allProjectStore.activePipeline?.projectUUID ?? "loading"}
            </h5>
            {allProjectStore.projectsModels?.map((el) => {
              return (
                <div style={{ margin: "10px", backgroundColor: "Highlight" }}>
                  <Button
                    onClick={() => {
                      allProjectStore.setPipelineActive(el._id ?? "").then(() => {
                        allProjectStore.init();
                        navigate(PipelineInstanceScreenPath + el._id ?? "");
                      });
                    }}
                  >
                    set active project
                  </Button>
                  <div style={{ margin: "10px", display: "contents" }}> {el.description}</div>
                </div>
              );
            })}
          </div>
        }
      />
    </>
  );
});