refactor: dynamic translation logic

Author: bishalshrestha013

packages/i18n/src/locales/en/errors.json

@@ -1,6 +1,7 @@
 {
   "errors": {
-    "401": "The credentials you input are invalid.",
+    "401": "Invalid credentials. Please check your email or password and try again.",
+    "emailAlreadyExists": "This email already exists. Please sign in instead.",
     "otherErrors": "Oops! Something went wrong."
   }
 }

packages/i18n/src/locales/fr/errors.json

@@ -1,6 +1,7 @@
 {
   "errors": {
-    "401": "The credentials you input are invalid (fr).",
+    "401": "Invalid credentials. Please check your email or password and try again. (fr)",
+    "emailAlreadyExists": "This email already exists. Please sign in instead. (fr)",
     "otherErrors": "Oops! Something went wrong (fr)."
   }
 }

packages/user/src/components/Login/LoginWrapper.tsx

@@ -35,7 +35,8 @@ export const LoginWrapper: FC<IProperties> = ({
   const { setUser } = useUser();
   const config = useConfig();
   const [loginLoading, setLoginLoading] = useState<boolean>(false);
-  const [loginError, setLoginError] = useState<string | null>(null);
+  const [loginError, setLoginError] = useState(false);
+  const [loginErrorKey, setLoginErrorKey] = useState<string | null>(null);
 
   const links: Array<LinkType> = [
     {
@@ -72,11 +73,10 @@ export const LoginWrapper: FC<IProperties> = ({
           }
         })
         .catch(async (error) => {
-          const errorMessage = `errors.${error.message}`;
-
           onLoginFailed && (await onLoginFailed(error));
 
-          setLoginError(t(errorMessage, { ns: "errors" }));
+          setLoginError(true);
+          setLoginErrorKey(`errors.${error.message}`);
         });
 
       setLoginLoading(false);
@@ -85,11 +85,14 @@ export const LoginWrapper: FC<IProperties> = ({
 
   return (
     <>
-      {loginError && (
+      {loginError && loginErrorKey && (
         <Message
           enableClose={true}
-          message={loginError}
-          onClose={() => setLoginError(null)}
+          message={t(loginErrorKey, { ns: "errors" })}
+          onClose={() => {
+            setLoginError(false);
+            setLoginErrorKey(null);
+          }}
           severity="danger"
         />
       )}

packages/user/src/components/Signup/SignupWrapper.tsx

@@ -34,7 +34,8 @@ export const SignupWrapper: React.FC<IProperties> = ({
 }) => {
   const { t } = useTranslation("user");
   const [signupLoading, setSignupLoading] = useState<boolean>(false);
-  const [signupError, setSignupError] = useState<string | null>(null);
+  const [signupError, setSignupError] = useState(false);
+  const [signupErrorKey, setSignupErrorKey] = useState<string | null>(null);
 
   const { setUser } = useUser();
   const config = useConfig();
@@ -89,13 +90,15 @@ export const SignupWrapper: React.FC<IProperties> = ({
         .catch(async (error) => {
           onSignupFailed && (await onSignupFailed(error));
 
+          setSignupError(true);
+
           if (error.message.includes("email already exists")) {
-            setSignupError(t("errors.emailAlreadyExists", { ns: "errors" }));
+            setSignupErrorKey("errors.emailAlreadyExists");
 
             return;
           }
 
-          setSignupError(t("errors.otherErrors", { ns: "errors" }));
+          setSignupErrorKey("errors.otherErrors");
         })
         .finally(() => {
           setSignupLoading(false);
@@ -105,11 +108,14 @@ export const SignupWrapper: React.FC<IProperties> = ({
 
   return (
     <>
-      {signupError && (
+      {signupError && signupErrorKey && (
         <Message
           enableClose={true}
-          message={signupError}
-          onClose={() => setSignupError(null)}
+          message={t(signupErrorKey, { ns: "errors" })}
+          onClose={() => {
+            setSignupError(false);
+            setSignupErrorKey(null);
+          }}
           severity="danger"
         />
       )}