Load i18n namespace

Kamahl19 · Feb 1, 2024 · c3a718c · c3a718c
1 parent 836dd3a
commit c3a718c
Show file tree

Hide file tree

Showing 23 changed files with 90 additions and 95 deletions.
diff --git a/src/app/providers/Theme.tsx b/src/app/providers/Theme.tsx
@@ -33,15 +33,15 @@ const themePersistedAtom = atomWithStorage<Theme | typeof SYSTEM_THEME>(
 );
 
 export const useTheme = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('global');
 
   const [theme, setTheme] = useAtom(themePersistedAtom);
 
   const themes = useMemo(
     () => [
-      { value: Theme.LIGHT, label: t('global:theme.light') },
-      { value: Theme.DARK, label: t('global:theme.dark') },
-      { value: SYSTEM_THEME, label: t('global:theme.system') },
+      { value: Theme.LIGHT, label: t('theme.light') },
+      { value: Theme.DARK, label: t('theme.dark') },
+      { value: SYSTEM_THEME, label: t('theme.system') },
     ],
     [t],
   );

diff --git a/src/common/components/Loading/index.tsx b/src/common/components/Loading/index.tsx
@@ -4,12 +4,12 @@ import { Loader2 } from 'lucide-react';
 import { Typography } from '@/common/components';
 
 const Loading = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
 
   return (
     <div className="flex h-full items-center justify-center gap-x-2">
       <Loader2 className="size-4 animate-spin" />
-      <Typography variant="mutedText">{t('common:loading')}</Typography>
+      <Typography variant="mutedText">{t('loading')}</Typography>
     </div>
   );
 };

diff --git a/src/common/components/NotFound/index.tsx b/src/common/components/NotFound/index.tsx
@@ -4,14 +4,14 @@ import { Typography } from '@/common/components';
 import { Separator } from '@/common/components/ui/separator';
 
 const NotFound = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
 
   return (
     <div className="flex h-full items-center justify-center">
       <div className="flex flex-col items-center gap-x-6 gap-y-2 sm:flex-row">
-        <Typography variant="h4">{t('common:notFound.title')}</Typography>
+        <Typography variant="h4">{t('notFound.title')}</Typography>
         <Separator orientation="vertical" className="hidden h-10 sm:block" />
-        <Typography variant="regularText">{t('common:notFound.subtitle')}</Typography>
+        <Typography variant="regularText">{t('notFound.subtitle')}</Typography>
       </div>
     </div>
   );

