Web-BDE · RedbeanGit · Mar 24, 2022 · Mar 24, 2022 · Mar 24, 2022
diff --git a/app/routes/challenges/index.tsx b/app/routes/challenges/index.tsx
@@ -1,11 +1,13 @@
-import { CircularProgress, Container, Typography } from "@mui/material";
+import { CircularProgress, Container, Pagination as PaginationMui, Typography } from "@mui/material";
 
 import {
+  ActionFunction,
   json,
   LoaderFunction,
   useCatch,
   useLoaderData,
   useOutletContext,
+  useSubmit,
   useTransition,
 } from "remix";
 
@@ -19,22 +21,60 @@ import { Challenge } from "~/models/Challenge";
 
 import { requireAuth } from "~/services/authentication";
 import ChallengeGrid from "~/components/challenge/grids/challengeGrid";
-import { getManyChallenge } from "~/services/challenges";
+import { getChallengeCount, getManyChallenge } from "~/services/challenges";
 import { ContextData } from "~/root";
 import { blue } from "@mui/material/colors";
+import { Pagination } from "~/utils/pagination";
 
 type LoaderData = {
   challengeResponse?: {
+    data?: Pagination<Challenge>;
     error?: string;
     success?: string;
-    challenges?: Challenge[];
   };
 };
 
