feat(i18n): translate error messages

apps/client/src/services/auth/logout.ts

@@ -4,9 +4,7 @@ import { axios } from "@/client/libs/axios";
 import { queryClient } from "@/client/libs/query-client";
 import { useAuthStore } from "@/client/stores/auth";
 
-export const logout = async () => {
-  await axios.post("/auth/logout");
-};
+export const logout = () => axios.post("/auth/logout");
 
 export const useLogout = () => {
   const setUser = useAuthStore((state) => state.setUser);

apps/client/src/services/auth/two-factor-authentication/backup-otp.tsx

@@ -1,8 +1,7 @@
 import { AuthResponseDto, TwoFactorBackupDto } from "@reactive-resume/dto";
 import { useMutation } from "@tanstack/react-query";
-import { AxiosError, AxiosResponse } from "axios";
+import { AxiosResponse } from "axios";
 
-import { toast } from "@/client/hooks/use-toast";
 import { axios } from "@/client/libs/axios";
 import { queryClient } from "@/client/libs/query-client";
 import { useAuthStore } from "@/client/stores/auth";
@@ -30,13 +29,6 @@ export const useBackupOtp = () => {
       setUser(data.user);
       queryClient.setQueryData(["user"], data.user);
     },
-    onError: (error) => {
-      if (error instanceof AxiosError) {
-        const message = error.response?.data?.message || error.message;
-
-        toast({ variant: "error", title: message });
-      }
-    },
   });
 
   return { backupOtp: backupOtpFn, loading, error };

apps/client/src/services/auth/two-factor-authentication/verify-otp.tsx

@@ -1,8 +1,7 @@
 import { AuthResponseDto, TwoFactorDto } from "@reactive-resume/dto";
 import { useMutation } from "@tanstack/react-query";
-import { AxiosError, AxiosResponse } from "axios";
+import { AxiosResponse } from "axios";
 
-import { toast } from "@/client/hooks/use-toast";
 import { axios } from "@/client/libs/axios";
 import { queryClient } from "@/client/libs/query-client";
 import { useAuthStore } from "@/client/stores/auth";
@@ -29,13 +28,6 @@ export const useVerifyOtp = () => {
       setUser(data.user);
       queryClient.setQueryData(["user"], data.user);
     },
-    onError: (error) => {
-      if (error instanceof AxiosError) {
-        const message = error.response?.data?.message || error.message;
-
-        toast({ variant: "error", title: message });
-      }
-    },
   });
 
   return { verifyOtp: verifyOtpFn, loading, error };

apps/client/src/services/errors/translate-error.ts

@@ -0,0 +1,46 @@
+import { t } from "@lingui/macro";
+import { ErrorMessage } from "@reactive-resume/utils";
+
+export const translateError = (error: ErrorMessage) => {
+  switch (error) {
+    case ErrorMessage.InvalidCredentials:
+      return t`It doesn't look like a user exists with the credentials you provided.`;
+    case ErrorMessage.UserAlreadyExists:
+      return t`A user with this email address and/or username already exists.`;
+    case ErrorMessage.SecretsNotFound:
+      return t`User does not have an associated 'secrets' record. Please report this issue on GitHub.`;
+    case ErrorMessage.OAuthUser:
+      return t`This email address is associated with an OAuth account. Please sign in with your OAuth provider.`;
+    case ErrorMessage.InvalidResetToken:
+      return t`It looks like the reset token you provided is invalid. Please try restarting the password reset process again.`;
+    case ErrorMessage.InvalidVerificationToken:
+      return t`It looks like the verification token you provided is invalid. Please try restarting the verification process again.`;
+    case ErrorMessage.EmailAlreadyVerified:
+      return t`It looks like your email address has already been verified.`;
+    case ErrorMessage.TwoFactorNotEnabled:
+      return t`Two-factor authentication is not enabled for this account.`;
+    case ErrorMessage.TwoFactorAlreadyEnabled:
+      return t`Two-factor authentication is already enabled for this account.`;
+    case ErrorMessage.InvalidTwoFactorCode:
+      return t`It looks like the two-factor authentication code you provided is invalid. Please try again.`;
+    case ErrorMessage.InvalidTwoFactorBackupCode:
+      return t`It looks like the backup code you provided is invalid or used. Please try again.`;
+    case ErrorMessage.InvalidBrowserConnection:
+      return t`There was an error connecting to the browser. Please make sure 'chrome' is running and reachable.`;
+    case ErrorMessage.ResumeSlugAlreadyExists:
+      return t`A resume with this slug already exists, please pick a different unique identifier.`;
+    case ErrorMessage.ResumeNotFound:
+      return t`It looks like the resume you're looking for doesn't exist.`;
+    case ErrorMessage.ResumeLocked:
+      return t`The resume you want to update is locked, please unlock if you wish to make any changes to it.`;
+    case ErrorMessage.ResumePrinterError:
+      return t`Something went wrong while printing your resume. Please try again later or raise an issue on GitHub.`;
+    case ErrorMessage.ResumePreviewError:
+      return t`Something went wrong while grabbing a preview your resume. Please try again later or raise an issue on GitHub.`;
+    case ErrorMessage.SomethingWentWrong:
+      return t`Something went wrong while processing your request. Please try again later or raise an issue on GitHub.`;
+
+    default:
+      return error;
+  }
+};

