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

41 lines
1.4 KiB
TypeScript
Raw Normal View History

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