review

src/functions/translate.ts

@@ -0,0 +1,5 @@
+import { IntlShape } from "react-intl";
+
+export const translate = (id: string, intl: IntlShape) => {
+  return intl.formatMessage({ id });
+};

src/hooks/useSearchFilter.ts

@@ -7,7 +7,7 @@ export type Filter = {
   ssech: string[];
   interviewer: string[];
   states: string[];
-  closingCause: string[];
+  result: string[];
   priority: string[];
   all: { name: string; value: string }[];
 };
@@ -17,7 +17,7 @@ export const emptyFilter: Filter = {
   ssech: [],
   interviewer: [],
   states: [],
-  closingCause: [],
+  result: [],
   priority: [],
   all: [],
 };

src/i18n-en.js

@@ -5,9 +5,9 @@ export const messagesEn = {
     goToNotifyPage: 'Notify' ,
     goToCollectOrganization: 'Organization of collections',
     goToReassignment: 'Reassignment',
-    goToHelp: 'HELP',
+    goToHelp: 'help',
     logout: 'Logout',
-    selectFavoriteSurveys: 'MY FAVORITE SURVEYS',
+    selectFavoriteSurveys: 'my favorite surveys',
     resetFilters: 'Reset filters',
     searchLabel: 'Search',
     searchInterviewerPlaceholder: 'lastname, firstname',
@@ -19,14 +19,15 @@ export const messagesEn = {
     subSampleFilterLabel: 'Sub-sample...',
     interviewerFilterLabel: 'Interviewer...',
     statesFilterLabel: 'States...',
-    closingCauseFilterLabel: 'Closing cause...',
+    resultFilterLabel: 'Result...',
     priorityFilterLabel: 'Priority...',
     id: 'Identifier',
     survey: 'Survey',
     subSample: 'Sub-sample',
     interviewer: 'Interviewer',
     state: 'State',
     closingCause: 'Closing cause',
+    result: 'Result',
     contactOutcome: 'Contact outcome',
     priority: 'Priority', 
     actions: 'Actions',
@@ -35,7 +36,7 @@ export const messagesEn = {
     readQuestionnaire: 'Read questionnaire',
     close: 'Close',
     comment: 'Comment', 
-    surveyUnitNumber: 'SU n°',
+    surveyUnitNumber: 'SU n.',
     commentPlaceholder: 'Write a comment',
     commentDialogHelpText: 'Edit the text directly in the input field and click “validate” to validate your changes.',
     delete:'delete',

src/i18n-fr.js

@@ -5,9 +5,9 @@ export const messagesFr = {
     goToNotifyPage: 'Notifier', 
     goToCollectOrganization: 'Organisation des collectes',
     goToReassignment: 'Réaffectation', 
-    goToHelp: 'AIDE',
+    goToHelp: 'aide',
     logout: 'Se déconnecter',
-    selectFavoriteSurveys: 'MES ENQUÊTES FAVORITES', 
+    selectFavoriteSurveys: 'mes enquêtes favorites', 
     resetFilters: 'Réinitialiser les filtres',
     searchLabel: 'Recherche',
     searchInterviewerPlaceholder: 'nom, prénom',
@@ -19,14 +19,15 @@ export const messagesFr = {
     subSampleFilterLabel: 'Sous-échantillon...', 
     interviewerFilterLabel: 'Enquêteur...', 
     statesFilterLabel: 'Etat...',
-    closingCauseFilterLabel: 'Bilan agrégé...',
+    resultFilterLabel: 'Résultat...',
     priorityFilterLabel: 'Prioritaire...', 
     id: 'Identifiant',
     survey: 'Enquête',
     subSample: 'Sous-éch.',
     interviewer: 'Enquêteur',
     state: 'Etat',
-    closingCause: 'Bilan agrégé',
+    closingCause: 'Motif de clotûre',
+    result: 'Résultat',
     contactOutcome: 'Bilan des contacts',
     priority: 'Prioritaire', 
     actions: 'Actions',

src/pages/Home.tsx

@@ -3,14 +3,15 @@ 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";
 
 export const Home = () => {
   const intl = useIntl();
 
   return (
     <Stack px={4} py={2} gap={2}>
       <Typography variant="headlineLarge" fontWeight={"400"} pb={2} pt={1} alignSelf={"center"}>
-        {intl.formatMessage({ id: "homepageTitle" })}
+        {translate("homepageTitle", intl)}
       </Typography>
       <FiltersCard />
       <HomeTableCard />

src/routes.tsx

@@ -27,7 +27,7 @@ export const routes: RouteObject[] = [
       { path: "notify", element: <NotifyPage /> },
       { path: "collectOrganization", element: <CollectOrganizationPage /> },
       { path: "reassignment", element: <ReassignmentPage /> },
-      { path: "surveyUnits/:id", element: <SurveyUnitPage /> },
+      { path: "survey-unit/:id", element: <SurveyUnitPage /> },
     ],
   },
 ];

src/theme.tsx

@@ -133,6 +133,9 @@ const baseTheme = createTheme({});
 const colors = (c: string) => baseTheme.palette.augmentColor({ color: { main: c } });
 const typography = {
   fontFamily: "Open Sans, sans-serif",
+  fontWeight: {
+    standard: 400,
+  },
   displayLarge: {
     fontSize: 57,
     lineHeight: "64px",
@@ -358,7 +361,7 @@ export const theme = createTheme({
           ...typography.titleMedium,
           fontSize: "20px",
           lineHeight: "32px",
-          fontWeight: 400,
+          fontWeight: typography.fontWeight.standard,
         },
       },
     },

src/types/temporaryTypes.ts

@@ -4,7 +4,10 @@ export type SurveyUnitTemporaryType = {
   ssech: number;
   interviewer: string;
   states: string;
-  closingCause: string;
-  contactOutcome: string;
+  result: string;
+  contactOutcome: {
+    date: number;
+    type: string;
+  };
   priority: boolean;
 };

src/ui/AccountNavigation.tsx

@@ -9,6 +9,7 @@ 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";
 
 export const AccountNavigation = () => {
@@ -36,7 +37,7 @@ export const AccountNavigation = () => {
         startIcon={<AccountCircleIcon fontSize="large" style={{ color: theme.palette.text.tertiary }} />}
         endIcon={<KeyboardArrowDownIcon />}
       >
-        <Typography variant="bodyMedium">{intl.formatMessage({ id: "myProfile" })}</Typography>
+        <Typography variant="bodyMedium">{translate("myProfile", intl)}</Typography>
       </Button>
       <Menu
         id="account-menu"
@@ -67,7 +68,7 @@ export const AccountNavigation = () => {
             color: "primary.main",
           }}
         >
-          {intl.formatMessage({ id: "selectFavoriteSurveys" })}
+          {translate("selectFavoriteSurveys", intl).toLocaleUpperCase()}
         </MenuItem>
         {/* TODO: change link */}
         <MenuItem
@@ -79,7 +80,9 @@ export const AccountNavigation = () => {
         >
           <Row gap={0.5}>
             <OpenInNewIcon fontSize="littleIcon" />
-            <Typography variant={"bodyMedium"}>{intl.formatMessage({ id: "goToHelp" })}</Typography>
+            <Typography variant={"bodyMedium"}>
+              {translate("goToHelp", intl).toLocaleUpperCase()}
+            </Typography>
           </Row>
         </MenuItem>
         <MenuItem
@@ -91,7 +94,7 @@ export const AccountNavigation = () => {
             })
           }
         >
-          {intl.formatMessage({ id: "logout" })}
+          {translate("logout", intl)}
         </MenuItem>
       </Menu>
     </Box>

src/ui/CommentDialog.tsx

@@ -8,8 +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";
-
 type Props = {
   open: boolean;
   onClose: () => void;
@@ -55,11 +55,11 @@ export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Pro
       <form onSubmit={handleSubmit}>
         <DialogTitle>
           <Row justifyContent={"space-between"}>
-            <Box>{intl.formatMessage({ id: "comment" })}</Box>
+            <Box>{translate("comment", intl)}</Box>
             <Row gap={1}>
               <Divider orientation="vertical" variant="middle" sx={{ height: "20px" }} />
               <Box>
-                {intl.formatMessage({ id: "surveyUnitNumber" })} {surveyUnitId}
+                {translate("surveyUnitNumber", intl)} {surveyUnitId}
               </Box>
             </Row>
           </Row>
@@ -82,11 +82,10 @@ export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Pro
               InputProps={{
                 startAdornment: <InputAdornment position="start" />,
               }}
-              autoFocus
               id="comment"
               name="comment"
-              label={intl.formatMessage({ id: "comment" })}
-              placeholder={intl.formatMessage({ id: "commentPlaceholder" })}
+              label={translate("comment", intl)}
+              placeholder={translate("commentPlaceholder", intl)}
               type="text"
               fullWidth
               variant="outlined"
@@ -96,22 +95,22 @@ export const CommentDialog = ({ open, onClose, comment = "", surveyUnitId }: Pro
               onChange={onChange}
             />
             <Typography variant="bodySmall" color={"text.tertiary"}>
-              {intl.formatMessage({ id: "commentDialogHelpText" })}
+              {translate("commentDialogHelpText", intl)}
             </Typography>
           </Stack>
         </DialogContent>
         {comment === "" || isModified ? (
           <DialogActions>
-            <Button onClick={handleCancel}>{intl.formatMessage({ id: "cancel" })}</Button>
+            <Button onClick={handleCancel}>{translate("cancel", intl)}</Button>
             <Button type="submit" variant="contained" disabled={!isModified}>
-              {intl.formatMessage({ id: "validate" })}
+              {translate("validate", intl)}
             </Button>
           </DialogActions>
         ) : (
           <DialogActions>
-            <Button onClick={handleDelete}>{intl.formatMessage({ id: "delete" })}</Button>
+            <Button onClick={handleDelete}>{translate("delete", intl)}</Button>
             <Button onClick={handleCancel} variant="contained">
-              {intl.formatMessage({ id: "closeButtonLabel" })}
+              {translate("closeButtonLabel", intl)}
             </Button>
           </DialogActions>
         )}

src/ui/FiltersCard.tsx

@@ -8,8 +8,8 @@ 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 { closingCausesEnum } from "../constants/closingCauses";
 import { surveyUnitStatesEnum } from "../constants/surveyUnitStates";
+import { translate } from "../functions/translate";
 
 const styles = {
   Grid: {
@@ -67,64 +67,65 @@ export const FiltersCard = () => {
   const { onReset } = useSearchForm(filters);
   const toggleSearchFilter = useToggleSearchFilter();
 
-  const closingCauseOptions = closingCausesEnum.map(c => {
-    return { label: intl.formatMessage({ id: c }), value: c };
+  // TODO: find enum
+  const resultOptions = [].map(c => {
+    return { label: translate(c, intl), value: c };
   });
 
   const statesOptions = surveyUnitStatesEnum.map(s => {
-    return { label: intl.formatMessage({ id: s }), value: s };
+    return { label: translate(s, intl), value: s };
   });
 
   return (
     <Card sx={{ p: 2 }} elevation={2} variant="general">
       <Stack gap={2}>
         <Row justifyContent={"space-between"}>
-          <Typography variant="titleMedium">{intl.formatMessage({ id: "filterUnitsBy" })}</Typography>
+          <Typography variant="titleMedium">{translate("filterUnitsBy", intl)}</Typography>
           <Button variant="text" color="inherit" onClick={onReset}>
             <Typography sx={{ textDecoration: "underline" }}>
-              {intl.formatMessage({ id: "resetFilters" })}
+              {translate("resetFilters", intl)}
             </Typography>
           </Button>
         </Row>
         <Row style={styles.Grid} sx={{ color: "text.tertiary" }}>
           <SelectWithCheckbox
-            label={intl.formatMessage({ id: "surveyFilterLabel" })}
+            label={translate("surveyFilterLabel", intl)}
             options={surveysMock}
             name="campaigns"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={intl.formatMessage({ id: "subSampleFilterLabel" })}
+            label={translate("subSampleFilterLabel", intl)}
             options={subsampleMock}
             name="ssech"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={intl.formatMessage({ id: "interviewerFilterLabel" })}
+            label={translate("interviewerFilterLabel", intl)}
             options={interviewerMock}
             name="interviewer"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
             canSearch={true}
           />
           <SelectWithCheckbox
-            label={intl.formatMessage({ id: "statesFilterLabel" })}
+            label={translate("statesFilterLabel", intl)}
             options={statesOptions}
             name="states"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={intl.formatMessage({ id: "closingCauseFilterLabel" })}
-            options={closingCauseOptions}
-            name="closingCause"
+            label={translate("resultFilterLabel", intl)}
+            options={resultOptions}
+            name="result"
             toggleSearchFilter={toggleSearchFilter}
             filters={filters}
           />
           <SelectWithCheckbox
-            label={intl.formatMessage({ id: "priorityFilterLabel" })}
+            label={translate("priorityFilterLabel", intl)}
             options={priorityOptions}
             name="priority"
             toggleSearchFilter={toggleSearchFilter}
@@ -136,7 +137,7 @@ export const FiltersCard = () => {
             filters: filters.all,
             options: [
               ...priorityOptions,
-              ...closingCauseOptions,
+              ...resultOptions,
               ...statesOptions,
               ...interviewerMock,
               ...surveysMock,