Skip to content

Commit 7530fc7

Browse files
jc21jc21
committed
Add formatjs/intl locale support
1 parent bc2bd67 commit 7530fc7

File tree

9 files changed

+185
-68
lines changed

9 files changed

+185
-68
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ frontend/build
1414
frontend/yarn-error.log
1515
frontend/yarn.lock
1616
frontend/.npmrc
17+
frontend/src/locale/lang
1718
test/cypress/fixtures/example.json
1819
.vscode
1920
docker-build

‎backend/Taskfile.yml

Lines changed: 63 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,69 @@
1-
version: '2'
1+
version: "2"
22

33
tasks:
4-
default:
5-
cmds:
6-
- task: run
4+
default:
5+
cmds:
6+
- task: run
77

8-
run:
9-
desc: Build and run
10-
sources:
11-
- internal/**/*.go
12-
- cmd/**/*.go
13-
cmds:
14-
- task: build
15-
- cmd: echo -e "==> Running..."
16-
silent: true
17-
- cmd: ../dist/bin/server
18-
ignore_error: true
19-
silent: true
20-
env:
21-
LOG_LEVEL: debug
8+
run:
9+
desc: Build and run
10+
sources:
11+
- internal/**/*.go
12+
- cmd/**/*.go
13+
- ../frontend/src/locale/src/*.json
14+
cmds:
15+
- task: locale
16+
- task: build
17+
- cmd: echo -e "==> Running..."
18+
silent: true
19+
- cmd: ../dist/bin/server
20+
ignore_error: true
21+
silent: true
22+
env:
23+
LOG_LEVEL: debug
2224

23-
build:
24-
desc: Build the server
25-
cmds:
26-
- cmd: echo -e "==> Building..."
27-
silent: true
28-
- cmd: rm -f dist/bin/*
29-
silent: true
30-
- cmd: go build -ldflags="-X main.commit={{.GIT_COMMIT}} -X main.version={{.VERSION}}" -o ../dist/bin/server ./cmd/server/main.go
31-
silent: true
32-
- task: lint
33-
vars:
34-
GIT_COMMIT:
35-
sh: git log -n 1 --format=%h
36-
VERSION:
37-
sh: cat ../.version
38-
env:
39-
GO111MODULE: on
40-
CGO_ENABLED: 1
25+
build:
26+
desc: Build the server
27+
cmds:
28+
- cmd: echo -e "==> Building..."
29+
silent: true
30+
- cmd: rm -f dist/bin/*
31+
silent: true
32+
- cmd: go build -ldflags="-X main.commit={{.GIT_COMMIT}} -X main.version={{.VERSION}}" -o ../dist/bin/server ./cmd/server/main.go
33+
silent: true
34+
- task: lint
35+
vars:
36+
GIT_COMMIT:
37+
sh: git log -n 1 --format=%h
38+
VERSION:
39+
sh: cat ../.version
40+
env:
41+
GO111MODULE: on
42+
CGO_ENABLED: 1
4143

42-
lint:
43-
desc: Linting
44-
cmds:
45-
- cmd: echo -e "==> Linting..."
46-
silent: true
47-
- cmd: bash scripts/lint.sh
48-
silent: true
44+
lint:
45+
desc: Linting
46+
cmds:
47+
- cmd: echo -e "==> Linting..."
48+
silent: true
49+
- cmd: bash scripts/lint.sh
50+
silent: true
4951

50-
test:
51-
desc: Testing
52-
cmds:
53-
- cmd: echo -e "==> Testing..."
54-
silent: true
55-
- cmd: bash scripts/test.sh
56-
silent: true
52+
test:
53+
desc: Testing
54+
cmds:
55+
- cmd: echo -e "==> Testing..."
56+
silent: true
57+
- cmd: bash scripts/test.sh
58+
silent: true
59+
60+
locale:
61+
desc: Locale
62+
dir: /app/frontend
63+
cmds:
64+
- cmd: yarn locale-compile
65+
silent: true
66+
ignore_error: true
67+
- cmd: chown -R "$PUID:$PGID" src/locale/lang
68+
silent: true
69+
ignore_error: true

‎frontend/package.json

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,10 @@
3939
"node-sass": "^5.0.0",
4040
"prettier": "2.3.2",
4141
"query-string": "7.0.1",
42-
"react": "17.0.2",
42+
"react": "^17.0.2",
4343
"react-async": "10.0.1",
4444
"react-dom": "17.0.2",
45+
"react-intl": "^5.20.6",
4546
"react-router-dom": "^5.2.0",
4647
"react-scripts": "4.0.3",
4748
"rooks": "5.0.2",
@@ -60,7 +61,9 @@
6061
"eject": "react-scripts eject",
6162
"prettier": "prettier \"**/*.+(js|json|yml|css|ts|tsx)\"",
6263
"format": "yarn prettier -- --write",
63-
"lint:fix": "eslint --fix --ext .ts --ext .tsx ."
64+
"lint:fix": "eslint --fix --ext .ts --ext .tsx .",
65+
"locale-extract": "formatjs extract 'src/**/*.tsx' --out-file src/locale/src/en.json",
66+
"locale-compile": "formatjs compile-folder src/locale/src src/locale/lang --ast"
6467
},
6568
"browserslist": {
6669
"production": [
@@ -88,5 +91,8 @@
8891
"statements": 0
8992
}
9093
}
94+
},
95+
"devDependencies": {
96+
"@formatjs/cli": "^4.2.29"
9197
}
9298
}

