Add loading states to save, update and confirm delete button

jonashonecker · Jul 5, 2024 · c0be27c · c0be27c
1 parent 8e332df
commit c0be27c
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 26 deletions.
diff --git a/frontend/src/components/buttons/ConfirmDeleteButton.tsx b/frontend/src/components/buttons/ConfirmDeleteButton.tsx
@@ -0,0 +1,40 @@
+import { Box, Button, CircularProgress } from "@mui/material";
+
+type DeleteButtonProps = {
+  onClick: () => void;
+  pendingRequest: boolean;
+};
+
+export default function ConfirmDeleteButton({
+  onClick,
+  pendingRequest,
+}: Readonly<DeleteButtonProps>) {
+  return (
+    <Box sx={{ position: "relative" }}>
+      <Button
+        onClick={onClick}
+        color={"error"}
+        variant="contained"
+        size={"small"}
+        disabled={pendingRequest}
+        sx={{
+          fontWeight: "bold",
+        }}
+      >
+        Delete
+      </Button>
+      {pendingRequest && (
+        <CircularProgress
+          size={24}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            marginTop: "-12px",
+            marginLeft: "-12px",
+          }}
+        />
+      )}
+    </Box>
+  );
+}
diff --git a/frontend/src/components/buttons/SaveButton.tsx b/frontend/src/components/buttons/SaveButton.tsx
@@ -1,18 +1,37 @@
-import { Button } from "@mui/material";
+import { Box, Button, CircularProgress } from "@mui/material";
 
 type SaveButtonProps = {
   onClick: () => void;
+  pendingRequest: boolean;
 };
 
-export default function SaveButton({ onClick }: Readonly<SaveButtonProps>) {
+export default function SaveButton({
+  onClick,
+  pendingRequest,
+}: Readonly<SaveButtonProps>) {
   return (
-    <Button
-      onClick={onClick}
-      variant="contained"
-      size={"small"}
-      sx={{ fontWeight: "bold" }}
-    >
-      Save
-    </Button>
+    <Box sx={{ position: "relative" }}>
+      <Button
+        onClick={onClick}
+        variant="contained"
+        size={"small"}
+        disabled={pendingRequest}
+        sx={{ fontWeight: "bold" }}
+      >
+        Save
+      </Button>
+      {pendingRequest && (
+        <CircularProgress
+          size={24}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            marginTop: "-12px",
+            marginLeft: "-12px",
+          }}
+        />
+      )}
+    </Box>
   );
 }
diff --git a/frontend/src/components/buttons/UpdateButton.tsx b/frontend/src/components/buttons/UpdateButton.tsx
@@ -1,20 +1,39 @@
-import { Button } from "@mui/material";
+import { Box, Button, CircularProgress } from "@mui/material";
 
 type UpdateButtonProps = {
   onClick: () => void;
+  pendingRequest: boolean;
 };
 
-export default function UpdateButton({ onClick }: Readonly<UpdateButtonProps>) {
+export default function UpdateButton({
+  onClick,
+  pendingRequest,
+}: Readonly<UpdateButtonProps>) {
   return (
-    <Button
-      onClick={onClick}
-      variant="contained"
-      size={"small"}
-      sx={{
-        fontWeight: "bold",
-      }}
-    >
-      Update
-    </Button>
+    <Box sx={{ position: "relative" }}>
+      <Button
+        onClick={onClick}
+        variant="contained"
+        size={"small"}
+        disabled={pendingRequest}
+        sx={{
+          fontWeight: "bold",
+        }}
+      >
+        Update
+      </Button>
+      {pendingRequest && (
+        <CircularProgress
+          size={24}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            marginTop: "-12px",
+            marginLeft: "-12px",
+          }}
+        />
+      )}
+    </Box>
   );
 }
diff --git a/frontend/src/components/dialogues/ConfirmDeletionDialogue.tsx b/frontend/src/components/dialogues/ConfirmDeletionDialogue.tsx
@@ -7,10 +7,10 @@ import {
 } from "@mui/material";
 import CancelButton from "../buttons/CancelButton.tsx";
 import { Dispatch, SetStateAction } from "react";
-import DeleteButton from "../buttons/DeleteButton.tsx";
 import { SnackbarConfig, SidepanelConfig } from "../../types/Config.ts";
 import { deleteTicket } from "../utils/ApiRequests.tsx";
 import { Ticket } from "../../types/Ticket.ts";
