chore(web): refactor react code

web/src/utils/hooks/index.ts

@@ -1,2 +1,4 @@
+export * from './useModal'
 export * from './usePrompt'
 export * from './useStateWithCallback'
+export * from './useSnackbar'

web/src/utils/hooks/useModal.tsx

@@ -0,0 +1,19 @@
+import { useState } from 'react'
+import Modal from '../../components/modal'
+
+export const useModal = () => {
+  const [openModal, setOpenModal] = useState(false)
+  const [modalTitle, setModalTitle] = useState('')
+  const [modalPayload, setModalPayload] = useState('')
+
+  const Dialog = () => (
+    <Modal
+      open={openModal}
+      setOpen={setOpenModal}
+      title={modalTitle}
+      payload={modalPayload}
+    />
+  )
+
+  return { Dialog, setOpenModal, setModalTitle, setModalPayload }
+}

web/src/utils/hooks/useSnackbar.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
+
+export const useSnackbar = () => {
+  const [openSnackbar, setOpenSnackbar] = useState(false)
+  const [snackbarMessage, setSnackbarMessage] = useState('')
+  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertSeverityType>(
+    AlertSeverityType.Success
+  )
+
+  const Snackbar = () => (
+    <BootstrapSnackbar
+      open={openSnackbar}
+      setOpen={setOpenSnackbar}
+      message={snackbarMessage}
+      severity={snackbarSeverity}
+    />
+  )
+
+  return { Snackbar, setOpenSnackbar, setSnackbarMessage, setSnackbarSeverity }
+}