Use a modal instead of alert()

7 files changed, 88 insertions, 21 deletions

diff --git a/src/App.js b/src/App.js
index 3782bcf..4ac6433 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,7 +11,7 @@ import { Link, useNavigate } from 'react-router-dom'
 
 function ButtonRow() {
   let auth = useAuth()
-  let navigate = useNavigate();
+  let navigate = useNavigate()
 
   return (
     <div style={{ display: 'flex' }}>
@@ -20,7 +20,7 @@ function ButtonRow() {
           <Button
             className="LoginButton"
             primary
-            onClick={() => (navigate('/zones'))}
+            onClick={() => navigate('/zones')}
           >
             Zones
           </Button>
@@ -37,14 +37,14 @@ function ButtonRow() {
           <Button
             className="LoginButton"
             primary
-            onClick={() => (navigate('/login'))}
+            onClick={() => navigate('/login')}
           >
             Login
           </Button>
           <Button
             className="LoginButton"
             secondary
-            onClick={() => (navigate('/signup'))}
+            onClick={() => navigate('/signup')}
           >
             Sign Up
           </Button>
@@ -60,7 +60,7 @@ function App() {
     <div className="App">
       <BrowserRouter>
         <header>
-          <Link to={auth.isAuthenticated() ? "/zones" : "/"}>
+          <Link to={auth.isAuthenticated() ? '/zones' : '/'}>
             <h1>
               HOSTS<b>dot</b>TXT
             </h1>
diff --git a/src/hooks/useErrorModal.js b/src/hooks/useErrorModal.js
index 9117149..6bc7968 100644
--- a/src/hooks/useErrorModal.js
+++ b/src/hooks/useErrorModal.js
@@ -1,22 +1,36 @@
 import React from 'react'
 import { isExpired } from 'react-jwt'
+import Modal from 'react-modal'
 import { Navigate, useLocation } from 'react-router-dom'
 
 let ErrorModalContext = React.createContext()
 
 export function ErrorModalProvider({ children }) {
   let [showModal, setShowModal] = React.useState(false)
+  let [modalContent, setModalContent] = React.useState({})
 
   let show = (message) => {
-    setShowModal(true);
+    setModalContent(message)
+    setShowModal(true)
   }
   let hide = () => {
-    setShowModal(false);
+    setShowModal(false)
   }
 
-  let value = { show, hide };
+  let value = { show, hide }
 
-  return <ErrorModalContext.Provider value={value}>{children} {showModal ? <ErrorModal /> : null }</ErrorModalContext.Provider>
+  return (
+    <ErrorModalContext.Provider value={value}>
+      {showModal ? (
+        <ErrorModal
+          content={modalContent}
+          showModal={showModal}
+          setShowModal={setShowModal}
+        />
+      ) : null}
+      <>{children}</>
+    </ErrorModalContext.Provider>
+  )
 }
 
 export function useErrorModal() {
@@ -24,6 +38,7 @@ export function useErrorModal() {
 }
 
 const modalStyle = {
+  zIndex: '9999',
   content: {
     top: '50%',
     left: '50%',
@@ -34,14 +49,14 @@ const modalStyle = {
   },
 }
 
-function ErrorModal({ content }) {
+function ErrorModal({ content, showModal, setShowModal }) {
   return (
     <Modal
       isOpen={showModal}
       onRequestClose={() => setShowModal(false)}
       style={modalStyle}
     >
-      LIGMAAAAAAAA
+      {content}
     </Modal>
   )
 }
diff --git a/src/index.js b/src/index.js
index 67690b5..269b213 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import App from './App'
 import { AuthProvider } from './hooks/useAuth'
+import { ErrorModalProvider } from './hooks/useErrorModal'
 import { FeaturesProvider } from './hooks/useFeatures'
 import './index.css'
 import reportWebVitals from './reportWebVitals'
@@ -12,7 +13,9 @@ root.render(
   <React.StrictMode>
     <AuthProvider>
       <FeaturesProvider>
-        <App />
+        <ErrorModalProvider>
+          <App />
+        </ErrorModalProvider>
       </FeaturesProvider>
     </AuthProvider>
   </React.StrictMode>
diff --git a/src/routes/Login.js b/src/routes/Login.js
index 959343e..1b5befc 100644
--- a/src/routes/Login.js
+++ b/src/routes/Login.js
@@ -1,4 +1,5 @@
 import { useAuth } from '../hooks/useAuth'
+import { useErrorModal } from '../hooks/useErrorModal'
 import { useFeatures } from '../hooks/useFeatures'
 import Button from '../uikit/Button.js'
 import Input from '../uikit/Input.js'
@@ -15,6 +16,7 @@ function Login(props) {
   let location = useLocation()
   let features = useFeatures()
   const [totpRequired, setTotpRequired] = useState(false)
+  const errorModal = useErrorModal()
 
   let from = location.state?.from?.pathname || '/zones'
 
@@ -42,7 +44,7 @@ function Login(props) {
           })
         })
       } else {
-        alert('Invalid email or password')
+        errorModal.show('Invalid email or password')
       }
     })
   }
diff --git a/src/routes/Records.js b/src/routes/Records.js
index bae8b3d..cd69f72 100644
--- a/src/routes/Records.js
+++ b/src/routes/Records.js
@@ -2,6 +2,7 @@
 import RecordModal from '../components/RecordModal'
 import RecordTable from '../components/RecordTable'
 import { RequireAuth, useAuth } from '../hooks/useAuth'
+import { useErrorModal } from '../hooks/useErrorModal'
 import './Records.css'
 import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
@@ -15,6 +16,7 @@ export function Records() {
   const [updateSignal, setUpdateSignal] = React.useState(0)
 
   const auth = useAuth()
+  const errorModal = useErrorModal()
 
   function setAndOpenRecord(record) {
     setOpenRecord(record)
@@ -41,7 +43,14 @@ export function Records() {
       }).then((res) => {
         if (res.status === 200) {
         } else {
-          alert('Error updating record')
+          res
+            .json()
+            .then((data) => {
+              errorModal.show(data.error)
+            })
+            .catch((err) => {
+              errorModal.show('Unknown error updating record')
+            })
         }
       })
     }
@@ -60,7 +69,14 @@ export function Records() {
           setOpenRecord({})
           setOriginalRecord({})
         } else {
-          alert('Error updating record')
+          res
+            .json()
+            .then((data) => {
+              errorModal.show(data.error)
+            })
+            .catch((err) => {
+              errorModal.show('Unknown error updating record')
+            })
         }
       })
     } else {
@@ -78,7 +94,14 @@ export function Records() {
           setOpenRecord({})
           setOriginalRecord({})
         } else {
-          alert('Error creating record')
+          res
+            .json()
+            .then((data) => {
+              errorModal.show(data.error)
+            })
+            .catch((err) => {
+              errorModal.show('Unknown error creating record')
+            })
         }
       })
     }
