From 625f735a8a67c4a73315b42ae82883d205a80a88 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Thu, 13 Oct 2022 13:04:22 +1100
Subject: [PATCH] fix ConfirmDialog state persisting

---
 src/atoms/projectScope/ui.ts     |   3 +-
 src/components/ConfirmDialog.tsx | 111 ++++++++++++++++---------------
 2 files changed, 59 insertions(+), 55 deletions(-)

diff --git a/src/atoms/projectScope/ui.ts b/src/atoms/projectScope/ui.ts
index 9d7c8281..6d1abbc1 100644
--- a/src/atoms/projectScope/ui.ts
+++ b/src/atoms/projectScope/ui.ts
@@ -59,9 +59,8 @@ export type ConfirmDialogProps = {
  */
 export const confirmDialogAtom = atom(
   { open: false } as ConfirmDialogProps,
-  (get, set, update: Partial<ConfirmDialogProps>) => {
+  (_, set, update: Partial<ConfirmDialogProps>) => {
     set(confirmDialogAtom, {
-      ...get(confirmDialogAtom),
       open: true, // Don’t require this to be set explicitly
       ...update,
     });
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
index 5bb298ef..e9e210df 100644
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -10,6 +10,7 @@ import {
   TextField,
   Button,
 } from "@mui/material";
+import MemoizedText from "@src/components/Modal/MemoizedText";
 
 import { projectScope, confirmDialogAtom } from "@src/atoms/projectScope";
 
@@ -63,62 +64,66 @@ export default function ConfirmDialog({
       maxWidth={maxWidth}
       sx={{ cursor: "default", zIndex: (theme) => theme.zIndex.modal + 50 }}
     >
-      <DialogTitle>{title}</DialogTitle>
+      <MemoizedText>
+        <>
+          <DialogTitle>{title}</DialogTitle>
 
-      <DialogContent>
-        {typeof body === "string" ? (
-          <DialogContentText>{body}</DialogContentText>
-        ) : (
-          body
-        )}
-        {confirmationCommand && (
-          <TextField
-            value={dryText}
-            onChange={(e) => setDryText(e.target.value)}
-            autoFocus
-            label={`Type “${confirmationCommand}” below to continue:`}
-            placeholder={confirmationCommand}
-            fullWidth
-            id="dryText"
-            sx={{ mt: 3 }}
-          />
-        )}
-      </DialogContent>
+          <DialogContent>
+            {typeof body === "string" ? (
+              <DialogContentText>{body}</DialogContentText>
+            ) : (
+              body
+            )}
+            {confirmationCommand && (
+              <TextField
+                value={dryText}
+                onChange={(e) => setDryText(e.target.value)}
+                autoFocus
+                label={`Type “${confirmationCommand}” below to continue:`}
+                placeholder={confirmationCommand}
+                fullWidth
+                id="dryText"
+                sx={{ mt: 3 }}
+              />
+            )}
+          </DialogContent>
 
-      <DialogActions
-        sx={[
-          buttonLayout === "vertical" && {
-            flexDirection: "column",
-            alignItems: "stretch",
-            "& > :not(:first-of-type)": { ml: 0, mt: 1 },
-          },
-        ]}
-      >
-        {!hideCancel && (
-          <Button
-            onClick={() => {
-              if (handleCancel) handleCancel();
-              handleClose();
-            }}
+          <DialogActions
+            sx={[
+              buttonLayout === "vertical" && {
+                flexDirection: "column",
+                alignItems: "stretch",
+                "& > :not(:first-of-type)": { ml: 0, mt: 1 },
+              },
+            ]}
           >
-            {cancel}
-          </Button>
-        )}
-        <Button
-          onClick={() => {
-            if (handleConfirm) handleConfirm();
-            handleClose();
-          }}
-          color={confirmColor || "primary"}
-          variant="contained"
-          autoFocus
-          disabled={
-            confirmationCommand ? dryText !== confirmationCommand : false
-          }
-        >
-          {confirm}
-        </Button>
-      </DialogActions>
+            {!hideCancel && (
+              <Button
+                onClick={() => {
+                  if (handleCancel) handleCancel();
+                  handleClose();
+                }}
+              >
+                {cancel}
+              </Button>
+            )}
+            <Button
+              onClick={() => {
+                if (handleConfirm) handleConfirm();
+                handleClose();
+              }}
+              color={confirmColor || "primary"}
+              variant="contained"
+              autoFocus
+              disabled={
+                confirmationCommand ? dryText !== confirmationCommand : false
+              }
+            >
+              {confirm}
+            </Button>
+          </DialogActions>
+        </>
+      </MemoizedText>
     </Dialog>
   );
 }