apps/client/src/services/resume/print.tsx

@@ -1,10 +1,7 @@
-import { t } from "@lingui/macro";
 import { StatisticsDto, UrlDto } from "@reactive-resume/dto";
 import { useMutation } from "@tanstack/react-query";
-import { AxiosError } from "axios";
 
 import { RESUME_KEY } from "@/client/constants/query-keys";
-import { toast } from "@/client/hooks/use-toast";
 import { axios } from "@/client/libs/axios";
 import { queryClient } from "@/client/libs/query-client";
 
@@ -27,17 +24,6 @@ export const usePrintResume = () => {
         return { ...cache, downloads: cache.downloads + 1 } satisfies StatisticsDto;
       });
     },
-    onError: (error) => {
-      if (error instanceof AxiosError) {
-        const message = error.response?.data.message || error.message;
-
-        toast({
-          variant: "error",
-          title: t`An error occurred while trying to print your resume.`,
-          description: message,
-        });
-      }
-    },
   });
 
   return { printResume: printResumeFn, loading, error };

apps/client/src/services/resume/translation.ts

@@ -1,10 +1,10 @@
-import { LanguageDto } from "@reactive-resume/dto";
+import { Language } from "@reactive-resume/utils";
 import { useQuery } from "@tanstack/react-query";
 
 import { axios } from "@/client/libs/axios";
 
 export const fetchLanguages = async () => {
-  const response = await axios.get<LanguageDto[]>(`/translation/languages`);
+  const response = await axios.get<Language[]>(`/translation/languages`);
 
   return response.data;
 };

apps/client/src/services/resume/update.ts

@@ -1,54 +0,0 @@
-import { t } from "@lingui/macro";
-import { ResumeDto, UpdateResumeDto } from "@reactive-resume/dto";
-import { useMutation } from "@tanstack/react-query";
-import { AxiosError, AxiosResponse } from "axios";
-import debounce from "lodash.debounce";
-
-import { toast } from "@/client/hooks/use-toast";
-import { axios } from "@/client/libs/axios";
-import { queryClient } from "@/client/libs/query-client";
-
-export const updateResume = async (data: UpdateResumeDto) => {
-  try {
-    const response = await axios.patch<ResumeDto, AxiosResponse<ResumeDto>, UpdateResumeDto>(
-      `/resume/${data.id}`,
-      data,
-    );
-
-    queryClient.setQueryData<ResumeDto>(["resume", { id: response.data.id }], response.data);
-
-    queryClient.setQueryData<ResumeDto[]>(["resumes"], (cache) => {
-      if (!cache) return [response.data];
-      return cache.map((resume) => {
-        if (resume.id === response.data.id) return response.data;
-        return resume;
-      });
-    });
-
-    return response.data;
-  } catch (error) {
-    if (error instanceof AxiosError) {
-      const message = error.response?.data.message ?? error.message;
-
-      toast({
-        variant: "error",
-        title: t`There was an error while updating your resume.`,
-        description: message,
-      });
-    }
-  }
-};
-
-export const debouncedUpdateResume = debounce(updateResume, 500);
-
-export const useUpdateResume = () => {
-  const {
-    error,
-    isPending: loading,
-    mutateAsync: updateResumeFn,
-  } = useMutation({
-    mutationFn: updateResume,
-  });
-
-  return { updateResume: updateResumeFn, loading, error };
-};

apps/client/src/services/resume/update.tsx

@@ -0,0 +1,40 @@
+import { ResumeDto, UpdateResumeDto } from "@reactive-resume/dto";
+import { useMutation } from "@tanstack/react-query";
+import { AxiosResponse } from "axios";
+import debounce from "lodash.debounce";
+
+import { axios } from "@/client/libs/axios";
+import { queryClient } from "@/client/libs/query-client";
+
+export const updateResume = async (data: UpdateResumeDto) => {
+  const response = await axios.patch<ResumeDto, AxiosResponse<ResumeDto>, UpdateResumeDto>(
+    `/resume/${data.id}`,
+    data,
+  );
+
+  queryClient.setQueryData<ResumeDto>(["resume", { id: response.data.id }], response.data);
+
+  queryClient.setQueryData<ResumeDto[]>(["resumes"], (cache) => {
+    if (!cache) return [response.data];
+    return cache.map((resume) => {
+      if (resume.id === response.data.id) return response.data;
+      return resume;
+    });
+  });
+
+  return response.data;
+};
+
+export const debouncedUpdateResume = debounce(updateResume, 500);
+
+export const useUpdateResume = () => {
+  const {
+    error,
+    isPending: loading,
+    mutateAsync: updateResumeFn,
+  } = useMutation({
+    mutationFn: updateResume,
+  });
+
+  return { updateResume: updateResumeFn, loading, error };
+};