From 7c3a36ac760318c26c557a890098dae85649906b Mon Sep 17 00:00:00 2001
From: kevinbu233 <kevinbu233@gmail.com>
Date: Mon, 27 Feb 2023 14:51:15 -0800
Subject: [PATCH 1/6] Started Frontend Code

---
 .../frontend/src/components/section/Section.tsx  | 16 ++++++++++++++++
 csm_web/scheduler/models.py                      |  4 ++--
 csm_web/scheduler/views/swap.py                  | 10 ----------
 3 files changed, 18 insertions(+), 12 deletions(-)
 delete mode 100644 csm_web/scheduler/views/swap.py

diff --git a/csm_web/frontend/src/components/section/Section.tsx b/csm_web/frontend/src/components/section/Section.tsx
index 3e6ced65..a06d5a0f 100644
--- a/csm_web/frontend/src/components/section/Section.tsx
+++ b/csm_web/frontend/src/components/section/Section.tsx
@@ -67,6 +67,19 @@ export function SectionSidebar({ links }: SectionSidebarProps) {
   );
 }
 
+export function SectionSwapbar() {
+  return (
+    <div>Hi</div>
+    // <nav id="section-swap-sidebar">
+    //   {links.map(([label, href]) => (
+    //     <NavLink end to={href} key={href}>
+    //       {label}
+    //     </NavLink>
+    //   ))}
+    // </nav>
+  );
+}
+
 interface LocationProps {
   location?: string;
 }
