feat(client): add intl

project/client/package.json

@@ -22,6 +22,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-intl": "^6.6.8",
     "react-router-dom": "^6.11.1",
     "typescript": "^5.4.5"
   },

project/client/src/components/results/debug/index.tsx

@@ -1,34 +1,39 @@
 import { Container, Badge, BadgeGroup, Accordion } from "@dataesr/dsfr-plus"
+import { useIntl } from "react-intl"
 import { MatchDebug } from "../../../types"
 
 type ResultsDebugArgs = {
   resultsDebug: MatchDebug
 }
 export default function ResultsDebug({ resultsDebug }: ResultsDebugArgs) {
+  const intl = useIntl()
   if (!resultsDebug) return null
 
   const criterionMatches = (criterion: string) => resultsDebug.criterion?.[criterion] ?? 0
 
   return (
-    <Accordion className="fr-container fr-mt-3w" title="See more">
+    <Accordion className="fr-container fr-mt-3w" title={intl.formatMessage({ id: "debug.accordion.title" })}>
       {resultsDebug.strategies.map((strategy, index) => (
         <Container key={index} className="debug-item">
-          <Badge className="fr-mb-3w" color={strategy.possibilities ? "success" : "error"}>{`Matching ${
+          <Badge size="sm" className="fr-mb-3w" color={strategy.possibilities ? "success" : "error"}>{`Matching ${
             strategy.equivalent_strategies.length
-          } strategies : ${strategy.possibilities} ${strategy.possibilities == 1 ? "possibility" : "possibilities"}`}</Badge>
+          } strategies : ${intl.formatMessage({ id: "possibility.count" }, { count: strategy.possibilities })}`}</Badge>
           {strategy.equivalent_strategies.map((equivalent) => (
             <Container fluid>
               <BadgeGroup className="fr-mb-2w">
                 {equivalent.criteria.map((criterion) => {
                   const matches: number = criterionMatches(criterion)
                   return (
-                    <Badge color={matches ? "yellow-moutarde" : null}>{`${criterion}: ${matches} match${
-                      matches == 1 ? "" : "es"
-                    }`}</Badge>
+                    <Badge size="sm" color={matches ? "yellow-moutarde" : null}>{`${criterion}: ${intl.formatMessage(
+                      { id: "match.count" },
+                      { count: matches }
+                    )}`}</Badge>
                   )
                 })}
                 {equivalent.matches > 0 && (
-                  <Badge color="success">{`${equivalent.matches} match${equivalent.matches == 1 ? "" : "es"}`}</Badge>
+                  <Badge size="sm" color="success">
+                    {intl.formatMessage({ id: "match.count" }, { count: equivalent.matches })}
+                  </Badge>
                 )}
               </BadgeGroup>
             </Container>

project/client/src/components/results/highlights/index.tsx

@@ -24,10 +24,13 @@ export default function ResultHighlights({ resultHighlights, setTitle }: ResultH
     <Container fluid className="fr-mt-2w">
       {Object.entries(resultHighlights.criterion).map(([criterion, highlights], groupIndex) => (
         <BadgeGroup key={groupIndex}>
-          <Badge color="success">{criterion}</Badge>
+          <Badge size="sm" color="success">
+            {criterion}
+          </Badge>
           {highlights.map((highlight, badgeIndex) => (
             <Badge
               key={badgeIndex}
+              size="sm"
               onMouseEnter={() => onEnter(getHighlightedQuery(highlight, currentQuery))}
               onMouseLeave={() => onLeave()}
             >

project/client/src/components/results/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react"
+import { useIntl } from "react-intl"
 import { Container, Text, Badge } from "@dataesr/dsfr-plus"
 import { MatchResults } from "../../types"
 import Error from "../error"
@@ -10,15 +11,16 @@ import Info from "../info"
 import useMatch from "../../hooks/useMatch"
 
 export default function Results() {
+  const intl = useIntl()
   const { currentQuery, currentMatcher, currentYear } = useUrl()
   const { data, isFetching, error } = useMatch(currentQuery, currentMatcher, currentYear)
   const [currentTitle, setTitle] = useState(currentQuery)
 
   useEffect(() => setTitle(currentQuery), [currentQuery])
 
   if (currentQuery === null && currentMatcher === null) return null
-  if (currentQuery === "") return <Info info="Please enter a text affiliation" />
-  if (!currentMatcher) return <Info info="Please select a matcher" />
+  if (currentQuery === "") return <Info info={intl.formatMessage({ id: "info.missing.query" })} />
+  if (!currentMatcher) return <Info info={intl.formatMessage({ id: "info.missing.matcher" })} />
 
   if (isFetching) return <Fetching />
 
@@ -36,7 +38,7 @@ export default function Results() {
           <Text size="lead">{currentTitle}</Text>
         </Container>
         <Container className="fr-mt-3w">
-          <Badge color="error">{`${currentMatcher} : 0 matches`}</Badge>
+          <Badge color="error">{`${currentMatcher} : ${intl.formatMessage({ id: "match.count" }, { count: 0 })}`}</Badge>
         </Container>
         <ResultsDebug resultsDebug={matchResults?.debug} />
       </Container>
@@ -48,7 +50,7 @@ export default function Results() {
         <Text size="lead">{currentTitle}</Text>
       </Container>
       <Container className="fr-mt-3w">
-        <Text size="md">{`${matchIds.length} match${matchIds.length > 1 ? "es" : ""}`}</Text>
+        <Text size="md">{intl.formatMessage({ id: "match.count" }, { count: matchIds.length })}</Text>
       </Container>
       <Container fluid className="fr-mt-3w">
         {matchIds.map((id, index) => {

project/client/src/config/messages.ts

@@ -0,0 +1,11 @@
+const modules = import.meta.glob("../locales/*.json", {
+  eager: true,
+  import: "default",
+})
+export const messages = Object.keys(modules).reduce((acc, key) => {
+  const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1]
+  if (locale) {
+    return { ...acc, [locale]: modules[key] }
+  }
+  return acc
+}, {})

project/client/src/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "info.missing.query": "Please enter a text affiliation",
+  "info.missing.matcher": "Please select a matcher",
+  "debug.accordion.title": "Matching details",
+  "match.count": "{count, plural, =0 {# matches} one {# match} other {# matches}}",
+  "possibility.count": "{count, plural, =0 {# possibilities} one {# possibility} other {# possibilities}}"
+}

project/client/src/pages/home.tsx

@@ -1,12 +1,27 @@
+import { createIntl, RawIntlProvider } from "react-intl"
 import { Container } from "@dataesr/dsfr-plus"
+import { messages } from "../config/messages"
 import Input from "../components/input"
 import Results from "../components/results"
 
-export default function Home() {
+function HomePage() {
   return (
     <Container fluid>
       <Input />
       <Results />
     </Container>
   )
 }
+
+export default function Home() {
+  const intl = createIntl({
+    locale: "en",
+    messages: messages["en"],
+  })
+
+  return (
+    <RawIntlProvider value={intl}>
+      <HomePage />
+    </RawIntlProvider>
+  )
+}