Add isSaving to editor
This commit is contained in:
parent
39692a0333
commit
ae34744c47
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue