snowballtools-base/packages/frontend/src/components/projects/project/settings/DeleteProjectDialog.tsx
Nabarun Gogoi 413ed03eb8
Implement organization switcher and use slug in URL (#59)
* Implement dropdown for organizations switcher

* Add dynamic route for organization id

* Update routes for organization slug

* Use organization slug for adding project

* Refactor to fetch organizations at sidebar component

* Update organization switcher based on searched project

* Refactor types in frontend

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>
2024-02-07 18:41:54 +05:30

106 lines
2.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { useCallback } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import toast from 'react-hot-toast';
import { Project } from 'gql-client';
import {
Button,
Dialog,
DialogHeader,
DialogBody,
DialogFooter,
Input,
Typography,
} from '@material-tailwind/react';
import { useGQLClient } from '../../../../context/GQLClientContext';
interface DeleteProjectDialogProp {
open: boolean;
handleOpen: () => void;
project: Project;
}
const DeleteProjectDialog = ({
open,
handleOpen,
project,
}: DeleteProjectDialogProp) => {
const { orgSlug } = useParams();
const navigate = useNavigate();
const client = useGQLClient();
const {
handleSubmit,
register,
formState: { isValid },
} = useForm({
defaultValues: {
projectName: '',
},
});
const deleteProjectHandler = useCallback(async () => {
const { deleteProject } = await client.deleteProject(project.id);
if (deleteProject) {
navigate(`/${orgSlug}`);
} else {
toast.error('Project not deleted');
}
handleOpen();
}, [client, project, handleOpen]);
return (
<Dialog open={open} handler={handleOpen}>
<DialogHeader className="flex justify-between">
<div>Delete project?</div>
<Button
variant="outlined"
onClick={handleOpen}
className="mr-1 rounded-3xl"
>
X
</Button>
</DialogHeader>
<form onSubmit={handleSubmit(deleteProjectHandler)}>
<DialogBody className="flex flex-col gap-2">
<Typography variant="paragraph">
Deleting your project is irreversible. Enter your projects
name&nbsp;
<span className="bg-blue-100 text-blue-700">({project.name})</span>
&nbsp;below to confirm you want to permanently delete it:
</Typography>
<Input
id="input"
crossOrigin={undefined}
{...register('projectName', {
required: 'Project name is required',
validate: (value) => value === project.name,
})}
/>
<Typography variant="small" color="red">
^ Deleting your project is irreversible.
</Typography>
</DialogBody>
<DialogFooter className="flex justify-start">
<Button variant="outlined" onClick={handleOpen} className="mr-1">
Cancel
</Button>
<Button
variant="gradient"
color="red"
type="submit"
disabled={!isValid}
>
Yes, Delete project
</Button>
</DialogFooter>
</form>
</Dialog>
);
};
export default DeleteProjectDialog;