add FollowInterviewerCard

src/WrappedRender.tsx

@@ -5,15 +5,31 @@ import { messagesFr } from "./i18n-fr";
 import { IntlProvider } from "react-intl";
 import { ReactElement } from "react";
 import { SonorTheme } from "./theme";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { AuthProvider } from "./hooks/useAuth";
 
 const router = createBrowserRouter(routes);
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000,
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
+
 export const WrappedRender = (children: ReactElement) => {
   return render(
-    <SonorTheme>
-      <IntlProvider locale="fr" messages={messagesFr}>
-        <Router {...router}>{children}</Router>
-      </IntlProvider>
-    </SonorTheme>,
+    <AuthProvider>
+      <QueryClientProvider client={queryClient}>
+        <SonorTheme>
+          <IntlProvider locale="fr" messages={messagesFr}>
+            <Router {...router}>{children}</Router>
+          </IntlProvider>
+        </SonorTheme>
+      </QueryClientProvider>
+    </AuthProvider>,
   );
 };

src/functions/api.ts

@@ -1,7 +1,20 @@
-import type { APIPaths, APIRequests, APIResponse } from "../types/api.ts";
+import type { APIPaths, APIRequests, APIResponse, APIMethods, APIRequest } from "../types/api.ts";
 
 const baseURL = import.meta.env.VITE_API_ENDPOINT;
 
+const mockApiRequest = new Map<string, (url: string, options: any) => any>()
+
+export function mockRequest<
+Path extends APIPaths,
+Method extends APIMethods<Path>,
+>(path: Path, method: Method, cb: (options: APIRequest<Path, Method>) => APIResponse<Path, Method>) {
+  mockApiRequest.set(`${method} ${path}`, cb as any)
+}
+
+export function clearMockRequest() {
+  mockApiRequest.clear()
+}
+
 export async function fetchAPI<
   Path extends APIPaths,
   Options extends APIRequests<Path> & { signal?: AbortSignal; headers?: Record<string, string> },
@@ -46,6 +59,10 @@ export async function fetchAPI<
       }
     }
   }
