Network Error Catch/Page

frontend/constants/routes.js

@@ -9,6 +9,7 @@ const ROUTES = {
   REDIRECT: '/redirect',
   CHAT: '/chat',
   HISTORY: '/history',
+  ERROR: '/error',
 };
 
 export default ROUTES;

frontend/pages/error/index.jsx

@@ -0,0 +1,64 @@
+import { Box, Button, Container, Typography } from '@mui/material';
+
+const NetworkErrorPage = () => {
+  const handleGoBack = () => {
+    window.history.back();
+  };
+
+  return (
+    <Container
+      sx={{
+        backgroundColor: 'white',
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '20px',
+      }}
+    >
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginBottom: 'auto',
+          marginTop: 2,
+        }}
+      >
+        <Typography
+          variant="h4"
+          sx={{
+            color: 'primary.main',
+          }}
+        >
+          KAI.AI
+        </Typography>
+        <Typography variant="subtitle1">AI TEACHING ASSISTANT</Typography>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginBottom: 'auto',
+        }}
+      >
+        <Typography variant="h4" gutterBottom>
+          Network Error
+        </Typography>
+        <Typography sx={{ mb: 4, maxWidth: '400px', textAlign: 'center' }}>
+          Seems like there is a problem with your internet, try reconnecting and
+          refresh the page to continue
+        </Typography>
+        <Button variant="contained" color="primary" onClick={handleGoBack}>
+          Reload the page
+        </Button>
+      </Box>
+    </Container>
+  );
+};
+export default NetworkErrorPage;

frontend/templates/SignIn/SignInForm/SignInForm.jsx

@@ -10,7 +10,7 @@ import { useDispatch } from 'react-redux';
 import AuthTextField from '@/components/AuthTextField';
 import GradientOutlinedButton from '@/components/GradientOutlinedButton';
 
-import { AUTH_ERROR_MESSAGES } from '@/constants/auth';
+import { AUTH_ERR_CODES, AUTH_ERROR_MESSAGES } from '@/constants/auth';
 import ALERT_COLORS from '@/constants/notification';
 
 import ROUTES from '@/constants/routes';
