Added internationalization

2022-08-19 19:06:36 +02:00
parent 8227cc631d
commit 33a5b10fe3
13 changed files with 187 additions and 39 deletions
--- a/components/contexts/GroupProvider.tsx
+++ b/components/contexts/GroupProvider.tsx
@@ -10,7 +10,7 @@ import {
  SetFactoryArrayBody,
  UploadDataBody
 } from '../../src/types/ApiSchemasFrontend'
-import { NextRouter, useRouter } from 'next/router'
+import { useRouter } from 'next/router'

 interface Props {
  children: ReactNodeLike
@@ -93,8 +93,8 @@ interface StoredFile {
  excludedSuggestions: string[]
 }

-export const postFetchJson = async (router: NextRouter, url: string, body: unknown) => {
-  const res = await fetch(router.basePath + url, {
+export const postFetchJson = async (base: string | undefined, url: string, body: unknown) => {
+  const res = await fetch((base ?? '') + url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
@@ -105,7 +105,7 @@ export const postFetchJson = async (router: NextRouter, url: string, body: unkno
 }

 export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
-  const router = useRouter()
+  const { basePath, reload, query } = useRouter()
  const [excludedSuggestions, _setExcludedSuggestions] = useState<string[]>(initial.ignored)
  const [basicValues, _setBasicValues] = useState<string[]>(initial.base)
  const [groups, setGroups] = useState<Dict<Group>>(initial.groups)
@@ -125,23 +125,23 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
  const setExcludedSuggestions = useCallback<typeof _setExcludedSuggestions>(
    val => {
      _setExcludedSuggestions(val)
-      postFetchJson(router, `/api/${fixedEncodeURIComponent(id)}/factories`, {
+      postFetchJson(basePath, `/api/${fixedEncodeURIComponent(id)}/factories`, {
        type: 'ignored',
        factories: val
      } as SetFactoryArrayBody).catch(console.error)
    },
-    [id, router]
+    [id, basePath]
  )

  const setBasicValues = useCallback<typeof _setBasicValues>(
    val => {
      _setBasicValues(val)
-      postFetchJson(router, `/api/${fixedEncodeURIComponent(id)}/factories`, {
+      postFetchJson(basePath, `/api/${fixedEncodeURIComponent(id)}/factories`, {
        type: 'base',
        factories: val
      } as SetFactoryArrayBody).catch(console.error)
    },
-    [id, router]
+    [id, basePath]
  )

  const addGroup = useCallback(
@@ -154,13 +154,13 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
      })
      ;(async () => {
        await postFetchJson(
-          router,
+          basePath,
          `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/add`,
          {}
        )
        if (exports.length) {
          await postFetchJson(
-            router,
+            basePath,
            `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`,
            {
              type: 'exports',
@@ -170,7 +170,7 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
        }
        if (malls.length) {
          await postFetchJson(
-            router,
+            basePath,
            `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`,
            {
              type: 'malls',
@@ -181,7 +181,7 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
      })().catch(console.error)
      return true
    },
-    [groups, id, router]
+    [groups, id, basePath]
  )
  const removeGroup = useCallback(
    (name: string) => {
@@ -191,12 +191,12 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
        return { ...g }
      })
      postFetchJson(
-        router,
+        basePath,
        `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/remove`,
        {}
      ).catch(console.error)
    },
-    [id, router]
+    [id, basePath]
  )
  const renameGroup = useCallback(
    (name: string, newName: string) => {
@@ -209,14 +209,14 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
        return { ...g }
      })
      postFetchJson(
-        router,
+        basePath,
        `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/rename`,
        {
          newName
        } as GroupRenameBody
      ).catch(console.error)
    },
-    [groups, id, router]
+    [groups, id, basePath]
  )

  const setFactories = useCallback(
@@ -227,7 +227,7 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
        return { ...g }
      })
      postFetchJson(
-        router,
+        basePath,
        `/api/${fixedEncodeURIComponent(id)}/group/${fixedEncodeURIComponent(name)}/factories`,
        {
          type,
@@ -235,7 +235,7 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
        } as GroupSetFactoryArrayBody
      ).catch(console.error)
    },
-    [id, router]
+    [id, basePath]
  )
  const getInputType = useCallback(
    (uid: string) => {
@@ -263,14 +263,14 @@ export const GroupProvider: FC<Props> = ({ children, id, initial }) => {
      const uncompressed = pako.inflate(compressed, { to: 'string' })
      const value: StoredFile = JSON.parse(uncompressed)
      if (!value.groups || !value.basicValues || !value.excludedSuggestions) return
-      await postFetchJson(router, `/api/${router.query.id}/upload`, {
+      await postFetchJson(basePath, `/api/${query.id}/upload`, {
        groups: value.groups,
        ignored: value.excludedSuggestions,
        base: value.basicValues
      } as UploadDataBody)
-      router.reload()
+      reload()
    },
-    [router]
+    [basePath, query.id, reload]
  )

  const value: GroupContextType = useMemo(
--- a/components/home/GroupBox/GroupBox.tsx
+++ b/components/home/GroupBox/GroupBox.tsx
@@ -15,7 +15,7 @@ interface Props {
 }

 const GroupBoxBase: FC<Props> = ({ group }) => {
-  const router = useRouter()
+  const { query } = useRouter()
  const { factories, findFactory } = useFactories()
  const {
    doNotSuggest,
@@ -88,7 +88,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
      <Link
        href={{
          pathname: `/visualize/${fixedEncodeURIComponent(group.name)}`,
-          query: router.query
+          query
        }}
      >
        👁
--- a/components/home/Home.tsx
+++ b/components/home/Home.tsx
@@ -9,9 +9,10 @@ import { Preferences } from './Preferences/Preferences'
 import { download, streamToArrayBuffer } from '../../src/download'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { I18n } from '../shared/I18n/I18n'

 export const Home: FC = () => {
-  const router = useRouter()
+  const { query } = useRouter()
  const { factories } = useFactories()
  const { groups, addGroup, doNotSuggest, ignoredFactories, setIgnoredFactories, store, load } =
    useGroups()
@@ -32,7 +33,9 @@ export const Home: FC = () => {

  return (
    <main>
-      <h1>Factorio Microservices</h1>
+      <h1>
+        <I18n id={'page.home.title'} />
+      </h1>
      <button
        onClick={() => {
          download('factorio-microservices.bin', store())
@@ -55,7 +58,7 @@ export const Home: FC = () => {
          }
        }}
      />
-      <Link href={{ pathname: '/visualize', query: router.query }}>Visualize</Link>
+      <Link href={{ pathname: '/visualize', query }}>Visualize</Link>
      <Preferences />
      <fieldset>
        <legend>Missing export factories</legend>
--- a/components/shared/I18n/I18n.tsx
+++ b/components/shared/I18n/I18n.tsx
@@ -0,0 +1,11 @@
+import { FC } from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useMessages } from '../../../src/i18n'
+
+interface Props {
+  id: keyof ReturnType<typeof useMessages>['en']
+}
+
+export const I18n: FC<Props> = ({ id }) => {
+  return <FormattedMessage id={id} />
+}
--- a/components/visualize/NodeOverview/NodeOverview.tsx
+++ b/components/visualize/NodeOverview/NodeOverview.tsx
@@ -17,7 +17,7 @@ interface Props extends HTMLProps<HTMLDivElement> {
 }

 export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
-  const router = useRouter()
+  const { query } = useRouter()
  return (
    <div {...props} className={cx(className, styles.root)}>
      <h3>
@@ -25,7 +25,7 @@ export const NodeOverview: FC<Props> = ({ node, className, ...props }) => {
          <Link
            href={{
              pathname: `/visualize/${fixedEncodeURIComponent(node.name)}`,
-              query: router.query
+              query
            }}
          >
            👁
--- a/next.config.js
+++ b/next.config.js
@@ -16,6 +16,10 @@ const nextConfig = {
  publicRuntimeConfig: {
    TENANT_TYPE: envVar.get('TENANT_TYPE').required(!isBuildStage).asString(),
    NODE_ENV: envVar.get('NODE_ENV').asString()
+  },
+  i18n: {
+    locales: ['en', 'de', 'nl'],
+    defaultLocale: 'en'
  }
 }

--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-indiana-drag-scroll": "^2.2.0",
+    "react-intl": "^6.0.5",
    "react-select": "^5.4.0",
    "react-tooltip": "^4.2.21",
    "seedrandom": "^3.0.5"
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,16 +3,20 @@ import type { AppProps } from 'next/app'
 import { FC } from 'react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
+import { IntlProvider } from 'react-intl'
+import { useMessages } from '../src/i18n'

 const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
-  const router = useRouter()
+  const { basePath, locale: _locale } = useRouter()
+  const messages = useMessages()
+  const locale = _locale ?? '' in messages ? (_locale as keyof typeof messages) : 'en'
  return (
-    <>
+    <IntlProvider locale={locale} messages={messages[locale]}>
      <Head>
-        <link rel='icon' href={`${router.basePath}/favicon.ico`} />
+        <link rel='icon' href={`${basePath}/favicon.ico`} />
      </Head>
      <Component {...pageProps} />
-    </>
+    </IntlProvider>
  )
 }

--- a/res/i18n/de.json
+++ b/res/i18n/de.json
@@ -0,0 +1,3 @@
+{
+  "page.home.title": "Factorio-Microservices"
+}
--- a/res/i18n/en.json
+++ b/res/i18n/en.json
@@ -0,0 +1,6 @@
+{
+  "page.home.head.title": "Next.js i18n example",
+  "page.home.head.meta.description": "Next.js i18n example - English",
+  "page.home.title": "Factorio Microservices",
+  "page.home.description": "You are currently viewing the homepage in English 🚀"
+}
--- a/res/i18n/nl.json
+++ b/res/i18n/nl.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -0,0 +1,11 @@
+import en from '../res/i18n/en.json'
+import de from '../res/i18n/de.json'
+import nl from '../res/i18n/nl.json'
+
+const messages = {
+  en,
+  de: { ...en, ...de },
+  nl: { ...en, ...nl }
+}
+
+export const useMessages = () => messages
--- a/yarn.lock
+++ b/yarn.lock
@@ -191,6 +191,76 @@
    minimatch "^3.1.2"
    strip-json-comments "^3.1.1"

+"@formatjs/ecma402-abstract@1.11.8":
+  version "1.11.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz#f4015dfb6a837369d94c6ba82455c609e45bce20"
+  integrity sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==
+  dependencies:
+    "@formatjs/intl-localematcher" "0.2.28"
+    tslib "2.4.0"
+
+"@formatjs/fast-memoize@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.4.tgz#4b5ddce9eb7803ff0bd4052387672151a8b7f8a0"
+  integrity sha512-9ARYoLR8AEzXvj2nYrOVHY/h1dDMDWGTnKDLXSISF1uoPakSmfcZuSqjiqZX2wRkEUimPxdwTu/agyozBtZRHA==
+  dependencies:
+    tslib "2.4.0"
+
+"@formatjs/icu-messageformat-parser@2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.4.tgz#f1e32b9937f151c1dd5c30536ce3e920b7f23813"
+  integrity sha512-3PqMvKWV1oyok0BuiXUAHIaotdhdTJw6OICqCZbfUgKT+ZRwRWO4IlCgvXJeCITaKS5p+PY0XXKjf/vUyIpWjQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/icu-skeleton-parser" "1.3.10"
+    tslib "2.4.0"
+
+"@formatjs/icu-skeleton-parser@1.3.10":
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.10.tgz#2f504e56ac80137ee2baad55c7fa0b5dc7f4e4df"
+  integrity sha512-kXJmtLDqFF5aLTf8IxdJXnhrIX1Qb4Qp3a9jqRecGDYfzOa9hMhi9U0nKyhrJJ4cXxBzptcgb+LWkyeHL6nlBQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    tslib "2.4.0"
+
+"@formatjs/intl-displaynames@6.0.3":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-6.0.3.tgz#e648a91bccd9fb21519090eaafece3be9d15f480"
+  integrity sha512-Mxh6W1VOlmiEvO/QPBrBQHlXrIn5VxjJWyyEI0V7ZHNGl0ee8AjSlq7vIJG8GodRJqGUuutF6N3OB/6qFv0YWg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/intl-localematcher" "0.2.28"
+    tslib "2.4.0"
+
+"@formatjs/intl-listformat@7.0.3":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-7.0.3.tgz#8627969b77849559d148bc9536d0884c2271e6de"
+  integrity sha512-ampNLRGZl/08epHa3i5sRmcHGLneC6JrknexbbgnexYFNSmJ6AbL/dCzgrQzw2Efl+5AZK7UbNFxcDYY3RePvw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/intl-localematcher" "0.2.28"
+    tslib "2.4.0"
+
+"@formatjs/intl-localematcher@0.2.28":
+  version "0.2.28"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.28.tgz#412ea7fefbfc7ed33cd6b43aa304fc14d816e564"
+  integrity sha512-FLsc6Gifs1np/8HnCn/7Q+lHMmenrD5fuDhRT82yj0gi9O19kfaFwjQUw1gZsyILuRyT93GuzdifHj7TKRhBcw==
+  dependencies:
+    tslib "2.4.0"
+
+"@formatjs/intl@2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-2.3.1.tgz#eccd6d03e4db18c256181f235b1d0a7f7aaebf5a"
+  integrity sha512-f06qZ/ukpeN24gc01qFjh3P+r3FU/ikY4yG+fDJu6dPNvpUQzDy98lYogA1dr6ig2UtrnoEk3xncyFPL1e9cZw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/fast-memoize" "1.2.4"
+    "@formatjs/icu-messageformat-parser" "2.1.4"
+    "@formatjs/intl-displaynames" "6.0.3"
+    "@formatjs/intl-listformat" "7.0.3"
+    intl-messageformat "10.1.1"
+    tslib "2.4.0"
+
 "@humanwhocodes/config-array@^0.10.4":
  version "0.10.4"
  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz"
@@ -371,6 +441,14 @@
    "@types/minimatch" "*"
    "@types/node" "*"

+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/json-schema@^7.0.11", "@types/json-schema@^7.0.6", "@types/json-schema@^7.0.9":
  version "7.0.11"
  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz"
@@ -448,7 +526,7 @@
  dependencies:
    "@types/react" "*"

-"@types/react@*", "@types/react@18.0.17":
+"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@18.0.17":
  version "18.0.17"
  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.17.tgz"
  integrity sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==
@@ -1885,7 +1963,7 @@ he@1.2.0:
  resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==

-hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
  version "3.3.2"
  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -1979,6 +2057,16 @@ internal-slot@^1.0.3:
    has "^1.0.3"
    side-channel "^1.0.4"

+intl-messageformat@10.1.1:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.1.1.tgz#226767e7921fa86cef2cbe4a13911050716720bc"
+  integrity sha512-FeJne2oooYW6shLPbrqyjRX6hTELVrQ90Dn88z7NomLk/xZBCLxLPAkgaYaTQJBRBV78nZ933d8APHHkTQrD9Q==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/fast-memoize" "1.2.4"
+    "@formatjs/icu-messageformat-parser" "2.1.4"
+    tslib "2.4.0"
+
 ip@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz"
@@ -2957,6 +3045,22 @@ react-indiana-drag-scroll@^2.2.0:
    debounce "^1.2.0"
    easy-bem "^1.1.1"

+react-intl@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.0.5.tgz#8adcb9108682c82e625a8ce7826283afd3537f62"
+  integrity sha512-nDZ3BosuE8WdovcGxsrjj1aIgJZklSL5aORs5oah+5tLQTzUdOEstzJEYQPM+sxl1dkDOu7RCuw0z9oI9ENf9g==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/icu-messageformat-parser" "2.1.4"
+    "@formatjs/intl" "2.3.1"
+    "@formatjs/intl-displaynames" "6.0.3"
+    "@formatjs/intl-listformat" "7.0.3"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/react" "16 || 17 || 18"
+    hoist-non-react-statics "^3.3.2"
+    intl-messageformat "10.1.1"
+    tslib "2.4.0"
+
 react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -3588,16 +3692,16 @@ tsconfig-paths@^3.14.1:
    minimist "^1.2.6"
    strip-bom "^3.0.0"

+tslib@2.4.0, tslib@^2.1.0, tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^1.8.1:
  version "1.14.1"
  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

-tslib@^2.1.0, tslib@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
-  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
-
 tsutils@^3.21.0:
  version "3.21.0"
  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"