@@ -143,6 +156,9 @@ export function SectionDetail({ course, courseTitle, userRole, links, children }
       <SectionHeader course={course} courseTitle={courseTitle} userRole={userRole} />
       <div id="section-detail-body">
         <SectionSidebar links={links} />
+        <div id="dev">
+          <SectionSwapbar />
+        </div>
         <div id="section-detail-main">{children}</div>
       </div>
     </section>
diff --git a/csm_web/scheduler/models.py b/csm_web/scheduler/models.py
index 02c1dc02..6b181727 100644
--- a/csm_web/scheduler/models.py
+++ b/csm_web/scheduler/models.py
@@ -34,8 +34,8 @@ def week_bounds(date):
     return week_start, week_end
 
 class Swap(models.Model):
-	sender = models.ForeignKey(Student, on_delete=models.CASCADE)
-	receiver = models.ForeignKey(Student, on_delete=models.CASCADE)
+	sender = models.ForeignKey("Student", on_delete=models.CASCADE, related_name = "sender")
+	receiver = models.ForeignKey("Student", on_delete=models.CASCADE, related_name = "receiver")
 
 class User(AbstractUser):
     priority_enrollment = models.DateTimeField(null=True, blank=True)
diff --git a/csm_web/scheduler/views/swap.py b/csm_web/scheduler/views/swap.py
deleted file mode 100644
index 55999c0d..00000000
--- a/csm_web/scheduler/views/swap.py
+++ /dev/null
@@ -1,10 +0,0 @@
-from rest_framework.exceptions import PermissionDenied
-from rest_framework.response import Response
-from rest_framework import status
-from rest_framework.decorators import api_view
-
-from .utils import viewset_with
-from ..models import Swap, Student
-from scheduler.serializers import UserSerializer
-
-

From 0ec2a9aa66e2432ff46ca9e716f3eae107371723 Mon Sep 17 00:00:00 2001
From: kevinbu233 <kevinbu233@gmail.com>
Date: Wed, 1 Mar 2023 15:57:34 -0800
Subject: [PATCH 2/6] General structure of swap section

---
 .../src/components/section/Section.tsx        | 29 ++++++++++--
 .../frontend/static/frontend/css/style.css    | 46 +++++++++++++++++++
 2 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/csm_web/frontend/src/components/section/Section.tsx b/csm_web/frontend/src/components/section/Section.tsx
index a06d5a0f..ec949c10 100644
--- a/csm_web/frontend/src/components/section/Section.tsx
+++ b/csm_web/frontend/src/components/section/Section.tsx
@@ -69,7 +69,28 @@ export function SectionSidebar({ links }: SectionSidebarProps) {
 
 export function SectionSwapbar() {
   return (
-    <div>Hi</div>
+    <div id="section-swap">
+      <div className="swap-dashboard">
+        <div className="my-request">
+          <div className="swap-title">My Swap Requests</div>
+        </div>
+        <div className="received-request">
+          <div className="swap-title">Receive Swap Requests</div>
+        </div>
+      </div>
+
+      <form className="create-swap-request">
+        <label>
+          Name:
+          <input type="text" name="name" />
+        </label>
+        <label>
+          Email:
+          <input type="text" name="email" />
+        </label>
+        <input type="submit" value="Submit" />
+      </form>
+    </div>
     // <nav id="section-swap-sidebar">
     //   {links.map(([label, href]) => (
     //     <NavLink end to={href} key={href}>
@@ -156,10 +177,10 @@ export function SectionDetail({ course, courseTitle, userRole, links, children }
       <SectionHeader course={course} courseTitle={courseTitle} userRole={userRole} />
       <div id="section-detail-body">
         <SectionSidebar links={links} />
-        <div id="dev">
-          <SectionSwapbar />
-        </div>
+
         <div id="section-detail-main">{children}</div>
+
+        <SectionSwapbar />
       </div>
     </section>
   );
diff --git a/csm_web/frontend/static/frontend/css/style.css b/csm_web/frontend/static/frontend/css/style.css
index 5a557de3..0c405b2a 100644
--- a/csm_web/frontend/static/frontend/css/style.css
+++ b/csm_web/frontend/static/frontend/css/style.css
@@ -1303,6 +1303,52 @@ table tbody tr:last-child > td {
 	margin-bottom: 40px;
 }
 
+#section-swap {
+	width: 500px;
+	display: flex;
+	border: black;
+	border-style: solid;
+	border-width: 1px;
+
+	flex-direction: column;
+	width: -moz-fit-content;
+	margin-left: auto;
+}
+
+.create-swap-request {
+	align-self: left;
+	flex-direction: column;
+	display: flex;
+	flex-direction: column;
+}
+
+.swap-title {
+	text-align: center;
+	border: black;
+	border-style: solid;
+	border-width: 1px;
+	height: 20%;
+}
+.swap-dashboard {
+	display: flex;
+	width: 100%;
+	height: 80%;
+}
+
+.my-request {
+	width: 50%;
+	border: black;
+	border-style: solid;
+	border-width: 1px;
+}
+
+.received-request {
+	width: 50%;
+	border: black;
+	border-style: solid;
+	border-width: 1px;
+}
+
 #section-detail-sidebar {
 	display: flex;
 	flex-wrap: wrap;

From ab38773ad142c73b09bb88a76b66b7841417f017 Mon Sep 17 00:00:00 2001
From: kevinbu233 <kevinbu233@gmail.com>
Date: Thu, 2 Mar 2023 16:24:22 -0800
Subject: [PATCH 3/6] Added general API call strucutre, need backend endpoints

---
 .../src/components/section/Section.tsx        | 67 ++++++++++++++++---
 1 file changed, 56 insertions(+), 11 deletions(-)

diff --git a/csm_web/frontend/src/components/section/Section.tsx b/csm_web/frontend/src/components/section/Section.tsx
index ec949c10..63cb025f 100644
--- a/csm_web/frontend/src/components/section/Section.tsx
+++ b/csm_web/frontend/src/components/section/Section.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { NavLink, useParams } from "react-router-dom";
 import StudentSection from "./StudentSection";
 import MentorSection from "./MentorSection";
@@ -67,7 +67,29 @@ export function SectionSidebar({ links }: SectionSidebarProps) {
   );
 }
 
+interface RequestProps {
+  sender: string;
+  receiver: string;
+  id: number;
+}
+
 export function SectionSwapbar() {
+  const [myRequest, setMyRequest] = useState<Swap[]>([]);
+  const [sendRequest, setSendRequest] = useState<Swap[]>([]);
+  const [email, setEmail] = useState();
+  const [name, setName] = useState();
+  // How to get the id of the student?
+  const { id } = useParams<string>();
+
+  // Need API endpoints
+  useEffect(() => {
+    fetch(`/api/sections/students/`)
+      .then(res => res.json())
+      .then(data => {
+        setMyRequest(data);
+      });
+  }, []);
+
   return (
     <div id="section-swap">
       <div className="swap-dashboard">
@@ -76,28 +98,51 @@ export function SectionSwapbar() {
         </div>
         <div className="received-request">
           <div className="swap-title">Receive Swap Requests</div>
+          <ul>
+            {myRequest.map(request => (
+              <li key={request.id}>
+                {request.sender.user.first_name} {request.sender.user.last_name} (id: {request.sender.id})
+              </li>
+            ))}
+          </ul>
         </div>
       </div>
-
+      <ul>
+        {myRequest.map(request => (
+          <li key={request.id}>
+            {request.sender.user.first_name} {request.sender.user.last_name} (id: {request.sender.id})
+          </li>
+        ))}
+      </ul>
       <form className="create-swap-request">
         <label>
           Name:
-          <input type="text" name="name" />
+          <input type="text" name="name" onInput={e => setName(e.target.value)} />
         </label>
         <label>
           Email:
-          <input type="text" name="email" />
+          <input type="text" name="email" onInput={e => setEmail(e.target.value)} />
         </label>
         <input type="submit" value="Submit" />
+        <button
+          type="submit"
+          onClick={event => {
+            const data = {
+              value: id,
+              requestedEmail: email
+            };
+            // POST end points
+            fetch(`/api/sections/students/`, {
+              method: "POST",
+              // headers: {'Content-Type': 'application/json', 'X-CSRFToken':`${csrftoken}`},
+              body: JSON.stringify(data)
+            }).then(res => {
+              console.log("Request complete! response:", res);
+            });
+          }}
+        ></button>
       </form>
     </div>
-    // <nav id="section-swap-sidebar">
-    //   {links.map(([label, href]) => (
-    //     <NavLink end to={href} key={href}>
-    //       {label}
-    //     </NavLink>
-    //   ))}
-    // </nav>
   );
 }
 

From 4a987ee1d8d9ac434585369a6192b1c6e2344998 Mon Sep 17 00:00:00 2001
From: Edward Lee <edwardneo@berkeley.edu>
Date: Mon, 13 Mar 2023 04:44:52 -0700
Subject: [PATCH 4/6] Added swap section modal and swap request form

---
 .../src/components/section/Section.tsx        | 82 ----------------
 .../src/components/section/StudentSection.tsx | 33 ++++++-
 .../components/section/SwapSectionModal.tsx   | 95 +++++++++++++++++++
 .../frontend/src/utils/queries/sections.tsx   | 27 ++++++
 .../frontend/static/frontend/css/style.css    | 46 +++++++++
 5 files changed, 200 insertions(+), 83 deletions(-)
 create mode 100644 csm_web/frontend/src/components/section/SwapSectionModal.tsx

diff --git a/csm_web/frontend/src/components/section/Section.tsx b/csm_web/frontend/src/components/section/Section.tsx
index 63cb025f..6c31205d 100644
--- a/csm_web/frontend/src/components/section/Section.tsx
+++ b/csm_web/frontend/src/components/section/Section.tsx
@@ -67,85 +67,6 @@ export function SectionSidebar({ links }: SectionSidebarProps) {
   );
 }
 
-interface RequestProps {
-  sender: string;
-  receiver: string;
-  id: number;
-}
-
-export function SectionSwapbar() {
-  const [myRequest, setMyRequest] = useState<Swap[]>([]);
-  const [sendRequest, setSendRequest] = useState<Swap[]>([]);
-  const [email, setEmail] = useState();
-  const [name, setName] = useState();
-  // How to get the id of the student?
-  const { id } = useParams<string>();
-
-  // Need API endpoints
-  useEffect(() => {
-    fetch(`/api/sections/students/`)
-      .then(res => res.json())
-      .then(data => {
-        setMyRequest(data);
-      });
-  }, []);
-
-  return (
-    <div id="section-swap">
-      <div className="swap-dashboard">
-        <div className="my-request">
-          <div className="swap-title">My Swap Requests</div>
-        </div>
-        <div className="received-request">
-          <div className="swap-title">Receive Swap Requests</div>
-          <ul>
-            {myRequest.map(request => (
-              <li key={request.id}>
-                {request.sender.user.first_name} {request.sender.user.last_name} (id: {request.sender.id})
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-      <ul>
-        {myRequest.map(request => (
-          <li key={request.id}>
-            {request.sender.user.first_name} {request.sender.user.last_name} (id: {request.sender.id})
-          </li>
-        ))}
-      </ul>
-      <form className="create-swap-request">
-        <label>
-          Name:
-          <input type="text" name="name" onInput={e => setName(e.target.value)} />
-        </label>
-        <label>
-          Email:
-          <input type="text" name="email" onInput={e => setEmail(e.target.value)} />
-        </label>
-        <input type="submit" value="Submit" />
-        <button
-          type="submit"
-          onClick={event => {
-            const data = {
-              value: id,
-              requestedEmail: email
-            };
-            // POST end points
-            fetch(`/api/sections/students/`, {
-              method: "POST",
-              // headers: {'Content-Type': 'application/json', 'X-CSRFToken':`${csrftoken}`},
-              body: JSON.stringify(data)
-            }).then(res => {
-              console.log("Request complete! response:", res);
-            });
-          }}
-        ></button>
-      </form>
-    </div>
-  );
-}
-
 interface LocationProps {
   location?: string;
 }
@@ -222,10 +143,7 @@ export function SectionDetail({ course, courseTitle, userRole, links, children }
       <SectionHeader course={course} courseTitle={courseTitle} userRole={userRole} />
       <div id="section-detail-body">
         <SectionSidebar links={links} />
-
         <div id="section-detail-main">{children}</div>
-
-        <SectionSwapbar />
       </div>
     </section>
   );
diff --git a/csm_web/frontend/src/components/section/StudentSection.tsx b/csm_web/frontend/src/components/section/StudentSection.tsx
index 09229c32..46dbf9f6 100644
--- a/csm_web/frontend/src/components/section/StudentSection.tsx
+++ b/csm_web/frontend/src/components/section/StudentSection.tsx
@@ -8,6 +8,7 @@ import {
 import { Mentor, Override, Spacetime } from "../../utils/types";
 import Modal from "../Modal";
 import { ATTENDANCE_LABELS, InfoCard, ROLES, SectionDetail, SectionSpacetime } from "./Section";
+import { SwapSectionModal } from "./SwapSectionModal";
 import { dateSortWord, formatDateISOToWord } from "./utils";
 
 import XIcon from "../../../static/frontend/img/x.svg";
@@ -52,6 +53,7 @@ export default function StudentSection({
           index
           element={
             <StudentSectionInfo
+              id={id}
               mentor={mentor}
               spacetimes={spacetimes}
               override={override}
@@ -65,6 +67,7 @@ export default function StudentSection({
 }
 
 interface StudentSectionInfoProps {
+  id: number;
   mentor: Mentor;
   spacetimes: Spacetime[];
   override?: Override;
@@ -72,7 +75,7 @@ interface StudentSectionInfoProps {
 }
 
 // eslint-disable-next-line no-unused-vars
-function StudentSectionInfo({ mentor, spacetimes, override, associatedProfileId }: StudentSectionInfoProps) {
+function StudentSectionInfo({ id, mentor, spacetimes, override, associatedProfileId }: StudentSectionInfoProps) {
   return (
     <React.Fragment>
       <h3 className="section-detail-page-title">My Section</h3>
@@ -92,12 +95,40 @@ function StudentSectionInfo({ mentor, spacetimes, override, associatedProfileId
             override={override}
           />
         ))}
+        <SwapSection sectionId={id} />
         <DropSection profileId={associatedProfileId} />
       </div>
     </React.Fragment>
   );
 }
 
+interface SwapSectionProps {
+  sectionId: number;
+}
+
+enum SwapSectionStage {
+  INITIAL = "INITIAL",
+  DISPLAY = "DISPLAY"
+}
+
+export function SwapSection({ sectionId }: SwapSectionProps) {
+  const [stage, setStage] = useState<SwapSectionStage>(SwapSectionStage.INITIAL);
+
+  switch (stage) {
+    case SwapSectionStage.INITIAL:
+      return (
+        <InfoCard title="Swap Section" showTitle={false}>
+          <h5>Swap Section</h5>
+          <button className="view-swap-btn" onClick={() => setStage(SwapSectionStage.DISPLAY)}>
+            Swap
+          </button>
+        </InfoCard>
+      );
+    case SwapSectionStage.DISPLAY:
+      return <SwapSectionModal sectionId={sectionId} closeModal={() => setStage(SwapSectionStage.INITIAL)} />;
+  }
+}
+
 interface DropSectionProps {
   profileId: number;
 }
diff --git a/csm_web/frontend/src/components/section/SwapSectionModal.tsx b/csm_web/frontend/src/components/section/SwapSectionModal.tsx
new file mode 100644
index 00000000..113e8cc5
--- /dev/null
+++ b/csm_web/frontend/src/components/section/SwapSectionModal.tsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+import Modal from "../Modal";
+import { useUserEmails } from "../../utils/queries/base";
+import { useSwapRequestMutation } from "../../utils/queries/sections";
+
+interface SwapSectionModalProps {
+  sectionId: number;
+  closeModal: () => void;
+}
+
+export const SwapSectionModal = ({ sectionId, closeModal }: SwapSectionModalProps) => {
+  // Need API endpoints
+  useEffect(() => {
+    fetch(`/api/sections/students/`)
+      .then(res => res.json())
+      .then(data => {
+        // setMyRequest(data);
+      });
+  }, []);
+
+  return (
+    <Modal className="swap-display" closeModal={closeModal}>
+      <SwapRequestDashboard />
+      <SwapRequestForm sectionId={sectionId} />
+    </Modal>
+  );
+};
+
+export const SwapRequestDashboard = () => {
+  return (
+    <div className="swap-dashboard">
+      <div className="my-request">
+        <div className="swap-title">My Swap Requests</div>
+        <ul>
+          {/* {myRequest.map(request => (
+            <li key={request.id}>
+              {request.sender.user.first_name} {request.sender.user.last_name} (id: {request.sender.id})
+            </li>
+          ))} */}
+        </ul>
+      </div>
+      <div className="received-request">
+        <div className="swap-title">Receive Swap Requests</div>
+        <ul>
+          {/* {myRequest.map(request => (
+            <li key={request.id}>
+              {request.sender.user.first_name} {request.sender.user.last_name} (id: {request.sender.id})
+            </li>
+          ))} */}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+interface SwapRequestFormProps {
+  sectionId: number;
+}
+
+export const SwapRequestForm = ({ sectionId }: SwapRequestFormProps) => {
+  const { data: userEmails, isSuccess: userEmailsLoaded } = useUserEmails();
+  const swapSectionMutation = useSwapRequestMutation(sectionId);
+  // const [myRequest, setMyRequest] = useState<Swap[]>([]);
+  // const [sendRequest, setSendRequest] = useState<Swap[]>([]);
+  const [email, setEmail] = useState();
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+  };
+
+  return (
+    <form id="swap-request-form" className="csm-form" onSubmit={handleSubmit}>
+      <div id="swap-request-form-contents">
+        <label>
+          Email
+          <input
+            onChange={event => setEmail(event.target.value)}
+            type="email"
+            list="swap-student-email-list"
+            required
+            name="email"
+            pattern=".+@berkeley.edu"
+            title="Please enter a valid @berkeley.edu email address"
+            value={email}
+            autoFocus
+          />
+          <datalist id="swap-student-email-list">
+            {userEmailsLoaded ? userEmails.map(email => <option key={email} value={email} />) : null}
+          </datalist>
+        </label>
+        <input type="submit" value="Request Swap" />
+      </div>
+    </form>
+  );
+};
diff --git a/csm_web/frontend/src/utils/queries/sections.tsx b/csm_web/frontend/src/utils/queries/sections.tsx
index a4bbcf8c..4e799e62 100644
--- a/csm_web/frontend/src/utils/queries/sections.tsx
+++ b/csm_web/frontend/src/utils/queries/sections.tsx
@@ -274,6 +274,33 @@ export const useStudentSubmitWordOfTheDayMutation = (
   return mutationResult;
 };
 
+export interface SectionSwapMutationBody {
+  email: string;
+}
+
+/**
+ * Hook to request a swap with another student
+ */
+export const useSwapRequestMutation = (
+  sectionId: number
+): UseMutationResult<Section, ServerError, SectionSwapMutationBody> => {
+  const mutationResult = useMutation<Section, Error, SectionSwapMutationBody>(
+    async (body: SectionSwapMutationBody) => {
+      const response = await fetchWithMethod(`sections/${sectionId}/swap`, HTTP_METHODS.POST, body);
+      if (response.ok) {
+        return response.json();
+      } else {
+        handlePermissionsError(response.status);
+        throw new ServerError(`Failed to request swap`);
+      }
+    },
+    { retry: handleRetry }
+  );
+
+  handleError(mutationResult);
+  return mutationResult;
+};
+
 export interface StudentDropMutationBody {
   banned: boolean;
   blacklisted: boolean;
diff --git a/csm_web/frontend/static/frontend/css/style.css b/csm_web/frontend/static/frontend/css/style.css
index 0c405b2a..1ddd18e6 100644
--- a/csm_web/frontend/static/frontend/css/style.css
+++ b/csm_web/frontend/static/frontend/css/style.css
@@ -879,6 +879,12 @@ main {
 	margin: 0 0 20px;
 }
 
+.section-detail-info-card.swap-section {
+	flex-basis: 100%;
+	display: flex;
+	text-align: center;
+}
+
 .section-detail-info-card.drop-section {
 	flex-basis: 100%;
 	display: flex;
@@ -1315,6 +1321,46 @@ table tbody tr:last-child > td {
 	margin-left: auto;
 }
 
+.view-swap-btn {
+	display: block;
+	border: none;
+	margin: auto;
+	cursor: pointer;
+	background-color: var(--csm-green);
+	border-radius: 6px;
+	color: white;
+	font-size: 14px;
+	padding: 10px 27px;
+}
+
+.swap-display {
+	width: 750px;
+	height: 1000px;
+	text-align: center;
+}
+
+#swap-request-form {
+	display: flex;
+	flex-direction: row;
+}
+
+#swap-request-form-contents {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	margin: auto;
+	max-width: max-content;
+}
+
+#swap-request-form-contents > * {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+}
+
 .create-swap-request {
 	align-self: left;
 	flex-direction: column;

From 71a0763785a334d0898aea8f77dd6031b92d441b Mon Sep 17 00:00:00 2001
From: kevinbu233 <kevinbu233@gmail.com>
Date: Fri, 17 Mar 2023 00:46:53 -0700
Subject: [PATCH 5/6] Add new react-query for loading swaps

---
 .../components/section/SwapSectionModal.tsx   |  4 +--
 .../frontend/src/utils/queries/sections.tsx   | 34 ++++++++++++++++++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/csm_web/frontend/src/components/section/SwapSectionModal.tsx b/csm_web/frontend/src/components/section/SwapSectionModal.tsx
index 113e8cc5..98a19ad8 100644
--- a/csm_web/frontend/src/components/section/SwapSectionModal.tsx
+++ b/csm_web/frontend/src/components/section/SwapSectionModal.tsx
@@ -84,9 +84,9 @@ export const SwapRequestForm = ({ sectionId }: SwapRequestFormProps) => {
             value={email}
             autoFocus
           />
-          <datalist id="swap-student-email-list">
+          {/* <datalist id="swap-student-email-list">
             {userEmailsLoaded ? userEmails.map(email => <option key={email} value={email} />) : null}
-          </datalist>
+          </datalist> */}
         </label>
         <input type="submit" value="Request Swap" />
       </div>
diff --git a/csm_web/frontend/src/utils/queries/sections.tsx b/csm_web/frontend/src/utils/queries/sections.tsx
index 4e799e62..5359ead6 100644
--- a/csm_web/frontend/src/utils/queries/sections.tsx
+++ b/csm_web/frontend/src/utils/queries/sections.tsx
@@ -284,6 +284,7 @@ export interface SectionSwapMutationBody {
 export const useSwapRequestMutation = (
   sectionId: number
 ): UseMutationResult<Section, ServerError, SectionSwapMutationBody> => {
+  const queryClient = useQueryClient();
   const mutationResult = useMutation<Section, Error, SectionSwapMutationBody>(
     async (body: SectionSwapMutationBody) => {
       const response = await fetchWithMethod(`sections/${sectionId}/swap`, HTTP_METHODS.POST, body);
@@ -294,13 +295,44 @@ export const useSwapRequestMutation = (
         throw new ServerError(`Failed to request swap`);
       }
     },
-    { retry: handleRetry }
+    {
+      retry: handleRetry,
+      onSuccess: () => {
+        queryClient.invalidateQueries(["section_swap", sectionId]);
+      }
+    }
   );
 
   handleError(mutationResult);
   return mutationResult;
 };
 
+export const useSwapRequestQuery = (
+  sectionId: number
+): UseMutationResult<Section, ServerError, SectionSwapMutationBody> => {
+  const queryClient = useQueryClient();
+  const queryResult = useMutation<Section, Error, SectionSwapMutationBody>(
+    async (body: SectionSwapMutationBody) => {
+      const response = await fetchWithMethod(`sections/<section_id:int>/swap`, HTTP_METHODS.GET, body);
+      if (response.ok) {
+        return response.json();
+      } else {
+        handlePermissionsError(response.status);
+        throw new ServerError(`Failed to load swap`);
+      }
+    },
+    {
+      retry: handleRetry,
+      onSuccess: () => {
+        queryClient.invalidateQueries(["section_swap", sectionId]);
+      }
+    }
+  );
+
+  handleError(queryResult);
+  return queryResult;
+};
+
 export interface StudentDropMutationBody {
   banned: boolean;
   blacklisted: boolean;

From 3557b6c74fc60fbf1b5b29da9f6384518f1bf829 Mon Sep 17 00:00:00 2001
From: kevinbu233 <kevinbu233@gmail.com>
Date: Mon, 10 Apr 2023 02:52:43 -0400
Subject: [PATCH 6/6] Fix queries

---
 .../components/section/SwapSectionModal.tsx   | 42 ++++++----
 .../frontend/src/utils/queries/sections.tsx   | 84 +++++++++++++++++--
 2 files changed, 102 insertions(+), 24 deletions(-)

diff --git a/csm_web/frontend/src/components/section/SwapSectionModal.tsx b/csm_web/frontend/src/components/section/SwapSectionModal.tsx
index 98a19ad8..99e2fdea 100644
--- a/csm_web/frontend/src/components/section/SwapSectionModal.tsx
+++ b/csm_web/frontend/src/components/section/SwapSectionModal.tsx
@@ -1,7 +1,12 @@
 import React, { useEffect, useState } from "react";
 import Modal from "../Modal";
 import { useUserEmails } from "../../utils/queries/base";
-import { useSwapRequestMutation } from "../../utils/queries/sections";
+import {
+  useSwapRequestQuery,
+  useSwapPostMutation,
+  useReceivedSwapRequestQuery,
+  useAllSwapRequestQuery
+} from "../../utils/queries/sections";
 
 interface SwapSectionModalProps {
   sectionId: number;
@@ -10,23 +15,24 @@ interface SwapSectionModalProps {
 
 export const SwapSectionModal = ({ sectionId, closeModal }: SwapSectionModalProps) => {
   // Need API endpoints
-  useEffect(() => {
-    fetch(`/api/sections/students/`)
-      .then(res => res.json())
-      .then(data => {
-        // setMyRequest(data);
-      });
-  }, []);
 
   return (
     <Modal className="swap-display" closeModal={closeModal}>
-      <SwapRequestDashboard />
+      <SwapRequestDashboard sectionId={sectionId} />
       <SwapRequestForm sectionId={sectionId} />
     </Modal>
   );
 };
 
-export const SwapRequestDashboard = () => {
+export const SwapRequestDashboard = ({ sectionId }: SwapRequestDashBoardProps) => {
+  const [myRequest, setMyRequest] = useState<string[]>([]);
+  const [sendRequest, setSendRequest] = useState<string[]>([]);
+  const requests = useAllSwapRequestQuery(sectionId, studentId).data;
+  const send_requests = useReceivedSwapRequestQuery(sectionId, studentId).data;
+  useEffect(() => {
+    // How do i get student id?
+  }, []);
+
   return (
     <div className="swap-dashboard">
       <div className="my-request">
@@ -52,17 +58,21 @@ export const SwapRequestDashboard = () => {
     </div>
   );
 };
+interface SwapRequestDashBoardProps {
+  sectionId: number;
+}
 
 interface SwapRequestFormProps {
   sectionId: number;
+  email: string;
 }
 
 export const SwapRequestForm = ({ sectionId }: SwapRequestFormProps) => {
   const { data: userEmails, isSuccess: userEmailsLoaded } = useUserEmails();
-  const swapSectionMutation = useSwapRequestMutation(sectionId);
-  // const [myRequest, setMyRequest] = useState<Swap[]>([]);
-  // const [sendRequest, setSendRequest] = useState<Swap[]>([]);
-  const [email, setEmail] = useState();
+  // const swapSectionMutation = useSwapRequestMutation(sectionId); can be changed, not too sure
+  const [email, setEmail] = useState<string>();
+  const body = { sectionId: sectionId, email: email };
+  const studentDropMutation = useSwapPostMutation(sectionId, email);
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
     event.preventDefault();
@@ -74,7 +84,9 @@ export const SwapRequestForm = ({ sectionId }: SwapRequestFormProps) => {
         <label>
           Email
           <input
-            onChange={event => setEmail(event.target.value)}
+            onChange={event => {
+              setEmail(event.target.value);
+            }}
             type="email"
             list="swap-student-email-list"
             required
diff --git a/csm_web/frontend/src/utils/queries/sections.tsx b/csm_web/frontend/src/utils/queries/sections.tsx
index 5359ead6..9737707f 100644
--- a/csm_web/frontend/src/utils/queries/sections.tsx
+++ b/csm_web/frontend/src/utils/queries/sections.tsx
@@ -280,19 +280,20 @@ export interface SectionSwapMutationBody {
 
 /**
  * Hook to request a swap with another student
+ * Wait, what is this for? I wrote another one for posting a new request below this. -Kevin
  */
-export const useSwapRequestMutation = (
+export const useSwapRequestQuery = (
   sectionId: number
 ): UseMutationResult<Section, ServerError, SectionSwapMutationBody> => {
   const queryClient = useQueryClient();
-  const mutationResult = useMutation<Section, Error, SectionSwapMutationBody>(
+  const queryResult = useMutation<Section, Error, SectionSwapMutationBody>(
     async (body: SectionSwapMutationBody) => {
-      const response = await fetchWithMethod(`sections/${sectionId}/swap`, HTTP_METHODS.POST, body);
+      const response = await fetchWithMethod(`sections/<section_id:int>/swap`, HTTP_METHODS.GET, body);
       if (response.ok) {
         return response.json();
       } else {
         handlePermissionsError(response.status);
-        throw new ServerError(`Failed to request swap`);
+        throw new ServerError(`Failed to load swap`);
       }
     },
     {
@@ -303,17 +304,22 @@ export const useSwapRequestMutation = (
     }
   );
 
-  handleError(mutationResult);
-  return mutationResult;
+  handleError(queryResult);
+  return queryResult;
 };
 
-export const useSwapRequestQuery = (
-  sectionId: number
+/*
+ *Posting new queries
+ */
+
+export const useSwapPostMutation = (
+  sectionId: number,
+  email: string
 ): UseMutationResult<Section, ServerError, SectionSwapMutationBody> => {
   const queryClient = useQueryClient();
   const queryResult = useMutation<Section, Error, SectionSwapMutationBody>(
     async (body: SectionSwapMutationBody) => {
-      const response = await fetchWithMethod(`sections/<section_id:int>/swap`, HTTP_METHODS.GET, body);
+      const response = await fetchWithMethod(`sections/${sectionId}}/swap`, HTTP_METHODS.POST, body);
       if (response.ok) {
         return response.json();
       } else {
@@ -338,6 +344,66 @@ export interface StudentDropMutationBody {
   blacklisted: boolean;
 }
 
+/**
+ * Get all swap requests where the user is the receiver
+ */
+export const useAllSwapRequestQuery = (
+  sectionId: number,
+  studentId: number
+): UseMutationResult<Section, ServerError, SectionSwapMutationBody> => {
+  const queryClient = useQueryClient();
+  const queryResult = useMutation<Section, Error, SectionSwapMutationBody>(
+    async (body: SectionSwapMutationBody) => {
+      const response = await fetchWithMethod(`sections/${sectionId}/my_swap`, HTTP_METHODS.GET, body);
+      if (response.ok) {
+        return response.json();
+      } else {
+        handlePermissionsError(response.status);
+        throw new ServerError(`Failed to load swap`);
+      }
+    },
+    {
+      retry: handleRetry,
+      onSuccess: () => {
+        queryClient.invalidateQueries(["section_swap", sectionId]);
+      }
+    }
+  );
+
+  handleError(queryResult);
+  return queryResult;
+};
+
+/**
+ * Get all swap requests where the user is the receiver
+ */
+export const useReceivedSwapRequestQuery = (
+  sectionId: number,
+  studentId: number
+): UseMutationResult<Section, ServerError, SectionSwapMutationBody> => {
+  const queryClient = useQueryClient();
+  const queryResult = useMutation<Section, Error, SectionSwapMutationBody>(
+    async (body: SectionSwapMutationBody) => {
+      const response = await fetchWithMethod(`sections/${sectionId}/my_swap`, HTTP_METHODS.GET, body);
+      if (response.ok) {
+        return response.json();
+      } else {
+        handlePermissionsError(response.status);
+        throw new ServerError(`Failed to load swap`);
+      }
+    },
+    {
+      retry: handleRetry,
+      onSuccess: () => {
+        queryClient.invalidateQueries(["section_swap", sectionId]);
+      }
+    }
+  );
+
+  handleError(queryResult);
+  return queryResult;
+};
+
 /**
  * Hook to drop a student from their section.
  *