fix error messages not displaying toasts sometimes, add axios error interceptors

client/constants/index.ts

@@ -17,3 +17,7 @@ export const REDDIT_URL = 'https://www.reddit.com/r/reactiveresume/';
 export const GITHUB_URL = 'https://github.com/AmruthPillai/Reactive-Resume';
 export const PRODUCT_HUNT_URL = 'https://www.producthunt.com/posts/reactive-resume-v3';
 export const GITHUB_ISSUES_URL = 'https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose';
+
+// Default Error Message
+export const DEFAULT_ERROR_MESSAGE =
+  'Something went wrong while performing this action, please report this issue on GitHub.';

client/modals/auth/LoginModal.tsx

@@ -62,14 +62,7 @@ const LoginModal: React.FC = () => {
   };
 
   const onSubmit = async ({ identifier, password }: FormData) => {
-    await loginMutation(
+    await loginMutation({ identifier, password });
-      { identifier, password },
-      {
-        onError: (error) => {
-          toast.error(error.message);
-        },
-      }
-    );
 
     handleClose();
   };
@@ -86,14 +79,14 @@ const LoginModal: React.FC = () => {
 
   const handleLoginWithGoogle = async (response: CredentialResponse) => {
     if (response.credential) {
-      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleLoginWithGoogleError });
+      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleGoogleLoginError });
 
       handleClose();
     }
   };
 
-  const handleLoginWithGoogleError = () => {
+  const handleGoogleLoginError = () => {
-    toast("Please try logging in using email/password, or use another browser that supports Google's One Tap API.");
+    toast.error("Google doesn't seem to be responding, please try logging in using email/password instead.");
   };
 
   const PasswordVisibility = (): React.ReactElement => {
@@ -117,7 +110,7 @@ const LoginModal: React.FC = () => {
       footerChildren={
         <div className="flex gap-4">
           {!isEmpty(env('GOOGLE_CLIENT_ID')) && (
-            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleLoginWithGoogleError} />
+            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleGoogleLoginError} />
           )}
 
           <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}>

client/modals/auth/RegisterModal.tsx

@@ -81,14 +81,14 @@ const RegisterModal: React.FC = () => {
 
   const handleLoginWithGoogle = async (response: CredentialResponse) => {
     if (response.credential) {
-      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleLoginWithGoogleError });
+      await loginWithGoogleMutation({ credential: response.credential }, { onError: handleGoogleLoginError });
 
       handleClose();
     }
   };
 
-  const handleLoginWithGoogleError = () => {
+  const handleGoogleLoginError = () => {
-    toast("Please try logging in using email/password, or use another browser that supports Google's One Tap API.");
+    toast("Google doesn't seem to be responding, please try logging in using email/password instead.");
   };
 
   return (
@@ -100,7 +100,7 @@ const RegisterModal: React.FC = () => {
       footerChildren={
         <div className="flex gap-4">
           {!isEmpty(env('GOOGLE_CLIENT_ID')) && (
-            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleLoginWithGoogleError} />
+            <GoogleLogin onSuccess={handleLoginWithGoogle} onError={handleGoogleLoginError} />
           )}
 
           <Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isLoading}>

client/modals/dashboard/CreateResumeModal.tsx

@@ -6,7 +6,6 @@ import Joi from 'joi';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import toast from 'react-hot-toast';
 import { useMutation } from 'react-query';
 
 import BaseModal from '@/components/shared/BaseModal';
@@ -66,15 +65,10 @@ const CreateResumeModal: React.FC = () => {
   }, [name, setValue]);
 
   const onSubmit = async ({ name, slug, isPublic }: FormData) => {
-    try {
+    await mutateAsync({ name, slug, public: isPublic });
-      await mutateAsync({ name, slug, public: isPublic });
+    await queryClient.invalidateQueries(RESUMES_QUERY);
 
-      await queryClient.invalidateQueries(RESUMES_QUERY);
+    handleClose();
-
-      handleClose();
-    } catch (error: any) {
-      toast.error(error.message);
-    }
   };
 
   const handleClose = () => {

client/modals/dashboard/ImportExternalModal.tsx

@@ -68,8 +68,8 @@ const ImportExternalModal: React.FC = () => {
       }
 
       await mutateAsync({ integration, file });
-
       queryClient.invalidateQueries(RESUMES_QUERY);
+
       handleClose();
     }
   };

client/pages/[username]/[slug]/index.tsx

@@ -15,6 +15,7 @@ import toast from 'react-hot-toast';
 import { useMutation, useQuery } from 'react-query';
 
 import Page from '@/components/build/Center/Page';
+import { DEFAULT_ERROR_MESSAGE } from '@/constants/index';
 import { ServerError } from '@/services/axios';
 import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer';
 import { fetchResumeByIdentifier } from '@/services/resume';
@@ -105,7 +106,7 @@ const Preview: NextPage<Props> = ({ username, slug, resume: initialData }) => {
 
       download(url);
     } catch {
-      toast.error('Something went wrong, please try again later.');
+      toast.error(DEFAULT_ERROR_MESSAGE);
     }
   };
 

client/pages/r/[shortId].tsx

@@ -11,7 +11,6 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useEffect } from 'react';
-import toast from 'react-hot-toast';
 import { useMutation, useQuery } from 'react-query';
 
 import Page from '@/components/build/Center/Page';
@@ -69,17 +68,13 @@ const Preview: NextPage<Props> = ({ shortId }) => {
   const layout: string[][][] = get(resume, 'metadata.layout', []);
 
   const handleDownload = async () => {
-    try {
+    const url = await mutateAsync({
-      const url = await mutateAsync({
+      username: resume.user.username,
-        username: resume.user.username,
+      slug: resume.slug,
-        slug: resume.slug,
+      lastUpdated: dayjs(resume.updatedAt).unix().toString(),
-        lastUpdated: dayjs(resume.updatedAt).unix().toString(),
+    });
-      });
 
-      download(url);
+    download(url);
-    } catch {
-      toast.error('Something went wrong, please try again later.');
-    }
   };
 
   return (

client/services/axios.ts

@@ -1,6 +1,7 @@
 import env from '@beam-australia/react-env';
-import _axios, { RawAxiosRequestHeaders } from 'axios';
+import _axios, { AxiosError, RawAxiosRequestHeaders } from 'axios';
 import Router from 'next/router';
+import { toast } from 'react-hot-toast';
 
 import { logout } from '@/store/auth/authSlice';
 
@@ -29,12 +30,15 @@ axios.interceptors.request.use((config) => {
 
 axios.interceptors.response.use(
   (response) => response,
-  (error) => {
+  (error: AxiosError<ServerError>) => {
     const { response } = error;
 
     if (response) {
-      const errorObject: ServerError = response.data;
+      const errorObject = response.data;
       const code = errorObject.statusCode;
+      const message = errorObject.message;
+
+      toast.error(message);
 
       if (code === 401 || code === 404) {
         store.dispatch(logout());