cancel and schedule dynamic

Author: ana-pagnoncelli

src/pages/schedule/ScheduleClassTable/ScheduleClassTableRowHour.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useContext } from "react";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
 import { Button } from "@mui/material";
 import { ScheduleHour } from "../types";
 import { tableInnerItemStyle } from "../styles";
+import { UserContext } from "../../../context/userContext";
 
 type ScheduleClassTableRowHourProps = {
   scheduleHour: ScheduleHour;
@@ -12,8 +13,16 @@ type ScheduleClassTableRowHourProps = {
 export function ScheduleClassTableRowHour({
   scheduleHour
 }: ScheduleClassTableRowHourProps) {
-  const hasFreeSpots = () => {
-    return scheduleHour.availableSpots > "0";
+  const { email } = useContext(UserContext);
+
+  const isUserInList = scheduleHour.usersList.includes(email);
+
+  const canSchedule = () => {
+    return scheduleHour.availableSpots > "0" && !isUserInList;
+  };
+
+  const canCancel = () => {
+    return isUserInList;
   };
 
   return (
@@ -24,12 +33,12 @@ export function ScheduleClassTableRowHour({
       <TableCell align='center'>{scheduleHour.numberOfSpots}</TableCell>
       <TableCell align='center'>{scheduleHour.availableSpots}</TableCell>
       <TableCell align='center'>
-        <Button variant='contained' color='success' disabled={!hasFreeSpots()}>
+        <Button variant='contained' color='success' disabled={!canSchedule()}>
           Schedule
         </Button>
       </TableCell>
       <TableCell align='center'>
-        <Button variant='outlined' color='error'>
+        <Button variant='outlined' color='error' disabled={!canCancel()}>
           Cancel
         </Button>
       </TableCell>

src/pages/schedule/types.tsx

@@ -6,6 +6,7 @@ export type ScheduleHour = {
   hour: string;
   numberOfSpots: string;
   availableSpots: string;
+  usersList: string[];
 };
 
 export type ScheduleDay = {