rework translation

InseeFr · May 7, 2024 · eb24fdd · eb24fdd
1 parent 7baff14
commit eb24fdd
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 93 deletions.
diff --git a/src/functions/translate.ts b/src/functions/translate.ts
@@ -1,5 +1,11 @@
-import { IntlShape } from "react-intl";
+import { useIntl } from "react-intl";
 
-export const translate = (id: string, intl: IntlShape) => {
-  return intl.formatMessage({ id });
+export const useTranslation = () => {
+  const intl = useIntl();
+
+  return {
+    translate: (id: string) => {
+      return intl.formatMessage({ id });
+    },
+  };
 };
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,17 +1,16 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { FiltersCard } from "../ui/FiltersCard";
-import { useIntl } from "react-intl";
 import { HomeTableCard } from "../ui/HomeTableCard";
-import { translate } from "../functions/translate";
+import { useTranslation } from "../functions/translate";
 
 export const Home = () => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
 
   return (
     <Stack px={4} py={2} gap={2}>
       <Typography variant="headlineLarge" fontWeight={"400"} pb={2} pt={1} alignSelf={"center"}>
-        {translate("homepageTitle", intl)}
+        {translate("homepageTitle")}
       </Typography>
       <FiltersCard />
       <HomeTableCard />

diff --git a/src/ui/AccountNavigation.tsx b/src/ui/AccountNavigation.tsx
@@ -9,11 +9,10 @@ import { useLogout, useUser } from "../hooks/useAuth";
 import { Link } from "./Link";
 import { Row } from "./Row";
 import { theme } from "../theme";
-import { translate } from "../functions/translate";
-import { useIntl } from "react-intl";
+import { useTranslation } from "../functions/translate";
 
 export const AccountNavigation = () => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
   const { name } = useUser();
 
   const logout = useLogout();
@@ -37,7 +36,7 @@ export const AccountNavigation = () => {
         startIcon={<AccountCircleIcon fontSize="large" style={{ color: theme.palette.text.tertiary }} />}
         endIcon={<KeyboardArrowDownIcon />}
       >
-        <Typography variant="bodyMedium">{translate("myProfile", intl)}</Typography>
+        <Typography variant="bodyMedium">{translate("myProfile")}</Typography>
       </Button>
       <Menu
         id="account-menu"
@@ -68,7 +67,7 @@ export const AccountNavigation = () => {
             color: "primary.main",
           }}
         >
-          {translate("selectFavoriteSurveys", intl).toLocaleUpperCase()}
+          {translate("selectFavoriteSurveys").toLocaleUpperCase()}
         </MenuItem>
         {/* TODO: change link */}
         <MenuItem
@@ -80,9 +79,7 @@ export const AccountNavigation = () => {
         >
           <Row gap={0.5}>
             <OpenInNewIcon fontSize="littleIcon" />
-            <Typography variant={"bodyMedium"}>
-              {translate("goToHelp", intl).toLocaleUpperCase()}
-            </Typography>
+            <Typography variant={"bodyMedium"}>{translate("goToHelp").toLocaleUpperCase()}</Typography>
           </Row>
         </MenuItem>
         <MenuItem
@@ -94,7 +91,7 @@ export const AccountNavigation = () => {
             })
           }
         >
-          {translate("logout", intl)}
+          {translate("logout")}
         </MenuItem>
       </Menu>
     </Box>

diff --git a/src/ui/CommentDialog.tsx b/src/ui/CommentDialog.tsx
@@ -8,9 +8,8 @@ import { theme } from "../theme";
 import { ChangeEvent, useState } from "react";
 import { Box, Divider, InputAdornment, Stack, Typography } from "@mui/material";
 import { Row } from "./Row";
-import { translate } from "../functions/translate";
-import { useIntl } from "react-intl";
 import { useFetchMutation } from "../hooks/useFetchQuery";
+import { useTranslation } from "../functions/translate";
 type Props = {
   open: boolean;
   onClose: () => void;
@@ -19,7 +18,7 @@ type Props = {
 };
 
 export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Props) => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
   const [newComment, setNewComment] = useState(comment);
 
   const { mutateAsync, isPending } = useFetchMutation("/api/survey-unit/{id}/comment", "put");
@@ -65,11 +64,11 @@ export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Pro
       <form onSubmit={handleSubmit}>
         <DialogTitle>
           <Row justifyContent={"space-between"}>
-            <Box>{translate("comment", intl)}</Box>
+            <Box>{translate("comment")}</Box>
             <Row gap={1}>
               <Divider orientation="vertical" variant="middle" sx={{ height: "20px" }} />
               <Box>
-                {translate("surveyUnitNumber", intl)} {surveyUnitId}
+                {translate("surveyUnitNumber")} {surveyUnitId}
               </Box>
             </Row>
           </Row>
@@ -94,8 +93,8 @@ export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Pro
               }}
               id="comment"
               name="comment"
