switching alert messages and reducing return statements

src/components/organisms/Permission.tsx

@@ -13,33 +13,52 @@ export default function Permission({
   children: ReactElement
 }): ReactElement {
   const url = appConfig.rbacUrl
-  const [data, updateData] = useState<boolean>()
+  const [data, updateData] = useState<boolean | 'ERROR'>()
+  const [errorMessage, updateError] = useState<string>()
+  const [messageState, updateMessageState] = useState<
+    'error' | 'warning' | 'info' | 'success'
+  >()
   const { accountId } = useWeb3()
   useEffect(() => {
     if (url === undefined) return
     const getData = async () => {
-      if (accountId !== undefined) {
+      if (accountId === undefined) {
+        console.log('accountId', accountId)
+        updateError('Please make sure your wallet is connected to proceed.')
+        updateMessageState('info')
+      } else {
         const data = await rbacRequest(eventType, accountId)
         updateData(data)
+        if (data === 'ERROR') {
+          updateError(
+            'There was an error verifying your permissions. Please refresh the page or conntact your network administrator'
+          )
+          updateMessageState('error')
+        } else if (data === false) {
+          updateError(
+            `Sorry, you don't have permission to ${eventType}. Please make sure you have connected your registered address.`
+          )
+          updateMessageState('warning')
+        } else if (data !== true) {
+          updateError(
+            'An unkown error occured. Please conntact your network administrator'
+          )
+          updateMessageState('error')
+        }
       }
     }
     getData()
   }, [eventType, accountId, url])
+
   if (url === undefined || data === true) {
     return <>{children}</>
-  } else if (data === false) {
-    const message = `Sorry, you don't have permission to  ${eventType}. Please make sure you have connected your registered address.`
-    return <Alert title="Permission denied" text={message} state="error" />
-  } else {
-    return (
-      <>
-        <Alert
-          text="Please make sure your wallet is connected to proceed."
-          state="info"
-        />
-        <br />
-        <Loader />
-      </>
-    )
   }
+
+  return (
+    <>
+      <Alert text={errorMessage} state={messageState} />
+      <br />
+      <Loader />
+    </>
+  )
 }

src/utils/rbac.ts

@@ -4,7 +4,7 @@ import appConfig from '../../app.config'
 export default async function rbacRequest(
   eventType: string,
   address: string
-): Promise<boolean> {
+): Promise<boolean | 'ERROR'> {
   const url = appConfig.rbacUrl
   if (url === undefined) {
     return true
@@ -28,6 +28,7 @@ export default async function rbacRequest(
       return await response.json()
     } catch (error) {
       console.error('Error parsing json: ' + error.message)
+      return 'ERROR'
     }
   }
 }