[ex-9] i18n

Author: gregberge

src/App.js

@@ -1,21 +1,39 @@
 import React, { useState } from 'react'
-import { Row, Col, Normalize, Grid, Typography } from '@smooth-ui/core-sc'
+import {
+  Button,
+  Row,
+  Col,
+  Normalize,
+  Grid,
+  Typography,
+} from '@smooth-ui/core-sc'
 import SearchInput from './components/SearchInput'
+import { useI18n, T } from './components/I18n'
 import Catch from './components/Catch'
 import Card from './components/Card'
 import { MovieSearch } from './containers/MovieDb'
 
 export default function App() {
   const [query, setQuery] = useState('Lord of the Rings')
+  // Récupération de la locale et de la fonction "setLocale" depuis le contexte
+  const { setLocale, locale } = useI18n()
+  // Si on est en français, on voudra passer en anglais et inversement
+  const otherLocale = locale === 'fr' ? 'en' : 'fr'
 
   return (
     <>
       {/* Le composant "Grid" centre dans la page, "py" signifie "padding-top" et "padding-bottom" */}
       <Grid>
         {/* Injection de normalize.css pour avoir un rendu consistant sur tous les navigateurs */}
         <Normalize />
+        {/* Bouton permettant de changer de langue, "my" signifie "margin-top" et "margin-bottom" */}
+        <Button my={1} onClick={() => setLocale(otherLocale)}>
+          <T id={otherLocale} />
+        </Button>
         {/* "Typography" est un composant avec des variantes de titres prêtes à l'emploi */}
-        <Typography variant="display-1">Smooth Movie</Typography>
+        <Typography variant="display-1">
+          <T id="title" />
+        </Typography>
         {/* Votre composant "SearchInput" */}
         <SearchInput
           value={query}

src/components/I18n.js

@@ -0,0 +1,29 @@
+import React, { createContext, useState, useContext, useMemo } from 'react'
+
+const I18nContext = createContext()
+
+export function I18nProvider({ translations, defaultLocale, children }) {
+  // La locale est stockée dans le state afin de pouvoir être modifiée à la volée
+  const [locale, setLocale] = useState(defaultLocale)
+  return (
+    <I18nContext.Provider value={{ translations, locale, setLocale }}>
+      {children}
+    </I18nContext.Provider>
+  )
+}
+
+export function useT(id) {
+  // Récupérations des "translations" et de la "locale" depuis le contexte
+  const { translations, locale } = useContext(I18nContext)
+  // Tant que rien n'a changé, on utilisera la même traduction
+  // si par la suite notre fonction fait des calculs, ce sera optimisé
+  return useMemo(() => translations[locale][id], [locale, translations, id])
+}
+
+export function T({ id }) {
+  return useT(id)
+}
+
+export function useI18n() {
+  return useContext(I18nContext)
+}

src/components/SearchInput.js

@@ -1,13 +1,10 @@
 import React from 'react'
 import { Input } from '@smooth-ui/core-sc'
+import { useT } from './I18n'
 
 export default function SearchInput(props) {
+  const placeholder = useT('placeholder')
   return (
-    <Input
-      placeholder="Type something..."
-      width="100%"
-      type="search"
-      {...props}
-    />
+    <Input placeholder={placeholder} width="100%" type="search" {...props} />
   )
 }

src/index.js

@@ -3,11 +3,16 @@ import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
 import Catch from './components/Catch'
+import { I18nProvider } from './components/I18n'
 import * as serviceWorker from './serviceWorker'
+import en from './locales/en.json'
+import fr from './locales/fr.json'
 
 ReactDOM.render(
   <Catch>
-    <App />
+    <I18nProvider translations={{ en, fr }} defaultLocale="en">
+      <App />
+    </I18nProvider>
   </Catch>,
   document.getElementById('root'),
 )

src/locales/en.json

@@ -0,0 +1,6 @@
+{
+  "fr": "🇫🇷 French",
+  "en": "🇬🇧 English",
+  "title": "Smooth Movies",
+  "placeholder": "Type something..."
+}

src/locales/fr.json

@@ -0,0 +1,6 @@
+{
+  "fr": "🇫🇷 Français",
+  "en": "🇬🇧 Anglais",
+  "title": "Smooth Films",
+  "placeholder": "Tapez quelque chose..."
+}