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

This commit is contained in:
Amruth Pillai
2023-01-18 21:36:05 +01:00
parent c9850b5815
commit 5024c19f87
8 changed files with 32 additions and 41 deletions

View File

@ -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.';

View File

@ -62,14 +62,7 @@ const LoginModal: React.FC = () => {
};
const onSubmit = async ({ identifier, password }: FormData) => {
await loginMutation(
{ identifier, password },
{
onError: (error) => {
toast.error(error.message);
},
}
);
await loginMutation({ identifier, password });
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 = () => {
toast("Please try logging in using email/password, or use another browser that supports Google's One Tap API.");
const handleGoogleLoginError = () => {
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}>

View File

@ -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 = () => {
toast("Please try logging in using email/password, or use another browser that supports Google's One Tap API.");
const handleGoogleLoginError = () => {
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}>

View File

@ -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 queryClient.invalidateQueries(RESUMES_QUERY);
handleClose();
} catch (error: any) {
toast.error(error.message);
}
};
const handleClose = () => {

View File

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

View File

@ -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);
}
};

View File

@ -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,7 +68,6 @@ const Preview: NextPage<Props> = ({ shortId }) => {
const layout: string[][][] = get(resume, 'metadata.layout', []);
const handleDownload = async () => {
try {
const url = await mutateAsync({
username: resume.user.username,
slug: resume.slug,
@ -77,9 +75,6 @@ const Preview: NextPage<Props> = ({ shortId }) => {
});
download(url);
} catch {
toast.error('Something went wrong, please try again later.');
}
};
return (

View File

@ -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());