remove dialog on dialog for reservation delete

ettorepuccetti · Dec 28, 2023 · a38a2eb · a38a2eb
1 parent 32c03d0
commit a38a2eb
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 75 deletions.
diff --git a/cypress/components/EventDetailDialog.cy.tsx b/cypress/components/EventDetailDialog.cy.tsx
@@ -55,24 +55,18 @@ it("check base EventDetailDialog", () => {
   );
 
   cy.get("h2").should("contain", "Prenotazione");
-  cy.get("[data-test=event-detail-dialog]").should("be.visible");
+  cy.getByDataTest("event-detail-dialog").should("be.visible");
   // court name
-  cy.get("[data-test=court-name").should(
+  cy.getByDataTest("court-name").should(
     "have.text",
     eventDetailsSingle.getResources()[0]!.title,
   );
   // date
-  cy.get("[data-test=date]")
-    .find("input")
-    .should("have.value", startDate.format("DD/MM/YYYY"));
+  cy.getByDataTest("date").should("have.text", startDate.format("DD/MM/YYYY"));
   // start time
-  cy.get("[data-test=startTime]")
-    .find("input")
-    .should("have.value", startDate.format("HH:mm"));
+  cy.getByDataTest("startTime").should("have.text", startDate.format("HH:mm"));
   // end time
-  cy.get("[data-test=endTime]")
-    .find("input")
-    .should("have.value", endDate.format("HH:mm"));
+  cy.getByDataTest("endTime").should("have.text", endDate.format("HH:mm"));
   //delete button enabled
   cy.get("[data-test=delete-button]").should("be.visible").and("be.enabled");
 });
