Add formatjs/intl locale support

.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

backend/Taskfile.yml

@@ -1,4 +1,4 @@
-version: '2'
+version: "2"
 
 tasks:
     default:
@@ -10,7 +10,9 @@ tasks:
         sources:
             - internal/**/*.go
             - cmd/**/*.go
+            - ../frontend/src/locale/src/*.json
         cmds:
+            - task: locale
             - task: build
             - cmd: echo -e "==> Running..."
               silent: true
@@ -54,3 +56,14 @@ tasks:
               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

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"
 	}
 }

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 (
+		<RawIntlProvider value={intl}>
 			<HealthProvider>
 				<AuthProvider>
 					<Router />
 				</AuthProvider>
 			</HealthProvider>
+		</RawIntlProvider>
 	);
 }
 

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<string, Record<string, string>> = {
+	"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;

frontend/src/locale/index.ts

@@ -0,0 +1 @@
+export * from "./IntlProvider";

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"
+	}
+}

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}>
 					<div className="card-body">
 						<h2 className="card-title text-center mb-4">
-							Create your first Account
+							<FormattedMessage
+								id="setup.title"
+								defaultMessage="Create your first Account"
+							/>
 						</h2>
 						{errorMessage ? (
 							<Alert type="danger" className="text-center">
@@ -90,7 +95,9 @@ function Setup() {
 						) : null}
 
 						<div className="mb-3">
-							<label className="form-label">Name</label>
+							<label className="form-label">
+								<FormattedMessage id="user.name" defaultMessage="Name" />
+							</label>
 							<input
 								ref={nameRef}
 								onChange={onChange}
@@ -98,24 +105,34 @@ function Setup() {
 								name="name"
 								value={formData.name}
 								disabled={loading}
-								placeholder="Name"
+								placeholder={fmt({ id: "user.name", defaultMessage: "Name" })}
 								required
 							/>
 						</div>
 						<div className="mb-3">
-							<label className="form-label">Nickname</label>
+							<label className="form-label">
+								<FormattedMessage
+									id="user.nickname"
+									defaultMessage="Nickname"
+								/>
+							</label>
 							<input
 								onChange={onChange}
 								className="form-control"
 								name="nickname"
 								value={formData.nickname}
 								disabled={loading}
-								placeholder="Nickname"
+								placeholder={fmt({
+									id: "user.nickname",
+									defaultMessage: "Nickname",
+								})}
 								required
 							/>
 						</div>
 						<div className="mb-3">
-							<label className="form-label">Email</label>
+							<label className="form-label">
+								<FormattedMessage id="user.email" defaultMessage="Email" />
+							</label>
 							<input
 								type="email"
 								onChange={onChange}
@@ -123,13 +140,21 @@ function Setup() {
 								name="email"
 								value={formData.email}
 								disabled={loading}
-								placeholder="Email"
+								placeholder={fmt({
+									id: "user.email",
+									defaultMessage: "Email",
+								})}
 								maxLength={150}
 								required
 							/>
 						</div>
 						<div className="mb-3">
-							<label className="form-label">Password</label>
+							<label className="form-label">
+								<FormattedMessage
+									id="user.password"
+									defaultMessage="Password"
+								/>
+							</label>
 							<input
 								type="password"
 								onChange={onChange}
@@ -137,7 +162,10 @@ function Setup() {
 								name="password"
 								value={formData.password}
 								disabled={loading}
-								placeholder="Password"
+								placeholder={fmt({
+									id: "user.password",
+									defaultMessage: "Password",
+								})}
 								minLength={8}
 								maxLength={100}
 								autoComplete="off"
@@ -146,7 +174,10 @@ function Setup() {
 						</div>
 						<div className="form-footer">
 							<Button color="cyan" loading={loading} className="w-100">
-								Create Account
+								<FormattedMessage
+									id="setup.create"
+									defaultMessage="Create Account"
+								/>
 							</Button>
 						</div>
 					</div>

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