feat: initial version of using useswrinfinite to fetch exchanges pagi…

…nated

src/@types/index.d.ts

@@ -97,10 +97,11 @@ export type ImportedCourses = {
 /* Exchange data types */
 
 export type ExchangeOption = {
-  acronym: string,
-  name: string,
-  classNameRequesterGoesFrom: string
-  classNameRequesterGoesTo: string,
+  course_unit_acronym: string,
+  course_unit_name: string,
+  course_unit_id: number,
+  class_issuer_goes_from: string
+  class_issuer_goes_to: string,
   other_student?: number // The current student will be determined by the backend depending on session data
 }
 
@@ -119,8 +120,10 @@ export type CreateRequestData = {
 
 export type MarketplaceRequest = {
   id: number,
-  student: Student,
-  options: Array<MarketplaceExchangeOption>
+  issuer_name: string,
+  issuer_nmec: number,
+  date: string,
+  options?: Array<ExchangeOption>
 }
 
 export type Student = {

src/api/services/exchangeRequestService.ts

@@ -1,4 +1,6 @@
-import { CreateRequestData } from "../../@types";
+import { BareFetcher } from "swr";
+import { SWRInfiniteConfiguration } from "swr/dist/infinite";
+import { CreateRequestData, MarketplaceRequest } from "../../@types";
 import api from "../backend";
 
 const isDirectExchange = (requests: IterableIterator<CreateRequestData>) => {
@@ -17,7 +19,7 @@ const submitExchangeRequest = async (requests: Map<string, CreateRequestData>) =
   }
 
   await fetch(
-    `${api.BACKEND_URL}/${isDirectExchange(requests.values()) ? "direct_exchange/" : "marketplace_exchange/"}`,
+    `${api.BACKEND_URL}/exchange/${isDirectExchange(requests.values()) ? "direct/" : "marketplace/"}`,
     {
       method: "POST",
       credentials: "include",
@@ -26,8 +28,19 @@ const submitExchangeRequest = async (requests: Map<string, CreateRequestData>) =
   );
 }
 
+const retrieveMarketplaceRequest = async (url: string): Promise<MarketplaceRequest[]> => {
+  return fetch(url).then(async (res) => {
+    const json = await res.json();
+    return json.data;
+  }).catch((e) => {
+    console.error(e);
+    return [];
+  })
+}
+
 const exchangeRequestService = {
-  submitExchangeRequest
+  submitExchangeRequest,
+  retrieveMarketplaceRequest
 }
 
 export default exchangeRequestService;

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

@@ -1,8 +1,7 @@
 import { Dispatch, SetStateAction, useState } from "react"
-import { CourseInfo, CreateRequestCardMetadata, CreateRequestData, ExchangeOption } from "../../../../@types"
+import { CourseInfo, CreateRequestCardMetadata, CreateRequestData } from "../../../../@types"
 import exchangeRequestService from "../../../../api/services/exchangeRequestService"
 import { Button } from "../../../ui/button"
-import { Separator } from "../../../ui/separator"
 import { CreateRequestCard } from "./cards/CreateRequestCard"
 
 type Props = {

src/components/exchange/requests/issue/cards/CreateRequestCard.tsx

@@ -1,10 +1,9 @@
 import { ArrowLeftIcon, ArrowRightIcon, MinusIcon } from "@heroicons/react/24/outline"
 import { Dispatch, SetStateAction, useState } from "react"
-import { CreateRequestCardMetadata, CreateRequestData, ExchangeOption } from "../../../../../@types"
+import { CreateRequestCardMetadata, CreateRequestData } from "../../../../../@types"
 import { Button } from "../../../../ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "../../../../ui/card"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../../ui/dropdown-menu"
-import { Select, SelectItem, SelectTrigger, SelectValue } from "../../../../ui/select"
 import { Switch } from "../../../../ui/switch"
 
 type Props = {

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

@@ -1,6 +1,7 @@
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { Dispatch, SetStateAction, useState } from "react";
 import { MarketplaceRequest } from "../../../../@types";
+import useMarketplaceRequests from "../../../../hooks/useMarketplaceRequests";
 import { Badge } from "../../../ui/badge";
 import { Button } from "../../../ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../ui/tabs";
@@ -17,38 +18,44 @@ export const ViewRequests = ({
   const [hiddenRequests, setHiddenRequests] = useState<Set<number>>(new Set());
   const [filterCourseUnitNames, setFilterCourseUnitNames] = useState<Set<string>>(new Set());
 
-  const requests: Array<MarketplaceRequest> = [
-    {
-      id: 1,
-      options: [
-        {
-          acronym: "IA",
-          name: "Inteligência Artifical",
-          classNameRequesterGoesFrom: "3LEIC09",
-          classNameRequesterGoesTo: "3LEIC05"
-        },
-        {
-          acronym: "CG",
-          name: "Computação Gráfica",
-          classNameRequesterGoesFrom: "3LEIC09",
-          classNameRequesterGoesTo: "3LEIC05"
-        }
-      ],
-      student: { name: "Tozé Manuel", mecNumber: "202108880" }
-    },
-    {
-      id: 2,
-      options: [
-        {
-          acronym: "CPD",
-          name: "Computação Paralela e Distribuída",
-          classNameRequesterGoesFrom: "3LEIC09",
-          classNameRequesterGoesTo: "3LEIC05"
-        },
-      ],
-      student: { name: "Armindo Santos", mecNumber: "202108881" }
-    }
-  ]
+  const { data, setSize, isLoading } = useMarketplaceRequests();
+  const requests = data ? [].concat(...data) : [];
+
+  console.log("current requests are: ", requests);
+  console.log("current wanabee requests are: ", data);
+
+  // const requests: Array<MarketplaceRequest> = [
+  //   {
+  //     id: 1,
+  //     options: [
+  //       {
+  //         acronym: "IA",
+  //         name: "Inteligência Artifical",
+  //         classNameRequesterGoesFrom: "3LEIC09",
+  //         classNameRequesterGoesTo: "3LEIC05"
+  //       },
+  //       {
+  //         acronym: "CG",
+  //         name: "Computação Gráfica",
+  //         classNameRequesterGoesFrom: "3LEIC09",
+  //         classNameRequesterGoesTo: "3LEIC05"
+  //       }
+  //     ],
+  //     student: { name: "Tozé Manuel", mecNumber: "202108880" }
+  //   },
+  //   {
+  //     id: 2,
+  //     options: [
+  //       {
+  //         acronym: "CPD",
+  //         name: "Computação Paralela e Distribuída",
+  //         classNameRequesterGoesFrom: "3LEIC09",
+  //         classNameRequesterGoesTo: "3LEIC05"
+  //       },
+  //     ],
+  //     student: { name: "Armindo Santos", mecNumber: "202108881" }
+  //   }
+  // ]
 
   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">
@@ -74,18 +81,22 @@ export const ViewRequests = ({
           availableClasses={["3LEIC01", "3LEIC02", "3LEIC03"]}
           filterCourseUnitsHook={[filterCourseUnitNames, setFilterCourseUnitNames]}
         />
-        <div className="mt-4 flex flex-col gap-y-2">
-          {
-            requests.map((request) => (
-              <RequestCard
-                key={request.id}
-                request={request}
-                hiddenRequests={hiddenRequests}
-                setHiddenRequests={setHiddenRequests}
-              />
-            ))
-          }
-        </div>
+        {
+          isLoading
+            ? <></>
+            : <div className="mt-4 flex flex-col gap-y-2">
+              {
+                requests?.filter((request) => request !== undefined).map((request: MarketplaceRequest) => (
+                  <RequestCard
+                    key={request.id}
+                    request={request}
+                    hiddenRequests={hiddenRequests}
+                    setHiddenRequests={setHiddenRequests}
+                  />
+                ))
+              }
+            </div>
+        }
       </TabsContent>
       <TabsContent value="meus-pedidos"></TabsContent>
       <TabsContent value="recebidos"></TabsContent>

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

@@ -8,6 +8,7 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Checkbox } from "../../../../ui/checkbox"
 import { Separator } from "../../../../ui/separator"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../../ui/tooltip"
+import RequestCardClassBadge from "./RequestCardClassBadge"
 
 type Props = {
   request: MarketplaceRequest
@@ -33,14 +34,14 @@ export const RequestCard = ({
       <img className="w-10 h-10 rounded-full shadow-md" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/1200px-Tux.svg.png"></img>
       <div className="flex flex-row justify-between items-center w-full">
         <div className="flex flex-col gap-y-1">
-          <CardTitle>{request.student.name}</CardTitle>
+          <CardTitle>{request.issuer_name}</CardTitle>
           <CardDescription>
             {open
-              ? <p>{request.student.mecNumber}</p>
+              ? <p>{request.issuer_nmec}</p>
               :
               <div className="flex flex-row space-x-1">
-                {request.options.map((option) => (
-                  <Badge>{option.acronym}</Badge>
+                {request.options?.map((option) => (
+                  <RequestCardClassBadge option={option} />
                 ))}
               </div>
 
@@ -78,14 +79,14 @@ export const RequestCard = ({
         <div>
           <Separator className="my-2" />
           <div className="flex flex-row gap-x-4 items-center w-full mb-2">
-            <Checkbox id={option.acronym} className="flex-grow w-1/12 h-8" />
-            <label htmlFor={option.acronym} className="w-11/12">
+            <Checkbox id={option.course_unit_acronym} className="flex-grow w-1/12 h-8" />
+            <label htmlFor={option.course_unit_acronym} className="w-11/12">
               <div className="flex flex-col">
-                <p>{option.acronym} - {option.name}</p>
+                <p>{option.course_unit_acronym} - {option.course_unit_name}</p>
                 <div className="flex flex-row gap-x-2 items-center font-bold">
-                  <p>{option.classNameRequesterGoesFrom}</p>
+                  <p>{option.class_issuer_goes_from}</p>
                   <ArrowRightIcon className="w-5 h-5" />
-                  <p>{option.classNameRequesterGoesTo}</p>
+                  <p>{option.class_issuer_goes_to}</p>
                 </div>
               </div>
             </label>

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

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { ExchangeOption } from "../../../../../@types";
+import { Badge } from "../../../../ui/badge";
+
+type Props = {
+  option: ExchangeOption
+}
+
+const RequestCardClassBadge = ({ option }: Props) => {
+  const [showIssuerDestClass, setShowIssuerDestClass] = useState<boolean>(false);
+
+  return <div className="flex flex-row">
+    <Badge
+      className="bg-gray-100 text-black"
+      onMouseOver={() => setShowIssuerDestClass(true)}
+      onMouseLeave={() => setShowIssuerDestClass(false)}
+    >
+      {option.course_unit_acronym}
+    </Badge>
+    <Badge
+      className={`relative right-2 bg-gray-300 text-black ${showIssuerDestClass ? "block" : "hidden"} transition-all delay-1000`}
+    >
+      {option.class_issuer_goes_to}
+    </Badge>
+  </div >
+}
+
+export default RequestCardClassBadge;

src/hooks/useMarketplaceRequests.tsx

@@ -0,0 +1,26 @@
+import useSWRInfinite from "swr/infinite";
+import { MarketplaceRequest } from "../@types";
+import api from "../api/backend";
+import exchangeRequestService from "../api/services/exchangeRequestService";
+
+export default () => {
+
+  const getKey = (pageIndex: number) => {
+    if (pageIndex === 0) return `${api.BACKEND_URL}/exchange/marketplace/?limit=10`;
+
+    return `${api.BACKEND_URL}/exchange/marketplace/?page=${pageIndex}&limit=10`;
+  }
+
+  const { data, size, setSize, isLoading } = useSWRInfinite<Promise<MarketplaceRequest[]>>(
+    getKey,
+    exchangeRequestService.retrieveMarketplaceRequest
+  );
+
+  return {
+    data,
+    isLoading,
+    size,
+    setSize
+  }
+};
+

src/hooks/useSession.tsx

@@ -6,24 +6,28 @@ const useSession = () => {
 
   const trySession = async (key) => {
     try {
-      // const res = await fetch(`${api.BACKEND_URL}/${key}`, {
-      //   method: "POST",
-      //   credentials: "include",
-      //   headers: {
-      //     "X-CSRFToken": Cookies.get('csrftoken')
-      //   }
-      // });
+      const res = await fetch(`${api.BACKEND_URL}/${key}`, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "X-CSRFToken": Cookies.get('csrftoken')
+        }
+      });
+
+      if (res.ok) {
+        return "something"
+      }
     } catch (e) {
       console.error(e);
     }
   }
 
-  const { data, error, mutate } = useSwr("login/federated/", trySession, {
-    refreshInterval: 500
+  const { data, error, mutate } = useSwr("login/", trySession, {
+    refreshInterval: 3600000000
   });
 
   return {
-    signedIn: false //!data
+    signedIn: !data
   }
 }