improved buttons

frontend/src/components/AvailabilitiesTable.jsx

@@ -11,6 +11,7 @@ import {
   FaTrashAlt,
   FaEdit,
   FaGlobe,
+  FaUndo,
 } from "react-icons/fa"; // Import FontAwesome Plus Icon
 
 function AvailabilitiesTable({ authUser }) {
@@ -95,6 +96,66 @@ function AvailabilitiesTable({ authUser }) {
         },
       },
     },
+    {
+      availabilityId: 2,
+      startDate: moment("2024-11-21T09:45:00").format(),
+      endDate: moment("2024-11-21T10:30:00").format(),
+      interview: {
+        status: "draft",
+        availabilityId: 2,
+        interviewers: [
+          {
+            firstName: "Federico",
+            lastName: "Rossi",
+            email: "[email protected]",
+            role: "board",
+          },
+          {
+            firstName: "Giovanni",
+            lastName: "de Maria",
+            email: "[email protected]",
+            role: "expert",
+          },
+          {
+            firstName: "Andrea",
+            lastName: "Verdi",
+            email: "[email protected]",
+            role: "",
+          },
+        ],
+        applicant: null,
+      },
+    },
+    {
+      availabilityId: 3,
+      startDate: moment("2024-11-22T09:45:00").format(),
+      endDate: moment("2024-11-22T10:30:00").format(),
+      interview: {
+        status: "draft",
+        availabilityId: 3,
+        interviewers: [
+          {
+            firstName: "Federico",
+            lastName: "Rossi",
+            email: "[email protected]",
+            role: "board",
+          },
+          {
+            firstName: "Giovanni",
+            lastName: "di Maria",
+            email: "[email protected]",
+            role: "expert",
+          },
+          {
+            firstName: "Andrea",
+            lastName: "Verdi",
+            email: "[email protected]",
+            role: "",
+          },
+        ],
+        applicant: null,
+      },
+    },
   ];
 
   const handleAddAvailability = (timeSlotStart, timeSlotEnd) => {
@@ -134,26 +195,78 @@ function AvailabilitiesTable({ authUser }) {
     setAvailabilities([...availabilities, newAvailability]);
   };
 
+  const handleAddInterviewer = (availabilityId) => {
+    console.log(`Adding authUser as interviewer: ${authUser.email}`);
+    const updatedAvailabilities = availabilities.map((a) =>
+      a.availabilityId === availabilityId
+        ? {
+            ...a,
+            interview: {
+              ...a.interview,
+              interviewers: [
+                ...a.interview.interviewers,
+                {
+                  firstName: authUser.given_name,
+                  lastName: authUser.family_name,
+                  email: authUser.email,
+                  role: getRole(authUser), // Determine the role dynamically
+                },
+              ],
+            },
+          }
+        : a
+    );
+    setAvailabilities(updatedAvailabilities);
+  };
+
   const handleRemoveAvailability = (availabilityId) => {
     console.log(`Removing availability with id: ${availabilityId}`);
     setAvailabilities(
       availabilities.filter((a) => a.availabilityId !== availabilityId)
     );
   };
 
+  const handleUnpublish = (availabilityId) => {
+    console.log(`Unpublishing availability with ID ${availabilityId}`);
+
+    const updatedAvailabilities = availabilities.map((availability) =>
+      availability.availabilityId === availabilityId
+        ? {
+            ...availability,
+            interview: {
+              ...availability.interview,
+              status: "draft", // Change the status to "draft"
+            },
+          }
+        : availability
+    );
+
+    setAvailabilities(updatedAvailabilities);
+  };
+
   const handleRemoveApplicant = (availabilityId) => {
     console.log(
       `Removing applicant from availability with id: ${availabilityId}`
     );
     const updatedAvailabilities = availabilities.map((a) =>
       a.availabilityId === availabilityId
-        ? { ...a, interview: { ...a.interview, applicant: null } }
+        ? {
+            ...a,
+            interview: {
+              ...a.interview,
+              applicant: null, // Remove the applicant
+              status: "published", // Update status to "published"
+            },
+          }
         : a
     );
     setAvailabilities(updatedAvailabilities);
   };
 
   const renderInterview = (interview) => {
+    const isAuthUserInterviewer = interview.interviewers.some(
+      (interviewer) => interviewer.email === authUser.email
+    );
     const getBackgroundColor = () => {
       if (interview.status === "booked") {
         return "#f8d7da"; // Red: Applicant present
@@ -207,9 +320,11 @@ function AvailabilitiesTable({ authUser }) {
           </div>
         )}
         <div>
-          <Button variant="info" onClick={() => {}}>
-            <FaInfoCircle size={20} color="#fff" />
-          </Button>
+          {interview.applicant && (
+            <Button variant="info" onClick={() => {}}>
+              <FaInfoCircle size={20} color="#fff" />
+            </Button>
+          )}
           <Button
             variant="danger"
             onClick={() => handleRemoveAvailability(interview.availabilityId)}
@@ -219,12 +334,27 @@ function AvailabilitiesTable({ authUser }) {
           <Button variant="info" onClick={() => {}}>
             <FaEdit size={20} color="#fff" />
           </Button>
-          <Button variant="danger" onClick={() => {}}>
-            <FaTrashAlt size={20} color="#fff" /> My availability
-          </Button>
-          <Button variant="success" onClick={() => {}}>
-            <FaPlus /> Join interview
-          </Button>
+          {isAuthUserInterviewer && interview.status === "draft" && (
+            <Button
+              variant="danger"
+              onClick={() =>
+                handleRemoveInterviewer(
+                  interview.availabilityId,
+                  authUser.email
+                )
+              }
+            >
+              <FaTrashAlt size={20} color="#fff" /> My availability
+            </Button>
+          )}
+          {!isAuthUserInterviewer && interview.status === "draft" && (
+            <Button
+              variant="success"
+              onClick={() => handleAddInterviewer(interview.availabilityId)}
+            >
+              <FaPlus /> Join interview
+            </Button>
+          )}
           {interview.applicant && (
             <>
               <Button
@@ -235,12 +365,21 @@ function AvailabilitiesTable({ authUser }) {
               </Button>
             </>
           )}
+
+          {interview.status === "published" && (
+            <Button
+              variant="warning"
+              onClick={() => handleUnpublish(interview.availabilityId)}
+            >
+              <FaUndo size={20} color="#fff" /> Unpublish
+            </Button>
+          )}
           {interview.status === "draft" && (
             <Button
               variant="success"
               onClick={() => handleMakePublic(interview.availabilityId)}
             >
-              <FaGlobe /> Make Public
+              <FaGlobe /> Publish
             </Button>
           )}
         </div>
@@ -267,6 +406,39 @@ function AvailabilitiesTable({ authUser }) {
     setAvailabilities(updatedAvailabilities); // Update the state
   };
 
+  const handleRemoveInterviewer = (availabilityId, email) => {
+    console.log(`Removing interviewer with email: ${(authUser, email)}`);
+
+    const updatedAvailabilities = availabilities
+      .map((availability) => {
+        if (availability.availabilityId === availabilityId) {
+          const updatedInterviewers =
+            availability.interview.interviewers.filter(
+              (interviewer) => interviewer.email !== email
+            );
+
+          // If no interviewers are left, return `null` to mark for removal
+          if (updatedInterviewers.length === 0) {
+            return null;
+          }
+
+          // Otherwise, return the updated availability
+          return {
+            ...availability,
+            interview: {
+              ...availability.interview,
+              interviewers: updatedInterviewers,
+            },
+          };
+        }
+
+        return availability; // Keep other availabilities unchanged
+      })
+      .filter((availability) => availability !== null); // Remove null entries
+
+    setAvailabilities(updatedAvailabilities);
+  };
+
   return (
     <Container fluid>
       <Row>