feat: add empty placeholder

This commit is contained in:
steven
2022-10-04 19:52:09 +08:00
parent 572a93c5f0
commit 36947a3711
5 changed files with 70 additions and 16 deletions

View File

@ -27,6 +27,11 @@ const Home: React.FC = () => {
}
Promise.all([workspaceService.fetchWorkspaceList()]).finally(() => {
const workspaceList = workspaceService.getState().workspaceList;
if (workspaceList.length > 0) {
navigate(`/${workspaceList[0].name}`);
return;
}
loadingState.setFinish();
});
}, []);
@ -45,18 +50,23 @@ const Home: React.FC = () => {
<div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
<div className="mb-4 w-full flex flex-row justify-between items-center">
<span className="font-mono text-gray-400">Workspace List</span>
<button
className="text-sm flex flex-row justify-start items-center border px-3 leading-10 rounded-lg cursor-pointer hover:shadow"
onClick={handleCreateWorkspaceButtonClick}
>
<Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
</button>
</div>
{loadingState.isLoading ? (
<div className="py-4 w-full flex flex-row justify-center items-center">
<Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
loading
</div>
) : workspaceList.length === 0 ? (
<div className="w-full flex flex-col justify-center items-center">
<Icon.Frown className="mt-8 w-16 h-auto text-gray-400" />
<p className="mt-4 text-xl text-gray-600">Oops, no workspace.</p>
<button
className="mt-4 text-lg flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
onClick={handleCreateWorkspaceButtonClick}
>
<Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
</button>
</div>
) : (
<WorkspaceListView workspaceList={workspaceList} />
)}
@ -71,6 +81,13 @@ const Home: React.FC = () => {
showCreateWorkspaceDialog: false,
});
}}
onConfirm={(workspace: Workspace) => {
setState({
...state,
showCreateWorkspaceDialog: false,
});
navigate(`/${workspace.name}`);
}}
/>
)}
</>