‎frontend/src/App.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,18 @@ import React from "react";
22

33
import Router from "components/Router";
44
import { AuthProvider, HealthProvider } from "context";
5+
import { intl } from "locale";
6+
import { RawIntlProvider } from "react-intl";
57

68
function App() {
79
return (
8-
<HealthProvider>
9-
<AuthProvider>
10-
<Router />
11-
</AuthProvider>
12-
</HealthProvider>
10+
<RawIntlProvider value={intl}>
11+
<HealthProvider>
12+
<AuthProvider>
13+
<Router />
14+
</AuthProvider>
15+
</HealthProvider>
16+
</RawIntlProvider>
1317
);
1418
}
1519

‎frontend/src/locale/IntlProvider.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { createIntl, createIntlCache } from "react-intl";
2+
3+
import langEn from "./lang/en.json";
4+
5+
// todo
6+
/*
7+
const messages: Record<string, Record<string, string>> = {
8+
"en-US": { selectalanguage: "Select a language" },
9+
"pt-BR": { selectalanguage: "Selecione uma linguagem" },
10+
};
11+
*/
12+
// end todo
13+
14+
const loadMessages = (locale: string) => {
15+
switch (locale) {
16+
/*
17+
case 'fr':
18+
return import("./lang/fr.json");
19+
*/
20+
default:
21+
return langEn;
22+
}
23+
};
24+
25+
export const initialLocale = "en-US";
26+
export const cache = createIntlCache();
27+
28+
const initialMessages = loadMessages(initialLocale);
29+
30+
console.log("MESSAGES:", initialMessages);
31+
export const intl = createIntl(
32+
// @ts-ignore messages file typings are correct
33+
{ locale: initialLocale, messages: initialMessages },
34+
cache,
35+
);
36+
37+
export const fmt = intl.formatMessage;

‎frontend/src/locale/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./IntlProvider";

‎frontend/src/locale/src/en.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"setup.create": {
3+
"defaultMessage": "Create Account"
4+
},
5+
"setup.title": {
6+
"defaultMessage": "Create your first Account"
7+
},
8+
"user.email": {
9+
"defaultMessage": "Email"
10+
},
11+
"user.name": {
12+
"defaultMessage": "Name"
13+
},
14+
"user.nickname": {
15+
"defaultMessage": "Nickname"
16+
},
17+
"user.password": {
18+
"defaultMessage": "Password"
19+
}
20+
}

‎frontend/src/pages/Setup/index.tsx

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import React, { useEffect, useRef, useState, ChangeEvent } from "react";
33
import { createUser } from "api/npm";
44
import { Alert, Button } from "components";
55
import { useAuthState, useHealthState } from "context";
6+
import { fmt } from "locale";
7+
import { FormattedMessage } from "react-intl";
68