diff --git a/src/common/components/ResultError/index.tsx b/src/common/components/ResultError/index.tsx
@@ -11,7 +11,7 @@ type Props = {
 };
 
 const ResultError = ({ onReset, error, className }: Props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
 
   const message =
     typeof error === 'object' &&
@@ -27,12 +27,12 @@ const ResultError = ({ onReset, error, className }: Props) => {
   return (
     <div className={cn('flex h-full items-center justify-center', className)}>
       <div>
-        <Typography variant="h2">{t('common:resultError.title')}</Typography>
-        <Typography variant="p">{t('common:resultError.description')}</Typography>
+        <Typography variant="h2">{t('resultError.title')}</Typography>
+        <Typography variant="p">{t('resultError.description')}</Typography>
         {message && <Typography variant="blockquote">{message}</Typography>}
         {onReset && (
           <Button onClick={onReset} className="mt-7">
-            {t('common:resultError.reload')}
+            {t('resultError.reload')}
           </Button>
         )}
       </div>

diff --git a/src/common/components/StickyHeader/index.tsx b/src/common/components/StickyHeader/index.tsx
@@ -61,7 +61,7 @@ type DrawerProps = {
 };
 
 const Drawer = ({ headerSlot, items }: DrawerProps) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('common');
 
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
@@ -76,7 +76,7 @@ const Drawer = ({ headerSlot, items }: DrawerProps) => {
       <SheetTrigger asChild>
         <Button variant="ghost" size="icon">
           <Menu className="size-5" />
-          <span className="sr-only">{t('common:stickyHeader.toggleDrawer')}</span>
+          <span className="sr-only">{t('stickyHeader.toggleDrawer')}</span>
         </Button>
       </SheetTrigger>
       <SheetContent side="left">

diff --git a/src/common/components/ui/sheet.tsx b/src/common/components/ui/sheet.tsx
@@ -62,7 +62,7 @@ const SheetContent = React.forwardRef<
       {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
-        <span className="sr-only">{useTranslation().t('global:close')}</span>
+        <span className="sr-only">{useTranslation('global').t('close')}</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>

diff --git a/src/common/hooks/usePrintErrorMessage.ts b/src/common/hooks/usePrintErrorMessage.ts
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 
 const usePrintErrorMessage = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('global');
 
   return useCallback(
     (error: unknown) => {
@@ -21,7 +21,7 @@ const usePrintErrorMessage = () => {
       } else if (typeof error === 'string') {
         toast.error(error);
       } else {
-        toast.error(t('global:unexpectedError'));
+        toast.error(t('unexpectedError'));
       }
     },
     [t],

diff --git a/src/features/auth/components/Header/LanguageDropdown.tsx b/src/features/auth/components/Header/LanguageDropdown.tsx
@@ -12,7 +12,7 @@ import {
 } from '@/common/components/ui/dropdown-menu';
 
 const LanguageDropdown = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('auth');
 
   const [{ code }, setLanguage] = useLanguage();
 
@@ -21,7 +21,7 @@ const LanguageDropdown = () => {
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon">
           <Languages className="size-5" />
-          <span className="sr-only">{t('auth:header.chooseLanguage')}</span>
+          <span className="sr-only">{t('header.chooseLanguage')}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">

diff --git a/src/features/auth/components/Header/ThemeDropdown.tsx b/src/features/auth/components/Header/ThemeDropdown.tsx
@@ -12,7 +12,7 @@ import {
 } from '@/common/components/ui/dropdown-menu';
 
 const ThemeDropdown = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('auth');
 
   const { rawTheme, setTheme, themes } = useTheme();
 
@@ -22,7 +22,7 @@ const ThemeDropdown = () => {
         <Button variant="ghost" size="icon">
           <Sun className="size-5 dark:hidden" />
           <Moon className="hidden size-5 dark:block" />
-          <span className="sr-only">{t('auth:header.chooseTheme')}</span>
+          <span className="sr-only">{t('header.chooseTheme')}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">

diff --git a/src/features/auth/components/Header/index.tsx b/src/features/auth/components/Header/index.tsx
@@ -11,7 +11,7 @@ import LanguageDropdown from './LanguageDropdown';
 import ThemeDropdown from './ThemeDropdown';
 
 const Header = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('auth');
 
   const { isLoggedIn } = useAuth();
 
@@ -22,8 +22,8 @@ const Header = () => {
       (isLoggedIn
         ? []
         : [
-            { to: AUTH_ROUTES.signIn.to, label: t('auth:header.signIn') },
-            { to: AUTH_ROUTES.signUp.to, label: t('auth:header.signUp') },
+            { to: AUTH_ROUTES.signIn.to, label: t('header.signIn') },
+            { to: AUTH_ROUTES.signUp.to, label: t('header.signUp') },
           ]
       ).map((item) => ({
         ...item,

diff --git a/src/features/auth/pages/ConfirmEmail.tsx b/src/features/auth/pages/ConfirmEmail.tsx
@@ -9,7 +9,7 @@ import { Loading, ResultError } from '@/common/components';
 import { AUTH_ROUTES } from '../routes';
 
 const ConfirmEmail = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('auth');
 
   const navigate = useNavigate();
 
@@ -20,7 +20,7 @@ const ConfirmEmail = () => {
   useOnMount(() => {
     mutate(token, {
       onSuccess: () => {
-        toast.success(t('auth:confirmEmail.success'));
+        toast.success(t('confirmEmail.success'));
         navigate(AUTH_ROUTES.signIn.to);
       },
     });

diff --git a/src/features/auth/pages/ResetPassword.tsx b/src/features/auth/pages/ResetPassword.tsx
@@ -22,7 +22,7 @@ import Success from '../components/Success';
 import { useResetPasswordValidation, type ResetPasswordFields } from '../validations';
 
 const ResetPassword = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('auth');
 
   const [success, setSuccess] = useState(false);
 
@@ -58,14 +58,14 @@ const ResetPassword = () => {
   if (success) {
     return (
       <Success
-        title={t('auth:resetPassword.success.title')}
-        description={t('auth:resetPassword.success.subTitle')}
+        title={t('resetPassword.success.title')}
+        description={t('resetPassword.success.subTitle')}
       />
     );
   }
 
   return (
-    <FormWrapper title={t('auth:resetPassword.title')}>
+    <FormWrapper title={t('resetPassword.title')}>
       <Form form={form} onSubmit={onSubmit} id="auth-form">
         {{
           formFields: (
@@ -74,7 +74,7 @@ const ResetPassword = () => {
               name="email"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>{t('auth:resetPassword.email')}</FormLabel>
+                  <FormLabel>{t('resetPassword.email')}</FormLabel>
                   <FormControl>
                     <Input type="email" {...field} />
                   </FormControl>

diff --git a/src/features/auth/pages/SignIn.tsx b/src/features/auth/pages/SignIn.tsx
@@ -22,7 +22,7 @@ import { useSignInValidation, type SignInFields } from '../validations';
 import { AUTH_ROUTES } from '../routes';
 
 const SignIn = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('auth');
 
   const { signIn, isPending } = useSignIn();
 
@@ -42,7 +42,7 @@ const SignIn = () => {
   );
 
   return (
-    <FormWrapper title={t('auth:signIn.title')}>
+    <FormWrapper title={t('signIn.title')}>
       <Form form={form} onSubmit={onSubmit} id="auth-form">
         {{
           formFields: (
@@ -52,7 +52,7 @@ const SignIn = () => {
                 name="email"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('auth:signIn.email')}</FormLabel>
+                    <FormLabel>{t('signIn.email')}</FormLabel>
                     <FormControl>
                       <Input type="email" {...field} />
                     </FormControl>
@@ -65,7 +65,7 @@ const SignIn = () => {
                 name="password"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('auth:signIn.password')}</FormLabel>
+                    <FormLabel>{t('signIn.password')}</FormLabel>
                     <FormControl>
                       <Input type="password" {...field} />
                     </FormControl>
@@ -78,10 +78,10 @@ const SignIn = () => {
           footer: (
             <>
               <Button form="auth-form" type="submit" disabled={isPending} loading={isPending} block>
-                {t('auth:signIn.submit')}
+                {t('signIn.submit')}
               </Button>
               <Typography variant="regularText" className="mt-4">
-                <Link to={AUTH_ROUTES.resetPassword.to}>{t('auth:signIn.resetPassword')}</Link>
+                <Link to={AUTH_ROUTES.resetPassword.to}>{t('signIn.resetPassword')}</Link>
               </Typography>
             </>
           ),

diff --git a/src/features/auth/pages/SignUp.tsx b/src/features/auth/pages/SignUp.tsx
@@ -24,7 +24,7 @@ import { useSignUpValidation, type SignUpFields } from '../validations';
 const DEBOUNCE_MS = 500;
 
 const SignUp = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('auth');
 
   const [success, setSuccess] = useState(false);
 
@@ -57,16 +57,11 @@ const SignUp = () => {
   const { data: isUserEmailAvailable } = useFetchUserEmailAvailability(emailValue);
 
   if (success) {
-    return (
-      <Success
-        title={t('auth:signUp.success.title')}
-        description={t('auth:signUp.success.subTitle')}
-      />
-    );
+    return <Success title={t('signUp.success.title')} description={t('signUp.success.subTitle')} />;
   }
 
   return (
-    <FormWrapper title={t('auth:signUp.title')}>
+    <FormWrapper title={t('signUp.title')}>
       <Form form={form} onSubmit={onSubmit} id="auth-form">
         {{
           formFields: (
@@ -76,12 +71,12 @@ const SignUp = () => {
                 name="email"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('auth:signUp.email')}</FormLabel>
+                    <FormLabel>{t('signUp.email')}</FormLabel>
                     <FormControl>
                       <Input type="email" {...field} />
                     </FormControl>
                     <FormMessage>
-                      {isUserEmailAvailable ? null : t('auth:signUp.emailTaken')}
+                      {isUserEmailAvailable ? null : t('signUp.emailTaken')}
                     </FormMessage>
                   </FormItem>
                 )}
@@ -91,7 +86,7 @@ const SignUp = () => {
                 name="password"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>{t('auth:signUp.password')}</FormLabel>
+                    <FormLabel>{t('signUp.password')}</FormLabel>
                     <FormControl>
                       <Input type="password" {...field} />
                     </FormControl>
@@ -103,7 +98,7 @@ const SignUp = () => {
           ),
           footer: (
             <Button form="auth-form" type="submit" disabled={isPending} loading={isPending} block>
-              {t('auth:signUp.submit')}
+              {t('signUp.submit')}
             </Button>
           ),
         }}

diff --git a/src/features/auth/validations.ts b/src/features/auth/validations.ts
@@ -5,14 +5,14 @@ import { useTranslation } from 'react-i18next';
 import { PASSWORD_MIN_LENGTH } from '@/api';
 
 export const useSignUpValidation = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('global');
 
   return useMemo(
     () =>
       z.object({
-        email: z.string().email({ message: t('global:validations.email') }),
+        email: z.string().email({ message: t('validations.email') }),
         password: z.string().min(PASSWORD_MIN_LENGTH, {
-          message: t('global:validations.password', { minLength: PASSWORD_MIN_LENGTH }),
+          message: t('validations.password', { minLength: PASSWORD_MIN_LENGTH }),
         }),
       }),
     [t],
@@ -21,26 +21,26 @@ export const useSignUpValidation = () => {
 export type SignUpFields = z.infer<ReturnType<typeof useSignUpValidation>>;
 
 export const useSignInValidation = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('global');
 
   return useMemo(
     () =>
       z.object({
-        email: z.string().email({ message: t('global:validations.email') }),
-        password: z.string().min(1, { message: t('global:validations.required') }),
+        email: z.string().email({ message: t('validations.email') }),
+        password: z.string().min(1, { message: t('validations.required') }),
       }),
     [t],
   );
 };
 export type SignInFields = z.infer<ReturnType<typeof useSignInValidation>>;
 
 export const useResetPasswordValidation = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('global');
 
   return useMemo(
     () =>
       z.object({
-        email: z.string().email({ message: t('global:validations.email') }),
+        email: z.string().email({ message: t('validations.email') }),
       }),
     [t],
   );