feat(frontend): add pagination for mobile fellowship section

Author: alcercu

frontend/src/components/MobilePagination.tsx

@@ -0,0 +1,52 @@
+import clsx from "clsx";
+
+interface IMobilePagination {
+  currentPage: number;
+  numPages: number;
+  callback: (newPage: number) => void;
+  className?: string;
+}
+
+const Pagination: React.FC<IMobilePagination> = ({
+  currentPage,
+  numPages,
+  callback,
+  className,
+}) => {
+  return (
+    <div
+      className={clsx(
+        "flex w-full items-center justify-center gap-8",
+        className,
+      )}
+    >
+      <button
+        className={clsx(
+          "rounded-full bg-primary-blue px-2 text-lg font-bold",
+          "text-background-2 disabled:bg-stroke",
+        )}
+        disabled={currentPage === 1}
+        aria-label="Move to the previous page"
+        onClick={() => callback(currentPage - 1)}
+      >
+        {"<"}
+      </button>
+      <label className="w-12 text-center">
+        {currentPage}/{numPages}
+      </label>
+      <button
+        className={clsx(
+          "rounded-full bg-primary-blue px-2 text-lg font-bold",
+          "text-background-2 disabled:bg-stroke",
+        )}
+        disabled={currentPage === numPages}
+        aria-label="Move to the previous page"
+        onClick={() => callback(currentPage + 1)}
+      >
+        {">"}
+      </button>
+    </div>
+  );
+};
+
+export default Pagination;

frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx

@@ -35,10 +35,12 @@ const FellowCard: React.FC<Fellow> = ({
       <p className="mb-8 mt-6 text-lg text-primary-text lg:mb-12 lg:text-xl">
         {workText}
       </p>
-      <div className="mt-auto w-full">
-        <Divider />
-        <ExternalLink text={arrowLinkText} url={reportUrl} className="mt-6" />
-      </div>
+      {reportUrl ? (
+        <div className="mt-auto w-full">
+          <Divider />
+          <ExternalLink text={arrowLinkText} url={reportUrl} className="mt-6" />
+        </div>
+      ) : null}
     </div>
   );
 };

frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/index.tsx

@@ -1,6 +1,7 @@
 "use client";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 
+import MobilePagination from "@/components/MobilePagination";
 import Pagination from "@/components/Pagination";
 import { useScreenSize } from "@/hooks/useScreenSize";
 import { Fellow } from "@/queries/research-development/tabs-data";
@@ -26,19 +27,41 @@ const Fellows: React.FC<{ fellows: Fellow[] }> = ({ fellows }) => {
     [itemsPerPage, fellows, page],
   );
 
+  const numPages = useMemo(
+    () => Math.ceil(fellows.length / itemsPerPage),
+    [fellows, itemsPerPage],
+  );
+
+  useEffect(() => {
+    if (itemsPerPage === 1) {
+      setPage(page * 2 - 1);
+    } else {
+      setPage(Math.min(Math.floor(page / 2) + 1, numPages));
+    }
+  }, [itemsPerPage]);
+
   return (
     <div>
       <div className="mb-12 grid grid-cols-1 gap-4 lg:grid-cols-2">
         {items.map((fellow) => (
           <FellowCard key={fellow.name} {...fellow} />
         ))}
       </div>
-      <Pagination
-        currentPage={page}
-        numPages={Math.ceil(fellows.length / itemsPerPage)}
-        callback={(val) => setPage(val)}
-        className="w-full justify-center"
-      />
+      {screenSize === "lg" ? (
+        <Pagination
+          currentPage={page}
+          numPages={numPages}
+          callback={(val) => setPage(val)}
+          className="w-full justify-center"
+        />
+      ) : (
+        <MobilePagination
+          currentPage={page}
+          numPages={numPages}
+          callback={(val) => setPage(val)}
+          className="w-full justify-center"
+        />
+      )}
     </div>
   );
 };

frontend/src/queries/research-development/tabs-data.ts

@@ -92,7 +92,7 @@ export const tabSectionQuery = gql`
       }
     }
 
-    fellows {
+    fellows(sort: "createdAt:desc") {
       name
       profession
       workText