+import ConfirmDeleteButton from "../buttons/ConfirmDeleteButton.tsx";
 
 type ConfirmDeletionDialogueProps = {
   confirmDeletion: boolean;
@@ -20,6 +20,8 @@ type ConfirmDeletionDialogueProps = {
   searchResults: Ticket[] | undefined;
   setSearchResults: Dispatch<SetStateAction<Ticket[] | undefined>>;
   setSnackbarConfig: Dispatch<SetStateAction<SnackbarConfig>>;
+  pendingRequest: boolean;
+  setPendingRequest: Dispatch<SetStateAction<boolean>>;
 };
 
 export default function ConfirmDeletionDialogue({
@@ -30,14 +32,18 @@ export default function ConfirmDeletionDialogue({
   searchResults,
   setSearchResults,
   setSnackbarConfig,
+  pendingRequest,
+  setPendingRequest,
 }: Readonly<ConfirmDeletionDialogueProps>) {
   if (sidePanelConfig.formType !== "UpdateTicket") {
     return;
   }
 
   const handleDelete = () => {
+    setPendingRequest(true);
     deleteTicket(sidePanelConfig.ticket.id)
       .then(() => {
+        setPendingRequest(false);
         setSearchResults(
           searchResults?.filter((ticket) => {
             return ticket.id !== sidePanelConfig.ticket.id;
@@ -52,6 +58,7 @@ export default function ConfirmDeletionDialogue({
         setSidepanelConfig({ ...sidePanelConfig, open: false });
       })
       .catch((error) => {
+        setPendingRequest(false);
         setSnackbarConfig({
           open: true,
           severity: "error",
@@ -79,7 +86,10 @@ export default function ConfirmDeletionDialogue({
       </DialogContent>
       <DialogActions>
         <CancelButton onClick={handleClose} />
-        <DeleteButton onClick={handleDelete} />
+        <ConfirmDeleteButton
+          onClick={handleDelete}
+          pendingRequest={pendingRequest}
+        />
       </DialogActions>
     </Dialog>
   );

diff --git a/frontend/src/components/forms/TicketForm.tsx b/frontend/src/components/forms/TicketForm.tsx
@@ -21,6 +21,8 @@ type TicketFormProps = {
   searchResults: Ticket[] | undefined;
   setSearchResults: Dispatch<SetStateAction<Ticket[] | undefined>>;
   setConfirmDeletion: Dispatch<SetStateAction<boolean>>;
+  pendingRequest: boolean;
+  setPendingRequest: Dispatch<SetStateAction<boolean>>;
 };
 
 export default function TicketForm({
@@ -31,6 +33,8 @@ export default function TicketForm({
   searchResults,
   setSearchResults,
   setConfirmDeletion,
+  pendingRequest,
+  setPendingRequest,
 }: Readonly<TicketFormProps>) {
   const [title, setTitle] = useState<string>("");
   const [titleError, setTitleError] = useState<boolean>(false);
@@ -58,8 +62,10 @@ export default function TicketForm({
     const [isTitleError, isDescriptionError] = validateTitleAndDescription();
 
     if (!isTitleError && !isDescriptionError) {
+      setPendingRequest(true);
       createNewTicket({ title: title, description: description })
         .then(() => {
+          setPendingRequest(false);
           setSnackbarConfig({
             open: true,
             severity: "success",
@@ -68,6 +74,7 @@ export default function TicketForm({
           setSidepanelConfig({ ...sidePanelConfig, open: false });
         })
         .catch((error) => {
+          setPendingRequest(false);
           setSnackbarConfig({
             open: true,
             severity: "error",
@@ -85,11 +92,13 @@ export default function TicketForm({
     }
 
     if (!isTitleError && !isDescriptionError) {
+      setPendingRequest(true);
       updateTicket(sidePanelConfig.ticket.id, {
         title: title,
         description: description,
       })
         .then((response) => {
+          setPendingRequest(false);
           setSearchResults(
             searchResults?.map((ticket) => {
               if (ticket.id === response.data.id) {
@@ -107,6 +116,7 @@ export default function TicketForm({
           setSidepanelConfig({ ...sidePanelConfig, open: false });
         })
         .catch((error) => {
+          setPendingRequest(false);
           setSnackbarConfig({
             open: true,
             severity: "error",
@@ -160,10 +170,10 @@ export default function TicketForm({
         )}
         <CancelButton onClick={cancel} />
         {sidePanelConfig.formType == "NewTicket" && (
-          <SaveButton onClick={save} />
+          <SaveButton onClick={save} pendingRequest={pendingRequest} />
         )}
         {sidePanelConfig.formType == "UpdateTicket" && (
-          <UpdateButton onClick={update} />
+          <UpdateButton onClick={update} pendingRequest={pendingRequest} />
         )}
       </Stack>
     </>

diff --git a/frontend/src/components/pages/MainPage.tsx b/frontend/src/components/pages/MainPage.tsx
@@ -33,6 +33,7 @@ export default function MainPage({
   });
   const [confirmDeletion, setConfirmDeletion] = useState(false);
   const [loadingTickets, setLoadingTickets] = useState(false);
+  const [pendingRequest, setPendingRequest] = useState<boolean>(false);
 
   return (
     <>
@@ -67,6 +68,8 @@ export default function MainPage({
             searchResults={searchResults}
             setSearchResults={setSearchResults}
             setConfirmDeletion={setConfirmDeletion}
+            pendingRequest={pendingRequest}
+            setPendingRequest={setPendingRequest}
           />
         </Container>
       </Sidepanel>
@@ -82,6 +85,8 @@ export default function MainPage({
         searchResults={searchResults}
         setSearchResults={setSearchResults}
         setSnackbarConfig={setSnackbarConfig}
+        pendingRequest={pendingRequest}
+        setPendingRequest={setPendingRequest}
       />
     </>
   );