From 7530fc7602afc9b433e2be47aa4a96116b940252 Mon Sep 17 00:00:00 2001 From: Jamie Curnow Date: Mon, 26 Jul 2021 12:04:48 +1000 Subject: [PATCH] Add formatjs/intl locale support --- .gitignore | 1 + backend/Taskfile.yml | 113 +++++++++++++++------------ frontend/package.json | 10 ++- frontend/src/App.tsx | 14 ++-- frontend/src/locale/IntlProvider.tsx | 37 +++++++++ frontend/src/locale/index.ts | 1 + frontend/src/locale/src/en.json | 20 +++++ frontend/src/pages/Setup/index.tsx | 51 +++++++++--- scripts/ci/build-frontend | 6 +- 9 files changed, 185 insertions(+), 68 deletions(-) create mode 100644 frontend/src/locale/IntlProvider.tsx create mode 100644 frontend/src/locale/index.ts create mode 100644 frontend/src/locale/src/en.json diff --git a/.gitignore b/.gitignore index 3b0f2056..4ff051a7 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,7 @@ frontend/build frontend/yarn-error.log frontend/yarn.lock frontend/.npmrc +frontend/src/locale/lang test/cypress/fixtures/example.json .vscode docker-build diff --git a/backend/Taskfile.yml b/backend/Taskfile.yml index dd49f17c..81a0bcd0 100644 --- a/backend/Taskfile.yml +++ b/backend/Taskfile.yml @@ -1,56 +1,69 @@ -version: '2' +version: "2" tasks: - default: - cmds: - - task: run + default: + cmds: + - task: run - run: - desc: Build and run - sources: - - internal/**/*.go - - cmd/**/*.go - cmds: - - task: build - - cmd: echo -e "==> Running..." - silent: true - - cmd: ../dist/bin/server - ignore_error: true - silent: true - env: - LOG_LEVEL: debug + run: + desc: Build and run + sources: + - internal/**/*.go + - cmd/**/*.go + - ../frontend/src/locale/src/*.json + cmds: + - task: locale + - task: build + - cmd: echo -e "==> Running..." + silent: true + - cmd: ../dist/bin/server + ignore_error: true + silent: true + env: + LOG_LEVEL: debug - build: - desc: Build the server - cmds: - - cmd: echo -e "==> Building..." - silent: true - - cmd: rm -f dist/bin/* - silent: true - - cmd: go build -ldflags="-X main.commit={{.GIT_COMMIT}} -X main.version={{.VERSION}}" -o ../dist/bin/server ./cmd/server/main.go - silent: true - - task: lint - vars: - GIT_COMMIT: - sh: git log -n 1 --format=%h - VERSION: - sh: cat ../.version - env: - GO111MODULE: on - CGO_ENABLED: 1 + build: + desc: Build the server + cmds: + - cmd: echo -e "==> Building..." + silent: true + - cmd: rm -f dist/bin/* + silent: true + - cmd: go build -ldflags="-X main.commit={{.GIT_COMMIT}} -X main.version={{.VERSION}}" -o ../dist/bin/server ./cmd/server/main.go + silent: true + - task: lint + vars: + GIT_COMMIT: + sh: git log -n 1 --format=%h + VERSION: + sh: cat ../.version + env: + GO111MODULE: on + CGO_ENABLED: 1 - lint: - desc: Linting - cmds: - - cmd: echo -e "==> Linting..." - silent: true - - cmd: bash scripts/lint.sh - silent: true + lint: + desc: Linting + cmds: + - cmd: echo -e "==> Linting..." + silent: true + - cmd: bash scripts/lint.sh + silent: true - test: - desc: Testing - cmds: - - cmd: echo -e "==> Testing..." - silent: true - - cmd: bash scripts/test.sh - silent: true + test: + desc: Testing + cmds: + - cmd: echo -e "==> Testing..." + silent: true + - cmd: bash scripts/test.sh + silent: true + + locale: + desc: Locale + dir: /app/frontend + cmds: + - cmd: yarn locale-compile + silent: true + ignore_error: true + - cmd: chown -R "$PUID:$PGID" src/locale/lang + silent: true + ignore_error: true diff --git a/frontend/package.json b/frontend/package.json index 012b08fe..3336077c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -39,9 +39,10 @@ "node-sass": "^5.0.0", "prettier": "2.3.2", "query-string": "7.0.1", - "react": "17.0.2", + "react": "^17.0.2", "react-async": "10.0.1", "react-dom": "17.0.2", + "react-intl": "^5.20.6", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "rooks": "5.0.2", @@ -60,7 +61,9 @@ "eject": "react-scripts eject", "prettier": "prettier \"**/*.+(js|json|yml|css|ts|tsx)\"", "format": "yarn prettier -- --write", - "lint:fix": "eslint --fix --ext .ts --ext .tsx ." + "lint:fix": "eslint --fix --ext .ts --ext .tsx .", + "locale-extract": "formatjs extract 'src/**/*.tsx' --out-file src/locale/src/en.json", + "locale-compile": "formatjs compile-folder src/locale/src src/locale/lang --ast" }, "browserslist": { "production": [ @@ -88,5 +91,8 @@ "statements": 0 } } + }, + "devDependencies": { + "@formatjs/cli": "^4.2.29" } } diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index ad9a2908..f8dcf294 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,14 +2,18 @@ import React from "react"; import Router from "components/Router"; import { AuthProvider, HealthProvider } from "context"; +import { intl } from "locale"; +import { RawIntlProvider } from "react-intl"; function App() { return ( - - - - - + + + + + + + ); } diff --git a/frontend/src/locale/IntlProvider.tsx b/frontend/src/locale/IntlProvider.tsx new file mode 100644 index 00000000..858713b1 --- /dev/null +++ b/frontend/src/locale/IntlProvider.tsx @@ -0,0 +1,37 @@ +import { createIntl, createIntlCache } from "react-intl"; + +import langEn from "./lang/en.json"; + +// todo +/* +const messages: Record> = { + "en-US": { selectalanguage: "Select a language" }, + "pt-BR": { selectalanguage: "Selecione uma linguagem" }, +}; +*/ +// end todo + +const loadMessages = (locale: string) => { + switch (locale) { + /* + case 'fr': + return import("./lang/fr.json"); + */ + default: + return langEn; + } +}; + +export const initialLocale = "en-US"; +export const cache = createIntlCache(); + +const initialMessages = loadMessages(initialLocale); + +console.log("MESSAGES:", initialMessages); +export const intl = createIntl( + // @ts-ignore messages file typings are correct + { locale: initialLocale, messages: initialMessages }, + cache, +); + +export const fmt = intl.formatMessage; diff --git a/frontend/src/locale/index.ts b/frontend/src/locale/index.ts new file mode 100644 index 00000000..c6dca46d --- /dev/null +++ b/frontend/src/locale/index.ts @@ -0,0 +1 @@ +export * from "./IntlProvider"; diff --git a/frontend/src/locale/src/en.json b/frontend/src/locale/src/en.json new file mode 100644 index 00000000..3c898109 --- /dev/null +++ b/frontend/src/locale/src/en.json @@ -0,0 +1,20 @@ +{ + "setup.create": { + "defaultMessage": "Create Account" + }, + "setup.title": { + "defaultMessage": "Create your first Account" + }, + "user.email": { + "defaultMessage": "Email" + }, + "user.name": { + "defaultMessage": "Name" + }, + "user.nickname": { + "defaultMessage": "Nickname" + }, + "user.password": { + "defaultMessage": "Password" + } +} diff --git a/frontend/src/pages/Setup/index.tsx b/frontend/src/pages/Setup/index.tsx index be62900b..c80270fa 100644 --- a/frontend/src/pages/Setup/index.tsx +++ b/frontend/src/pages/Setup/index.tsx @@ -3,6 +3,8 @@ import React, { useEffect, useRef, useState, ChangeEvent } from "react"; import { createUser } from "api/npm"; import { Alert, Button } from "components"; import { useAuthState, useHealthState } from "context"; +import { fmt } from "locale"; +import { FormattedMessage } from "react-intl"; import logo from "../../img/logo-text-vertical-grey.png"; @@ -81,7 +83,10 @@ function Setup() { onSubmit={onSubmit}>

- Create your first Account +

{errorMessage ? ( @@ -90,7 +95,9 @@ function Setup() { ) : null}
- +
- +
- +
- +
diff --git a/scripts/ci/build-frontend b/scripts/ci/build-frontend index 7500eb05..ecef8e25 100755 --- a/scripts/ci/build-frontend +++ b/scripts/ci/build-frontend @@ -13,8 +13,12 @@ docker_cmd() { cd "${DIR}/../.." || exit 1 echo -e "${BLUE}❯ ${CYAN}Installing Frontend deps ...${RESET}" rm -rf frontend/node_modules - docker_cmd yarn install + +echo -e "${BLUE}❯ ${CYAN}Compiling locales ...${RESET}" +docker_cmd yarn locale-compile +docker_cmd chown -R "$(id -u):$(id -g)" /app/frontend/src/locale/lang + echo -e "${BLUE}❯ ${CYAN}Running eslint ...${RESET}" docker_cmd yarn eslint src docker_cmd yarn eslint -f junit src -o eslint.xml