-              label={translate("comment", intl)}
-              placeholder={translate("commentPlaceholder", intl)}
+              label={translate("comment")}
+              placeholder={translate("commentPlaceholder")}
               type="text"
               fullWidth
               variant="outlined"
@@ -105,24 +104,24 @@ export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Pro
               onChange={onChange}
             />
             <Typography variant="bodySmall" color={"text.tertiary"}>
-              {translate("commentDialogHelpText", intl)}
+              {translate("commentDialogHelpText")}
             </Typography>
           </Stack>
         </DialogContent>
         {comment === "" || isModified ? (
           <DialogActions>
-            <Button onClick={handleCancel}>{translate("cancel", intl)}</Button>
+            <Button onClick={handleCancel}>{translate("cancel")}</Button>
             <Button type="submit" variant="contained" disabled={!isModified || isPending}>
-              {translate("validate", intl)}
+              {translate("validate")}
             </Button>
           </DialogActions>
         ) : (
           <DialogActions>
             <Button onClick={handleDelete} disabled={isPending}>
-              {translate("delete", intl)}
+              {translate("delete")}
             </Button>
             <Button onClick={handleCancel} variant="contained">
-              {translate("closeButtonLabel", intl)}
+              {translate("closeButtonLabel")}
             </Button>
           </DialogActions>
         )}

diff --git a/src/ui/FiltersCard.tsx b/src/ui/FiltersCard.tsx
@@ -7,9 +7,8 @@ import { SelectWithCheckbox, Option } from "./SelectWithCheckbox";
 import ClearIcon from "@mui/icons-material/Clear";
 import { useGetSearchFilter, useSearchForm, useToggleSearchFilter } from "../hooks/useSearchFilter";
 import Chip from "@mui/material/Chip";
-import { useIntl } from "react-intl";
 import { surveyUnitStatesEnum } from "../constants/surveyUnitStates";
