Merge pull request #106 from SkrzypMajster/feat/add-new-utils-for-handling-translations

feat: add new utils for handling translations

Author: qh4r

.changeset/polite-moons-lie.md

@@ -0,0 +1,5 @@
+---
+'react-starter-boilerplate': patch
+---
+
+feat: Add new utils for handling translations in application

src/app/home/Home.tsx

@@ -1,16 +1,16 @@
 import { Fragment } from 'react';
 
-import { useLocale } from 'hooks/useLocale/useLocale';
+import { AppRoute } from 'routing/AppRoute.enum';
 import { AppLocale } from 'context/locale/AppLocale.enum';
-import { AppMessages } from 'i18n/messages';
-import { LocationInfo } from 'ui/locationInfo/LocationInfo';
+import { useLocale } from 'hooks/useLocale/useLocale';
 import { useAuth } from 'hooks/useAuth/useAuth';
-import { useUsers } from '../../hooks/useUsers/useUsers';
-import { AppRoute } from 'routing/AppRoute.enum';
+import { useUsers } from 'hooks/useUsers/useUsers';
 import { useNavigate } from 'hooks/useNavigate/useNavigate';
+import { Translation } from 'ui/translation/Translation';
+import { LocationInfo } from 'ui/locationInfo/LocationInfo';
 
 export const Home = () => {
-  const { formatMessage, locale, setLocale } = useLocale();
+  const { locale, setLocale } = useLocale();
   const { user, login, logout, isAuthenticated, isAuthenticating } = useAuth();
 
   const {
@@ -28,13 +28,12 @@ export const Home = () => {
     <>
       <h2>Home</h2>
       <p>
-        {formatMessage({ id: AppMessages['home.helloWorld'] })}
+        <Translation id="home.helloWorld" />
         <span style={{ margin: '0 1rem' }}>&#x2190;</span>
-        This text is translated using{' '}
-        <a href="https://github.com/formatjs/react-intl/blob/master/docs/API.md#formatmessage">
-          <code>formatMessage</code>
-        </a>{' '}
-        function from <a href="https://github.com/formatjs/react-intl">react-intl</a>. Click{' '}
+        <span>
+          This text is translated using <strong>Translation</strong> component.
+        </span>
+        <span>Click </span>
         <button
           style={{ fontSize: 'inherit' }}
           onClick={() => setLocale(locale === AppLocale.pl ? AppLocale.en : AppLocale.pl)}

src/hooks/useLocale/useLocale.ts

@@ -1,24 +1,27 @@
-import { useContext, useMemo } from 'react';
-import { IntlShape, useIntl } from 'react-intl';
+import { useContext, useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
 
+import type { TranslateFn } from 'i18n/messages';
 import { LocaleContext } from 'context/locale/localeContext/LocaleContext';
-import { LocaleContextValueType } from 'context/locale/localeContext/LocaleContext.types';
 
-export const useLocale = (): IntlShape & LocaleContextValueType => {
+import { UseLocaleReturnType } from './useLocale.types';
+
+export const useLocale: UseLocaleReturnType = () => {
   const intl = useIntl();
   const localeContext = useContext(LocaleContext);
 
   if (localeContext === undefined) {
     throw new Error('LocaleContext is unavailable, make sure you are using LocaleContextController');
   }
 
-  const locale = useMemo(
+  const t: TranslateFn = useCallback((id, value?) => intl.formatMessage({ id }, value), [intl]);
+
+  return useMemo(
     () => ({
       ...intl,
       ...localeContext,
+      t,
     }),
-    [intl, localeContext],
+    [intl, localeContext, t],
   );
-
-  return locale;
 };

src/hooks/useLocale/useLocale.types.ts

@@ -0,0 +1,10 @@
+import type { IntlShape } from 'react-intl';
+
+import type { TranslateFn } from 'i18n/messages';
+import type { LocaleContextValueType } from 'context/locale/localeContext/LocaleContext.types';
+
+export type WithTranslateFn = {
+  t: TranslateFn;
+};
+
+export type UseLocaleReturnType = () => IntlShape & LocaleContextValueType & WithTranslateFn;

src/i18n/messages.ts

@@ -1,26 +1,31 @@
+import type { PrimitiveType } from 'intl-messageformat/src/formatters';
+
 import { AppLocale } from 'context/locale/AppLocale.enum';
 
 import enMessages from './data/en.json';
 import plMessages from './data/pl.json';
 
 type KeyAsValue<T> = { [P in keyof T]: P };
 
-const keysToValues = <T extends Record<string, string | unknown>>(source: T): KeyAsValue<typeof source> => {
-  return (Object.keys(source) as Array<keyof T>).reduce(
+const keysToValues = <T extends Record<string, string | unknown>>(source: T): KeyAsValue<typeof source> =>
+  (Object.keys(source) as Array<keyof T>).reduce(
     (accumulated, current) => {
       accumulated[current] = current;
       return accumulated;
     },
     {} as KeyAsValue<typeof source>,
   );
-};
 
 export const AppMessages = {
   ...keysToValues(enMessages),
   ...keysToValues(plMessages),
 };
 
-export const translations: Record<AppLocale, Record<keyof typeof AppMessages, string>> = {
+export type Translation = keyof typeof AppMessages;
+
+export type TranslateFn = (id: Translation, value?: Record<string, PrimitiveType>) => string;
+
+export const translations: Record<AppLocale, Record<Translation, string>> = {
   [AppLocale.en]: enMessages,
   [AppLocale.pl]: plMessages,
 };

src/ui/translation/Translation.tsx

@@ -0,0 +1,10 @@
+import { useLocale } from 'hooks/useLocale/useLocale';
+import { AppMessages } from 'i18n/messages';
+
+import { TranslationProps } from './Translation.types';
+
+export const Translation = ({ id, values }: TranslationProps) => {
+  const { formatMessage } = useLocale();
+
+  return <>{formatMessage({ id: AppMessages[id] }, values)}</>;
+};

src/ui/translation/Translation.types.ts

@@ -0,0 +1,8 @@
+import { PrimitiveType } from 'react-intl';
+
+import { Translation } from 'i18n/messages';
+
+export type TranslationProps = {
+  id: Translation;
+  values?: Record<string, PrimitiveType>;
+};