feat: add surveyList page and SurveyHomepage and remove homepage

src/components/Header.tsx

@@ -4,14 +4,15 @@ import { declareComponentKeys, useTranslation } from "i18n";
 import { fr } from "@codegouvfr/react-dsfr";
 import { useIsAuthenticated, useLogout } from "hooks/useAuth";
 
-export function Header() {
+export function Header({ className }: { className?: string }) {
   const { t } = useTranslation("Header");
 
   const { isAuthenticated } = useIsAuthenticated();
   const logout = useLogout();
 
   return (
     <DsfrHeader
+      className={className}
       brandTop={
         <>
           République

src/components/SurveyList/SurveyList.tsx

@@ -0,0 +1,68 @@
+import { useTranslation } from "i18n";
+import Banner from "../../assets/banner.svg";
+import { tss } from "tss-react/dsfr";
+import { fr } from "@codegouvfr/react-dsfr";
+import content from "resources/content.json";
+import { Card } from "@codegouvfr/react-dsfr/Card";
+import Grid from "@mui/material/Grid";
+
+export const SurveysList = () => {
+  const { t } = useTranslation("SurveyHomepage");
+  const { classes, cx } = useStyles();
+
+  const surveys = content.specifique.map(survey => {
+    return { titleShort: survey.titleShort, id: survey.id };
+  });
+
+  return (
+    <div className={classes.pageContainer}>
+      <img
+        src={Banner}
+        alt=""
+        role="presentation"
+        width={"100%"}
+        className={cx("fr-unhidden-md", "fr-hidden")}
+      />
+      <div className={fr.cx("fr-container", "fr-py-5w")}>
+        <h2>{t("title")}</h2>
+        <Grid
+          sx={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+            paddingBottom: 2,
+            minHeight: 0,
+            overflow: "auto",
+            width: "calc(100% + .5rem)",
+            paddingRight: ".5rem",
+          }}
+          gap={2}
+        >
+          {surveys.map(survey => (
+            <Card
+              key={survey.id}
+              background
+              border
+              enlargeLink
+              horizontal
+              linkProps={{
+                to: "/$survey",
+                params: {
+                  survey: survey.id,
+                },
+              }}
+              endDetail={`${import.meta.env.VITE_PORTAIL_URL}/${survey.id}`}
+              title={survey.titleShort}
+              titleAs="h5"
+            />
+          ))}
+        </Grid>
+      </div>
+    </div>
+  );
+};
+
+const useStyles = tss.withName({ SurveysList }).create({
+  pageContainer: {
+    width: "100vw",
+  },
+});

src/components/homepage/Homepage.tsx → src/components/surveyHomepage/SurveyHomepage.tsx

@@ -1,52 +1,25 @@
 import { declareComponentKeys, useTranslation } from "i18n";
 import Banner from "../../assets/banner.svg";
 import { SideMenu } from "@codegouvfr/react-dsfr/SideMenu";
-import { Outlet, useRouter } from "@tanstack/react-router";
+import { Outlet } from "@tanstack/react-router";
 import { tss } from "tss-react/dsfr";
 import { fr } from "@codegouvfr/react-dsfr";
 import Divider from "@mui/material/Divider";
 import Button from "@codegouvfr/react-dsfr/Button";
-import { useEffect, useState } from "react";
-import { fetchContent } from "functions/fetchContent";
-import { CircularProgress } from "@mui/material";
 
-export const Homepage = () => {
-  const { t } = useTranslation("Homepage");
-  const { classes, cx } = useStyles();
-
-  const [data, setData] = useState<Record<string, any> | null>(null);
-  const [error, setError] = useState(null);
-
-  const router = useRouter();
-  const currentPath = router.state.location.pathname.split("/")[1];
-
-  useEffect(() => {
-    fetchContent(currentPath)
-      .then(setData)
-      .catch(error => {
-        setError(error.message);
-      });
-  }, [currentPath]);
-
-  if (error) {
-    console.error(error);
-  }
+type Props = {
+  surveyId: string;
+};
 
-  if (!data) {
-    return (
-      <div
-        style={{ display: "flex", justifyContent: "center", height: "50vh", alignItems: "center" }}
-        aria-label={"loading..."}
-      >
-        <CircularProgress />
-      </div>
-    );
-  }
+export const SurveyHomepage = ({ surveyId }: Props) => {
+  const { t } = useTranslation("SurveyHomepage");
+  const { classes, cx } = useStyles();
 
   return (
-    <div className={classes.pageContainer}>
+    <div>
       <img src={Banner} alt="" role="presentation" width={"100%"} />
       <div
+        id="content"
         className={fr.cx(
           "fr-grid-row",
           "fr-grid-row--center",
@@ -55,7 +28,6 @@ export const Homepage = () => {
           "fr-p-md-0",
           "fr-col-12",
         )}
-        id="content"
       >
         <LoginSection className={cx("fr-hidden-md")} />
         <div className={fr.cx("fr-col-12", "fr-col-md-3", "fr-p-2w", "fr-p-md-0")}>
@@ -66,31 +38,44 @@ export const Homepage = () => {
             items={[
               {
                 linkProps: {
-                  to: "/accueil/introduction",
+                  to: "/$survey/introduction",
+                  params: { survey: surveyId },
                 },
                 text: t("survey introduction"),
               },
               {
                 linkProps: {
-                  to: "/accueil/cadre-juridique",
+                  to: "/$survey/cadre-juridique",
+                  params: {
+                    survey: surveyId,
+                  },
                 },
                 text: t("legal framework"),
               },
               {
                 linkProps: {
-                  to: "/accueil/utilisation-reponse",
+                  to: "/$survey/utilisation-reponse",
+                  params: {
+                    survey: surveyId,
+                  },
                 },
                 text: t("what are your answers for?"),
               },
               {
                 linkProps: {
-                  href: "#",
+                  to: "/$survey/utilisation-reponse",
+                  params: {
+                    survey: surveyId,
+                  },
                 },
                 text: t("documents to the surveyed"),
               },
               {
                 linkProps: {
-                  href: "#",
+                  to: "/$survey/utilisation-reponse",
+                  params: {
+                    survey: surveyId,
+                  },
                 },
                 text: t("some results"),
               },
@@ -110,7 +95,7 @@ export const Homepage = () => {
 };
 
 const LoginSection = ({ className }: { className?: string }) => {
-  const { t } = useTranslation("Homepage");
+  const { t } = useTranslation("SurveyHomepage");
   const { t: headerTranslation } = useTranslation("Header");
   const { classes, cx } = useStyles();
 
@@ -142,10 +127,7 @@ const LoginSection = ({ className }: { className?: string }) => {
   );
 };
 
-const useStyles = tss.withName({ Homepage }).create({
-  pageContainer: {
-    width: "100vw",
-  },
+const useStyles = tss.withName({ SurveyHomepage }).create({
   divider: {
     height: "auto",
     margin: `0 ${fr.spacing("3w")}`,
@@ -167,13 +149,14 @@ const { i18n } = declareComponentKeys<
   | "some results"
   | "respond to survey"
   | "respond to survey detail"
+  | "title"
   | {
       K: "estimatedResponseTime";
       P: {
         time: number | undefined;
       };
       R: JSX.Element;
     }
->()("Homepage");
+>()("SurveyHomepage");
 
 export type I18n = typeof i18n;

src/functions/fetchContent.ts

@@ -1,15 +1,14 @@
 export const fetchContent = async (currentPath: string) => {
-    try {
-        const url = `${import.meta.env.VITE_CONTENT_URL}/${currentPath}.json`;
-        const response = await fetch(url);
-
-        if (!response.ok) {
-            throw new Error('No content found');
-        }
-        return await response.json();
+  try {
+    const url = `${import.meta.env.VITE_CONTENT_URL}/${currentPath}.json`;
+    const response = await fetch(url);
 
-    } catch (error) {
-        console.error('There was a problem:', error);
-        throw error;
+    if (!response.ok) {
+      throw new Error("No content found");
     }
-}
+    return await response.json();
+  } catch (error) {
+    console.error("There was a problem:", error);
+    throw error;
+  }
+};

src/i18n/resources/en.tsx

@@ -22,7 +22,8 @@ export const translations: Translations<"en"> = {
     "personal data": "Personal data",
     "cookies": "Cookies management",
   },
-  Homepage: {
+  SurveyHomepage: {
+    "title": "Select your survey",
     "survey introduction": "Survey introduction",
     "homepage": "Homepage",
     "in this section": "In this section",

src/i18n/resources/fr.tsx

@@ -22,8 +22,9 @@ export const translations: Translations<"fr"> = {
     "personal data": "Données personnelles",
     "cookies": "Gestion des cookies",
   },
-  Homepage: {
-    "survey introduction": "Introduction de l'enquête",
+  SurveyHomepage: {
+    "title": "Sélectionnez votre enquête",
+    "survey introduction": "Introduction à l'enquête",
     "homepage": "Accueil",
     "in this section": "Dans cette rubrique",
     "legal framework": "Cadre juridique",

src/i18n/types.ts

@@ -12,7 +12,7 @@ export type Language = (typeof languages)[number];
 export type ComponentKey =
   | import("components/Header").I18n
   | import("components/Footer").I18n
-  | import("components/homepage/Homepage").I18n
+  | import("components/surveyHomepage/SurveyHomepage").I18n
   | import("components/myAccount/MyAccount").I18n
   | import("components/mySurveys/MySurveys").I18n
   | import("components/myAccount/PersonalInformationsForm").I18n