Add isSaving to editor

This commit is contained in:
Aditya Thakral 2021-04-06 01:16:13 -04:00
parent 39692a0333
commit ae34744c47
1 changed files with 9 additions and 3 deletions

View File

@ -16,6 +16,7 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
const { displayDragDrop } = useDragDrop(); const { displayDragDrop } = useDragDrop();
const { headers } = useAuth(); const { headers } = useAuth();
const [editableLinks, setEditableLinks] = useState<EditableLink[]>(links); const [editableLinks, setEditableLinks] = useState<EditableLink[]>(links);
const [isSaving, setIsSaving] = useState(false);
useEffect(() => { useEffect(() => {
setEditableLinks(links); setEditableLinks(links);
@ -44,6 +45,8 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
]); ]);
const onSubmit = async () => { const onSubmit = async () => {
setIsSaving(true);
const res = await fetch("api/editor/links", { const res = await fetch("api/editor/links", {
method: "POST", method: "POST",
headers: { headers: {
@ -52,8 +55,11 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
}, },
body: JSON.stringify({ links: editableLinks }), body: JSON.stringify({ links: editableLinks }),
}); });
const updatedLinks = await res.json(); const updatedLinks = await res.json();
setLinks(updatedLinks); setLinks(updatedLinks);
setIsSaving(false);
}; };
const onCancel = () => { const onCancel = () => {
@ -110,15 +116,15 @@ const Editor: React.FC<EditorProps> = ({ links, setLinks }) => {
<button <button
className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50" className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
onClick={onSubmit} onClick={onSubmit}
disabled={equal(editableLinks, links)} disabled={isSaving || equal(editableLinks, links)}
> >
Submit {isSaving ? "Saving ..." : "Submit"}
</button> </button>
<div className="mr-4" /> <div className="mr-4" />
<button <button
className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50" className="block flex py-2 items-center justify-center rounded-md bg-purple-600 hover:bg-purple-500 cursor-pointer text-white w-full disabled:opacity-50"
onClick={onCancel} onClick={onCancel}
disabled={equal(editableLinks, links)} disabled={isSaving || equal(editableLinks, links)}
> >
Cancel Cancel
</button> </button>