79
import logo from "../../img/logo-text-vertical-grey.png";
810

@@ -81,7 +83,10 @@ function Setup() {
8183
onSubmit={onSubmit}>
8284
<div className="card-body">
8385
<h2 className="card-title text-center mb-4">
84-
Create your first Account
86+
<FormattedMessage
87+
id="setup.title"
88+
defaultMessage="Create your first Account"
89+
/>
8590
</h2>
8691
{errorMessage ? (
8792
<Alert type="danger" className="text-center">
@@ -90,54 +95,77 @@ function Setup() {
9095
) : null}
9196

9297
<div className="mb-3">
93-
<label className="form-label">Name</label>
98+
<label className="form-label">
99+
<FormattedMessage id="user.name" defaultMessage="Name" />
100+
</label>
94101
<input
95102
ref={nameRef}
96103
onChange={onChange}
97104
className="form-control"
98105
name="name"
99106
value={formData.name}
100107
disabled={loading}
101-
placeholder="Name"
108+
placeholder={fmt({ id: "user.name", defaultMessage: "Name" })}
102109
required
103110
/>
104111
</div>
105112
<div className="mb-3">
106-
<label className="form-label">Nickname</label>
113+
<label className="form-label">
114+
<FormattedMessage
115+
id="user.nickname"
116+
defaultMessage="Nickname"
117+
/>
118+
</label>
107119
<input
108120
onChange={onChange}
109121
className="form-control"
110122
name="nickname"
111123
value={formData.nickname}
112124
disabled={loading}
113-
placeholder="Nickname"
125+
placeholder={fmt({
126+
id: "user.nickname",
127+
defaultMessage: "Nickname",
128+
})}
114129
required
115130
/>
116131
</div>
117132
<div className="mb-3">
118-
<label className="form-label">Email</label>
133+
<label className="form-label">
134+
<FormattedMessage id="user.email" defaultMessage="Email" />
135+
</label>
119136
<input
120137
type="email"
121138
onChange={onChange}
122139
className="form-control"
123140
name="email"
124141
value={formData.email}
125142
disabled={loading}
126-
placeholder="Email"
143+
placeholder={fmt({
144+
id: "user.email",
145+
defaultMessage: "Email",
146+
})}
127147
maxLength={150}
128148
required
129149
/>
130150
</div>
131151
<div className="mb-3">
132-
<label className="form-label">Password</label>
152+
<label className="form-label">
153+
<FormattedMessage
154+
id="user.password"
155+
defaultMessage="Password"
156+
/>
157+
</label>
133158
<input
134159
type="password"
135160
onChange={onChange}
136161
className="form-control"
137162
name="password"
138163
value={formData.password}
139164
disabled={loading}
140-
placeholder="Password"
165+
placeholder={fmt({
166+
id: "user.password",
167+
defaultMessage: "Password",
168+
})}
141169
minLength={8}
142170
maxLength={100}
143171
autoComplete="off"
@@ -146,7 +174,10 @@ function Setup() {
146174
</div>
147175
<div className="form-footer">
148176
<Button color="cyan" loading={loading} className="w-100">
149-
Create Account
177+
<FormattedMessage
178+
id="setup.create"
179+
defaultMessage="Create Account"
180+
/>
150181
</Button>
151182
</div>
152183
</div>

‎scripts/ci/build-frontend

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,12 @@ docker_cmd() {
1313
cd "${DIR}/../.." || exit 1
1414
echo -e "${BLUE}❯ ${CYAN}Installing Frontend deps ...${RESET}"
1515
rm -rf frontend/node_modules
16-
1716
docker_cmd yarn install
17+
18+
echo -e "${BLUE}❯ ${CYAN}Compiling locales ...${RESET}"
19+
docker_cmd yarn locale-compile
20+
docker_cmd chown -R "$(id -u):$(id -g)" /app/frontend/src/locale/lang
21+
1822
echo -e "${BLUE}❯ ${CYAN}Running eslint ...${RESET}"
1923
docker_cmd yarn eslint src
2024
docker_cmd yarn eslint -f junit src -o eslint.xml

0 commit comments

Comments
 (0)