From f32ebd6f97d8b2a493e59481be95465045cb1ee5 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 3 May 2022 17:45:27 +0530
Subject: [PATCH] refactor and update message dialog

---
 src/components/Collections/AllCollections.tsx |   2 +-
 .../Collections/CollectionNamer.tsx           |   2 +-
 src/components/MessageDialog.tsx              | 133 ------------------
 .../MessageDialog/TitleWithCloseButton.tsx    |  28 ++++
 src/components/MessageDialog/index.tsx        | 113 +++++++++++++++
 5 files changed, 143 insertions(+), 135 deletions(-)
 delete mode 100644 src/components/MessageDialog.tsx
 create mode 100644 src/components/MessageDialog/TitleWithCloseButton.tsx
 create mode 100644 src/components/MessageDialog/index.tsx

diff --git a/src/components/Collections/AllCollections.tsx b/src/components/Collections/AllCollections.tsx
index 379384fb9..d35b02327 100644
--- a/src/components/Collections/AllCollections.tsx
+++ b/src/components/Collections/AllCollections.tsx
@@ -17,7 +17,6 @@ import CollectionCard from './CollectionCard';
 import Divider from '@mui/material/Divider';
 import CollectionSort from 'components/pages/gallery/CollectionSort';
 import { CollectionType, COLLECTION_SORT_BY } from 'constants/collection';
