cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

♻️ refactor: use custom toast component and handle error

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-29 09:21:28 +07:00
parent 075cec58e5
commit f08081932c
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
1 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
packages/frontend/src/components/projects/create/ProjectRepoCard/ProjectRepoCard.tsx
View File

@ -1,5 +1,4 @@
import React, { useCallback } from 'react'; import React, { useCallback, useState } from 'react';
import toast from 'react-hot-toast';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { Spinner } from '@material-tailwind/react'; import { Spinner } from '@material-tailwind/react';
@ -13,6 +12,7 @@ import {
LockIcon, LockIcon,
} from 'components/shared/CustomIcon'; } from 'components/shared/CustomIcon';
import { Button } from 'components/shared/Button'; import { Button } from 'components/shared/Button';
import { useToast } from 'components/shared/Toast';
interface ProjectRepoCardProps { interface ProjectRepoCardProps {
repository: GitRepositoryDetails; repository: GitRepositoryDetails;
@ -23,32 +23,52 @@ export const ProjectRepoCard: React.FC<ProjectRepoCardProps> = ({
}) => { }) => {
const client = useGQLClient(); const client = useGQLClient();
const navigate = useNavigate(); const navigate = useNavigate();
const [isLoading, setIsLoading] = React.useState(false); const [isLoading, setIsLoading] = useState(false);
const { orgSlug } = useParams(); const { orgSlug } = useParams();
const { toast, dismiss } = useToast();
const createProject = useCallback(async () => { const createProject = useCallback(async () => {
if (!repository) { if (!repository || !orgSlug) {
return; return toast({
id: 'missing-repository-or-org-slug',
title: 'Repository or organization slug is missing',
variant: 'error',
onDismiss: dismiss,
});
} }
setIsLoading(true); try {
const { addProject } = await client.addProject(orgSlug!, { setIsLoading(true);
name: `${repository.owner!.login}-${repository.name}`, const { addProject } = await client.addProject(orgSlug, {
prodBranch: repository.default_branch!, name: `${repository.owner?.login}-${repository.name}`,
repository: repository.full_name, prodBranch: repository.default_branch as string,
// TODO: Compute template from repo repository: repository.full_name,
template: 'webapp', // TODO: Compute template from repo
}); template: 'webapp',
});
if (Boolean(addProject)) { if (addProject) {
navigate(`import?projectId=${addProject.id}`);
} else {
toast({
id: 'failed-to-create-project',
title: 'Failed to create project',
variant: 'error',
onDismiss: dismiss,
});
}
} catch (error) {
console.error(error);
toast({
id: 'failed-to-create-project',
title: 'Failed to create project',
variant: 'error',
onDismiss: dismiss,
});
} finally {
setIsLoading(false); setIsLoading(false);
navigate(`import?projectId=${addProject.id}`);
} else {
setIsLoading(false);
toast.error('Failed to create project');
} }
}, [client, repository]); }, [client, repository, orgSlug, setIsLoading, navigate, toast]);
return ( return (
<div <div