webstudio/ui/src/features/select_project/presentation/select_project.tsx

40 lines
1.4 KiB
TypeScript

import * as React from "react";
import { observer } from "mobx-react-lite";
import { LoadPage } from "../../../core/ui/pages/load_page";
import { CreateProjectScreenPath } from "../../create_project/create_project_screen";
import { SelectProjectStore } from "./select_project_store";
import { useNavigate } from "react-router-dom";
import { CreateProjectInstancePath } from "../../create_project_instance/create_project_instance";
import { Button } from "antd";
export const SelectProjectScreenPath = "/select_project";
export const SelectProjectScreen: React.FunctionComponent = observer(() => {
const [selectProjectStore] = React.useState(() => new SelectProjectStore());
const navigate = useNavigate();
React.useEffect(() => {
selectProjectStore.init();
}, [selectProjectStore, navigate]);
return (
<>
<LoadPage
path={CreateProjectScreenPath}
largeText={"Select project"}
minText={"add new project?"}
isLoading={selectProjectStore.isLoading}
isError={selectProjectStore.errors.isNotEmpty()}
children={selectProjectStore.projects.map((el) => {
return (
<>
<div>{el.description}</div>
<div>
<Button onClick={() => navigate(CreateProjectInstancePath + el._id)}>create instance</Button>
</div>
</>
);
})}
/>
</>
);
});