feat: add dir to the document based on locale

satazor · satazor · commit a85b78b93e7e · 2022-01-30T22:21:53.000Z
Also improve the way locales are declared.
diff --git a/docusaurus/docs/what-is-included/internationalization.md b/docusaurus/docs/what-is-included/internationalization.md
@@ -17,14 +17,14 @@ The integration of `react-intl` into Next.js is made with [`@moxy/next-intl`](ht
 
 ## Adding a new locale
 
-1. Add the locale to the `next.config.js` file.
+1. Add the locale to the `intl/index.js` file.
 2. Add the messages file to `intl/<locale>.json`.
 
 ## Removing this feature
 
 If you are really sure internationalization is not needed in your project, you'll want to remove all the unnecessary `intl` related code. Be sure to follow these steps in order to clean your project properly:
 
 1. Uninstall `react-intl`, `@moxy/next-intl`.
-2. Remove the `intl` folder.
+2. Remove the `intl` folder and update the files that were requiring that folder, removing any related localization code: `next.config.js`, `app/App.js` and `document/Document.js`;
 3. Search globally for `react-intl` and `@moxy/next-intl` and remove the corresponding code across the project.
 4. Update your unit tests if necessary so that they all pass!
diff --git a/intl/index.js b/intl/index.js
@@ -0,0 +1,18 @@
+const locales = [
+    { tag: 'en-US', label: 'English', dir: 'ltr' },
+];
+
+const defaultLocale = 'en-US';
+
+const localesMap = locales.reduce((localesMap, locale) => {
+    localesMap[locale.tag] = locale;
+
+    return localesMap;
+}, {});
+
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+    locales,
+    localesMap,
+    defaultLocale,
+};
diff --git a/jest.setup.js b/jest.setup.js
@@ -1,9 +1,12 @@
+import { defaultLocale as mockDefaultLocale } from './intl';
+
 // Mock Next.js router so that useRouter hook works.
 jest.mock('next/router', () => {
     const router = {
         pathname: '/',
         query: {},
         asPath: '/',
+        locale: mockDefaultLocale,
         events: {
             on: jest.fn(),
             off: jest.fn(),
diff --git a/next.config.js b/next.config.js
@@ -7,6 +7,7 @@ const withPlugins = require('next-compose-plugins');
 const withSitemap = require('@moxy/next-sitemaps/plugin');
 const envVar = require('env-var');
 const { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD } = require('next/constants');
+const { locales, defaultLocale } = require('./intl');
 
 const isEnvRequired = (phase) => phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD;
 
@@ -85,8 +86,8 @@ module.exports = (phase, params) => {
                 ignoreDuringBuilds: true,
             },
             i18n: {
-                locales: ['en-US'],
-                defaultLocale: 'en-US',
+                locales: locales.map(({ tag }) => tag),
+                defaultLocale,
             },
             env: {
                 ...nextConfig.env,
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1 @@
+export { default } from '../www/document';
diff --git a/www/app/App.js b/www/app/App.js
@@ -1,11 +1,13 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
 import KeyboardOnlyOutlines from '@moxy/react-keyboard-only-outlines';
 import { withIntlApp } from '@moxy/next-intl';
 import { LayoutTree } from '@moxy/next-layout';
 import Seo from '@moxy/next-seo';
+import { useRouter } from 'next/router'; // eslint-disable-line no-restricted-imports
 import { RouterScrollProvider } from '@moxy/next-router-scroll';
+import { localesMap } from '../../intl';
 import { Debug as DebugGrid } from '../shared/react/grid';
 import PageSwapper from '../shared/react/page-swapper';
 import MainLayout from '../shared/react/main-layout';
@@ -23,9 +25,16 @@ subscribeToRouter();
 export const App = ({ Component, pageProps }) => {
     useFouc();
 
+    const { locale } = useRouter();
     const seoData = useSeoData();
     const pageKey = usePageKey();
 
+    // Update <html dir> attribute on locale change.
+    useEffect(() => {
+        document.documentElement.dir = localesMap[locale].dir;
+    }, [locale]);
+
+    // Handler for cookie consents.
     const handleCookieConsents = useCallback((cookieConsents) => {
         if (cookieConsents.includes('analytics')) {
             initGTM();
diff --git a/www/document/Document.js b/www/document/Document.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+import { localesMap } from '../../intl';
+
+class MyDocument extends Document {
+    static async getInitialProps(ctx) {
+        const initialProps = await Document.getInitialProps(ctx);
+
+        return { ...initialProps, locale: ctx.locale };
+    }
+
+    render() {
+        const dir = localesMap[this.props.locale].dir;
+
+        return (
+            <Html dir={ dir }>
+                <Head />
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
+}
+
+export default MyDocument;
diff --git a/www/document/index.js b/www/document/index.js
@@ -0,0 +1 @@
+export { default } from './Document';

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default } from '../www/document';`