@@ -95,7 +118,14 @@ export function Records() {
       if (res.status === 200) {
         setUpdateSignal(updateSignal + 1)
       } else {
-        alert('Error deleting record')
+        res
+          .json()
+          .then((data) => {
+            errorModal.show(data.error)
+          })
+          .catch((err) => {
+            errorModal.show('Unknown error deleting record')
+          })
       }
     })
   }
@@ -112,7 +142,14 @@ export function Records() {
           setZone(data)
         })
       } else {
-        alert('Error loading zones')
+        res
+          .json()
+          .then((data) => {
+            errorModal.show(data.error)
+          })
+          .catch((err) => {
+            errorModal.show('Unknown error loading zone')
+          })
       }
     })
   }, [zoneName, auth.token, updateSignal])
diff --git a/src/routes/SignUp.js b/src/routes/SignUp.js
index c5ff731..3a380a4 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -1,4 +1,5 @@
 import { useAuth } from '../hooks/useAuth.js'
+import { useErrorModal } from '../hooks/useErrorModal.js'
 import { useFeatures } from '../hooks/useFeatures.js'
 import Button from '../uikit/Button.js'
 import Input from '../uikit/Input.js'
@@ -56,6 +57,7 @@ export function SignUp() {
   const auth = useAuth()
   const features = useFeatures()
   const navigate = useNavigate()
+  const errorModal = useErrorModal()
   let location = useLocation()
 
   let from = location.state?.from?.pathname || '/zones'
@@ -119,7 +121,14 @@ export function SignUp() {
           })
         })
       } else {
-        alert('Something went wrong!')
+        res
+          .json()
+          .then((data) => {
+            errorModal.show(data.error)
+          })
+          .catch((err) => {
+            errorModal.show('Something went wrong :(')
+          })
       }
     })
   }
diff --git a/src/routes/Zones.js b/src/routes/Zones.js
index 5fee579..36c034e 100644
--- a/src/routes/Zones.js
+++ b/src/routes/Zones.js
@@ -1,4 +1,5 @@
 import { RequireAuth, useAuth } from '../hooks/useAuth'
+import { useErrorModal } from '../hooks/useErrorModal'
 import useFetch from '../hooks/useFetch'
 import { styled } from '@stitches/react'
 import { Link } from 'react-router-dom'
@@ -28,7 +29,7 @@ const LinkStyled = styled(Link, {
 
 export default function Zones() {
   const auth = useAuth()
-
+  const errorModal = useErrorModal()
   let { data, loading, error } = useFetch('/api/v1/zones', {
     headers: {
       Authorization: auth.token,
@@ -48,7 +49,7 @@ export default function Zones() {
     )
   }
   if (error) {
-    alert(error)
+    errorModal.show(error)
   }
 
   return (