Move ModalContainer into its own file

oasisprotocol · Apr 18, 2023 · e9fae3a · e9fae3a
1 parent e5fd470
commit e9fae3a
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 58 deletions.
diff --git a/src/app/components/Modal/ModalContainer.tsx b/src/app/components/Modal/ModalContainer.tsx
@@ -0,0 +1,55 @@
+import { useCallback } from 'react'
+import { Box } from 'grommet/es6/components/Box'
+import { Button } from 'grommet/es6/components/Button'
+import { Layer } from 'grommet/es6/components/Layer'
+import { Paragraph } from 'grommet/es6/components/Paragraph'
+import { useTranslation } from 'react-i18next'
+import { Alert } from 'grommet-icons/es6/icons/Alert'
+import { Checkmark } from 'grommet-icons/es6/icons/Checkmark'
+import { Close } from 'grommet-icons/es6/icons/Close'
+import { ModalHeader } from 'app/components/Header'
+
+export interface Modal {
+  title: string
+  description: string
+  handleConfirm: () => void
+  isDangerous: boolean
+}
+
+interface ModalContainerProps {
+  modal: Modal
+  closeModal: () => void
+}
+
+export const ModalContainer = ({ modal, closeModal }: ModalContainerProps) => {
+  const { t } = useTranslation()
+  const confirm = useCallback(() => {
+    modal.handleConfirm()
+    closeModal()
+  }, [closeModal, modal])
+
+  return (
+    <Layer modal onEsc={closeModal} onClickOutside={closeModal} background="background-front">
+      <Box margin="medium">
+        <ModalHeader>{modal.title}</ModalHeader>
+        <Paragraph fill>{modal.description}</Paragraph>
+        <Box direction="row" gap="small" justify="between" pad={{ top: 'large' }}>
+          <Button
+            label={t('common.cancel', 'Cancel')}
+            onClick={closeModal}
+            secondary
+            icon={<Close size="18px" />}
+          />
+          <Button
+            label={t('common.confirm', 'Confirm')}
+            onClick={confirm}
+            disabled={modal.isDangerous}
+            primary={modal.isDangerous}
+            color={modal.isDangerous ? 'status-error' : ''}
+            icon={modal.isDangerous ? <Alert size="18px" /> : <Checkmark size="18px" />}
+          />
+        </Box>
+      </Box>
+    </Layer>
+  )
+}
diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
@@ -1,25 +1,5 @@
 import { createContext, useCallback, useContext, useState } from 'react'
-import { Box } from 'grommet/es6/components/Box'
-import { Button } from 'grommet/es6/components/Button'
-import { Layer } from 'grommet/es6/components/Layer'
-import { Paragraph } from 'grommet/es6/components/Paragraph'
-import { useTranslation } from 'react-i18next'
-import { Alert } from 'grommet-icons/es6/icons/Alert'
-import { Checkmark } from 'grommet-icons/es6/icons/Checkmark'
-import { Close } from 'grommet-icons/es6/icons/Close'
-import { ModalHeader } from 'app/components/Header'
-
-interface Modal {
-  title: string
-  description: string
-  handleConfirm: () => void
-  isDangerous: boolean
-}
-
-interface ModalContainerProps {
-  modal: Modal
-  closeModal: () => void
-}
+import { Modal, ModalContainer } from './ModalContainer'
 
 interface ModalContextProps {
   launchModal: (modal: Modal) => void
@@ -32,40 +12,7 @@ interface ModalProviderProps {
 
 const ModalContext = createContext<ModalContextProps>({} as ModalContextProps)
 
-const ModalContainer = ({ modal, closeModal }: ModalContainerProps) => {
-  const { t } = useTranslation()
-  const confirm = useCallback(() => {
-    modal.handleConfirm()
-    closeModal()
-  }, [closeModal, modal])
-
-  return (
-    <Layer modal onEsc={closeModal} onClickOutside={closeModal} background="background-front">
-      <Box margin="medium">
-        <ModalHeader>{modal.title}</ModalHeader>
-        <Paragraph fill>{modal.description}</Paragraph>
-        <Box direction="row" gap="small" justify="between" pad={{ top: 'large' }}>
-          <Button
-            label={t('common.cancel', 'Cancel')}
-            onClick={closeModal}
-            secondary
-            icon={<Close size="18px" />}
-          />
-          <Button
-            label={t('common.confirm', 'Confirm')}
-            onClick={confirm}
-            disabled={modal.isDangerous}
-            primary={modal.isDangerous}
-            color={modal.isDangerous ? 'status-error' : ''}
-            icon={modal.isDangerous ? <Alert size="18px" /> : <Checkmark size="18px" />}
-          />
-        </Box>
-      </Box>
-    </Layer>
-  )
-}
-
-const ModalProvider = (props: ModalProviderProps) => {
+export const ModalProvider = (props: ModalProviderProps) => {
   const [modal, setModal] = useState<Modal | null>(null)
   const closeModal = useCallback(() => {
     setModal(null)
@@ -79,13 +26,12 @@ const ModalProvider = (props: ModalProviderProps) => {
   )
 }
 
-const useModal = () => {
+// eslint-disable-next-line react-refresh/only-export-components
+export const useModal = () => {
   const context = useContext(ModalContext)
   if (context === undefined) {
     throw new Error('useModal must be used within a ModalProvider')
   }
 
   return context
 }
-
-export { ModalProvider, useModal }