From eb24fddc3637ee2753e402b715f1b6c7f036ec1f Mon Sep 17 00:00:00 2001 From: Lea Renaux Date: Tue, 7 May 2024 11:43:20 +0200 Subject: [PATCH] rework translation --- src/functions/translate.ts | 12 +++++++++--- src/pages/Home.tsx | 7 +++---- src/ui/AccountNavigation.tsx | 15 ++++++--------- src/ui/CommentDialog.tsx | 23 +++++++++++------------ src/ui/FiltersCard.tsx | 27 ++++++++++++--------------- src/ui/Header.tsx | 17 ++++++++--------- src/ui/HomeTable.tsx | 8 +------- src/ui/HomeTableCard.tsx | 9 ++++----- src/ui/HomeTableRow.tsx | 17 ++++++++--------- src/ui/SelectWithCheckbox.tsx | 9 ++++----- src/ui/StateChip.tsx | 7 +++---- src/ui/TableFooter.tsx | 10 ++++------ src/ui/TableHeadCell.tsx | 9 ++++----- 13 files changed, 77 insertions(+), 93 deletions(-) diff --git a/src/functions/translate.ts b/src/functions/translate.ts index 63f100e..32a42f8 100644 --- 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 index 240d398..dae4094 100644 --- 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 ( - {translate("homepageTitle", intl)} + {translate("homepageTitle")} diff --git a/src/ui/AccountNavigation.tsx b/src/ui/AccountNavigation.tsx index 3f97e92..88b1a8d 100644 --- 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={} endIcon={} > - {translate("myProfile", intl)} + {translate("myProfile")} { color: "primary.main", }} > - {translate("selectFavoriteSurveys", intl).toLocaleUpperCase()} + {translate("selectFavoriteSurveys").toLocaleUpperCase()} {/* TODO: change link */} { > - - {translate("goToHelp", intl).toLocaleUpperCase()} - + {translate("goToHelp").toLocaleUpperCase()} { }) } > - {translate("logout", intl)} + {translate("logout")} diff --git a/src/ui/CommentDialog.tsx b/src/ui/CommentDialog.tsx index 284a70d..10ba449 100644 --- 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
- {translate("comment", intl)} + {translate("comment")} - {translate("surveyUnitNumber", intl)} {surveyUnitId} + {translate("surveyUnitNumber")} {surveyUnitId} @@ -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} /> - {translate("commentDialogHelpText", intl)} + {translate("commentDialogHelpText")} {comment === "" || isModified ? ( - + ) : ( )} diff --git a/src/ui/FiltersCard.tsx b/src/ui/FiltersCard.tsx index 3979ba3..eb90c2f 100644 --- 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,48 +61,46 @@ 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 ( - {translate("filterUnitsBy", intl)} + {translate("filterUnitsBy")} { canSearch={true} /> @@ -42,16 +41,16 @@ export function Header() { - {translate("goToFollowPage", intl)} + {translate("goToFollowPage")} - {translate("goToReadPage", intl)} + {translate("goToReadPage")} - {translate("goToClosePage", intl)} + {translate("goToClosePage")} - {translate("goToNotifyPage", intl)} + {translate("goToNotifyPage")} - {translate("goToCollectOrganization", intl)} + {translate("goToCollectOrganization")} - {translate("goToReassignment", intl)} + {translate("goToReassignment")} diff --git a/src/ui/HomeTable.tsx b/src/ui/HomeTable.tsx index c7d3f0b..efe212c 100644 --- a/src/ui/HomeTable.tsx +++ b/src/ui/HomeTable.tsx @@ -54,13 +54,7 @@ function descendingComparator(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 index 5116239..aeb6ec5 100644 --- 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 = () => { setSearch(e.target.value)} - label={translate("toSearchLabel", intl)} - placeholder={translate("searchSurveyUnitPlaceholder", intl)} + label={translate("toSearchLabel")} + placeholder={translate("searchSurveyUnitPlaceholder")} /> diff --git a/src/ui/HomeTableRow.tsx b/src/ui/HomeTableRow.tsx index 00b897a..c3a9ce1 100644 --- a/src/ui/HomeTableRow.tsx +++ b/src/ui/HomeTableRow.tsx @@ -1,6 +1,5 @@ import TableRow from "@mui/material/TableRow"; import TableCell from "@mui/material/TableCell"; -import { useIntl } from "react-intl"; import { styled } from "@mui/material/styles"; import { Row } from "./Row"; import Tooltip from "@mui/material/Tooltip"; @@ -13,7 +12,7 @@ import { CommentDialog } from "./CommentDialog"; import { Link } from "./Link"; import { StateChip } from "./StateChip"; import ClearIcon from "@mui/icons-material/Clear"; -import { translate } from "../functions/translate"; +import { useTranslation } from "../functions/translate"; type Props = { surveyUnit: SurveyUnitTemporaryType; // TODO change type after backend rework @@ -26,7 +25,7 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({ })); export const HomeTableRow = ({ surveyUnit }: Props) => { - const intl = useIntl(); + const { translate } = useTranslation(); const [isDialogOpen, toggleDialog] = useToggle(false); @@ -44,31 +43,31 @@ export const HomeTableRow = ({ surveyUnit }: Props) => { - {surveyUnit.result ? translate(surveyUnit.result, intl) : "-"} + {surveyUnit.result ? translate(surveyUnit.result) : "-"} - {surveyUnit.contactOutcome ? translate(surveyUnit.contactOutcome.type, intl) : "-"} + {surveyUnit.contactOutcome ? translate(surveyUnit.contactOutcome.type) : "-"} - {surveyUnit.priority ? translate("yes", intl) : translate("no", intl)} + {surveyUnit.priority ? translate("yes") : translate("no")} - + - + - + diff --git a/src/ui/SelectWithCheckbox.tsx b/src/ui/SelectWithCheckbox.tsx index 1d6f1c6..4b5537b 100644 --- a/src/ui/SelectWithCheckbox.tsx +++ b/src/ui/SelectWithCheckbox.tsx @@ -6,9 +6,8 @@ import shadows from "@mui/material/styles/shadows"; import { Filter, emptyFilter } from "../hooks/useSearchFilter"; import { useDebouncedState } from "../hooks/useDebouncedState"; import { SearchField } from "./SearchField"; -import { useIntl } from "react-intl"; import { StateChip } from "./StateChip"; -import { translate } from "../functions/translate"; +import { useTranslation } from "../functions/translate"; const style = { root: { @@ -37,7 +36,7 @@ export const SelectWithCheckbox = ({ toggleSearchFilter, canSearch = false, }: Props) => { - const intl = useIntl(); + const { translate } = useTranslation(); const [anchorEl, setAnchorEl] = useState(null); const [debouncedSearch, setDebouncedSearch] = useDebouncedState("", 500); @@ -82,8 +81,8 @@ export const SelectWithCheckbox = ({ setDebouncedSearch(e.target.value)} - label={translate("searchLabel", intl)} - placeholder={translate("searchInterviewerPlaceholder", intl)} + label={translate("searchLabel")} + placeholder={translate("searchInterviewerPlaceholder")} /> )} diff --git a/src/ui/StateChip.tsx b/src/ui/StateChip.tsx index 7721006..9b7ad61 100644 --- a/src/ui/StateChip.tsx +++ b/src/ui/StateChip.tsx @@ -1,14 +1,13 @@ import { Chip } from "@mui/material"; -import { translate } from "../functions/translate"; -import { useIntl } from "react-intl"; +import { useTranslation } from "../functions/translate"; type Props = { value: string; }; export const StateChip = ({ value }: Props) => { - const intl = useIntl(); - return ; + const { translate } = useTranslation(); + return ; }; const getChipColor = (value: string) => { diff --git a/src/ui/TableFooter.tsx b/src/ui/TableFooter.tsx index d8264c3..e35aaf6 100644 --- a/src/ui/TableFooter.tsx +++ b/src/ui/TableFooter.tsx @@ -1,6 +1,5 @@ import { TableFooter as MuiTableFooter, TablePagination, TableRow } from "@mui/material"; -import { translate } from "../functions/translate"; -import { useIntl } from "react-intl"; +import { useTranslation } from "../functions/translate"; const style = { root: { @@ -33,17 +32,16 @@ export const TableFooter = ({ onChangePage, onChangeRowsPerPage, }: TableFooterProps) => { - const intl = useIntl(); - + const { translate } = useTranslation(); return ( - `${page.from}-${page.to === -1 ? page.count : page.to} ${translate("on", intl)} ${page.count} ${translate("labelDisplayedRows", intl)}` + `${page.from}-${page.to === -1 ? page.count : page.to} ${translate("on")} ${page.count} ${translate("labelDisplayedRows")}` } count={count} rowsPerPage={rowsPerPage} diff --git a/src/ui/TableHeadCell.tsx b/src/ui/TableHeadCell.tsx index b5f5872..be0b2fb 100644 --- a/src/ui/TableHeadCell.tsx +++ b/src/ui/TableHeadCell.tsx @@ -1,6 +1,5 @@ import { TableCell as MuiTableCell, TableCellProps, TableSortLabel } from "@mui/material"; -import { useIntl } from "react-intl"; -import { translate } from "../functions/translate"; +import { useTranslation } from "../functions/translate"; type Props = { columnId: string; @@ -20,7 +19,7 @@ export const TableHeadCell = ({ onRequestSort, sx, }: Props) => { - const intl = useIntl(); + const { translate } = useTranslation(); const createSortHandler = (property: string) => (event: React.MouseEvent) => { onRequestSort?.(event, property); @@ -35,10 +34,10 @@ export const TableHeadCell = ({ direction={orderBy === columnId ? order : "desc"} onClick={createSortHandler(columnId)} > - {translate(label, intl)} + {translate(label)} ) : ( - translate(label, intl) + translate(label) )} );