-import { translate } from "../functions/translate";
+import { useTranslation } from "../functions/translate";
 
 const styles = {
   Grid: {
@@ -62,70 +61,68 @@ const subsampleMock = [
 ];
 
 export const FiltersCard = () => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
   const filters = useGetSearchFilter();
   const { onReset } = useSearchForm(filters);
   const toggleSearchFilter = useToggleSearchFilter();
 
   // TODO: find enum
   const resultOptions = [].map(c => {
-    return { label: translate(c, intl), value: c };
+    return { label: translate(c), value: c };
   });
 
   const statesOptions = surveyUnitStatesEnum.map(s => {
-    return { label: translate(s, intl), value: s };
+    return { label: translate(s), value: s };
   });
 
   return (
     <Card sx={{ p: 2 }} elevation={2} variant="general">
       <Stack gap={2}>
         <Row justifyContent={"space-between"}>
-          <Typography variant="titleMedium">{translate("filterUnitsBy", intl)}</Typography>
+          <Typography variant="titleMedium">{translate("filterUnitsBy")}</Typography>
           <Button variant="text" color="inherit" onClick={onReset}>
-            <Typography sx={{ textDecoration: "underline" }}>
-              {translate("resetFilters", intl)}
-            </Typography>
+            <Typography sx={{ textDecoration: "underline" }}>{translate("resetFilters")}</Typography>
           </Button>
         </Row>
         <Row style={styles.Grid} sx={{ color: "text.tertiary" }}>
           <SelectWithCheckbox
-            label={translate("surveyFilterLabel", intl)}
+            label={translate("surveyFilterLabel")}
             options={surveysMock}
             name="campaigns"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={translate("subSampleFilterLabel", intl)}
+            label={translate("subSampleFilterLabel")}
             options={subsampleMock}
             name="ssech"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={translate("interviewerFilterLabel", intl)}
+            label={translate("interviewerFilterLabel")}
             options={interviewerMock}
             name="interviewer"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
             canSearch={true}
           />
           <SelectWithCheckbox
-            label={translate("statesFilterLabel", intl)}
+            label={translate("statesFilterLabel")}
             options={statesOptions}
             name="states"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={translate("resultFilterLabel", intl)}
+            label={translate("resultFilterLabel")}
             options={resultOptions}
             name="result"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={translate("priorityFilterLabel", intl)}
+            label={translate("priorityFilterLabel")}
             options={priorityOptions}
             name="priority"
             toggleSearchFilter={toggleSearchFilter}

diff --git a/src/ui/Header.tsx b/src/ui/Header.tsx
@@ -5,15 +5,14 @@ import { PropsWithChildren } from "react";
 import packageInfo from "../../package.json";
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import { AccountNavigation } from "./AccountNavigation.tsx";
-import { translate } from "../functions/translate.ts";
-import { useIntl } from "react-intl";
+import { useTranslation } from "../functions/translate.ts";
 
 const style = {
   "&.MuiLink-root:hover": { color: "primary.main" },
 };
 
 export function Header() {
-  const intl = useIntl();
+  const { translate } = useTranslation();
 
   return (
     <Box sx={{ flexGrow: 1 }}>
@@ -42,16 +41,16 @@ export function Header() {
           <Row gap={8}>
             <Row gap={4} typography={"titleMedium"} color={"text.tertiary"}>
               <Link sx={style} color="inherit" component={RouterLink} underline="none" to="/follow">
-                {translate("goToFollowPage", intl)}
+                {translate("goToFollowPage")}
               </Link>
               <Link sx={style} color="inherit" component={RouterLink} underline="none" to="/read">
-                {translate("goToReadPage", intl)}
+                {translate("goToReadPage")}
               </Link>
               <Link sx={style} color="inherit" component={RouterLink} underline="none" to="/close">
-                {translate("goToClosePage", intl)}
+                {translate("goToClosePage")}
               </Link>
               <Link sx={style} color="inherit" component={RouterLink} underline="none" to="/notify">
-                {translate("goToNotifyPage", intl)}
+                {translate("goToNotifyPage")}
               </Link>
               <Link
                 sx={style}
@@ -60,7 +59,7 @@ export function Header() {
                 underline="none"
                 to="/collectOrganization"
               >
-                {translate("goToCollectOrganization", intl)}
+                {translate("goToCollectOrganization")}
               </Link>
               <Link
                 sx={style}
@@ -69,7 +68,7 @@ export function Header() {
                 underline="none"
                 to="/reassignment"
               >
-                {translate("goToReassignment", intl)}
+                {translate("goToReassignment")}
               </Link>
             </Row>
             <Row gap={1}>

diff --git a/src/ui/HomeTable.tsx b/src/ui/HomeTable.tsx
@@ -54,13 +54,7 @@ function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
   if (orderBy === "contactOutcome") {
     const typeA = (a[orderBy] as SurveyUnitTemporaryType["contactOutcome"]).type;
     const typeB = (b[orderBy] as SurveyUnitTemporaryType["contactOutcome"]).type;
-    if (typeB < typeA) {
-      return -1;
-    }
-    if (typeB > typeA) {
-      return 1;
-    }
-    return 0;
+    return typeA.localeCompare(typeB);
   }
   if (b[orderBy] < a[orderBy]) {
     return -1;

diff --git a/src/ui/HomeTableCard.tsx b/src/ui/HomeTableCard.tsx
@@ -1,12 +1,11 @@
 import Card from "@mui/material/Card";
 import Stack from "@mui/material/Stack";
 import { SearchField } from "./SearchField";
-import { useIntl } from "react-intl";
 import { useDebouncedState } from "../hooks/useDebouncedState";
 import { HomeTable } from "./HomeTable";
 import { Filter, useGetSearchFilter } from "../hooks/useSearchFilter";
 import { SurveyUnitTemporaryType } from "../types/temporaryTypes";
-import { translate } from "../functions/translate";
+import { useTranslation } from "../functions/translate";
 
 export const surveyUnitsMock = [
   {
@@ -38,7 +37,7 @@ export const surveyUnitsMock = [
 ];
 
 export const HomeTableCard = () => {
-  const intl = useIntl();
+  const { translate } = useTranslation();
   const [search, setSearch] = useDebouncedState("", 500);
   const filters = useGetSearchFilter();
 
@@ -50,8 +49,8 @@ export const HomeTableCard = () => {
         <SearchField
           sx={{ maxWidth: "330px" }}
           onChange={e => setSearch(e.target.value)}
-          label={translate("toSearchLabel", intl)}
-          placeholder={translate("searchSurveyUnitPlaceholder", intl)}
+          label={translate("toSearchLabel")}
+          placeholder={translate("searchSurveyUnitPlaceholder")}
         />
         <HomeTable surveyUnits={filteredSurveyUnits} />
       </Stack>