From 1360dc21fa6a234ab20e43029818e53d9c8a11ea Mon Sep 17 00:00:00 2001
From: Patrick Wang <patwang123@berkeley.edu>
Date: Sat, 17 Jul 2021 11:27:30 -0400
Subject: [PATCH 1/3] working switch

---
 sections/src/AttendanceRow.js | 13 +++++---
 sections/src/HistoryPage.js   | 58 +++++++++++++++++++++++------------
 2 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/sections/src/AttendanceRow.js b/sections/src/AttendanceRow.js
index fa5fb147..89adf2e0 100644
--- a/sections/src/AttendanceRow.js
+++ b/sections/src/AttendanceRow.js
@@ -1,6 +1,6 @@
 // @flow strict
 
-import React from "react";
+import React, {useState} from "react";
 import Button from "react-bootstrap/Button";
 import { AttendanceStatus } from "./models";
 import type { AttendanceStatusType } from "./models";
@@ -18,6 +18,7 @@ const buttonColorMap = {
 };
 
 export default function AttendanceRow({ editable, status, onClick }: Props) {
+  const [currentStatus, setStatus] = useState(status);
   return (
     <>
       {Object.entries(AttendanceStatus).map(([statusOption, text]) => (
@@ -25,13 +26,17 @@ export default function AttendanceRow({ editable, status, onClick }: Props) {
           <Button
             size="sm"
             variant={
-              status === statusOption
+              statusOption === currentStatus
                 ? buttonColorMap[statusOption]
                 : `outline-${buttonColorMap[statusOption]}`
             }
             disabled={!editable && status !== statusOption}
-            onClick={() =>
-              onClick && onClick(((statusOption: any): AttendanceStatusType))
+            onClick={() => {
+              setStatus(statusOption);
+              return onClick && onClick(((statusOption: any): AttendanceStatusType));
+            }
+              
+
             }
           >
             {text}
diff --git a/sections/src/HistoryPage.js b/sections/src/HistoryPage.js
index 40cf09b7..31d1a6b2 100644
--- a/sections/src/HistoryPage.js
+++ b/sections/src/HistoryPage.js
@@ -15,6 +15,7 @@ import type { ID, PersonDetails } from "./models";
 import { sectionTitle } from "./models";
 import StateContext from "./StateContext";
 import useAPI from "./useAPI";
+import useSectionAPI from "./useSectionAPI";
 
 type Props = {
   userID?: ID,
@@ -25,12 +26,13 @@ export default function HistoryPage({ userID }: Props): React.Node {
   const [loadedUser, setLoadedUser] = useState<?PersonDetails>(null);
 
   const fetchUser = useAPI("fetch_user", setLoadedUser);
+  const setAttendance = useSectionAPI("set_attendance");
 
   useEffect(() => {
     if (userID != null) {
       fetchUser({ user_id: userID });
     }
-  }, [userID, fetchUser]);
+  }, [userID, fetchUser, setAttendance]);
 
   if (
     (userID == null) === (currentUser?.isStaff === true) ||
@@ -64,25 +66,41 @@ export default function HistoryPage({ userID }: Props): React.Node {
               </tr>
             </thead>
             <tbody>
-              {user.attendanceHistory.map(({ section, session, status }, i) => (
-                <tr key={i} className="text-center">
-                  <td className="align-middle">
-                    <b>{moment.unix(session.startTime).format("MMMM D")}</b>
-                  </td>
-                  <td className="align-middle">
-                    {section != null && currentUser.isStaff ? (
-                      <Link to={`/section/${section.id}`}>
-                        {sectionTitle(section)}
-                      </Link>
-                    ) : (
-                      sectionTitle(section)
-                    )}
-                  </td>
-                  <td>
-                    <AttendanceRow editable={false} status={status} />
-                  </td>
-                </tr>
-              ))}
+              {user.attendanceHistory.map(({ section, session, status }, i) => {
+                return (
+                  <tr key={i} className="text-center">
+                    <td className="align-middle">
+                      <b>{moment.unix(session.startTime).format("MMMM D")}</b>
+                    </td>
+                    <td className="align-middle">
+                      {section != null && currentUser.isStaff ? (
+                        <Link to={`/section/${section.id}`}>
+                          {sectionTitle(section)}
+                        </Link>
+                      ) : (
+                        sectionTitle(section)
+                      )}
+                    </td>
+                    <td>
+                      <AttendanceRow
+                        editable={
+                          currentUser.isStaff &&
+                          section.staff.email === currentUser.email
+                        }
+                        status={status}
+                        onClick={(stat) => {
+                          if (session != null)
+                            setAttendance({
+                              session_id: session.id,
+                              students: user.email,
+                              status: stat,
+                            });
+                        }}
+                      />
+                    </td>
+                  </tr>
+                );
+              })}
             </tbody>
           </Table>
         </Col>

From 436b64e4c64f4d84a3b32090d2e5d0ade720f8fd Mon Sep 17 00:00:00 2001
From: Patrick Wang <patwang123@berkeley.edu>
Date: Mon, 19 Jul 2021 22:54:04 -0400
Subject: [PATCH 2/3] working stuff

---
 sections/src/AttendanceRow.js     | 32 ++++++++++++++++++++++---------
 sections/src/HistoryPage.js       | 14 +++-----------
 sections/src/SessionAttendance.js | 10 ++--------
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/sections/src/AttendanceRow.js b/sections/src/AttendanceRow.js
index 89adf2e0..587a5902 100644
--- a/sections/src/AttendanceRow.js
+++ b/sections/src/AttendanceRow.js
@@ -1,14 +1,16 @@
 // @flow strict
 
-import React, {useState} from "react";
+import React, { useState } from "react";
 import Button from "react-bootstrap/Button";
 import { AttendanceStatus } from "./models";
 import type { AttendanceStatusType } from "./models";
+import useSectionAPI from "./useSectionAPI";
 
 type Props = {
   editable: boolean,
   status: ?AttendanceStatusType,
-  onClick?: (AttendanceStatusType) => void,
+  sessionId: string,
+  email: String,
 };
 
 const buttonColorMap = {
@@ -17,8 +19,14 @@ const buttonColorMap = {
   absent: "danger",
 };
 
-export default function AttendanceRow({ editable, status, onClick }: Props) {
+export default function AttendanceRow({
+  editable,
+  status,
+  sessionId,
+  email,
+}: Props) {
   const [currentStatus, setStatus] = useState(status);
+  const setAttendance = useSectionAPI("set_attendance");
   return (
     <>
       {Object.entries(AttendanceStatus).map(([statusOption, text]) => (
@@ -32,12 +40,18 @@ export default function AttendanceRow({ editable, status, onClick }: Props) {
             }
             disabled={!editable && status !== statusOption}
             onClick={() => {
-              setStatus(statusOption);
-              return onClick && onClick(((statusOption: any): AttendanceStatusType));
-            }
-              
-
-            }
+              if (sessionId != null && email != null) {
+                const settingAttendance = async () => {
+                  await setAttendance({
+                    session_id: sessionId,
+                    students: email,
+                    status: statusOption,
+                  });
+                  setStatus(statusOption);
+                };
+                settingAttendance();
+              }
+            }}
           >
             {text}
           </Button>{" "}
diff --git a/sections/src/HistoryPage.js b/sections/src/HistoryPage.js
index 31d1a6b2..203f1318 100644
--- a/sections/src/HistoryPage.js
+++ b/sections/src/HistoryPage.js
@@ -15,7 +15,6 @@ import type { ID, PersonDetails } from "./models";
 import { sectionTitle } from "./models";
 import StateContext from "./StateContext";
 import useAPI from "./useAPI";
-import useSectionAPI from "./useSectionAPI";
 
 type Props = {
   userID?: ID,
@@ -26,13 +25,12 @@ export default function HistoryPage({ userID }: Props): React.Node {
   const [loadedUser, setLoadedUser] = useState<?PersonDetails>(null);
 
   const fetchUser = useAPI("fetch_user", setLoadedUser);
-  const setAttendance = useSectionAPI("set_attendance");
 
   useEffect(() => {
     if (userID != null) {
       fetchUser({ user_id: userID });
     }
-  }, [userID, fetchUser, setAttendance]);
+  }, [userID, fetchUser]);
 
   if (
     (userID == null) === (currentUser?.isStaff === true) ||
@@ -88,14 +86,8 @@ export default function HistoryPage({ userID }: Props): React.Node {
                           section.staff.email === currentUser.email
                         }
                         status={status}
-                        onClick={(stat) => {
-                          if (session != null)
-                            setAttendance({
-                              session_id: session.id,
-                              students: user.email,
-                              status: stat,
-                            });
-                        }}
+                        sessionId={session.id}
+                        email={user.email}
                       />
                     </td>
                   </tr>
diff --git a/sections/src/SessionAttendance.js b/sections/src/SessionAttendance.js
index 7d4d5cf0..034fe215 100644
--- a/sections/src/SessionAttendance.js
+++ b/sections/src/SessionAttendance.js
@@ -129,14 +129,8 @@ export default function SectionAttendance({ section, session }: Props) {
                     <AttendanceRow
                       editable={session != null}
                       status={getStudentAttendanceStatus(student.email)}
-                      onClick={(status) => {
-                        if (session != null)
-                          setAttendance({
-                            session_id: session.id,
-                            students: student.email,
-                            status,
-                          });
-                      }}
+                      sessionId={session != null ? session.id: null}
+                      email={session != null ? student.email: null}
                     />
                   </td>
                 </tr>

From 2915c7d07d289afb73b6c9228381f81a65439dfe Mon Sep 17 00:00:00 2001
From: Patrick Wang <patwang123@berkeley.edu>
Date: Mon, 19 Jul 2021 23:00:21 -0400
Subject: [PATCH 3/3] minor fix to addsessionmodal key

---
 sections/src/AddSessionModal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sections/src/AddSessionModal.js b/sections/src/AddSessionModal.js
index 1aec0424..8f2605bd 100644
--- a/sections/src/AddSessionModal.js
+++ b/sections/src/AddSessionModal.js
@@ -31,7 +31,7 @@ export default function AddSessionModel({ section, show, onClose }: Props) {
       <Modal.Body>
         <ListGroup variant="flush">
           {startTimes.map((startTime) => (
-            <ListGroup.Item>
+            <ListGroup.Item key={`${startTime}-${section.id}`}>
               {startTime.format("MMMM D")}{" "}
               <FloatRightDiv>
                 <Button