-async function loadChallenges(token: string) {
-  const { code, ...challengeResponse } = await getManyChallenge(token, 100, 0);
+const rowPerPage = 100;
 
-  return json({ challengeResponse } as LoaderData, code);
+async function loadChallenges(token: string, page: number = 0) {
+  const challengeResponse = await getManyChallenge(token, rowPerPage, page * rowPerPage);
+  const countResponse = await getChallengeCount(token);
+
+  if (challengeResponse.error) {
+    return json(
+      { challengeResponse: { error: challengeResponse.error } } as LoaderData,
+      challengeResponse.code
+    );
+  }
+
+  if (countResponse.error) {
+    return json(
+      { challengeResponse: { error: countResponse.error } } as LoaderData,
+      countResponse.code
+    );
+  }
+
+  return json({
+    challengeResponse: {
+      pagination: {
+        page: page,
+        count: countResponse.count,
+        items: challengeResponse.challenges
+      }
+    }
+  } as LoaderData, Math.max(challengeResponse.code || 200, countResponse.code || 200));
+}
+
+export const action: ActionFunction = async ({ request }) => {
+  const token = await requireAuth(request, "/challenges");
+  const formData = await request.formData();
+  const page = Number(formData.get("page"));
+
+  if (isNaN(page)) {
+    return json({ challengeResponse: { error: "Bad form data: page must be a number" } }, 400)
+  }
+
+  return await loadChallenges(token, page);
 }
 
 export const loader: LoaderFunction = async ({ request }) => {
@@ -46,10 +86,16 @@ export const loader: LoaderFunction = async ({ request }) => {
 
 export default function Challenges() {
   const loaderData = useLoaderData<LoaderData>();
-
   const { API_URL } = useOutletContext<ContextData>();
-
   const transition = useTransition();
+  const submit = useSubmit();
+
+  const handleChangePage = async (event: React.ChangeEvent<unknown>, value: number) => {
+    const formData = new FormData();
+    //Page starts from 1 instead of 0 for MUI Pagination component
+    formData.append("page", (value - 1).toString());
+    submit(formData);
+  };
 
   return (
     <Container component="main" style={{ marginTop: "50px" }}>
@@ -60,16 +106,16 @@ export default function Challenges() {
       {generateAlert(
         "info",
         loaderData.challengeResponse?.success &&
-          (!loaderData.challengeResponse?.challenges ||
-            loaderData.challengeResponse.challenges.length === 0)
+          (!loaderData.challengeResponse?.data?.items ||
+            loaderData.challengeResponse?.data?.items.length === 0)
           ? "Il n'y a aucun challenge pour l'instant"
           : undefined
       )}
-      {loaderData.challengeResponse?.challenges &&
-        loaderData.challengeResponse?.challenges.length !== 0 && (
+      {loaderData.challengeResponse?.data?.items &&
+        loaderData.challengeResponse?.data?.items.length !== 0 && (
           <ChallengeGrid
             API_URL={API_URL}
-            challenges={loaderData.challengeResponse?.challenges}
+            challenges={loaderData.challengeResponse?.data?.items}
           />
         )}
       {transition.state === "submitting" && (
@@ -84,6 +130,11 @@ export default function Challenges() {
           }}
         />
       )}
+      <PaginationMui
+        count={Math.ceil((loaderData.challengeResponse?.data?.count || 0) / rowPerPage)}
+        page={(loaderData.challengeResponse?.data?.page || 0) + 1}
+        onChange={handleChangePage}
+      />
     </Container>
   );
 }

diff --git a/app/routes/goodies/index.tsx b/app/routes/goodies/index.tsx
@@ -1,11 +1,13 @@
-import { CircularProgress, Container, Typography } from "@mui/material";
+import { CircularProgress, Container, Pagination as PaginationMui, Typography } from "@mui/material";
 
 import {
+  ActionFunction,
   json,
   LoaderFunction,
   useCatch,
   useLoaderData,
   useOutletContext,
+  useSubmit,
   useTransition,
 } from "remix";
 
@@ -16,23 +18,65 @@ import {
 } from "~/utils/error";
 
 import { requireAuth } from "~/services/authentication";
-import { getManyGoodies } from "~/services/goodies";
+import { getGoodiesCount, getManyGoodies } from "~/services/goodies";
 import GoodiesGrid from "~/components/goodies/grids/goodiesGrid";
 import { Goodies } from "~/models/Goodies";
 import { ContextData } from "~/root";
 import { blue } from "@mui/material/colors";
+import { Pagination } from "~/utils/pagination";
 
 type LoaderData = {
-  goodiesResponse?: { error?: string; goodies?: Goodies[]; success?: string };
+  goodiesResponse?: {
+    error?: string;
+    data?: Pagination<Goodies>;
+    success?: string
+  };
 };
 
-async function loadGoodies(token: string) {
-  const { code, ...goodiesResponse } = await getManyGoodies(token, 100, 0);
+const rowPerPage = 100;
 
-  return json({ goodiesResponse } as LoaderData, code);
+async function loadGoodies(token: string, page: number = 0) {
+  const goodiesResponse = await getManyGoodies(token, rowPerPage, page * rowPerPage);
+  const countResponse = await getGoodiesCount(token);
+
+  if (goodiesResponse.error) {
+    return json(
+      { goodiesResponse: { error: goodiesResponse.error } } as LoaderData,
+      goodiesResponse.code
+    );
+  }
+
+  if (countResponse.error) {
+    return json(
+      { goodiesResponse: { error: countResponse.error } } as LoaderData,
+      countResponse.code
+    );
+  }
+
+  return json({
+    goodiesResponse: {
+      pagination: {
+        page: page,
+        count: countResponse.count,
+        items: goodiesResponse.goodies,
+      }
+    }
+  } as LoaderData, Math.max(goodiesResponse.code || 200, countResponse.code || 200));
+}
+
+export const action: ActionFunction = async ({ request }) => {
+  const token = await requireAuth(request, "/goodies");
+  const formData = await request.formData();
+  const page = Number(formData.get("page"));
+
+  if (isNaN(page)) {
+    return json({ challengeResponse: { error: "Bad form data: page must be a number" } }, 400)
+  }
+
+  return await loadGoodies(token, page);
 }
 
-//Function that handle GET resuests
+//Function that handle GET requests
 export const loader: LoaderFunction = async ({ request }) => {
   const token = await requireAuth(request, "/goodies");
 
@@ -41,10 +85,17 @@ export const loader: LoaderFunction = async ({ request }) => {
 
 export default function Shop() {
   const loaderData = useLoaderData<LoaderData>();
-
   const { API_URL } = useOutletContext<ContextData>();
-
   const transition = useTransition();
+  const submit = useSubmit();
+
+  const handleChangePage = async (event: React.ChangeEvent<unknown>, value: number) => {
+    const formData = new FormData();
+    //Page starts from 1 instead of 0 for MUI Pagination component
+    formData.append("page", (value - 1).toString());
+    submit(formData);
+  };
+
   return (
     <Container component="main" style={{ marginTop: "50px" }}>
       <Typography style={{ textAlign: "center" }} variant="h2">
@@ -54,16 +105,16 @@ export default function Shop() {
       {generateAlert(
         "info",
         loaderData.goodiesResponse?.success &&
-          (!loaderData.goodiesResponse?.goodies ||
-            loaderData.goodiesResponse.goodies.length === 0)
+          (!loaderData.goodiesResponse?.data?.items ||
+            loaderData.goodiesResponse?.data?.items.length === 0)
           ? "Il n'y a pas de goodies pour l'instant"
           : undefined
       )}
-      {loaderData.goodiesResponse?.goodies &&
-        loaderData.goodiesResponse.goodies.length !== 0 && (
+      {loaderData.goodiesResponse?.data?.items &&
+        loaderData.goodiesResponse?.data?.items.length !== 0 && (
           <GoodiesGrid
             API_URL={API_URL}
-            goodies={loaderData.goodiesResponse.goodies}
+            goodies={loaderData.goodiesResponse?.data?.items}
           />
         )}
       {transition.state === "submitting" && (
@@ -78,6 +129,11 @@ export default function Shop() {
           }}
         />
       )}
+      <PaginationMui
+        count={Math.ceil((loaderData.goodiesResponse?.data?.count || 0) / rowPerPage)}
+        page={(loaderData.goodiesResponse?.data?.page || 0) + 1}
+        onChange={handleChangePage}
+      />
     </Container>
   );
 }

diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -32,7 +32,9 @@ export default function Index() {
             { name: "L'encas", imgSrc: "/assets/images/partnerships/l_encas.png" },
             { name: "Tropic Addict", imgSrc: "/assets/images/partnerships/tropic_addict.png" },
             { name: "Le 5 by La Cabane", imgSrc: "/assets/images/partnerships/le_5_by_la_cabane.png" },
-            { name: "Laser Quest Comedie", imgSrc: "/assets/images/partnerships/laser_quest_comedie.jpeg" }
+            { name: "Laser Quest Comedie", imgSrc: "/assets/images/partnerships/laser_quest_comedie.jpeg" },
+            { name: "Cartapapa", imgSrc: "/assets/images/partnerships/cartapapa.jpeg" },
+            { name: "Run'Up", imgSrc: "/assets/images/partnerships/run_up.png" },
           ]}
         />
       </TitledSection>

diff --git a/app/routes/soutiens/index.tsx b/app/routes/soutiens/index.tsx
@@ -44,7 +44,7 @@ export default function Soutiens() {
                   width="560"
                   style={{ border: "none", overflow: "hidden" }}
                   scrolling="no"
-                  allowFullScreen="true"
+                  allowFullScreen={true}
                   allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
                 ></iframe>
               </CardContent>