clean up error messages

humanprotocol · Jan 23, 2024 · 384cfda · 384cfda
1 parent 72cf9ac
commit 384cfda
Show file tree

Hide file tree

Showing 12 changed files with 49 additions and 100 deletions.
diff --git a/packages/apps/job-launcher/client/src/components/Auth/ForgotPasswordForm.jsx b/packages/apps/job-launcher/client/src/components/Auth/ForgotPasswordForm.jsx
@@ -1,8 +1,6 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha';
 import { LoadingButton } from '@mui/lab';
 import {
-  Alert,
-  AlertTitle,
   Box,
   Button,
   FormHelperText,
@@ -14,14 +12,15 @@ import { Formik } from 'formik';
 import React, { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CheckFilledIcon } from '../../components/Icons/CheckFilledIcon';
+import { useSnackbar } from '../../providers/SnackProvider';
 import * as authService from '../../services/auth';
 import { ForgotPasswordValidationSchema } from './schema';
 
 export const ForgotPasswordForm = () => {
   const captchaRef = useRef(null);
-  const [alertMsg, setAlertMsg] = useState('');
   const [isSuccess, setIsSuccess] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const { showError } = useSnackbar();
   const navigate = useNavigate();
 
   const handleForgotPassword = async ({ email }) => {
@@ -30,7 +29,7 @@ export const ForgotPasswordForm = () => {
       await authService.forgotPassword(email);
       setIsSuccess(true);
     } catch (err) {
-      setAlertMsg(err?.response?.data?.message ?? err?.message);
+      showError(err);
     }
     setIsLoading(false);
   };
@@ -78,12 +77,6 @@ export const ForgotPasswordForm = () => {
     </Box>
   ) : (
     <Box sx={{ maxWidth: '303px', mx: 'auto', py: 8 }}>
-      {alertMsg && alertMsg.length && (
-        <Alert severity="error" onClose={() => setAlertMsg('')} sx={{ my: 2 }}>
-          <AlertTitle>Send email failed!</AlertTitle>
-          {alertMsg}
-        </Alert>
-      )}
       <Typography fontSize={20} fontWeight={600} mb={4} lineHeight={1.5}>
         Reset Password
       </Typography>

diff --git a/packages/apps/job-launcher/client/src/components/Auth/ResetPasswordForm.jsx b/packages/apps/job-launcher/client/src/components/Auth/ResetPasswordForm.jsx
@@ -1,24 +1,18 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha';
 import { LoadingButton } from '@mui/lab';
-import {
-  Alert,
-  AlertTitle,
-  Box,
-  FormHelperText,
-  Link,
-  Typography,
-} from '@mui/material';
+import { Box, FormHelperText, Link, Typography } from '@mui/material';
 import { Formik } from 'formik';
 import React, { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useSnackbar } from '../../providers/SnackProvider';
 import * as authService from '../../services/auth';
 import { Password } from './Password';
 import { ResetPasswordValidationSchema } from './schema';
 
 export const ResetPasswordForm = () => {
   const captchaRef = useRef(null);
-  const [alertMsg, setAlertMsg] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const { showError } = useSnackbar();
   const navigate = useNavigate();
   const token = new URLSearchParams(window.location.search).get('token');
 
@@ -33,7 +27,7 @@ export const ResetPasswordForm = () => {
 
       navigate('/');
     } catch (err) {
-      console.error(err);
+      showError(err);
     }
     setIsLoading(false);
   };
@@ -46,12 +40,6 @@ export const ResetPasswordForm = () => {
 
   return (
     <Box sx={{ maxWidth: '303px', mx: 'auto', py: 8 }}>
-      {alertMsg && alertMsg.length && (
-        <Alert severity="error" onClose={() => setAlertMsg('')} sx={{ mb: 2 }}>
-          <AlertTitle>Reset password failed!</AlertTitle>
-          {alertMsg}
-        </Alert>
-      )}
       <Typography fontSize={20} fontWeight={600} mb={4} lineHeight={1.5}>
         Reset Password
       </Typography>

diff --git a/packages/apps/job-launcher/client/src/components/Auth/SignInForm.jsx b/packages/apps/job-launcher/client/src/components/Auth/SignInForm.jsx
@@ -4,17 +4,19 @@ import { Box, FormHelperText, Link as MuiLink, TextField } from '@mui/material';
 import { useFormik } from 'formik';
 import React, { useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { useSnackbar } from '../../providers/SnackProvider';
 import * as authService from '../../services/auth';
 import { useAppDispatch } from '../../state';
 import { fetchUserBalanceAsync, signIn } from '../../state/auth/reducer';
 import { Password } from './Password';
 import { LoginValidationSchema } from './schema';
 
-export const SignInForm = ({ onError }) => {
+export const SignInForm = () => {
   const captchaRef = useRef(null);
   const [hcaptchaToken, setHcaptchaToken] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const dispatch = useAppDispatch();
+  const { showError } = useSnackbar();
   const formik = useFormik({
     initialValues: {
       email: '',
@@ -35,7 +37,7 @@ export const SignInForm = ({ onError }) => {
       dispatch(signIn(data));
       dispatch(fetchUserBalanceAsync());
     } catch (err) {
-      onError(err?.response?.data?.message ?? err.message);
+      showError(err);
     }
     setIsLoading(false);
   };

diff --git a/packages/apps/job-launcher/client/src/components/Auth/SignUpForm.jsx b/packages/apps/job-launcher/client/src/components/Auth/SignUpForm.jsx
@@ -1,8 +1,6 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha';
 import { LoadingButton } from '@mui/lab';
 import {
-  Alert,
-  AlertTitle,
   Box,
   Button,
   FormHelperText,
@@ -13,16 +11,17 @@ import {
 } from '@mui/material';
 import { Formik } from 'formik';
 import React, { useRef, useState } from 'react';
+import { useSnackbar } from '../../providers/SnackProvider';
 import * as authService from '../../services/auth';
 import { Password } from './Password';
 import { RegisterValidationSchema } from './schema';
 
-export const SignUpForm = ({ onFinish, onError }) => {
+export const SignUpForm = ({ onFinish }) => {
   const captchaRef = useRef(null);
   const [isLoading, setIsLoading] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
   const [email, setEmail] = useState('');
-  const [alertMsg, setAlertMsg] = useState('');
+  const { showError } = useSnackbar();
 
   const handleRegister = async ({ email, password, confirm }) => {
     setIsLoading(true);
@@ -31,7 +30,7 @@ export const SignUpForm = ({ onFinish, onError }) => {
       setEmail(email);
       setIsSuccess(true);
     } catch (err) {
-      onError(err?.response?.data?.message ?? err.message);
+      showError(err);
     }
     setIsLoading(false);
   };
@@ -42,7 +41,7 @@ export const SignUpForm = ({ onFinish, onError }) => {
       await authService.resendEmailVerification(email);
       onFinish();
     } catch (err) {
-      setAlertMsg(err?.response?.data?.message ?? err?.message);
+      showError(err);
     }
     setIsLoading(false);
   };
@@ -57,16 +56,6 @@ export const SignUpForm = ({ onFinish, onError }) => {
   if (isSuccess) {
     return (
       <Box sx={{ maxWidth: '368px', mx: 'auto' }}>
-        {alertMsg && alertMsg.length && (
-          <Alert
-            severity="error"
-            onClose={() => setAlertMsg('')}
-            sx={{ my: 2 }}
-          >
-            <AlertTitle>Send email failed!</AlertTitle>
-            {alertMsg}
-          </Alert>
-        )}
         <Typography variant="h4" fontWeight={600}>
           Verify email
         </Typography>

diff --git a/packages/apps/job-launcher/client/src/components/Auth/VerifyEmailForm.tsx b/packages/apps/job-launcher/client/src/components/Auth/VerifyEmailForm.tsx
@@ -1,21 +1,14 @@
-import {
-  Alert,
-  AlertTitle,
-  Box,
-  Button,
-  CircularProgress,
-  Grid,
-  Typography,
-} from '@mui/material';
+import { Box, Button, CircularProgress, Grid, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CheckCircleFilledIcon } from '../../components/Icons/CheckCircleFilledIcon';
+import { useSnackbar } from '../../providers/SnackProvider';
 import * as authService from '../../services/auth';
 
 export const VerifyEmailForm = () => {
-  const [alertMsg, setAlertMsg] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
+  const { showError } = useSnackbar();
   const token = new URLSearchParams(window.location.search).get('token');
   const navigate = useNavigate();
 
@@ -31,7 +24,7 @@ export const VerifyEmailForm = () => {
         setIsLoading(false);
       })
       .catch((err: any) => {
-        setAlertMsg(err?.response?.data?.message ?? err.message);
+        showError(err);
         setIsLoading(false);
       });
   }, [token]);
@@ -89,12 +82,6 @@ export const VerifyEmailForm = () => {
       <Typography variant="h4" fontWeight={600} sx={{ mb: 6 }}>
         Verify email
       </Typography>
-      {alertMsg && alertMsg.length && (
-        <Alert severity="error" onClose={() => setAlertMsg('')} sx={{ mb: 2 }}>
-          <AlertTitle>Verify email failed!</AlertTitle>
-          {alertMsg}
-        </Alert>
-      )}
       <Box sx={{ textAlign: 'center', width: '100%', mt: 4 }}>
         <Button
           size="large"

diff --git a/packages/apps/job-launcher/client/src/components/Jobs/Create/PayJob.tsx b/packages/apps/job-launcher/client/src/components/Jobs/Create/PayJob.tsx
@@ -12,7 +12,7 @@ import { LaunchJobProgress } from './LaunchJobProgress';
 export const PayJob = () => {
   const { payMethod, changePayMethod, goToNextStep } = useCreateJobPageUI();
   const [isPaying, setIsPaying] = useState(false);
-  const { openSnackbar } = useSnackbar();
+  const { showError } = useSnackbar();
 
   const handleStart = () => {
     setIsPaying(true);
@@ -25,19 +25,11 @@ export const PayJob = () => {
 
   const handleError = (err: any) => {
     if (err.code === 'UNPREDICTABLE_GAS_LIMIT') {
-      openSnackbar(
-        'Insufficient token amount or the gas limit is too low',
-        'error',
-      );
+      showError('Insufficient token amount or the gas limit is too low');
     } else if (err.code === 'ACTION_REJECTED') {
-      openSnackbar('The transaction was rejected', 'error');
+      showError('The transaction was rejected');
     } else {
-      const message = err?.response?.data?.message;
-      if (message && typeof message === 'string') {
-        openSnackbar(err?.response?.data?.message, 'error');
-      } else {
-        openSnackbar('Something went wrong', 'error');
-      }
+      showError(err);
     }
   };
 

diff --git a/packages/apps/job-launcher/client/src/components/TopUpAccount/CryptoTopUpForm.tsx b/packages/apps/job-launcher/client/src/components/TopUpAccount/CryptoTopUpForm.tsx
@@ -32,7 +32,7 @@ export const CryptoTopUpForm = () => {
   const [isLoading, setIsLoading] = useState(false);
   const { data: signer } = useSigner();
   const { data: rate } = useTokenRate('hmt', 'usd');
-  const { openSnackbar } = useSnackbar();
+  const { showError } = useSnackbar();
 
   const totalAmount = useMemo(() => {
     if (!amount) return 0;
@@ -68,7 +68,7 @@ export const CryptoTopUpForm = () => {
 
       setIsSuccess(true);
     } catch (err: any) {
-      openSnackbar(err?.response?.data?.message ?? err?.message, 'error');
+      showError(err);
       setIsSuccess(false);
     }
 

diff --git a/packages/apps/job-launcher/client/src/components/TopUpAccount/FiatTopUpForm.tsx b/packages/apps/job-launcher/client/src/components/TopUpAccount/FiatTopUpForm.tsx
@@ -29,7 +29,7 @@ export const FiatTopUpForm = () => {
   const [amount, setAmount] = useState<string>();
   const [name, setName] = useState<string>();
   const dispatch = useAppDispatch();
-  const { openSnackbar } = useSnackbar();
+  const { showError } = useSnackbar();
 
   const handleTopUpAccount = async () => {
     if (!stripe || !elements) {
@@ -88,7 +88,7 @@ export const FiatTopUpForm = () => {
 
       setIsSuccess(true);
     } catch (err: any) {
-      openSnackbar(err?.response?.data?.message ?? err?.message, 'error');
+      showError(err);
       setIsSuccess(false);
     }
     setIsLoading(false);

diff --git a/packages/apps/job-launcher/client/src/pages/Home/index.tsx b/packages/apps/job-launcher/client/src/pages/Home/index.tsx
@@ -1,4 +1,4 @@
-import { Alert, Box, Button, Link } from '@mui/material';
+import { Box, Button, Link } from '@mui/material';
 import React, { useState } from 'react';
 import { Navigate } from 'react-router-dom';
 import { SignInForm } from '../../components/Auth/SignInForm';
@@ -9,7 +9,6 @@ import { useAppSelector } from '../../state';
 export default function Home() {
   const [tabValue, setTabValue] = useState(0);
   const [mode, setMode] = useState<string>();
-  const [alertMsg, setAlertMsg] = useState('');
   const { isAuthed } = useAppSelector((state) => state.auth);
 
   if (isAuthed) {
@@ -38,7 +37,6 @@ export default function Home() {
         onChange={(e, newValue) => {
           setTabValue(newValue);
           setMode(undefined);
-          setAlertMsg('');
         }}
         variant="fullWidth"
       >
@@ -59,19 +57,10 @@ export default function Home() {
         }}
         py={8}
       >
-        {alertMsg && alertMsg.length && (
-          <Alert
-            severity="error"
-            onClose={() => setAlertMsg('')}
-            sx={{ mb: 2, maxWidth: '303px', width: '100%' }}
-          >
-            {alertMsg}
-          </Alert>
-        )}
         {tabValue === 0 && (
           <>
             {mode === 'sign_in' ? (
-              <SignInForm onError={(message: string) => setAlertMsg(message)} />
+              <SignInForm />
             ) : (
               <Box px={12} sx={{ textAlign: 'center', width: '100%' }}>
                 <Button
@@ -98,10 +87,7 @@ export default function Home() {
         {tabValue === 1 && (
           <>
             {mode === 'sign_up' ? (
-              <SignUpForm
-                onFinish={handleSignUp}
-                onError={(message: string) => setAlertMsg(message)}
-              />
+              <SignUpForm onFinish={handleSignUp} />
             ) : (
               <Box px={12} sx={{ textAlign: 'center', width: '100%' }}>
                 <Button

diff --git a/packages/apps/job-launcher/client/src/pages/Job/JobDetail/index.tsx b/packages/apps/job-launcher/client/src/pages/Job/JobDetail/index.tsx
@@ -27,7 +27,7 @@ export default function JobDetail() {
   const { jobId } = useParams();
   const { data, isLoading, error, mutate } = useJobDetails(Number(jobId));
   const [isCancelling, setIsCancelling] = useState(false);
-  const { openSnackbar } = useSnackbar();
+  const { openSnackbar, showError } = useSnackbar();
 
   const handleCancel = async () => {
     setIsCancelling(true);
@@ -42,10 +42,7 @@ export default function JobDetail() {
       }
       openSnackbar('Job canceled', 'success');
     } catch (err: any) {
-      openSnackbar(
-        err?.response?.data?.message ?? 'Job cancellation failed.',
-        'error',
-      );
+      showError(err);
     }
     setIsCancelling(false);
   };