♻️ Refactor Modals

systemli · Apr 2, 2023 · 24aa436 · 24aa436
1 parent 66cf6ed
commit 24aa436
Show file tree

Hide file tree

Showing 14 changed files with 260 additions and 590 deletions.
diff --git a/src/components/common/Modal.tsx 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
@@ -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
@@ -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
@@ -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>
   )
 }