-import { DialogTitleWithCloseButton } from 'components/MessageDialog';
 import { sortCollectionSummaries } from 'services/collectionService';
 import {
     Transition,
@@ -25,6 +24,7 @@ import {
 } from 'components/Collections/FloatingDrawer';
 import { useLocalState } from 'hooks/useLocalState';
 import { LS_KEYS } from 'utils/storage/localStorage';
+import DialogTitleWithCloseButton from 'components/MessageDialog/TitleWithCloseButton';
 
 const LeftSlideTransition = Transition('up');
 
diff --git a/src/components/Collections/CollectionNamer.tsx b/src/components/Collections/CollectionNamer.tsx
index cc9a921e3..e692e1b6c 100644
--- a/src/components/Collections/CollectionNamer.tsx
+++ b/src/components/Collections/CollectionNamer.tsx
@@ -4,7 +4,7 @@ import constants from 'utils/strings/constants';
 import SubmitButton from 'components/SubmitButton';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
-import { DialogTitleWithCloseButton } from 'components/MessageDialog';
+import DialogTitleWithCloseButton from 'components/MessageDialog/TitleWithCloseButton';
 
 export interface CollectionNamerAttributes {
     callback: (name) => void;
diff --git a/src/components/MessageDialog.tsx b/src/components/MessageDialog.tsx
deleted file mode 100644
index 39e4d99c5..000000000
--- a/src/components/MessageDialog.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import DialogTitle from '@mui/material/DialogTitle';
-import IconButton from '@mui/material/IconButton';
-import React from 'react';
-import constants from 'utils/strings/constants';
-import CloseIcon from '@mui/icons-material/Close';
-import {
-    Breakpoint,
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    Divider,
-} from '@mui/material';
-
-export type ButtonColors =
-    | 'inherit'
-    | 'secondary'
-    | 'primary'
-    | 'success'
-    | 'error'
-    | 'info'
-    | 'warning'
-    | 'danger';
-export interface MessageAttributes {
-    title?: string;
-    staticBackdrop?: boolean;
-    nonClosable?: boolean;
-    content?: any;
-    close?: { text?: string; variant?: ButtonColors; action?: () => void };
-    proceed?: {
-        text: string;
-        action: () => void;
-        variant: ButtonColors;
-        disabled?: boolean;
-    };
-}
-
-export type SetDialogMessage = React.Dispatch<
-    React.SetStateAction<MessageAttributes>
->;
-type Props = React.PropsWithChildren<{
-    show: boolean;
-    onHide: () => void;
-    attributes: MessageAttributes;
-    size?: Breakpoint;
-}>;
-
-export const DialogTitleWithCloseButton = (props) => {
-    const { children, onClose, ...other } = props;
-
-    return (
-        <DialogTitle sx={{ m: 0, p: 2 }} {...other}>
-            {children}
-            {onClose ? (
-                <IconButton
-                    aria-label="close"
-                    onClick={onClose}
-                    sx={{
-                        position: 'absolute',
-                        right: 8,
-                        top: 8,
-                        color: (theme) => theme.palette.grey[400],
-                    }}>
-                    <CloseIcon />
-                </IconButton>
-            ) : null}
-        </DialogTitle>
-    );
-};
-
-export default function MessageDialog({
-    attributes,
-    children,
-    ...props
-}: Props) {
-    if (!attributes) {
-        return <></>;
-    }
-
-    return (
-        <Dialog open={props.show} maxWidth={props.size} onClose={props.onHide}>
-            {attributes.title && (
-                <>
-                    <DialogTitleWithCloseButton
-                        onClose={
-                            attributes.nonClosable ? () => null : props.onHide
-                        }>
-                        {attributes.title}
-                    </DialogTitleWithCloseButton>
-                    <Divider />
-                </>
-            )}
-            {(children || attributes?.content) && (
-                <DialogContent>
-                    {children || (
-                        <DialogContentText>
-                            {attributes.content}
-                        </DialogContentText>
-                    )}
-                </DialogContent>
-            )}
-            {(attributes.close || attributes.proceed) && (
-                <DialogActions sx={{ m: '10px 10px' }}>
-                    {attributes.close && (
-                        <Button
-                            variant="outlined"
-                            color={attributes.close?.variant ?? 'secondary'}
-                            onClick={() => {
-                                attributes.close.action &&
-                                    attributes.close?.action();
-                                props.onHide();
-                            }}>
-                            {attributes.close?.text ?? constants.OK}
-                        </Button>
-                    )}
-                    {attributes.proceed && (
-                        <Button
-                            variant="outlined"
-                            color={attributes.proceed?.variant ?? 'primary'}
-                            onClick={() => {
-                                attributes.proceed.action();
-                                props.onHide();
-                            }}
-                            disabled={attributes.proceed.disabled}>
-                            {attributes.proceed.text}
-                        </Button>
-                    )}
-                </DialogActions>
-            )}
-        </Dialog>
-    );
-}
diff --git a/src/components/MessageDialog/TitleWithCloseButton.tsx b/src/components/MessageDialog/TitleWithCloseButton.tsx
new file mode 100644
index 000000000..c9f0c6373
--- /dev/null
+++ b/src/components/MessageDialog/TitleWithCloseButton.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { DialogTitle, IconButton } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+const DialogTitleWithCloseButton = (props) => {
+    const { children, onClose, ...other } = props;
+
+    return (
+        <DialogTitle sx={{ m: 0, p: 2 }} {...other}>
+            {children}
+            {onClose ? (
+                <IconButton
+                    aria-label="close"
+                    onClick={onClose}
+                    sx={{
+                        position: 'absolute',
+                        right: 8,
+                        top: 8,
+                        color: (theme) => theme.palette.grey[400],
+                    }}>
+                    <CloseIcon />
+                </IconButton>
+            ) : null}
+        </DialogTitle>
+    );
+};
+
+export default DialogTitleWithCloseButton;
diff --git a/src/components/MessageDialog/index.tsx b/src/components/MessageDialog/index.tsx
new file mode 100644
index 000000000..d9a478936
--- /dev/null
+++ b/src/components/MessageDialog/index.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import constants from 'utils/strings/constants';
+import {
+    Breakpoint,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle,
+} from '@mui/material';
+
+export type ButtonColors =
+    | 'inherit'
+    | 'secondary'
+    | 'primary'
+    | 'success'
+    | 'error'
+    | 'info'
+    | 'warning'
+    | 'danger';
+
+export interface MessageAttributes {
+    title?: string;
+    staticBackdrop?: boolean;
+    nonClosable?: boolean;
+    content?: any;
+    close?: { text?: string; variant?: ButtonColors; action?: () => void };
+    proceed?: {
+        text: string;
+        action: () => void;
+        variant: ButtonColors;
+        disabled?: boolean;
+    };
+}
+
+export type SetDialogMessage = React.Dispatch<
+    React.SetStateAction<MessageAttributes>
+>;
+type Props = React.PropsWithChildren<{
+    show: boolean;
+    onHide: () => void;
+    attributes: MessageAttributes;
+    size?: Breakpoint;
+}>;
+
+export default function MessageDialog({
+    attributes,
+    children,
+    ...props
+}: Props) {
+    if (!attributes) {
+        return <></>;
+    }
+
+    return (
+        <Dialog
+            open={props.show}
+            maxWidth={props.size}
+            PaperProps={{ sx: { py: 4, px: 3 } }}
+            onClose={!attributes.nonClosable && props.onHide}>
+            {attributes.title && (
+                <DialogTitle
+                    sx={{
+                        p: 0,
+                        pb: 2,
+                        fontSize: (theme) => theme.typography.h5,
+                    }}>
+                    {attributes.title}
+                </DialogTitle>
+            )}
+            {(children || attributes?.content) && (
+                <DialogContent sx={{ p: 0, pb: 8 }}>
+                    {children || (
+                        <DialogContentText>
+                            {attributes.content}
+                        </DialogContentText>
+                    )}
+                </DialogContent>
+            )}
+            {(attributes.close || attributes.proceed) && (
+                <DialogActions sx={{ p: 0 }}>
+                    <>
+                        {attributes.close && (
+                            <Button
+                                variant="contained"
+                                color={attributes.close?.variant ?? 'secondary'}
+                                onClick={() => {
+                                    attributes.close.action &&
+                                        attributes.close?.action();
+                                    props.onHide();
+                                }}>
+                                {attributes.close?.text ?? constants.OK}
+                            </Button>
+                        )}
+                        {attributes.proceed && (
+                            <Button
+                                variant="contained"
+                                color={attributes.proceed?.variant ?? 'primary'}
+                                onClick={() => {
+                                    attributes.proceed.action();
+                                    props.onHide();
+                                }}
+                                disabled={attributes.proceed.disabled}>
+                                {attributes.proceed.text}
+                            </Button>
+                        )}
+                    </>
+                </DialogActions>
+            )}
+        </Dialog>
+    );
+}