Merge branch 'feat/user-profiles/frontend' of https://github.com/csmb…

…erkeley/csm_web into feat/user-profiles/frontend

csm_web/frontend/src/components/section/StudentSection.tsx

@@ -3,7 +3,8 @@ import { Navigate, Route, Routes } from "react-router-dom";
 import {
   useDropUserMutation,
   useStudentAttendances,
-  useStudentSubmitWordOfTheDayMutation
+  useStudentSubmitWordOfTheDayMutation,
+  useSectionStudents
 } from "../../utils/queries/sections";
 import { Mentor, Override, Spacetime } from "../../utils/types";
 import Modal from "../Modal";
@@ -47,14 +48,16 @@ export default function StudentSection({
       userRole={ROLES.STUDENT}
       links={[
         ["Section", ""],
-        ["Attendance", "attendance"]
+        ["Attendance", "attendance"],
+        ["Students", "students"]
       ]}
     >
       <Routes>
         <Route
           path="attendance"
           element={<StudentSectionAttendance associatedProfileId={associatedProfileId} id={id} />}
         />
+        <Route path="students" element={<StudentList associatedProfileId={associatedProfileId} id={id} />} />
         <Route
           index
           element={
@@ -87,9 +90,11 @@ function StudentSectionInfo({ mentor, spacetimes, override, associatedProfileId
         {mentor && (
           <InfoCard title="Mentor">
             <h5>{mentor.name}</h5>
-            <a href={`mailto:${mentor.email}`}>{mentor.email}</a>
+            {/* <a href={`mailto:${mentor.email}`}>{mentor.email}</a> */}
+            <ProfileSection profileId={associatedProfileId} />
           </InfoCard>
         )}
+
         {spacetimes.map(({ override, ...spacetime }, index) => (
           <SectionSpacetime
             manySpacetimes={spacetimes.length > 1}
@@ -155,6 +160,46 @@ function DropSection({ profileId }: DropSectionProps) {
   }
 }
 
+interface ProfileSectionProps {
+  profileId: number;
+}
+
+enum ProfileSectionStage {
+  CLOSED = "CLOSED",
+  OPENED = "OPENED"
+}
+
+function ProfileSection({ profileId }: ProfileSectionProps) {
+  // const studentDropMutation = useDropUserMutation(profileId);
+  const [stage, setStage] = useState<ProfileSectionStage>(ProfileSectionStage.CLOSED);
+
+  // const performDrop = () => {
+  //   studentDropMutation.mutate(undefined, {
+  //     onSuccess: () => {
+  //       setStage(ProfileSectionStage.CLOSED);
+  //     }
+  //   });
+  // };
+
+  switch (stage) {
+    case ProfileSectionStage.CLOSED:
+      return (
+        <button className="primary-btn" onClick={() => setStage(ProfileSectionStage.OPENED)}>
+          Profile
+        </button>
+      );
+    case ProfileSectionStage.OPENED:
+      return (
+        <Modal closeModal={() => setStage(ProfileSectionStage.CLOSED)}>
+          <div className="profile-information">
+            <h5>Are you sure you want to drop?</h5>
+            <p>You are not guaranteed an available spot in another section!</p>
+          </div>
+        </Modal>
+      );
+  }
+}
+
 interface StudentSectionAttendanceProps {
   associatedProfileId: number;
   id: number;
@@ -358,3 +403,61 @@ function StudentSectionAttendance({ associatedProfileId, id }: StudentSectionAtt
     <LoadingSpinner className="spinner-centered" />
   );
 }
+
+interface StudentListProps {
+  associatedProfileId: number;
+  id: number;
+}
+
+// Need permission for student to load student list, or new backend point?
+function StudentList({ associatedProfileId, id }: StudentListProps) {
+  const {
+    data: studentList,
+    isSuccess: listLoaded,
+    isError: listLoadError,
+    refetch: refetchStudentList
+  } = useSectionStudents(associatedProfileId);
+
+  return listLoaded ? (
+    <React.Fragment>
+      <div id="word-of-the-day-card">
+        <h3 className="word-of-the-day-title">Submit Word of the Day</h3>
+        <div className="word-of-the-day-action-container">
+          <div className="word-of-the-day-submit-container"></div>
+        </div>
+        <div className="word-of-the-day-status-bar">
+          <div className="word-of-the-day-deadline-container"></div>
+        </div>
+      </div>
+      <table id="attendance-table" className="csm-table standalone">
+        <thead className="csm-table-head">
+          <tr className="csm-table-head-row">
+            <th className="csm-table-item">Name</th>
+            <th className="csm-table-item">Profile</th>
+          </tr>
+        </thead>
+        <tbody>
+          {studentList
+            // convert to a table row
+            .map(({ name, email }) => {
+              // const [label, cssSuffix] = ATTENDANCE_LABELS[presence];
+              // const attendanceColor = scssColors[`attendance-${cssSuffix}`];
+              // const attendanceFgColor = scssColors[`attendance-${cssSuffix}-fg`];
+              return (
+                <tr key={email} className="csm-table-row">
+                  <td className="csm-table-item">{name}</td>
+                  <td className="csm-table-item">
+                    <div className="attendance-status">{email}</div>
+                  </td>
+                </tr>
+              );
+            })}
+        </tbody>
+      </table>
+    </React.Fragment>
+  ) : listLoadError ? (
+    <h3>Student List could not be loaded</h3>
+  ) : (
+    <LoadingSpinner className="spinner-centered" />
+  );
+}

csm_web/frontend/src/utils/queries/sections.tsx

@@ -4,7 +4,7 @@
 
 import { useMutation, UseMutationResult, useQuery, useQueryClient, UseQueryResult } from "@tanstack/react-query";
 import { fetchNormalized, fetchWithMethod, HTTP_METHODS } from "../api";
-import { Attendance, RawAttendance, Section, Spacetime, Student } from "../types";
+import { Attendance, RawAttendance, Section, Spacetime, Student, UserInfo } from "../types";
 import { handleError, handlePermissionsError, handleRetry, PermissionError, ServerError } from "./helpers";
 
 /* ===== Queries ===== */
@@ -112,6 +112,29 @@ export const useStudentAttendances = (studentId: number): UseQueryResult<Attenda
   return queryResult;
 };
 
+// // Get all students attending this section. Need new backend entry points
+// export const useStudentList = (studentId: number): UseQueryResult<Student[], ServerError> => {
+//   const queryResult = useQuery<Student[], Error>(
+//     ["students", studentId, "attendance"],
+//     async () => {
+//       if (isNaN(studentId)) {
+//         throw new PermissionError("Invalid student id");
+//       }
+//       const response = await fetchNormalized(`/students/${studentId}/attendances`);
+//       if (response.ok) {
+//         return await response.json();
+//       } else {
+//         handlePermissionsError(response.status);
+//         throw new ServerError(`Failed to fetch student ${studentId} attendances`);
+//       }
+//     },
+//     { retry: handleRetry }
+//   );
+//
+//   handleError(queryResult);
+//   return queryResult;
+// };
+
 interface WordOfTheDayResponse {
   id: number; // section occurrence id
   wordOfTheDay: string;