fix: pagination repeating

Author: tomaspalma

src/api/services/exchangeRequestService.ts

@@ -46,7 +46,7 @@ const submitExchangeRequest = async (requests: Map<number, CreateRequestData>, u
 const retrieveMarketplaceRequest = async (url: string): Promise<MarketplaceRequest[]> => {
   return fetch(url).then(async (res) => {
     const json = await res.json();
-    return json.data;
+    return json;
   }).catch((e) => {
     console.error(e);
     return [];

src/components/exchange/requests/issue/CustomizeRequest.tsx

@@ -33,6 +33,7 @@ export const CustomizeRequest = ({
   const [submittingRequest, setSubmittingRequest] = useState<boolean>(false);
   const [previewingForm, setPreviewingForm] = useState<boolean>(false);
 
+
   const submitRequest = async (urgentMessage: string) => {
     setSubmittingRequest(true);
     const res = await exchangeRequestService.submitExchangeRequest(requests, urgentMessage);

src/components/exchange/requests/view/ViewRequests.tsx

@@ -1,5 +1,5 @@
 import { PlusIcon } from "@heroicons/react/24/outline";
-import { Dispatch, SetStateAction, useContext, useEffect, useRef, useState } from "react";
+import { Dispatch, SetStateAction, useContext, useRef, useState } from "react";
 import { DirectExchangeRequest, MarketplaceRequest } from "../../../../@types";
 import ScheduleContext from "../../../../contexts/ScheduleContext";
 import useMarketplaceRequests from "../../../../hooks/useMarketplaceRequests";
@@ -13,6 +13,7 @@ import { ReceivedRequestCard } from "./cards/ReceivedRequestCard";
 import { RequestCard } from "./cards/RequestCard";
 import { ViewRequestsFilters } from "./ViewRequestsFilters";
 import { ExchangeSidebarStatus } from "../../../../pages/Exchange";
+import { MoonLoader } from "react-spinners";
 
 type Props = {
     setExchangeSidebarStatus: Dispatch<SetStateAction<ExchangeSidebarStatus>>
@@ -53,6 +54,34 @@ const RequestCardSkeletons = () => {
     </>
 }
 
+const ViewMoreButton = ({
+    hasNext,
+    setSize,
+    size,
+    isValidating
+}: {
+    hasNext: boolean
+    setSize: Dispatch<SetStateAction<number>>
+    size: number
+    isValidating: boolean
+}) => {
+    return <>
+        {hasNext &&
+            <Button
+                variant="secondary"
+                onClick={() => {
+                    setSize(size + 1)
+                }}
+            >
+                {isValidating 
+                    ? <MoonLoader size={20} />
+                    : "Ver mais"
+                }
+            </Button>
+        }
+    </>
+}
+
 export const ViewRequests = ({
     setExchangeSidebarStatus
 }: Props) => {
@@ -66,31 +95,10 @@ export const ViewRequests = ({
     // This is to keep track of the request of the request card that is currently open
     const [chosenRequest, setChosenRequest] = useState<MarketplaceRequest | null>(null);
 
-    const { data, size, setSize, isLoading } = useMarketplaceRequests(
+    const { requests, size, setSize, isLoading, hasNext, isValidating } = useMarketplaceRequests(
         filterCourseUnitNames, requestTypeFilters[currentRequestTypeFilter], classesFilter
     );
 
-    const requests = data ? [].concat(...data) : [];
-
-    const onScroll = () => {
-        if (!requestCardsContainerRef.current) return;
-
-        if ((requestCardsContainerRef.current.scrollHeight - requestCardsContainerRef.current.scrollTop)
-            <= requestCardsContainerRef.current.clientHeight + 100
-        ) {
-            setSize(size + 1);
-        }
-    }
-
-    useEffect(() => {
-        if (!requestCardsContainerRef.current) return;
-
-        requestCardsContainerRef.current.addEventListener('scroll', onScroll);
-        return () => {
-            if (requestCardsContainerRef.current) requestCardsContainerRef.current.removeEventListener('scroll', onScroll);
-        }
-    }, []);
-
     return <div className="relative flex flex-row flex-wrap items-center justify-center gap-x-2 gap-y-2 lg:justify-start">
         <div className="flex flex-row justify-between items-center w-full">
             <h1 className="font-bold text-xl">Pedidos</h1>
@@ -138,6 +146,12 @@ export const ViewRequests = ({
                                                 <RequestCard />
                                             </CommonRequestCard>
                                         ))}
+                                        <ViewMoreButton
+                                            hasNext={hasNext}
+                                            setSize={setSize}
+                                            size={size}
+                                            isValidating={isValidating}
+                                        />
                                     </EmptyRequestGuard>
                                 }
                             </>
@@ -170,6 +184,12 @@ export const ViewRequests = ({
                                 </CommonRequestCard>
 
                             ))}
+                            <ViewMoreButton
+                                hasNext={hasNext}
+                                setSize={setSize}
+                                size={size}
+                                isValidating={isValidating}
+                            />
                         </EmptyRequestGuard>
                     }
                 </div>
@@ -198,6 +218,12 @@ export const ViewRequests = ({
                                     />
                                 </CommonRequestCard>
                             ))}
+                            <ViewMoreButton
+                                hasNext={hasNext}
+                                setSize={setSize}
+                                size={size}
+                                isValidating={isValidating}
+                            />
                         </EmptyRequestGuard>
                     }
                 </div>

src/components/exchange/requests/view/cards/CommonCardHeader.tsx

@@ -106,7 +106,7 @@ export const CommonCardHeader = ({
                             <div className="flex flex-row gap-x-1 gap-y-2 flex-wrap">
                                 {request.options?.map((option) => {
                                     return (<RequestCardClassBadge
-                                        key={option.course_info.acronym}
+                                        key={option.course_info.acronym + `${crypto.randomUUID()}`}
                                         option={option}
                                         requestCardHovered={hovered}
                                         classUserGoesToName={option[classUserGoesToName].name}

src/components/exchange/requests/view/cards/RequestCard.tsx

@@ -96,7 +96,7 @@ export const RequestCard = () => {
         <CardContent className={`p-0 px-4 ${open ? "" : "hidden"}`}>
           {request.options?.map((option) => (
             <ListRequestChanges
-              key={"marketplace-request-card" + option.course_info.id}
+              key={crypto.randomUUID()}
               option={option}
               selectedOptionsHook={[selectedOptions, setSelectedOptions]}
               setSelectAll={setSelectAll}

src/hooks/useMarketplaceRequests.tsx

@@ -2,6 +2,7 @@ import useSWRInfinite from "swr/infinite";
 import { MarketplaceRequest } from "../@types";
 import api from "../api/backend";
 import exchangeRequestService from "../api/services/exchangeRequestService";
+import { useEffect, useState } from "react";
 
 const getUrl = (requestType: string) => {
   switch (requestType) {
@@ -22,6 +23,8 @@ const getUrl = (requestType: string) => {
  * 
 */
 export default (courseUnitNameFilter: Set<number>, requestType: string, classesFilter: Map<string, Set<string>>) => {
+  const [hasNext, setHasNext] = useState<boolean>(true);
+
   const classesFilterArray = Array.from(classesFilter, ([key, value]) => [key, Array.from(value)]);
   const classesFilterBase64 = btoa(JSON.stringify(classesFilterArray));
   const filters = `courseUnitNameFilter=${Array.from(courseUnitNameFilter).join(",")}&classesFilter=${classesFilterBase64}`;
@@ -37,8 +40,18 @@ export default (courseUnitNameFilter: Set<number>, requestType: string, classesF
     exchangeRequestService.retrieveMarketplaceRequest
   );
 
+
+  const requests = data ? [].concat(...data.map((el) => el["data"])) : [];
+
+  useEffect(() => {
+    if(data) {
+      setHasNext(data[data.length - 1]["page"]["has_next"]);
+    }
+  }, [data])
+
   return {
-    data,
+    requests,
+    hasNext,
     isLoading,
     size,
     isValidating,