diff --git a/src/components/CalendarDialog.tsx b/src/components/CalendarDialog.tsx
@@ -17,11 +17,9 @@ export default function CalendarDialog({
       onClose={props.onClose}
       data-test={props.dataTest}
       fullWidth
-      sx={{
-        "& .MuiDialog-container": {
-          "& .MuiPaper-root": {
-            maxWidth: "350px",
-          },
+      PaperProps={{
+        sx: {
+          maxWidth: "350px",
         },
       }}
     >

diff --git a/src/components/CancelRecurrentDialog.tsx b/src/components/CancelRecurrentDialog.tsx
@@ -1,8 +1,7 @@
 import {
   Alert,
+  Box,
   Button,
-  Dialog,
-  DialogActions,
   FormControl,
   FormControlLabel,
   Radio,
@@ -11,7 +10,6 @@ import {
 import React from "react";
 import { useMergedStoreContext } from "~/hooks/useCalendarStoreContext";
 import { useLogger } from "~/utils/logger";
-import DialogLayout from "./DialogLayout";
 
 export default function CancelRecurrentDialog() {
   const logger = useLogger({
@@ -84,56 +82,51 @@ export default function CancelRecurrentDialog() {
     });
   };
 
+  if (!(deleteOpen && !!eventDetails?.extendedProps.recurrentId)) return null;
+
   return (
-    <Dialog
-      data-test="cancel-recurrent-dialog"
-      open={deleteOpen && !!eventDetails?.extendedProps.recurrentId}
-      onClose={() => setDeleteConfirmationOpen(false)}
-    >
-      <DialogLayout title="Cancellazione">
-        <Alert severity="error">
-          Questa prenotazione fa parte di un{"'"}ora fissa. Cosa vuoi
-          cancellare?
-        </Alert>
-        <FormControl>
-          <RadioGroup
-            name="controlled-radio-buttons-group"
-            value={value}
-            onChange={(event) => setValue(event.target.value)}
-          >
-            <FormControlLabel
-              data-test="single"
-              value="single"
-              control={<Radio color="info" />}
-              label="Prenotazione singola"
-              componentsProps={{ typography: { color: "MenuText" } }}
-            />
-            <FormControlLabel
-              data-test="recurrent"
-              value="recurrent"
-              control={<Radio color="info" />}
-              label="Tutte le prenotazioni di questa ora fissa"
-              componentsProps={{ typography: { color: "MenuText" } }}
-            />
-          </RadioGroup>
-        </FormControl>
-        <DialogActions>
-          <Button
-            data-test="cancel-button"
-            onClick={() => setDeleteConfirmationOpen(false)}
-            color="info"
-          >
-            Annulla
-          </Button>
-          <Button
-            data-test="confirm-button"
-            onClick={() => handleConfirmation()}
-            color="error"
-          >
-            Conferma
-          </Button>
-        </DialogActions>
-      </DialogLayout>
-    </Dialog>
+    <Box data-test="cancel-recurrent-dialog">
+      <Alert severity="error">
+        Questa prenotazione fa parte di un{"'"}ora fissa. Cosa vuoi cancellare?
+      </Alert>
+      <FormControl>
+        <RadioGroup
+          name="controlled-radio-buttons-group"
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+        >
+          <FormControlLabel
+            data-test="single"
+            value="single"
+            control={<Radio color="info" />}
+            label="Prenotazione singola"
+            componentsProps={{ typography: { color: "MenuText" } }}
+          />
+          <FormControlLabel
+            data-test="recurrent"
+            value="recurrent"
+            control={<Radio color="info" />}
+            label="Tutte le prenotazioni di questa ora fissa"
+            componentsProps={{ typography: { color: "MenuText" } }}
+          />
+        </RadioGroup>
+      </FormControl>
+      <Box marginTop={2} display={"flex"} justifyContent={"space-evenly"}>
+        <Button
+          data-test="cancel-button"
+          onClick={() => setDeleteConfirmationOpen(false)}
+          color="info"
+        >
+          Annulla
+        </Button>
+        <Button
+          data-test="confirm-button"
+          onClick={() => handleConfirmation()}
+          color="error"
+        >
+          Conferma
+        </Button>
+      </Box>
+    </Box>
   );
 }
diff --git a/src/components/CancelSingleDialog.tsx b/src/components/CancelSingleDialog.tsx
@@ -1,6 +1,6 @@
 import { useMergedStoreContext } from "~/hooks/useCalendarStoreContext";
 import { useLogger } from "~/utils/logger";
-import ConfirmationDialog from "./ConfirmationDialog";
+import ConfirmationInplace from "./ConfirmationInplace";
 
 export default function CancelSingleDialog() {
   const logger = useLogger({
@@ -43,16 +43,15 @@ export default function CancelSingleDialog() {
 
   return (
     <>
-      <ConfirmationDialog
+      <ConfirmationInplace
         data-test="cancel-single-dialog"
         // if the event is recurrent, the delete dialog is handled by CancelRecurrentDialog
         open={
           deleteConfirmationOpen && !eventDetails?.extendedProps.recurrentId
         }
-        title={"Cancellazione"}
         message={"Sei sicuro di voler cancellare la prenotazione?"}
         onConfirm={() => deleteReservation(eventDetails?.id)}
-        onDialogClose={() => setDeleteConfirmationOpen(false)}
+        onCancel={() => setDeleteConfirmationOpen(false)}
       />
     </>
   );

diff --git a/src/components/ConfirmationInplace.tsx b/src/components/ConfirmationInplace.tsx
@@ -0,0 +1,36 @@
+import { Alert, Box, Button } from "@mui/material";
+
+interface ConfirmationProps {
+  open: boolean;
+  message: string;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export default function ConfirmationInplace(props: ConfirmationProps) {
+  const { open, message } = props;
+
+  if (!open) return null;
+
+  return (
+    <Box display={"flex"} flexDirection={"column"}>
+      <Alert severity="error">{message}</Alert>
+      <Box marginTop={2} display={"flex"} justifyContent={"space-evenly"}>
+        <Button
+          data-test="cancel-button"
+          onClick={() => props.onCancel()}
+          color="info"
+        >
+          Annulla
+        </Button>
+        <Button
+          data-test="confirm-button"
+          onClick={() => props.onConfirm()}
+          color="error"
+        >
+          Conferma
+        </Button>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/components/EventDetailDialog.tsx b/src/components/EventDetailDialog.tsx
@@ -18,6 +18,9 @@ export default function EventDetailDialog() {
   const setDeleteConfirmationOpen = useMergedStoreContext(
     (state) => state.setDeleteConfirmationOpen,
   );
+  const deleteConfirmationOpen = useMergedStoreContext(
+    (store) => store.deleteConfirmationOpen,
+  );
 
   /**
    * Check if the user is the admin (can delete every reservation) or the owner of the reservation
@@ -48,7 +51,10 @@ export default function EventDetailDialog() {
       <CalendarDialog
         dataTest="event-detail-dialog"
         open={eventDetails !== null}
-        onClose={() => setEventDetails(null)}
+        onClose={() => {
+          setEventDetails(null);
+          setDeleteConfirmationOpen(false);
+        }}
         title="Prenotazione"
       >
         <DialogFieldGrid
@@ -89,7 +95,7 @@ export default function EventDetailDialog() {
           )}
 
         {/* delete button */}
-        {canDelete && (
+        {canDelete && !deleteConfirmationOpen && (
           <Button
             onClick={() => setDeleteConfirmationOpen(true)}
             color={"error"}