From 24aa436dd71273e1dca4ea0f0cf8f6729814ac5b Mon Sep 17 00:00:00 2001
From: batabana <36864084+batabana@users.noreply.github.com>
Date: Fri, 31 Mar 2023 17:27:57 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20Modals?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Modal.tsx               | 82 ++++++++++++++++++
 src/components/message/MessageMapModal.tsx    | 85 ++++++-------------
 src/components/message/MessageModalDelete.tsx | 50 +++--------
 .../settings/InactiveSettingsModalForm.tsx    | 62 +++-----------
 .../settings/RefreshIntervalModalForm.tsx     | 62 +++-----------
 src/components/ticker/MastodonModalForm.tsx   | 54 +++---------
 src/components/ticker/TelegramModalForm.tsx   | 54 +++---------
 src/components/ticker/TickerModalDelete.tsx   | 49 +++--------
 src/components/ticker/TickerModalForm.tsx     | 79 +++++------------
 src/components/ticker/TickerResetModal.tsx    | 61 ++++---------
 .../ticker/TickerUserModalDelete.tsx          | 49 +++--------
 src/components/ticker/TickerUsersModal.tsx    | 60 ++++---------
 src/components/user/UserModalDelete.tsx       | 49 +++--------
 src/components/user/UserModalForm.tsx         | 54 +++---------
 14 files changed, 260 insertions(+), 590 deletions(-)
 create mode 100644 src/components/common/Modal.tsx

diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
new file mode 100644
index 00000000..58facc3c
--- /dev/null
+++ b/src/components/common/Modal.tsx
@@ -0,0 +1,82 @@
+import React, { FC, ReactNode } from 'react'
+import {
+  Breakpoint,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  SxProps,
+} from '@mui/material'
+import { Close } from '@mui/icons-material'
+
+interface Props {
+  children: ReactNode
+  dangerActionButtonText?: string
+  dialogContentSx?: SxProps
+  fullWidth?: boolean
+  maxWidth?: Breakpoint
+  onClose: () => void
+  onDangerAction?: () => void
+  onSubmitAction?: () => void
+  open: boolean
+  submitForm?: string
+  title?: string
+}
+
+const Modal: FC<Props> = ({
+  children,
+  dangerActionButtonText,
+  dialogContentSx,
+  fullWidth,
+  maxWidth = 'md',
+  onClose,
+  onDangerAction,
+  onSubmitAction,
+  open,
+  submitForm,
+  title,
+}) => {
+  return (
+    <Dialog fullWidth={fullWidth} maxWidth={maxWidth} open={open}>
+      <DialogTitle>
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="space-between"
+        >
+          {title}
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent sx={dialogContentSx}>{children}</DialogContent>
+      <DialogActions>
+        {submitForm && (
+          <Button
+            color="primary"
+            form={submitForm}
+            onClick={onSubmitAction}
+            type="submit"
+            variant="contained"
+          >
+            Save
+          </Button>
+        )}
+        {onDangerAction && dangerActionButtonText && (
+          <Button color="error" onClick={onDangerAction} variant="contained">
+            {dangerActionButtonText}
+          </Button>
+        )}
+        <Button color="secondary" onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default Modal
diff --git a/src/components/message/MessageMapModal.tsx b/src/components/message/MessageMapModal.tsx
index e9ade0a5..2fe22ac8 100644
--- a/src/components/message/MessageMapModal.tsx
+++ b/src/components/message/MessageMapModal.tsx
@@ -5,16 +5,7 @@ import { EditControl } from 'react-leaflet-draw'
 import { FeatureCollection, Geometry } from 'geojson'
 import { Ticker } from '../../api/Ticker'
 import { leafletOnDataAddFitToBounds } from '../../lib/leafletFitBoundsHelper'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
-import { Close } from '@mui/icons-material'
+import Modal from '../common/Modal'
 
 interface Props {
   open: boolean
@@ -35,10 +26,6 @@ const MessageMapModal: FC<Props> = ({
   const position = latLng(ticker.location.lat, ticker.location.lon)
   const zoom = 7
 
-  const handleClose = () => {
-    onClose()
-  }
-
   const onFeatureGroupUpdate = (ref: FG) => {
     if (ref !== null) {
       setFeatureGroup(ref)
@@ -54,52 +41,32 @@ const MessageMapModal: FC<Props> = ({
   }
 
   return (
-    <Dialog fullWidth maxWidth="md" open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Edit Map
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent sx={{ px: 0 }}>
-        <MapContainer center={position} style={{ height: 600 }} zoom={zoom}>
-          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
-          <GeoJSON
-            data={map}
-            eventHandlers={{
-              add: leafletOnDataAddFitToBounds,
-            }}
+    <Modal
+      dialogContentSx={{ px: 0 }}
+      fullWidth={true}
+      onClose={onClose}
+      onSubmitAction={handleChange}
+      open={open}
+      submitForm="inactiveSettingForm"
+      title="Edit Map"
+    >
+      <MapContainer center={position} style={{ height: 600 }} zoom={zoom}>
+        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+        <GeoJSON
+          data={map}
+          eventHandlers={{
+            add: leafletOnDataAddFitToBounds,
+          }}
+        />
+        <FeatureGroup ref={onFeatureGroupUpdate}>
+          <EditControl
+            draw={{ circle: false, circlemarker: false }}
+            edit={{ featureGroup: featureGroup }}
+            position="topright"
           />
-          <FeatureGroup ref={onFeatureGroupUpdate}>
-            <EditControl
-              draw={{ circle: false, circlemarker: false }}
-              edit={{ featureGroup: featureGroup }}
-              position="topright"
-            />
-          </FeatureGroup>
-        </MapContainer>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          color="primary"
-          form="inactiveSettingForm"
-          onClick={handleChange}
-          type="submit"
-          variant="contained"
-        >
-          Save
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+        </FeatureGroup>
+      </MapContainer>
+    </Modal>
   )
 }
 
diff --git a/src/components/message/MessageModalDelete.tsx b/src/components/message/MessageModalDelete.tsx
index 48861231..e1dd0829 100644
--- a/src/components/message/MessageModalDelete.tsx
+++ b/src/components/message/MessageModalDelete.tsx
@@ -2,16 +2,7 @@ import React, { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { Message, useMessageApi } from '../../api/Message'
 import useAuth from '../useAuth'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
-import { Close } from '@mui/icons-material'
+import Modal from '../common/Modal'
 
 interface Props {
   onClose: () => void
@@ -23,10 +14,6 @@ const MessageModalDelete: FC<Props> = ({ message, onClose, open }) => {
   const { deleteMessage } = useMessageApi(token)
   const queryClient = useQueryClient()
 
-  const handleClose = () => {
-    onClose()
-  }
-
   const handleDelete = useCallback(() => {
     deleteMessage(message).then(() => {
       queryClient.invalidateQueries(['messages', message.ticker])
@@ -35,31 +22,16 @@ const MessageModalDelete: FC<Props> = ({ message, onClose, open }) => {
   }, [deleteMessage, message, onClose, queryClient])
 
   return (
-    <Dialog open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Delete Message
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        Are you sure to delete the message? This action cannot be undone.
-      </DialogContent>
-      <DialogActions>
-        <Button color="error" onClick={handleDelete} variant="contained">
-          Delete
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      dangerActionButtonText="Delete"
+      maxWidth="sm"
+      onClose={onClose}
+      onDangerAction={handleDelete}
+      open={open}
+      title="Delete Message"
+    >
+      Are you sure to delete the message? This action cannot be undone.
+    </Modal>
   )
 }
 
diff --git a/src/components/settings/InactiveSettingsModalForm.tsx b/src/components/settings/InactiveSettingsModalForm.tsx
index 74df2082..25228fd8 100644
--- a/src/components/settings/InactiveSettingsModalForm.tsx
+++ b/src/components/settings/InactiveSettingsModalForm.tsx
@@ -1,16 +1,7 @@
-import { Close } from '@mui/icons-material'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
 import React, { FC } from 'react'
 import { InactiveSetting, Setting } from '../../api/Settings'
 import InactiveSettingsForm from './InactiveSettingsForm'
+import Modal from '../common/Modal'
 
 interface Props {
   open: boolean
@@ -19,45 +10,20 @@ interface Props {
 }
 
 const InactiveSettingsModalForm: FC<Props> = ({ open, onClose, setting }) => {
-  const handleClose = () => {
-    onClose()
-  }
-
   return (
-    <Dialog fullWidth maxWidth="md" open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Edit Inactive Settings
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        <InactiveSettingsForm
-          callback={handleClose}
-          name="inactiveSettingForm"
-          setting={setting}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          color="primary"
-          form="inactiveSettingForm"
-          type="submit"
-          variant="contained"
-        >
-          Save
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      fullWidth={true}
+      onClose={onClose}
+      open={open}
+      submitForm="inactiveSettingForm"
+      title="Edit Inactive Settings"
+    >
+      <InactiveSettingsForm
+        callback={onClose}
+        name="inactiveSettingForm"
+        setting={setting}
+      />
+    </Modal>
   )
 }
 
diff --git a/src/components/settings/RefreshIntervalModalForm.tsx b/src/components/settings/RefreshIntervalModalForm.tsx
index 65a0f189..d54af0ed 100644
--- a/src/components/settings/RefreshIntervalModalForm.tsx
+++ b/src/components/settings/RefreshIntervalModalForm.tsx
@@ -1,16 +1,7 @@
-import { Close } from '@mui/icons-material'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-} from '@mui/material'
-import { Stack } from '@mui/system'
 import React, { FC } from 'react'
 import { Setting } from '../../api/Settings'
 import RefreshIntervalForm from './RefreshIntervalForm'
+import Modal from '../common/Modal'
 
 interface Props {
   open: boolean
@@ -19,45 +10,20 @@ interface Props {
 }
 
 const RefreshIntervalModalForm: FC<Props> = ({ open, onClose, setting }) => {
-  const handleClose = () => {
-    onClose()
-  }
-
   return (
-    <Dialog fullWidth maxWidth="md" open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Edit Refresh Interval
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        <RefreshIntervalForm
-          callback={handleClose}
-          name="refreshIntervalForm"
-          setting={setting}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          color="primary"
-          form="refreshIntervalForm"
-          type="submit"
-          variant="contained"
-        >
-          Save
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      fullWidth={true}
+      onClose={onClose}
+      open={open}
+      submitForm="refreshIntervalForm"
+      title="Edit Refresh Interval"
+    >
+      <RefreshIntervalForm
+        callback={onClose}
+        name="refreshIntervalForm"
+        setting={setting}
+      />
+    </Modal>
   )
 }
 
diff --git a/src/components/ticker/MastodonModalForm.tsx b/src/components/ticker/MastodonModalForm.tsx
index 1a7c27c8..52115dac 100644
--- a/src/components/ticker/MastodonModalForm.tsx
+++ b/src/components/ticker/MastodonModalForm.tsx
@@ -1,16 +1,7 @@
 import React, { FC } from 'react'
-import { Close } from '@mui/icons-material'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
 import { Ticker } from '../../api/Ticker'
 import MastodonForm from './MastodonForm'
+import Modal from '../common/Modal'
 
 interface Props {
   onClose: () => void
@@ -19,41 +10,16 @@ interface Props {
 }
 
 const MastodonModalForm: FC<Props> = ({ onClose, open, ticker }) => {
-  const handleClose = () => {
-    onClose()
-  }
-
   return (
-    <Dialog open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Configure Mastodon
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        <MastodonForm callback={handleClose} ticker={ticker} />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          color="secondary"
-          form="configureMastodon"
-          type="submit"
-          variant="contained"
-        >
-          Save
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      maxWidth="sm"
+      onClose={onClose}
+      open={open}
+      submitForm="configureMastodon"
+      title="Configure Mastodon"
+    >
+      <MastodonForm callback={onClose} ticker={ticker} />
+    </Modal>
   )
 }
 
diff --git a/src/components/ticker/TelegramModalForm.tsx b/src/components/ticker/TelegramModalForm.tsx
index a84043b3..df27239c 100644
--- a/src/components/ticker/TelegramModalForm.tsx
+++ b/src/components/ticker/TelegramModalForm.tsx
@@ -1,16 +1,7 @@
 import React, { FC } from 'react'
-import { Close } from '@mui/icons-material'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
 import { Ticker } from '../../api/Ticker'
 import TelegramForm from './TelegramForm'
+import Modal from '../common/Modal'
 
 interface Props {
   onClose: () => void
@@ -19,41 +10,16 @@ interface Props {
 }
 
 const TelegramModalForm: FC<Props> = ({ onClose, open, ticker }) => {
-  const handleClose = () => {
-    onClose()
-  }
-
   return (
-    <Dialog open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Configure Telegram
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        <TelegramForm callback={handleClose} ticker={ticker} />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          color="secondary"
-          form="configureTelegram"
-          type="submit"
-          variant="contained"
-        >
-          Save
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      maxWidth="sm"
+      onClose={onClose}
+      open={open}
+      submitForm="configureTelegram"
+      title="Configure Telegram"
+    >
+      <TelegramForm callback={onClose} ticker={ticker} />
+    </Modal>
   )
 }
 
diff --git a/src/components/ticker/TickerModalDelete.tsx b/src/components/ticker/TickerModalDelete.tsx
index 0d41984d..48092e6e 100644
--- a/src/components/ticker/TickerModalDelete.tsx
+++ b/src/components/ticker/TickerModalDelete.tsx
@@ -2,16 +2,7 @@ import React, { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
-import { Close } from '@mui/icons-material'
+import Modal from '../common/Modal'
 
 interface Props {
   onClose: () => void
@@ -24,10 +15,6 @@ const TickerModalDelete: FC<Props> = ({ open, onClose, ticker }) => {
   const { deleteTicker } = useTickerApi(token)
   const queryClient = useQueryClient()
 
-  const handleClose = () => {
-    onClose()
-  }
-
   const handleDelete = useCallback(() => {
     deleteTicker(ticker).finally(() => {
       queryClient.invalidateQueries(['tickers'])
@@ -35,31 +22,15 @@ const TickerModalDelete: FC<Props> = ({ open, onClose, ticker }) => {
   }, [deleteTicker, ticker, queryClient])
 
   return (
-    <Dialog maxWidth="md" open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Delete Ticker
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        Are you sure to delete the ticker? This action cannot be undone.
-      </DialogContent>
-      <DialogActions>
-        <Button color="error" onClick={handleDelete} variant="contained">
-          Delete
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      dangerActionButtonText="Delete"
+      onClose={onClose}
+      onDangerAction={handleDelete}
+      open={open}
+      title="Delete Ticker"
+    >
+      Are you sure to delete the ticker? This action cannot be undone.
+    </Modal>
   )
 }
 
diff --git a/src/components/ticker/TickerModalForm.tsx b/src/components/ticker/TickerModalForm.tsx
index 3d3d2cdb..73391234 100644
--- a/src/components/ticker/TickerModalForm.tsx
+++ b/src/components/ticker/TickerModalForm.tsx
@@ -1,20 +1,10 @@
-import { Close } from '@mui/icons-material'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-  Tab,
-  Tabs,
-} from '@mui/material'
+import { Tab, Tabs } from '@mui/material'
 import React, { FC, useState } from 'react'
 import { Ticker } from '../../api/Ticker'
 import TabPanel from '../common/TabPanel'
 import TickerForm from './TickerForm'
 import TickerSocialConnections from './TickerSocialConnections'
+import Modal from '../common/Modal'
 
 interface Props {
   onClose: () => void
@@ -25,58 +15,31 @@ interface Props {
 const TickerModalForm: FC<Props> = ({ onClose, open, ticker }) => {
   const [tabValue, setTabValue] = useState<number>(0)
 
-  const handleClose = () => {
-    onClose()
-  }
-
   const handleTabChange = (e: React.SyntheticEvent, value: number) => {
     setTabValue(value)
   }
 
   return (
-    <Dialog fullWidth maxWidth="md" open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          {ticker ? 'Configure Ticker' : 'Create Ticker'}
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        <Tabs onChange={handleTabChange} value={tabValue}>
-          <Tab label="General" />
-          <Tab disabled={ticker ? false : true} label="Social Connections" />
-        </Tabs>
-        <TabPanel index={0} value={tabValue}>
-          <TickerForm callback={handleClose} id="tickerForm" ticker={ticker} />
+    <Modal
+      fullWidth
+      onClose={onClose}
+      open={open}
+      submitForm={tabValue === 0 ? 'tickerForm' : undefined}
+      title={ticker ? 'Configure Ticker' : 'Create Ticker'}
+    >
+      <Tabs onChange={handleTabChange} value={tabValue}>
+        <Tab label="General" />
+        <Tab disabled={!ticker} label="Social Connections" />
+      </Tabs>
+      <TabPanel index={0} value={tabValue}>
+        <TickerForm callback={onClose} id="tickerForm" ticker={ticker} />
+      </TabPanel>
+      {ticker ? (
+        <TabPanel index={1} value={tabValue}>
+          <TickerSocialConnections ticker={ticker} />
         </TabPanel>
-        {ticker ? (
-          <TabPanel index={1} value={tabValue}>
-            <TickerSocialConnections ticker={ticker} />
-          </TabPanel>
-        ) : null}
-      </DialogContent>
-      <DialogActions>
-        {tabValue === 0 ? (
-          <Button
-            color="primary"
-            form="tickerForm"
-            type="submit"
-            variant="contained"
-          >
-            Save
-          </Button>
-        ) : null}
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+      ) : null}
+    </Modal>
   )
 }
 
diff --git a/src/components/ticker/TickerResetModal.tsx b/src/components/ticker/TickerResetModal.tsx
index 59026ecc..6a195567 100644
--- a/src/components/ticker/TickerResetModal.tsx
+++ b/src/components/ticker/TickerResetModal.tsx
@@ -2,16 +2,7 @@ import React, { FC, useCallback } from 'react'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import useAuth from '../useAuth'
 import { useQueryClient } from '@tanstack/react-query'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
-import { Close } from '@mui/icons-material'
+import Modal from '../common/Modal'
 
 interface Props {
   onClose: () => void
@@ -24,10 +15,6 @@ const TickerResetModal: FC<Props> = ({ onClose, open, ticker }) => {
   const { putTickerReset } = useTickerApi(token)
   const queryClient = useQueryClient()
 
-  const handleClose = () => {
-    onClose()
-  }
-
   const handleReset = useCallback(() => {
     putTickerReset(ticker)
       .then(() => {
@@ -41,37 +28,21 @@ const TickerResetModal: FC<Props> = ({ onClose, open, ticker }) => {
   }, [onClose, putTickerReset, queryClient, ticker])
 
   return (
-    <Dialog open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Reset Ticker
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        <p>
-          <strong>Are you sure you want to reset the ticker?</strong>
-        </p>
-        <p>
-          This will remove all messages, descriptions, the connection to twitter
-          and disable the ticker.
-        </p>
-      </DialogContent>
-      <DialogActions>
-        <Button color="error" onClick={handleReset} variant="contained">
-          Reset
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      dangerActionButtonText="Reset"
+      onClose={onClose}
+      onDangerAction={handleReset}
+      open={open}
+      title="Reset Ticker"
+    >
+      <p>
+        <strong>Are you sure you want to reset the ticker?</strong>
+      </p>
+      <p>
+        This will remove all messages, descriptions, the connection to twitter
+        and disable the ticker.
+      </p>
+    </Modal>
   )
 }
 
diff --git a/src/components/ticker/TickerUserModalDelete.tsx b/src/components/ticker/TickerUserModalDelete.tsx
index 76b69a78..8f59337b 100644
--- a/src/components/ticker/TickerUserModalDelete.tsx
+++ b/src/components/ticker/TickerUserModalDelete.tsx
@@ -3,16 +3,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { Ticker, useTickerApi } from '../../api/Ticker'
 import { User } from '../../api/User'
 import useAuth from '../useAuth'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
-import { Close } from '@mui/icons-material'
+import Modal from '../common/Modal'
 
 interface Props {
   ticker: Ticker
@@ -26,10 +17,6 @@ const TickerUserModalDelete: FC<Props> = ({ open, onClose, ticker, user }) => {
   const { deleteTickerUser } = useTickerApi(token)
   const queryClient = useQueryClient()
 
-  const handleClose = () => {
-    onClose()
-  }
-
   const handleDelete = useCallback(() => {
     deleteTickerUser(ticker, user).finally(() => {
       queryClient.invalidateQueries(['tickerUsers', ticker.id])
@@ -38,31 +25,15 @@ const TickerUserModalDelete: FC<Props> = ({ open, onClose, ticker, user }) => {
   }, [deleteTickerUser, ticker, user, queryClient, onClose])
 
   return (
-    <Dialog maxWidth="md" open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Delete User from Ticker
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        Are you sure to remove <strong>{user.email}</strong> from this ticker?
-      </DialogContent>
-      <DialogActions>
-        <Button color="error" onClick={handleDelete} variant="contained">
-          Delete
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      dangerActionButtonText="Delete"
+      onClose={onClose}
+      onDangerAction={handleDelete}
+      open={open}
+      title="Delete User from Ticker"
+    >
+      Are you sure to remove <strong>{user.email}</strong> from this ticker?
+    </Modal>
   )
 }
 
diff --git a/src/components/ticker/TickerUsersModal.tsx b/src/components/ticker/TickerUsersModal.tsx
index efa8e92a..69a5a80b 100644
--- a/src/components/ticker/TickerUsersModal.tsx
+++ b/src/components/ticker/TickerUsersModal.tsx
@@ -1,17 +1,8 @@
-import { Close } from '@mui/icons-material'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
 import React, { FC } from 'react'
 import { Ticker } from '../../api/Ticker'
 import { User } from '../../api/User'
 import TickerUsersForm from './TickerUsersForm'
+import Modal from '../common/Modal'
 
 interface Props {
   onClose: () => void
@@ -21,41 +12,22 @@ interface Props {
 }
 
 const TickerUsersModal: FC<Props> = ({ onClose, open, ticker, users }) => {
-  const handleClose = () => {
-    onClose()
-  }
-
   return (
-    <Dialog fullWidth maxWidth="md" open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Manage User Access
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        <TickerUsersForm
-          defaultValue={users.map(user => {
-            return user.id
-          })}
-          onSubmit={handleClose}
-          ticker={ticker}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button form="tickerUsersForm" type="submit">
-          Save
-        </Button>
-
-        <Button onClick={handleClose}>Close</Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      fullWidth={true}
+      onClose={onClose}
+      open={open}
+      submitForm="tickerUsersForm"
+      title="Manage User Access"
+    >
+      <TickerUsersForm
+        defaultValue={users.map(user => {
+          return user.id
+        })}
+        onSubmit={onClose}
+        ticker={ticker}
+      />
+    </Modal>
   )
 }
 
diff --git a/src/components/user/UserModalDelete.tsx b/src/components/user/UserModalDelete.tsx
index bd939b70..9fe95491 100644
--- a/src/components/user/UserModalDelete.tsx
+++ b/src/components/user/UserModalDelete.tsx
@@ -2,16 +2,7 @@ import React, { FC, useCallback } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
 import { User, useUserApi } from '../../api/User'
 import useAuth from '../useAuth'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
-import { Close } from '@mui/icons-material'
+import Modal from '../common/Modal'
 
 interface Props {
   onClose: () => void
@@ -24,10 +15,6 @@ const UserModalDelete: FC<Props> = ({ onClose, open, user }) => {
   const { deleteUser } = useUserApi(token)
   const queryClient = useQueryClient()
 
-  const handleClose = () => {
-    onClose()
-  }
-
   const handleDelete = useCallback(() => {
     deleteUser(user).finally(() => {
       queryClient.invalidateQueries(['users'])
@@ -36,31 +23,15 @@ const UserModalDelete: FC<Props> = ({ onClose, open, user }) => {
   }, [deleteUser, user, queryClient, onClose])
 
   return (
-    <Dialog maxWidth="md" open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          Delete User
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        Are you sure to delete the user? This action cannot be undone.
-      </DialogContent>
-      <DialogActions>
-        <Button color="error" onClick={handleDelete} variant="contained">
-          Delete
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      dangerActionButtonText="Delete"
+      onClose={onClose}
+      onDangerAction={handleDelete}
+      open={open}
+      title="Delete User"
+    >
+      Are you sure to delete the user? This action cannot be undone.
+    </Modal>
   )
 }
 
diff --git a/src/components/user/UserModalForm.tsx b/src/components/user/UserModalForm.tsx
index edc2e72e..536c3131 100644
--- a/src/components/user/UserModalForm.tsx
+++ b/src/components/user/UserModalForm.tsx
@@ -1,16 +1,7 @@
 import React, { FC } from 'react'
-import { Close } from '@mui/icons-material'
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-} from '@mui/material'
 import { User } from '../../api/User'
 import UserForm from './UserForm'
+import Modal from '../common/Modal'
 
 interface Props {
   onClose: () => void
@@ -19,41 +10,16 @@ interface Props {
 }
 
 const UserModalForm: FC<Props> = ({ open, onClose, user }) => {
-  const handleClose = () => {
-    onClose()
-  }
-
   return (
-    <Dialog fullWidth maxWidth="md" open={open}>
-      <DialogTitle>
-        <Stack
-          alignItems="center"
-          direction="row"
-          justifyContent="space-between"
-        >
-          {user ? 'Update User' : 'Create User'}
-          <IconButton onClick={handleClose}>
-            <Close />
-          </IconButton>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        <UserForm callback={handleClose} id="userForm" user={user} />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          color="primary"
-          form="userForm"
-          type="submit"
-          variant="contained"
-        >
-          Save
-        </Button>
-        <Button color="secondary" onClick={handleClose}>
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <Modal
+      fullWidth={true}
+      onClose={onClose}
+      open={open}
+      submitForm="userForm"
+      title={user ? 'Update User' : 'Create User'}
+    >
+      <UserForm callback={onClose} id="userForm" user={user} />
+    </Modal>
   )
 }