feat: edit state, help button, loader while login in

This commit is contained in:
Dakshesh Jain 2022-11-24 20:23:50 +05:30
parent 97544c1760
commit b28dbaea30
8 changed files with 83 additions and 57 deletions

View file

@ -22,9 +22,9 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
import type { IState } from "types";
type Props = {
isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
projectId: string;
data?: IState;
handleClose: () => void;
};
const defaultValues: Partial<IState> = {
@ -33,14 +33,9 @@ const defaultValues: Partial<IState> = {
color: "#000000",
};
const CreateUpdateStateModal: React.FC<Props> = ({
isOpen,
setIsOpen,
data,
projectId,
}) => {
const handleClose = () => {
setIsOpen(false);
const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, handleClose }) => {
const onClose = () => {
handleClose();
const timeout = setTimeout(() => {
reset(defaultValues);
clearTimeout(timeout);
@ -70,12 +65,8 @@ const CreateUpdateStateModal: React.FC<Props> = ({
await stateService
.createState(activeWorkspace.slug, projectId, payload)
.then((res) => {
mutate<IState[]>(
STATE_LIST(projectId),
(prevData) => [...(prevData ?? []), res],
false
);
handleClose();
mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false);
onClose();
})
.catch((err) => {
Object.keys(err).map((key) => {
@ -101,7 +92,7 @@ const CreateUpdateStateModal: React.FC<Props> = ({
},
false
);
handleClose();
onClose();
})
.catch((err) => {
Object.keys(err).map((key) => {
@ -115,16 +106,15 @@ const CreateUpdateStateModal: React.FC<Props> = ({
useEffect(() => {
if (data) {
setIsOpen(true);
reset(data);
} else {
reset(defaultValues);
}
}, [data, setIsOpen, reset]);
}, [data, reset]);
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-10" onClose={handleClose}>
<Dialog as="div" className="relative z-10" onClose={onClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
@ -152,10 +142,7 @@ const CreateUpdateStateModal: React.FC<Props> = ({
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<div className="mt-3 sm:mt-5">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
{data ? "Update" : "Create"} State
</Dialog.Title>
<div className="mt-2 space-y-3">
@ -188,8 +175,7 @@ const CreateUpdateStateModal: React.FC<Props> = ({
<span
className="w-4 h-4 ml-2 rounded"
style={{
backgroundColor:
watch("color") ?? "green",
backgroundColor: watch("color") ?? "green",
}}
></span>
)}
@ -214,14 +200,10 @@ const CreateUpdateStateModal: React.FC<Props> = ({
<Controller
name="color"
control={control}
render={({
field: { value, onChange },
}) => (
render={({ field: { value, onChange } }) => (
<TwitterPicker
color={value}
onChange={(value) =>
onChange(value.hex)
}
onChange={(value) => onChange(value.hex)}
/>
)}
/>
@ -245,7 +227,7 @@ const CreateUpdateStateModal: React.FC<Props> = ({
</div>
</div>
<div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
<Button theme="secondary" onClick={handleClose}>
<Button theme="secondary" onClick={onClose}>
Cancel
</Button>
<Button type="submit" disabled={isSubmitting}>