+  const requestKey = `${fetchOptions.method?.toLowerCase()} ${path}`
+  if (mockApiRequest.has(requestKey)) {
+    return (mockApiRequest.get('requestKey') as any)(options) as APIResponse<Path, Options["method"]>
+  }
   const response = await fetch(url.toString(), fetchOptions);
   if (response.status === 204) {
     return null as any;

src/functions/oidc.ts

@@ -26,7 +26,8 @@ export const createAppOidc = () => {
   if (isOidc) {
     return !import.meta.env.VITE_OIDC_ISSUER
       ? createMockReactOidc<TokenInfo>({
-          isUserInitiallyLoggedIn: false,
+          isUserInitiallyLoggedIn: true,
+
           mockedTokens: {
             decodedIdToken: {
               inseegroupedefaut: ["gr"],

src/i18n-en.js

@@ -21,4 +21,26 @@ export const messagesEn = {
     statesFilterLabel: 'States...',
     closingCauseFilterLabel: 'Closing cause...',
     priorityFilterLabel: 'Priority...',
+    searchInterviewer: 'an interviewer...',
+    searchOrganizationUnit: "an organization unit...",
+    chooseSurvey: "Choose a survey :",
+    chooseInterviewer: "Choose an interviewer :",
+    chooseOrganizationUnit: "Choose an organization unit :",
+    followInterviewer: "Follow an interviewer",
+    followSurvey: 'Follow a survey',
+    allSurveys: 'All surveys',
+    followOrganizationUnit: "Follow an organization unit",
+    followCampaignBreacrumb: "Follow survey",
+    survey: "Survey",
+    progress: "Progress",
+    collect: "Collect",
+    reminders: "Reminders",
+    provisionalStatus: "Provisional status",
+    closedSU: "Closed SU",
+    terminatedSU: "Terminated SU",
+    interviewer: "Interviewer",
+    followInterviewerBreacrumb: "Follow interviewer",
+    lastSynchronization: "Last synchronization",
+    followOrganizationUnitBreacrumb: "Follow organization unit",
+    organizationUnit: "OU"
 }

src/i18n-fr.js

@@ -21,4 +21,28 @@ export const messagesFr = {
     statesFilterLabel: 'Etat...',
     closingCauseFilterLabel: 'Bilan agrégé...',
     priorityFilterLabel: 'Prioritaire...', 
+    searchInterviewer: 'un enquêteur...',
+    searchOrganizationUnit: "un site...",
+    chooseSurvey: "Choisissez une enquête :",
+    chooseInterviewer: "Choisissez un enquêteur / une enquêtrice :",
+    chooseOrganizationUnit: "Choisissez un site :",
+    followInterviewer: "Suivre un enquêteur",
+    followSurvey: "Suivre une enquête",
+    allSurveys: "Ensemble des enquêtes",
+    followOrganizationUnit: "Suivre un site",
+    followCampaignBreacrumb: "Suivre enquête",
+    survey: "Enquête",
+    progress: "Avancement",
+    collect: "Collecte",
+    reminders: "Relances",
+    provisionalStatus: "Statut provisoire",
+    closedSU: "UE cloturées",
+    terminatedSU: "UE terminées",
+    interviewer: "Enquêteur",
+    followInterviewerBreacrumb: "Suivre enquêteur",
+    lastSynchronization: "Dernière synchronization",
+    followOrganizationUnitBreacrumb: "Suivre site",
+    organizationUnit: "DEM"
+
+
 }

src/pages/FollowCampaignPage.tsx

@@ -0,0 +1,58 @@
+import { useIntl } from "react-intl";
+import { FollowSinglePageHeader } from "../ui/follow/FollowSinglePageHeader";
+import { SyntheticEvent, useState } from "react";
+import Tabs from "@mui/material/Tabs";
+import Stack from "@mui/material/Stack";
+import { PageTab } from "../ui/PageTab";
+import { FollowCampaignProgress } from "../ui/follow/FollowCampaignProgress";
+
+// TODO remove
+const labelMock = "Logement";
+
+enum Tab {
+  progress = "progress",
+  collect = "collect",
+  reminders = "reminders",
+  provisionalStatus = "provisionalStatus",
+  closedSU = "closedSU",
+  terminatedSU = "terminatedSU",
+}
+
+export const FollowCampaignPage = () => {
+  const intl = useIntl();
+  const [currentTab, setCurrentTab] = useState<string>(Tab.progress);
+  const handleChange = (_: SyntheticEvent, newValue: string) => {
+    setCurrentTab(newValue);
+  };
+
+  const breadcrumbs = [
+    { href: "/follow", title: "goToFollowPage" },
+    intl.formatMessage({ id: "followCampaignBreacrumb" }),
+    labelMock,
+  ];
+
+  return (
+    <>
+      <FollowSinglePageHeader
+        category={"survey"}
+        label={labelMock}
+        breadcrumbs={breadcrumbs}
+        currentTab={currentTab}
+        onChange={handleChange}
+      >
+        {Object.keys(Tab).map(k => (
+          <PageTab key={k} value={k} label={intl.formatMessage({ id: k })} />
+        ))}
+      </FollowSinglePageHeader>
+
+      <Stack px={3} py={4}>
+        {currentTab === Tab.progress && <FollowCampaignProgress />}
+        {currentTab === Tab.collect && <>tab collecte</>}
+        {currentTab === Tab.reminders && <>tab relances</>}
+        {currentTab === Tab.provisionalStatus && <>tab statut provisoire</>}
+        {currentTab === Tab.closedSU && <>tab UE cloturées</>}
+        {currentTab === Tab.terminatedSU && <>tab UE terminées</>}
+      </Stack>
+    </>
+  );
+};

src/pages/FollowInterviewerPage.tsx

@@ -0,0 +1,69 @@
+import { CircularProgress, Stack, Tabs } from "@mui/material";
+import { SyntheticEvent, useState } from "react";
+import { useIntl } from "react-intl";
+import { FollowSinglePageHeader } from "../ui/follow/FollowSinglePageHeader";
+import { PageTab } from "../ui/PageTab";
+import { Row } from "../ui/Row";
+import { useFetchQuery } from "../hooks/useFetchQuery";
+import { useParams } from "react-router-dom";
+
+enum Tab {
+  progress = "progress",
+  collect = "collect",
+  lastSynchronization = "lastSynchronization",
+}
+
+export const FollowInterviewerPage = () => {
+  const { id } = useParams();
+  const intl = useIntl();
+
+  const [currentTab, setCurrentTab] = useState<string>(Tab.progress);
+
+  const { data: interviewer } = useFetchQuery("/api/interviewer/{id}", {
+    urlParams: {
+      id: id!,
+    },
+  });
+
+  if (!interviewer) {
+    return (
+      <Row justifyContent="center" py={10}>
+        <CircularProgress />
+      </Row>
+    );
+  }
+
+  const label = `${interviewer.lastName?.toLocaleUpperCase() ?? ""} ${interviewer.firstName ?? ""}`;
+
+  const handleChange = (_: SyntheticEvent, newValue: string) => {
+    setCurrentTab(newValue);
+  };
+
+  const breadcrumbs = [
+    { href: "/follow", title: "goToFollowPage" },
+    intl.formatMessage({ id: "followInterviewerBreacrumb" }),
+    label,
+  ];
+
+  return (
+    <>
+      <FollowSinglePageHeader
+        category={"interviewer"}
+        label={label}
+        breadcrumbs={breadcrumbs}
+        currentTab={currentTab}
+        onChange={handleChange}
+      >
+        {Object.keys(Tab).map(k => (
+          <PageTab key={k} value={k} label={intl.formatMessage({ id: k })} />
+        ))}
+      </FollowSinglePageHeader>
+
+      <Stack px={3} py={4}>
+        {currentTab === Tab.progress && <>tab avancement</>}
+        {currentTab === Tab.collect && <>tab collecte</>}
+        {currentTab === Tab.lastSynchronization && <>tab dernière synchro</>}
+      </Stack>
+    </>
+  );
+};

src/pages/FollowOrganizationUnitPage.tsx

@@ -0,0 +1,49 @@
+import { SyntheticEvent, useState } from "react";
+import { useIntl } from "react-intl";
+import { FollowSinglePageHeader } from "../ui/follow/FollowSinglePageHeader";
+
+import { PageTab } from "../ui/PageTab";
+import Stack from "@mui/material/Stack";
+
+// TODO remove
+const labelMock = "Paris";
+
+enum Tab {
+  progress = "progress",
+  collect = "collect",
+}
+
+export const FollowOrganizationUnitPage = () => {
+  const intl = useIntl();
+  const [currentTab, setCurrentTab] = useState<string>(Tab.progress);
+  const handleChange = (_: SyntheticEvent, newValue: string) => {
+    setCurrentTab(newValue);
+  };
+
+  const breadcrumbs = [
+    { href: "/follow", title: "goToFollowPage" },
+    intl.formatMessage({ id: "followOrganizationUnitBreacrumb" }),
+    labelMock,
+  ];
+
+  return (
+    <>
+      <FollowSinglePageHeader
+        category={"organizationUnit"}
+        label={labelMock}
+        breadcrumbs={breadcrumbs}
+        currentTab={currentTab}
+        onChange={handleChange}
+      >
+        {Object.keys(Tab).map(k => (
+          <PageTab key={k} value={k} label={intl.formatMessage({ id: k })} />
+        ))}
+      </FollowSinglePageHeader>
+
+      <Stack px={3} py={4}>
+        {currentTab === Tab.progress && <>tab avancement</>}
+        {currentTab === Tab.collect && <>tab collecte</>}
+      </Stack>
+    </>
+  );
+};

src/pages/FollowPage.tsx

@@ -1,5 +1,31 @@
-import { Typography } from "@mui/material";
+import { Row } from "../ui/Row";
+import { FollowInterviewerCard } from "../ui/follow/FollowInterviewerCard";
+import { FollowSurveyCard } from "../ui/follow/FollowSurveyCard";
+import { FollowOrganizationUnitCard } from "../ui/follow/FollowOrganizationUnitCard";
 
 export const FollowPage = () => {
-  return <Typography>Page suivre</Typography>;
+  // TODO use real condition
+  const isNationalProfile = true;
+
+  const gridTemplateColumns = isNationalProfile
+    ? { gridTemplateColumns: "1fr 1fr 1fr" }
+    : { gridTemplateColumns: "1fr 1fr" };
+
+  return (
+    <Row
+      style={{
+        ...{
+          display: "grid",
+          ...gridTemplateColumns,
+        },
+      }}
+      gap={3}
+      px={4}
+      py={3}
+    >
+      <FollowSurveyCard />
+      <FollowInterviewerCard />
+      {isNationalProfile && <FollowOrganizationUnitCard />}
+    </Row>
+  );
 };

src/routes.tsx

@@ -8,6 +8,9 @@ import { ClosePage } from "./pages/ClosePage";
 import { NotifyPage } from "./pages/NotifyPage";
 import { CollectOrganizationPage } from "./pages/CollectOrganizationPage";
 import { ReassignmentPage } from "./pages/ReassignmentPage";
+import { FollowInterviewerPage } from "./pages/FollowInterviewerPage";
+import { FollowCampaignPage } from "./pages/FollowCampaignPage";
+import { FollowOrganizationUnitPage } from "./pages/FollowOrganizationUnitPage";
 
 export const routes: RouteObject[] = [
   {
@@ -21,6 +24,9 @@ export const routes: RouteObject[] = [
     children: [
       { path: "", element: <Home /> },
       { path: "follow", element: <FollowPage /> },
+      { path: "follow/interviewer/:id", element: <FollowInterviewerPage /> },
+      { path: "follow/campaign/:id", element: <FollowCampaignPage /> },
+      { path: "follow/organization-unit/:id", element: <FollowOrganizationUnitPage /> },
       { path: "read", element: <ReadPage /> },
       { path: "close", element: <ClosePage /> },
       { path: "notify", element: <NotifyPage /> },