@@ -54,6 +54,10 @@ const SignInForm = (props) => {
 
   const { handleOpenSnackBar } = useContext(AuthContext);
 
+  const renderNetworkError = () => {
+    router.push(ROUTES.ERROR);
+  };
+
   const handleSubmit = async (data) => {
     try {
       const { email, password } = data;
@@ -99,6 +103,11 @@ const SignInForm = (props) => {
       dispatch(setLoading(true));
       router.push(ROUTES.HOME);
     } catch ({ code }) {
+      if (
+        code.message === AUTH_ERROR_MESSAGES[AUTH_ERR_CODES.NETWORK_REQ_FAIL]
+      ) {
+        renderNetworkError();
+      }
       setError({ password: { message: AUTH_ERROR_MESSAGES[code] } });
     } finally {
       setSignInLoading(false);

frontend/templates/SignUp/SignUpForm/SignUpForm.jsx

@@ -1,6 +1,9 @@
 import { useContext, useState } from 'react';
 
 import { Grid, useTheme } from '@mui/material';
+
+import { useRouter } from 'next/router';
+
 import { FormContainer } from 'react-hook-form-mui';
 
 import useWatchFields from '@/hooks/useWatchFields';
@@ -9,9 +12,16 @@ import AuthTextField from '@/components/AuthTextField';
 
 import GradientOutlinedButton from '@/components/GradientOutlinedButton';
 
-import { AUTH_STEPS, VALIDATION_STATES } from '@/constants/auth';
+import {
+  AUTH_ERR_CODES,
+  AUTH_ERROR_MESSAGES,
+  AUTH_STEPS,
+  VALIDATION_STATES,
+} from '@/constants/auth';
 import ALERT_COLORS from '@/constants/notification';
 
+import ROUTES from '@/constants/routes';
+
 import styles from './styles';
 
 import sharedStyles from '@/styles/shared/sharedStyles';
@@ -65,6 +75,7 @@ const WATCH_FIELDS = [
  */
 const SignUpForm = (props) => {
   const { step, setStep, setEmail, handleSwitch } = props;
+  const router = useRouter();
 
   const theme = useTheme();
 
@@ -87,6 +98,10 @@ const SignUpForm = (props) => {
 
     return VALIDATION_STATES.ERROR;
   };
+  // catch errro
+  const renderNetworkError = () => {
+    router.push(ROUTES.ERROR);
+  };
 
   const submitButtonText = () => {
     if (step === AUTH_STEPS.EMAIL) {
@@ -150,6 +165,11 @@ const SignUpForm = (props) => {
         setEmail(email.value);
         handleSwitch();
       } catch (err) {
+        if (
+          err.message === AUTH_ERROR_MESSAGES[AUTH_ERR_CODES.NETWORK_REQ_FAIL]
+        ) {
+          renderNetworkError();
+        }
         handleOpenSnackBar(ALERT_COLORS.ERROR, err.message);
       } finally {
         setLoading(false);

frontend/templates/SignUp/VerifyEmailPage/VerifyEmailPage.jsx

@@ -1,14 +1,21 @@
 import { useContext, useEffect, useState } from 'react';
 
 import { Grid, Typography, useTheme } from '@mui/material';
+
+import { useRouter } from 'next/router';
+
 import { useSelector } from 'react-redux';
 
 import GradientOutlinedButton from '@/components/GradientOutlinedButton';
 
 import RocketIcon from '@/assets/svg/rocket.svg';
 
+import { AUTH_ERR_CODES, AUTH_ERROR_MESSAGES } from '@/constants/auth';
+
 import ALERT_COLORS from '@/constants/notification';
 
+import ROUTES from '@/constants/routes';
+
 import styles from './styles';
 
 import { AuthContext } from '@/providers/GlobalProvider';
@@ -24,6 +31,8 @@ const VerifyEmailPage = (props) => {
   const { handleOpenSnackBar } = useContext(AuthContext);
   const { data: authData } = useSelector((state) => state.auth);
 
+  const router = useRouter();
+
   useEffect(() => {
     let interval;
 
@@ -37,12 +46,21 @@ const VerifyEmailPage = (props) => {
     return () => clearInterval(interval);
   }, [seconds]);
 
+  const renderNetworkError = () => {
+    router.push(ROUTES.ERROR);
+  };
+
   const handleResend = async () => {
     try {
       setLoading(true);
       await sendVerification(authData);
       handleOpenSnackBar(ALERT_COLORS.SUCCESS, 'Email verification sent');
     } catch (error) {
+      if (
+        error.message === AUTH_ERROR_MESSAGES[AUTH_ERR_CODES.NETWORK_REQ_FAIL]
+      ) {
+        renderNetworkError();
+      }
       handleOpenSnackBar(
         ALERT_COLORS.ERROR,
         'Error sending email verification'

frontend/templates/ToolPage/ToolForm/ToolForm.jsx

@@ -2,6 +2,9 @@ import { useContext } from 'react';
 
 import { Help } from '@mui/icons-material';
 import { Grid, Tooltip, Typography, useTheme } from '@mui/material';
+
+import { useRouter } from 'next/router';
+
 import { FormContainer } from 'react-hook-form-mui';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -12,9 +15,13 @@ import PrimaryFileUpload from '@/components/PrimaryFileUpload';
 import PrimarySelectorInput from '@/components/PrimarySelectorInput';
 import PrimaryTextFieldInput from '@/components/PrimaryTextFieldInput';
 
+import { AUTH_ERR_CODES, AUTH_ERROR_MESSAGES } from '@/constants/auth';
+
 import { INPUT_TYPES } from '@/constants/inputs';
 import ALERT_COLORS from '@/constants/notification';
 
+import ROUTES from '@/constants/routes';
+
 import styles from './styles';
 
 import { AuthContext } from '@/providers/GlobalProvider';
@@ -35,9 +42,14 @@ const ToolForm = (props) => {
   const { handleOpenSnackBar } = useContext(AuthContext);
   const { communicatorLoading } = useSelector((state) => state.tools);
   const { data: userData } = useSelector((state) => state.user);
+  const router = useRouter();
   const { register, control, handleSubmit, getValues, setValue, errors } =
     useWatchFields([]);
 
+  const renderNetworkError = () => {
+    router.push(ROUTES.ERROR);
+  };
+
   const handleSubmitMultiForm = async (values) => {
     try {
       const { files, ...toolData } = values;
@@ -69,6 +81,11 @@ const ToolForm = (props) => {
       dispatch(setCommunicatorLoading(false));
       dispatch(fetchToolHistory({ firestore }));
     } catch (error) {
+      if (
+        error.message === AUTH_ERROR_MESSAGES[AUTH_ERR_CODES.NETWORK_REQ_FAIL]
+      ) {
+        renderNetworkError();
+      }
       dispatch(setCommunicatorLoading(false));
       handleOpenSnackBar(
         ALERT_COLORS.ERROR,