make handleDilaogClose handler a util

src/components/DialogBox/base.tsx

@@ -1,4 +1,4 @@
-import { Dialog, styled } from '@mui/material';
+import { Dialog, DialogProps, styled } from '@mui/material';
 
 const DialogBoxBase = styled(Dialog)(({ theme }) => ({
     '& .MuiDialog-paper': {
@@ -28,4 +28,26 @@ DialogBoxBase.defaultProps = {
     maxWidth: 'sm',
 };
 
+export const dialogCloseHandler =
+    ({
+        staticBackdrop,
+        nonClosable,
+        onClose,
+    }: {
+        staticBackdrop?: boolean;
+        nonClosable?: boolean;
+        onClose?: () => void;
+    }): DialogProps['onClose'] =>
+    (_, reason) => {
+        if (nonClosable) {
+            // no-op
+        } else if (staticBackdrop && reason === 'backdropClick') {
+            // no-op
+        } else {
+            if (onClose && typeof onClose === 'function') {
+                onClose();
+            }
+        }
+    };
+
 export default DialogBoxBase;

src/components/DialogBox/index.tsx

@@ -10,7 +10,7 @@ import {
 } from '@mui/material';
 import DialogTitleWithCloseButton from './titleWithCloseButton';
 import MessageText from './messageText';
-import DialogBoxBase from './base';
+import DialogBoxBase, { dialogCloseHandler } from './base';
 import { DialogBoxAttributes } from 'types/dialogBox';
 
 type IProps = React.PropsWithChildren<
@@ -27,15 +27,11 @@ export default function DialogBox({ attributes, children, ...props }: IProps) {
         return <Dialog open={false} />;
     }
 
-    const handleClose: DialogProps['onClose'] = (_, reason) => {
-        if (attributes?.nonClosable) {
-            // no-op
-        } else if (attributes?.staticBackdrop && reason === 'backdropClick') {
-            // no-op
-        } else {
-            props.onClose();
-        }
-    };
+    const handleClose = dialogCloseHandler({
+        staticBackdrop: attributes.staticBackdrop,
+        nonClosable: attributes.nonClosable,
+        onClose: props.onClose,
+    });
 
     return (
         <DialogBoxBase
@@ -45,11 +41,7 @@ export default function DialogBox({ attributes, children, ...props }: IProps) {
             {...props}>
             {attributes.title && (
                 <DialogTitleWithCloseButton
-                    onClose={
-                        !attributes?.nonClosable &&
-                        props.titleCloseButton &&
-                        handleClose
-                    }>
+                    onClose={props.titleCloseButton && handleClose}>
                     {attributes.title}
                 </DialogTitleWithCloseButton>
             )}

src/components/UploadProgress/dialog.tsx

@@ -10,7 +10,7 @@ import { NotUploadSectionHeader } from './styledComponents';
 import { DESKTOP_APP_DOWNLOAD_URL } from 'utils/common';
 import DialogBoxBase from 'components/DialogBox/base';
 export function UploadProgressDialog({
-    handleHideModal,
+    handleClose,
     setExpanded,
     expanded,
     fileProgressStatuses,
@@ -20,15 +20,12 @@ export function UploadProgressDialog({
     ...props
 }) {
     return (
-        <DialogBoxBase
-            maxWidth="xs"
-            open={props.show}
-            onClose={handleHideModal}>
+        <DialogBoxBase maxWidth="xs" open={props.show} onClose={handleClose}>
             <UploadProgressHeader
                 uploadStage={props.uploadStage}
                 setExpanded={setExpanded}
                 expanded={expanded}
-                handleHideModal={handleHideModal}
+                handleClose={handleClose}
                 fileCounter={props.fileCounter}
                 now={props.now}
             />

src/components/UploadProgress/header.tsx

@@ -6,7 +6,7 @@ export function UploadProgressHeader({
     uploadStage,
     setExpanded,
     expanded,
-    handleHideModal,
+    handleClose,
     fileCounter,
     now,
 }) {
@@ -16,7 +16,7 @@ export function UploadProgressHeader({
                 uploadStage={uploadStage}
                 setExpanded={setExpanded}
                 expanded={expanded}
-                handleHideModal={handleHideModal}
+                handleClose={handleClose}
                 fileCounter={fileCounter}
             />
             <UploadProgressBar now={now} uploadStage={uploadStage} />

src/components/UploadProgress/index.tsx

@@ -5,6 +5,7 @@ import React, { useContext, useState } from 'react';
 import constants from 'utils/strings/constants';
 import { FileUploadResults, UPLOAD_STAGES } from 'constants/upload';
 import { AppContext } from 'pages/_app';
+import { dialogCloseHandler } from 'components/DialogBox/base';
 
 interface Props {
     fileCounter;
@@ -56,7 +57,7 @@ export default function UploadProgress(props: Props) {
         sectionInfo = constants.LIVE_PHOTOS_DETECTED;
     }
 
-    function handleHideModal() {
+    function confirmCancelUpload() {
         if (props.uploadStage !== UPLOAD_STAGES.FINISH) {
             appContext.setDialogMessage({
                 title: constants.STOP_UPLOADS_HEADER,
@@ -76,11 +77,17 @@ export default function UploadProgress(props: Props) {
             props.closeModal();
         }
     }
+
+    const handleClose = dialogCloseHandler({
+        staticBackdrop: true,
+        onClose: confirmCancelUpload,
+    });
+
     return (
         <>
             {expanded ? (
                 <UploadProgressDialog
-                    handleHideModal={handleHideModal}
+                    handleClose={handleClose}
                     setExpanded={setExpanded}
                     expanded={expanded}
                     fileProgressStatuses={fileProgressStatuses}
@@ -93,7 +100,7 @@ export default function UploadProgress(props: Props) {
                 <MinimizedUploadProgress
                     setExpanded={setExpanded}
                     expanded={expanded}
-                    handleHideModal={handleHideModal}
+                    handleClose={handleClose}
                     {...props}
                 />
             )}

src/components/UploadProgress/title.tsx

@@ -48,7 +48,7 @@ function UploadProgressSubtitleText(props) {
 export function UploadProgressTitle({
     setExpanded,
     expanded,
-    handleHideModal,
+    handleClose,
     ...props
 }) {
     const toggleExpanded = () => setExpanded((expanded) => !expanded);
@@ -65,7 +65,7 @@ export function UploadProgressTitle({
                         <IconButtonWithBG onClick={toggleExpanded}>
                             {expanded ? <MinimizeIcon /> : <MaximizeIcon />}
                         </IconButtonWithBG>
-                        <IconButtonWithBG onClick={handleHideModal}>
+                        <IconButtonWithBG onClick={handleClose}>
                             <Close />
                         </IconButtonWithBG>
                     </Stack>