Skip to content

Commit 3ca8b5e

Browse files
yowariyowari
authored
update i18n step and fix test packages (#9)
Co-authored-by: yowari <[email protected]>
1 parent 6fb0d97 commit 3ca8b5e

18 files changed

+1292
-1100
lines changed

‎exercise/12-i18n/README.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# 12. I18n
22

33
To make our project international, we are going to use react-i18n.
4-
To do so we are leveraging the work of [Sergio Xalambrí](https://github.com/sergiodxa) an heavy contributor to remix which created the [remix-18next](https://github.com/sergiodxa/remix-i18next) package.
4+
To do so we are leveraging the work of [Sergio Xalambrí](https://github.com/sergiodxa) a heavy contributor to remix who created the [remix-18next](https://github.com/sergiodxa/remix-i18next) package.
55

66
## package install
77

@@ -73,8 +73,6 @@ export default i18next;
7373

7474
With this basic configuration we now need to add the I18nextProvider to both the `entry.client.tsx` and `entry.server.tsx`.
7575

76-
Go to slide for explaination about those 2 files.
77-
7876
Copy those files from the directory.
7977

8078
Lastly, we need to load know the current local and save it. For that we are going to add a loader in our `./app/root.tsx`. This loader will check for the cookie and set it to the correct locale.
@@ -84,7 +82,10 @@ Add this :
8482
```ts
8583
export async function loader({ request }: LoaderFunctionArgs) {
8684
const locale = await i18next.getLocale(request);
87-
return json({ locale }, { headers: { "Set-Cookie": await i18nCookie.serialize(locale) } });
85+
return json(
86+
{ locale },
87+
{ headers: { "Set-Cookie": await i18nCookie.serialize(locale) } }
88+
);
8889
}
8990
```
9091

‎exercise/12-i18n/app/entry.server.tsx

+22-5
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { createInstance } from "i18next";
1515
import i18next from "./i18next.server";
1616
import { I18nextProvider, initReactI18next } from "react-i18next";
1717
import { i18nConfig } from "./i18n";
18-
// import * as i18n from "./i18n";
1918

2019
const ABORT_DELAY = 5_000;
2120

@@ -30,8 +29,18 @@ export default function handleRequest(
3029
loadContext: AppLoadContext
3130
) {
3231
return isbot(request.headers.get("user-agent") || "")
33-
? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
34-
: handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext);
32+
? handleBotRequest(
33+
request,
34+
responseStatusCode,
35+
responseHeaders,
36+
remixContext
37+
)
38+
: handleBrowserRequest(
39+
request,
40+
responseStatusCode,
41+
responseHeaders,
42+
remixContext
43+
);
3544
}
3645

3746
function handleBotRequest(
@@ -43,7 +52,11 @@ function handleBotRequest(
4352
return new Promise((resolve, reject) => {
4453
let shellRendered = false;
4554
const { pipe, abort } = renderToPipeableStream(
46-
<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
55+
<RemixServer
56+
context={remixContext}
57+
url={request.url}
58+
abortDelay={ABORT_DELAY}
59+
/>,
4760
{
4861
onAllReady() {
4962
shellRendered = true;
@@ -100,7 +113,11 @@ async function handleBrowserRequest(
100113
let shellRendered = false;
101114
const { pipe, abort } = renderToPipeableStream(
102115
<I18nextProvider i18n={instance}>
103-
<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />
116+
<RemixServer
117+
context={remixContext}
118+
url={request.url}
119+
abortDelay={ABORT_DELAY}
120+
/>
104121
</I18nextProvider>,
105122
{
106123
onShellReady() {

‎final/11-tests/progressive-pizza/package-lock.json

+4-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎final/11-tests/progressive-pizza/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"devDependencies": {
2323
"@remix-run/dev": "^2.13.1",
2424
"@remix-run/testing": "^2.13.1",
25+
"@testing-library/dom": "^10.4.0",
2526
"@testing-library/jest-dom": "^6.6.2",
2627
"@testing-library/react": "^16.0.1",
2728
"@testing-library/user-event": "^14.5.2",

‎final/12-i18n/progressive-pizza/README.md

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
# Welcome to Remix + Vite!
1+
# Welcome to Remix!
22

3-
📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/guides/vite) for details on supported features.
3+
- 📖 [Remix docs](https://remix.run/docs)
44

55
## Development
66

7-
Run the Vite dev server:
7+
Run the dev server:
88

99
```shellscript
1010
npm run dev
@@ -34,3 +34,7 @@ Make sure to deploy the output of `npm run build`
3434

3535
- `build/server`
3636
- `build/client`
37+
38+
## Styling
39+
40+
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.

‎final/12-i18n/progressive-pizza/app/entry.server.tsx

+25-8
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { createInstance } from "i18next";
1515
import i18next from "./i18next.server";
1616
import { I18nextProvider, initReactI18next } from "react-i18next";
1717
import { i18nConfig } from "./i18n";
18-
// import * as i18n from "./i18n";
1918

2019
const ABORT_DELAY = 5_000;
2120

@@ -30,8 +29,18 @@ export default function handleRequest(
3029
loadContext: AppLoadContext
3130
) {
3231
return isbot(request.headers.get("user-agent") || "")
33-
? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext)
34-
: handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext);
32+
? handleBotRequest(
33+
request,
34+
responseStatusCode,
35+
responseHeaders,
36+
remixContext
37+
)
38+
: handleBrowserRequest(
39+
request,
40+
responseStatusCode,
41+
responseHeaders,
42+
remixContext
43+
);
3544
}
3645

3746
function handleBotRequest(
@@ -43,7 +52,11 @@ function handleBotRequest(
4352
return new Promise((resolve, reject) => {
4453
let shellRendered = false;
4554
const { pipe, abort } = renderToPipeableStream(
46-
<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />,
55+
<RemixServer
56+
context={remixContext}
57+
url={request.url}
58+
abortDelay={ABORT_DELAY}
59+
/>,
4760
{
4861
onAllReady() {
4962
shellRendered = true;
@@ -86,9 +99,9 @@ async function handleBrowserRequest(
8699
responseHeaders: Headers,
87100
remixContext: EntryContext
88101
) {
89-
let instance = createInstance();
90-
let lng = await i18next.getLocale(request);
91-
let ns = i18next.getRouteNamespaces(remixContext);
102+
const instance = createInstance();
103+
const lng = await i18next.getLocale(request);
104+
const ns = i18next.getRouteNamespaces(remixContext);
92105

93106
await instance.use(initReactI18next).init({
94107
...i18nConfig,
@@ -100,7 +113,11 @@ async function handleBrowserRequest(
100113
let shellRendered = false;
101114
const { pipe, abort } = renderToPipeableStream(
102115
<I18nextProvider i18n={instance}>
103-
<RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />
116+
<RemixServer
117+
context={remixContext}
118+
url={request.url}
119+
abortDelay={ABORT_DELAY}
120+
/>
104121
</I18nextProvider>,
105122
{
106123
onShellReady() {

‎final/12-i18n/progressive-pizza/app/locales/en/common.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
"medium": "Medium",
1313
"order": "Order",
1414
"selectPizzaSize": "Select pizza size",
15-
"selectSize": "Select size",
16-
"selectToppings": "Select toppings",
15+
"selectSize": "Select the size",
16+
"selectToppings": "Choose the toppings",
1717
"small": "Small",
1818
"title": "Remix your pizza"
1919
}

‎final/12-i18n/progressive-pizza/app/locales/fr/common.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
"error": {
99
"sorry": "Nous sommes désolé"
1010
},
11-
"large": "large",
12-
"medium": "medium",
11+
"large": "Large",
12+
"medium": "Medium",
1313
"order": "Commander",
1414
"selectPizzaSize": "Veuillez selectionnez la taille de votre pizza",
1515
"selectSize": "Selectionnez la taille",
1616
"selectToppings": "Choisissez votre garniture",
17-
"small": "small",
17+
"small": "Small",
1818
"title": "Remixez votre pizza"
1919
}

‎final/12-i18n/progressive-pizza/app/root.tsx

+33-6
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,41 @@
1-
import { json, Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData, useRouteError } from "@remix-run/react";
2-
1+
import {
2+
json,
3+
Links,
4+
Meta,
5+
Outlet,
6+
Scripts,
7+
ScrollRestoration,
8+
useLoaderData,
9+
useRouteError,
10+
} from "@remix-run/react";
311
import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
4-
import stylesheet from "~/tailwind.css?url";
512
import { Message } from "./components/ui/Message";
613
import { Layout as PizzaLayout } from "./components/ui/Layout";
714
import i18next, { i18nCookie } from "./i18next.server";
15+
16+
import "./tailwind.css";
817
import { useTranslation } from "react-i18next";
918
import { useChangeLanguage } from "remix-i18next/react";
1019

11-
export const links: LinksFunction = () => [{ rel: "stylesheet", href: stylesheet }];
20+
export const links: LinksFunction = () => [
21+
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
22+
{
23+
rel: "preconnect",
24+
href: "https://fonts.gstatic.com",
25+
crossOrigin: "anonymous",
26+
},
27+
{
28+
rel: "stylesheet",
29+
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
30+
},
31+
];
1232

1333
export async function loader({ request }: LoaderFunctionArgs) {
1434
const locale = await i18next.getLocale(request);
15-
return json({ locale }, { headers: { "Set-Cookie": await i18nCookie.serialize(locale) } });
35+
return json(
36+
{ locale },
37+
{ headers: { "Set-Cookie": await i18nCookie.serialize(locale) } }
38+
);
1639
}
1740

1841
export function Layout({ children }: { children: React.ReactNode }) {
@@ -45,7 +68,11 @@ export function ErrorBoundary() {
4568
console.error(error);
4669
return (
4770
<PizzaLayout center>
48-
<Message title="Nous sommes désolé" subtitle="Une erreur s'est produite" imageUrl="/broken.png">
71+
<Message
72+
title="Nous sommes désolé"
73+
subtitle="Une erreur s'est produite"
74+
imageUrl="/broken.png"
75+
>
4976
Réessayez ou contactez le support.
5077
</Message>
5178
</PizzaLayout>

0 commit comments

Comments
 (0)