Merge pull request #17 from betagouv/refacto--update-next-volontariat

Refacto: update next volontariat

widget-volontariat/package.json

@@ -14,20 +14,19 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
-    "@sentry/nextjs": "^8.37.1",
-    "i18n-iso-countries": "^7.7.0",
-    "next": "^13.5.6",
-    "pm2": "^5.3.0",
-    "react": "^18.2.0",
-    "react-day-picker": "^8.8.2",
-    "react-icons": "^4.11.0",
-    "react-slick": "^0.29.0",
-    "sharp": "^0.32.6",
+    "@sentry/nextjs": "^8.39.0",
+    "i18n-iso-countries": "^7.13.0",
+    "next": "^14.2.18",
+    "pm2": "^5.4.3",
+    "react": "^18.3.1",
+    "react-day-picker": "^9.3.2",
+    "react-icons": "^5.3.0",
+    "sharp": "^0.33.5",
     "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5"
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15"
   }
 }

widget-volontariat/pages/_app.js

@@ -1,7 +1,40 @@
+import localFont from "next/font/local";
+
 import "./global.css";
 
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}
+const font = localFont({
+  src: [
+    {
+      path: "../fonts/Marianne-Bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "../fonts/Marianne-Regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "../fonts/Marianne-Medium.woff2",
+      weight: "500",
+      style: "normal",
+    },
+  ],
+});
+
+const icomoon = localFont({
+  src: "../fonts/icomoon.woff",
+  weight: "normal",
+  style: "normal",
+  variable: "--font-icomoon",
+});
+
+const MyApp = ({ Component, pageProps }) => {
+  return (
+    <main className={`${font.className} ${icomoon.variable}`}>
+      <Component {...pageProps} />
+    </main>
+  );
+};
 
 export default MyApp;

widget-volontariat/pages/global.css

@@ -2,86 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-display: swap;
-  font-family: "Marianne";
-  src: url("/font/Marianne-ExtraBold.woff2") format("woff2");
-  font-weight: 800;
-  font-style: normal;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Marianne";
-  src: url("/font/Marianne-ExtraBold_Italic.woff2") format("woff2");
-  font-weight: 800;
-  font-style: italic;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Marianne";
-  src: url("/font/Marianne-Bold.woff2") format("woff2");
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Marianne";
-  src: url("/font/Marianne-Bold_Italic.woff2") format("woff2");
-  font-weight: 700;
-  font-style: italic;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Marianne";
-  src: url("/font/Marianne-Medium.woff2") format("woff2");
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Marianne";
-  src: url("/font/Marianne-Medium_Italic.woff2") format("woff2");
-  font-weight: 500;
-  font-style: italic;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Marianne";
-  src: url("/font/Marianne-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Marianne";
-  src: url("/font/Marianne-Regular_Italic.woff2") format("woff2");
-  font-weight: 400;
-  font-style: italic;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Marianne";
-  src: url("/font/Marianne-Light.woff2") format("woff2");
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Marianne";
-  src: url("/font/Marianne-Light_Italic.woff2") format("woff2");
-  font-weight: 300;
-  font-style: italic;
-}
-
 body {
   background-color: transparent;
   height: 100%;
@@ -91,17 +11,8 @@ body {
   height: 100%;
 }
 
-@font-face {
-  font-family: "icomoon";
-  src: url("/font/icomoon.eot");
-  src: url("/font/icomoon.eot?#iefix") format("embedded-opentype"), url("/font/icomoon.woff") format("woff"), url("/font/icomoon.ttf") format("truetype"),
-    url("/font/icomoon.svg#icomoon") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
 [data-icon]:before {
-  font-family: "icomoon";
+  font-family: var(--font-icomoon);
   content: attr(data-icon);
   font-weight: normal;
   font-variant: normal;

widget-volontariat/pages/index.js

@@ -66,25 +66,30 @@ const Home = ({ widget, missions, options, total, request, environment }) => {
 
   useEffect(() => {
     if (!widget) return;
-    const query = { widget: widget._id };
-
-    if (filters.schedule && filters.schedule.length) query.schedule = JSON.stringify(filters.schedule.filter((item) => item && item.value).map((item) => item.value));
-    if (filters.minor && filters.minor.length) query.minor = JSON.stringify(filters.minor.filter((item) => item && item.value).map((item) => item.value));
-    if (filters.accessibility && filters.accessibility.length)
-      query.accessibility = JSON.stringify(filters.accessibility.filter((item) => item && item.value).map((item) => item.value));
-    if (filters.domain && filters.domain.length) query.domain = JSON.stringify(filters.domain.filter((item) => item && item.value).map((item) => item.value));
-    if (filters.action && filters.action.length) query.action = JSON.stringify(filters.action.filter((item) => item && item.value).map((item) => item.value));
-    if (filters.beneficiary && filters.beneficiary.length) query.beneficiary = JSON.stringify(filters.beneficiary.filter((item) => item && item.value).map((item) => item.value));
-    if (filters.country && filters.country.length) query.country = JSON.stringify(filters.country.filter((item) => item && item.value).map((item) => item.value));
-    if (filters.start) query.start = filters.start.value.toISOString();
-    if (filters.duration) query.duration = filters.duration.value;
-    if (filters.size) query.size = filters.size;
-    if (filters.page > 1) query.from = (filters.page - 1) * filters.size;
-    if (filters.location && filters.location.lat && filters.location.lon) {
-      query.lat = filters.location.lat;
-      query.lon = filters.location.lon;
-    }
-    router.push({ pathname: "/", query });
+
+    // Timeout to prevent multiple rapid router pushes
+    const timeoutId = setTimeout(() => {
+      const query = { widget: widget._id };
+
+      if (filters.schedule && filters.schedule.length) query.schedule = JSON.stringify(filters.schedule.filter((item) => item && item.value).map((item) => item.value));
+      if (filters.minor && filters.minor.length) query.minor = JSON.stringify(filters.minor.filter((item) => item && item.value).map((item) => item.value));
+      if (filters.accessibility && filters.accessibility.length)
+        query.accessibility = JSON.stringify(filters.accessibility.filter((item) => item && item.value).map((item) => item.value));
+      if (filters.domain && filters.domain.length) query.domain = JSON.stringify(filters.domain.filter((item) => item && item.value).map((item) => item.value));
+      if (filters.action && filters.action.length) query.action = JSON.stringify(filters.action.filter((item) => item && item.value).map((item) => item.value));
+      if (filters.beneficiary && filters.beneficiary.length) query.beneficiary = JSON.stringify(filters.beneficiary.filter((item) => item && item.value).map((item) => item.value));
+      if (filters.country && filters.country.length) query.country = JSON.stringify(filters.country.filter((item) => item && item.value).map((item) => item.value));
+      if (filters.start) query.start = filters.start.value.toISOString();
+      if (filters.duration) query.duration = filters.duration.value;
+      if (filters.size) query.size = filters.size;
+      if (filters.page > 1) query.from = (filters.page - 1) * filters.size;
+      if (filters.location && filters.location.lat && filters.location.lon) {
+        query.lat = filters.location.lat;
+        query.lon = filters.location.lon;
+      }
+      router.push({ pathname: "/", query });
+    }, 100);
+    return () => clearTimeout(timeoutId);
   }, [filters]);
 
   const fetchLocation = async (lat, lon) => {