Hotfix for LoginModal to see whats wrong

components/LoginModal/index.tsx

@@ -2,11 +2,12 @@ import React, { useState } from 'react'
 import { setCookie } from 'cookies-next'
 import Router, { useRouter } from 'next/router'
 import { useTranslation } from 'react-i18next'
-import { AxiosResponse } from 'axios'
+import axios, { AxiosError, AxiosResponse } from 'axios'
 
 import api from '~utils/api'
 import { accountState } from '~utils/accountState'
 
+import Alert from '~components/Alert'
 import Button from '~components/Button'
 import Input from '~components/Input'
 import {
@@ -21,23 +22,28 @@ import changeLanguage from '~utils/changeLanguage'
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 
-interface Props {}
-
 interface ErrorMap {
   [index: string]: string
   email: string
   password: string
 }
 
+interface GranblueAxiosError {
+  response: AxiosResponse<any, any>
+  request: any
+  code: number
+}
+
 const emailRegex =
   /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
-const LoginModal = (props: Props) => {
+const LoginModal = () => {
   const router = useRouter()
   const { t } = useTranslation('common')
 
   // Set up form states and error handling
   const [formValid, setFormValid] = useState(false)
+  const [axiosError, setAxiosError] = useState<AxiosError>()
   const [errors, setErrors] = useState<ErrorMap>({
     email: '',
     password: '',
@@ -45,6 +51,7 @@ const LoginModal = (props: Props) => {
 
   // States
   const [open, setOpen] = useState(false)
+  const [alertOpen, setAlertOpen] = useState(false)
 
   // Set up form refs
   const emailInput: React.RefObject<HTMLInputElement> = React.createRef()
@@ -109,6 +116,19 @@ const LoginModal = (props: Props) => {
         })
         .then((id) => fetchUserInfo(id))
         .then((infoResponse) => storeUserInfo(infoResponse))
+        .catch((error: Error | AxiosError) => {
+          console.log(error)
+
+          if (axios.isAxiosError(error)) {
+            const axiosError: AxiosError = error
+            console.log(axiosError.request)
+            console.log(axiosError.response)
+            console.log(axiosError.code)
+            setAlertOpen(true)
+
+            setAxiosError(axiosError)
+          }
+        })
     }
   }
 
@@ -181,6 +201,16 @@ const LoginModal = (props: Props) => {
   }
 
   return (
+    <React.Fragment>
+      <Alert
+        title="There was an error"
+        message={`${axiosError?.code}: Something went wrong.`}
+        cancelActionText="Okay"
+        cancelAction={() => {
+          setAlertOpen(false)
+        }}
+        open={alertOpen}
+      ></Alert>
       <Dialog open={open} onOpenChange={openChange}>
         <DialogTrigger asChild>
           <li className="MenuItem">
@@ -228,6 +258,7 @@ const LoginModal = (props: Props) => {
           </form>
         </DialogContent>
       </Dialog>
+    </React.Fragment>
   )
 }