Throttle API calls

JumboCode · Apr 11, 2024 · 40b977f · 40b977f
1 parent 19eeb95
commit 40b977f
Show file tree

Hide file tree

Showing 12 changed files with 199 additions and 264 deletions.
diff --git a/src/app/private/chapter-leader/users/MembersHomePage.tsx b/src/app/private/chapter-leader/users/MembersHomePage.tsx
@@ -11,14 +11,15 @@ import { Dropdown } from "@components/selector";
 import { Popup } from "@components/container";
 import { useRouter } from "next/navigation";
 import { sortedStudents } from "@utils";
+import { useApiThrottle } from "@hooks";
 
 type MembersHomePageProps = {
   members: User[];
 };
 
 const EBOARD_POSITIONS = [
   "Social Coordinator",
-  "Senior Outreach Coordinator",
+  "Outreach Coordinator",
   "Head of Media",
   "Secretary",
   "Treasurer",
@@ -37,6 +38,14 @@ const MembersHomePage = ({ members }: MembersHomePageProps) => {
     setSelectedPosition([]);
   };
 
+  const { fn: throttleEditPosition } = useApiThrottle({
+    fn: editPosition,
+    callback: () => {
+      resetAssignment();
+      router.refresh();
+    },
+  });
+
   const displayMembers = (elem: User, index: number) => (
     <UserTile
       key={elem.id}
@@ -79,16 +88,12 @@ const MembersHomePage = ({ members }: MembersHomePageProps) => {
             display={(element) => <>{element.position}</>}
             selected={selectedPosition}
             setSelected={setSelectedPosition}
-            onSave={async () => {
-              await editPosition(
-                {
-                  body: { position: selectedPosition[0]?.position ?? "" },
-                },
+            onSave={async () =>
+              await throttleEditPosition(
+                { body: { position: selectedPosition[0]?.position ?? "" } },
                 uidToEdit
-              );
-              resetAssignment();
-              router.refresh();
-            }}
+              )
+            }
             multipleChoice={false}
           />
         </Popup>

diff --git a/src/components/ChapterRequest.tsx b/src/components/ChapterRequest.tsx
@@ -1,24 +1,11 @@
 "use client";
-import { useState } from "react";
-import { faEnvelope, faPhone } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { handleChapterRequest } from "src/app/api/handle-chapter-request/route.client";
 import { useRouter } from "next/navigation";
 import { ChapterRequest } from "@prisma/client";
 import { InfoTile } from "./TileGrid";
-
-type ButtonProps = {
-  chapterRequestId: string;
-  universityName: string;
-  universityAddress: string;
-  name: string;
-  email: string;
-  phoneNumber: string;
-  leadershipExperience: string;
-  motivation: string;
-  availabilities: string;
-  questions: string;
-};
+import { useApiThrottle } from "@hooks";
+import { Spinner } from "./skeleton";
 
 interface ChapterRequestMoreInformation {
   question: string;
@@ -44,6 +31,11 @@ const ChapterRequest = (props: ChapterRequestProps) => {
 
   const router = useRouter();
 
+  const { fetching, fn: throttleChapterRequest } = useApiThrottle({
+    fn: handleChapterRequest,
+    callback: () => router.refresh(),
+  });
+
   const qas: ChapterRequestMoreInformation[] = [
     {
       question:
@@ -92,165 +84,44 @@ const ChapterRequest = (props: ChapterRequestProps) => {
           {qas.map((question) => (
             <MoreInformation key={question.question} {...question} />
           ))}
-          <div className="mt-2 flex flex-row space-x-2">
-            <div
-              className="w-1/2 cursor-pointer rounded-xl bg-dark-teal py-1 text-center text-white hover:bg-[#1b4448]"
-              onClick={async () => {
-                handleChapterRequest({
-                  body: {
-                    chapterRequestId: request.id,
-                    approved: true,
-                  },
-                }).then((res) => {
-                  if (res.code === "SUCCESS") {
-                    router.refresh();
-                  } else {
-                    alert("Please refresh the page and try again");
-                  }
-                });
-              }}
-            >
-              Accept
+          {!fetching ? (
+            <div className="mt-2 flex flex-row space-x-2">
+              <div
+                className="w-1/2 cursor-pointer rounded-xl bg-dark-teal py-1 text-center text-white hover:bg-[#1b4448]"
+                onClick={() =>
+                  throttleChapterRequest({
+                    body: {
+                      chapterRequestId: request.id,
+                      approved: true,
+                    },
+                  })
+                }
+              >
+                Accept
+              </div>
+              <div
+                className="w-1/2 cursor-pointer rounded-xl bg-sunset-orange py-1 text-center text-white hover:bg-[#ED5858]"
+                onClick={async () =>
+                  throttleChapterRequest({
+                    body: {
+                      chapterRequestId: request.id,
+                      approved: false,
+                    },
+                  })
+                }
+              >
+                Decline
+              </div>
             </div>
-            <div
-              className="w-1/2 cursor-pointer rounded-xl bg-sunset-orange py-1 text-center text-white hover:bg-[#ED5858]"
-              onClick={async () => {
-                handleChapterRequest({
-                  body: {
-                    chapterRequestId: request.id,
-                    approved: false,
-                  },
-                }).then((res) => {
-                  if (res.code === "SUCCESS") {
-                    router.refresh();
-                  } else {
-                    alert("Please refresh the page and try again");
-                  }
-                });
-              }}
-            >
-              Decline
+          ) : (
+            <div className="flex justify-center p-2">
+              <Spinner height={16} width={16} />
             </div>
-          </div>
+          )}
         </div>
       }
     />
   );
-  // const router = useRouter();
-  // const [showMore, setShowMore] = useState(false);
-  // return (
-  //   <div className="grid h-min w-full rounded-lg bg-white p-6 text-xs">
-  //     <div className="mb-1 text-xl underline">
-  //       {universityName} <br />
-  //     </div>
-  //     <div className="flex ">
-  //       <div className="flex w-6/12 flex-col ">
-  //         <div className="mb-2.5">
-  //           Location: <span className="font-bold">{universityAddress} </span>
-  //         </div>
-  //         <div className="mb-2.5">
-  //           Requester:&nbsp;<span className="font-bold">{name} </span>
-  //         </div>
-  //       </div>
-  //       <div className="flex w-6/12 flex-col">
-  //         <div className="mb-2.5">
-  //           <FontAwesomeIcon icon={faEnvelope} className="mr-1" />
-  //           {email} <br />
-  //         </div>
-  //         <div className="mb-2.5">
-  //           <FontAwesomeIcon icon={faPhone} className="mr-1" />
-  //           {phoneNumber} <br />
-  //         </div>
-  //       </div>
-  //     </div>
-
-  //     {showMore ? (
-  //       <div>
-  //         <div
-  //           className="cursor-pointer text-dark-green underline"
-  //           onClick={() => setShowMore((b) => !b)}
-  //         >
-  //           Show less
-  //         </div>
-  //         <div>
-  //           <p className="mb-2 mt-2.5 font-bold">
-  //             Do you have any experience in student leadership / club
-  //             organizations / storytelling?
-  //           </p>
-  //           <p>{leadershipExperience}</p>
-  //         </div>
-  //         <div>
-  //           <p className="mb-2 mt-6 font-bold">
-  //             What motivates you to start this initiative in your community?
-  //           </p>
-  //           <p>{motivation}</p>
-  //         </div>
-  //         <div>
-  //           <p className="mb-2 mt-6 font-bold">
-  //             Please list three 1 hour time blocks with your availability in the
-  //             next week.
-  //           </p>
-  //           <p>{availabilities}</p>
-  //         </div>
-  //         <div>
-  //           <p className="mb-2 mt-6 font-bold">
-  //             What questions or comments do you have for us?
-  //           </p>
-  //           <p>{questions}</p>
-  //         </div>
-  //         <div className="mt-2.5 flex flex-row space-x-2 pt-2">
-  //           <div
-  //             className="w-1/2 cursor-pointer rounded-xl bg-dark-green py-1 text-center text-white hover:bg-[#1b4448]"
-  //             onClick={async () => {
-  //               handleChapterRequest({
-  //                 body: {
-  //                   chapterRequestId: chapterRequestId,
-  //                   approved: true,
-  //                 },
-  //               }).then((res) => {
-  //                 if (res.code === "SUCCESS") {
-  //                   router.refresh();
-  //                 } else {
-  //                   alert("Please refresh the page and try again");
-  //                 }
-  //               });
-  //             }}
-  //           >
-  //             Accept
-  //           </div>
-  //           <div
-  //             className="w-1/2 cursor-pointer rounded-xl bg-sunset-orange py-1 text-center text-white hover:bg-[#ED5858]"
-  //             onClick={async () => {
-  //               handleChapterRequest({
-  //                 body: {
-  //                   chapterRequestId: chapterRequestId,
-  //                   approved: false,
-  //                 },
-  //               }).then((res) => {
-  //                 if (res.code === "SUCCESS") {
-  //                   router.refresh();
-  //                 } else {
-  //                   alert("Please refresh the page and try again");
-  //                 }
-  //               });
-  //             }}
-  //           >
-  //             Decline
-  //           </div>
-  //         </div>
-  //       </div>
-  //     ) : (
-  //       <div>
-  //         <div
-  //           className="cursor-pointer text-dark-green underline"
-  //           onClick={() => setShowMore((b) => !b)}
-  //         >
-  //           Show more
-  //         </div>
-  //       </div>
-  //     )}
-  //   </div>
-  // );
 };
 
 export default ChapterRequest;
diff --git a/src/components/DisplayChapterInfo.tsx b/src/components/DisplayChapterInfo.tsx
@@ -14,6 +14,7 @@ import { Dropdown } from "./selector";
 import { editRole } from "@api/admin/edit-role/route.client";
 import { useRouter } from "next/navigation";
 import DropDownContainer from "@components/container/DropDownContainer";
+import { useApiThrottle } from "@hooks";
 
 type ChapterWithUser = Prisma.ChapterGetPayload<{
   include: { students: true };
@@ -52,19 +53,22 @@ const DisplayChapterInfo = ({
     React.useState(false);
   const [assignedPresidents, setAssignedPresidents] =
     React.useState(currentPresidents);
+  const { fn: throttleEditRole } = useApiThrottle({
+    fn: editRole,
+    callback: () => router.refresh(),
+  });
 
   const onSaveNewPresidents = async () => {
     const previousPresidents = currentPresidents.filter(
       (student) =>
         assignedPresidents.find((other) => student.id === other.id) == undefined
     );
-    await editRole({
+    await throttleEditRole({
       body: {
         chapterLeaders: assignedPresidents.map((student) => student.id),
         users: previousPresidents.map((student) => student.id),
       },
     });
-    router.refresh();
   };
 
   const resetAssignment = () => {

diff --git a/src/components/TileGrid/UserTile.tsx b/src/components/TileGrid/UserTile.tsx
@@ -54,39 +54,41 @@ export function UserTile({
           </div>
         </Link>
       </div>
-      <div className="relative flex items-start justify-between px-3 py-4">
-        <div className="overflow-hidden">
-          <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold before:invisible before:content-['\200B']">
-            {student
-              ? fullName(student)
-              : senior
-              ? seniorFullName(senior)
-              : null}
-          </p>
-          {student ? (
-            <p
-              className={
-                (student.position === "" && student.role !== "CHAPTER_LEADER"
-                  ? "bg-med-tan text-dark-teal "
-                  : "bg-[#AE583C] font-bold text-white  ") +
-                "mt-5 inline-block text-ellipsis whitespace-nowrap rounded-3xl px-3.5 py-1.5 text-center text-xs"
-              }
-            >
-              {student.role === "CHAPTER_LEADER"
-                ? "Chapter Leader"
-                : student.position === ""
-                ? "Member"
-                : student.position}
-            </p>
-          ) : null}
-          {/* @TODO: Add pronouns once we add to student field  */}
-          {senior ? (
-            <p className="text-md font-base text-neutral-600 mt-[5px] truncate text-[10px] text-dark-teal before:invisible before:content-['\200B']">
-              {senior.location}
+      <div className="flex w-full flex-col items-start justify-between gap-y-2 px-3 py-4">
+        <div className="flex w-full justify-between">
+          <div className="overflow-hidden">
+            <p className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold before:invisible before:content-['\200B']">
+              {student
+                ? fullName(student)
+                : senior
+                ? seniorFullName(senior)
+                : null}
             </p>
-          ) : null}
+          </div>
+          {dropdownComponent}
         </div>
-        {dropdownComponent}
+        {student ? (
+          <p
+            className={
+              (student.position === "" && student.role !== "CHAPTER_LEADER"
+                ? "bg-med-tan text-dark-teal "
+                : "bg-[#AE583C] font-bold text-white  ") +
+              "inline-block text-ellipsis whitespace-nowrap rounded-3xl px-3.5 py-1.5 text-center text-xs"
+            }
+          >
+            {student.role === "CHAPTER_LEADER"
+              ? "Chapter Leader"
+              : student.position === ""
+              ? "Member"
+              : student.position}
+          </p>
+        ) : null}
+        {/* @TODO: Add pronouns once we add to student field  */}
+        {senior ? (
+          <p className="text-md font-base text-neutral-600 truncate text-[10px] text-dark-teal before:invisible before:content-['\200B']">
+            {senior.location}
+          </p>
+        ) : null}
       </div>
     </div>
   );