Training Reminders Cleanup (#1367)

Author: ZZwatermelon

client/src/pages/makerspace_page/ExpandableHeader.tsx

@@ -1,7 +1,6 @@
-import { Accordion, AccordionDetails, AccordionSummary, Alert, Button, Card, CardContent, IconButton, Link, Typography } from "@mui/material";
+import { Accordion, AccordionDetails, AccordionSummary, Button, Card, CardContent, IconButton, Link, Typography } from "@mui/material";
 import { ModuleStatus } from "../../common/TrainingModuleUtils";
 import { Box, Stack } from "@mui/system";
-import ModuleStatusRow from "../../common/ModuleStatusRow";
 import { isManagerFor } from "../../common/PrivilegeUtils";
 import EditIcon from "@mui/icons-material/Edit";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
@@ -15,9 +14,9 @@ import CurrentHours from "../../common/CurrentHours";
 import { useState } from "react";
 import { useIsMobile } from "../../common/IsMobileProvider";
 
-function HoursCard(hours: MakerspaceHours[]) {
+function HoursCard(hours: MakerspaceHours[], isMobile: boolean) {
   return (
-    <Card sx={{ width: "100%", height: "auto" }}>
+    <Card sx={{ width: isMobile ? "100%" : "30%", height: "auto" }}>
       <CardContent>
         <Typography variant="h6" textAlign={"center"}>
           Hours
@@ -28,9 +27,9 @@ function HoursCard(hours: MakerspaceHours[]) {
   );
 }
 
-function AboutCard({ location, description, docsLink }: FullMakerspace) {
+function AboutCard({ location, description, docsLink }: FullMakerspace, isMobile: boolean) {
   return (
-    <Card sx={{ width: "100%", height: "auto" }}>
+    <Card sx={{ width: isMobile ? "100%" : "70%", height: "auto" }}>
       <CardContent>
         <Typography variant="h6" textAlign={"center"}>
           About
@@ -45,35 +44,6 @@ function AboutCard({ location, description, docsLink }: FullMakerspace) {
   );
 }
 
-function MakerspaceTrainingCard(makerspaceTrainings: ModuleStatus[], user: any) {
-  return (
-    <Card sx={{ width: "100%", height: "auto" }}>
-      <CardContent>
-        <Typography variant="h6" textAlign={"center"}>
-          Makerspace Trainings
-        </Typography>
-
-        <Stack direction={"column"} spacing={2} alignItems={"center"}>
-          <Stack direction={"column"} spacing={2} alignItems={"center"}>
-            {user.visitor ? (
-              <Alert severity="info">Log in to view training progress.</Alert>
-            ) : makerspaceTrainings.some((ms) => ms.status !== "Passed" && ms.status !== "Expiring Soon") ? (
-              <Alert severity="error">
-                You must pass the makerspace trainings before you can use equipment in the makerspace!
-              </Alert>
-            ) : null}
-          </Stack>
-          <Stack direction={"column"} spacing={1}>
-            {makerspaceTrainings.map((ms: ModuleStatus) => (
-              <ModuleStatusRow ms={ms} />
-            ))}
-          </Stack>
-        </Stack>
-      </CardContent>
-    </Card>
-  );
-}
-
 export interface ExpandableHeaderProps {
   makerspace: FullMakerspace;
   makerspaceTrainings: ModuleStatus[];
@@ -87,9 +57,6 @@ function TitleRow(
   id: number,
   canEdit: boolean,
   hours: MakerspaceHours[],
-  hasIncomplete: boolean,
-  hasExpiring: boolean,
-  user: any
 ) {
   const title = <Typography variant={isMobile ? "h4" : "h3"}>{name}</Typography>;
 
@@ -109,17 +76,6 @@ function TitleRow(
       </IconButton >
   ) : null;
 
-  const alert = user.visitor ? (
-    // user is not logged in
-    <Alert severity="info">Log in to view training progress.</Alert>
-  ) : hasIncomplete ? (
-    // user is logged in with incomplete trainings
-    <Alert severity="error">You have incomplete makerspace trainings.</Alert>
-  ) : hasExpiring ? (
-    // user is logged in with expiring trainings
-    <Alert severity="warning">You have makerspace trainings that expire soon.</Alert>
-  ) : undefined;
-
   const hoursElement = <CurrentHours times={hours} fillLine={isMobile} showDay={false} />;
 
   const expandButton = (
@@ -151,7 +107,6 @@ function TitleRow(
       <Stack direction={"column"} width={"100%"} spacing={"5px"}>
         {titleAndEdit}
         {hoursElement}
-        {alert}
         {expandButton}
       </Stack>
     );
@@ -160,7 +115,6 @@ function TitleRow(
   return (
     <Stack direction={"row"} alignItems={"center"} justifyContent={"space-between"} spacing={"15px"} width={"100%"}>
       {titleAndEdit}
-      {alert}
       <Box flexGrow={1}></Box>
       {hoursElement}
       {expandButton}
@@ -173,11 +127,7 @@ export default function ExpandableHeader({ makerspace, makerspaceTrainings }: Ex
   const navigate = useNavigate();
   const isMobile = useIsMobile();
 
-  const hasIncompleteSpaceTrainings = makerspaceTrainings.some(
-    (ms) => ms.status !== "Passed" && ms.status !== "Expiring Soon"
-  );
-  const hasExpiringSoonSpaceTrainings = makerspaceTrainings.some((ms) => ms.status === "Expiring Soon");
-  const [expanded, setExpanded] = useState<boolean>(hasIncompleteSpaceTrainings || hasExpiringSoonSpaceTrainings);
+  const [expanded, setExpanded] = useState<boolean>(user.visitor);
 
   return (
     <Accordion expanded={expanded} sx={{ border: "none" }} elevation={0} onChange={() => setExpanded(!expanded)}>
@@ -190,18 +140,14 @@ export default function ExpandableHeader({ makerspace, makerspaceTrainings }: Ex
           makerspace.id,
           isManagerFor(user, Number(makerspace.id)),
           makerspace.hours,
-          hasIncompleteSpaceTrainings,
-          hasExpiringSoonSpaceTrainings,
-          user
         )}
       </AccordionSummary>
 
       <AccordionDetails>
         {makerspaceTrainings.length > 0 && (
           <Stack direction={isMobile ? "column" : "row"} spacing={isMobile ? 2 : 5} justifyContent="space-around" flexGrow={0}>
-            {AboutCard(makerspace)}
-            {HoursCard(makerspace.hours)}
-            {MakerspaceTrainingCard(makerspaceTrainings, user)}
+            {AboutCard(makerspace, isMobile)}
+            {HoursCard(makerspace.hours, isMobile)}
           </Stack>
         )}
       </AccordionDetails>

client/src/pages/makerspace_page/RoomSection.tsx

@@ -1,11 +1,9 @@
-import { Alert, Divider, Grid, Stack, Typography } from "@mui/material";
+import { Grid, Stack, Typography } from "@mui/material";
 import Room from "../../types/Room";
 import Equipment from "../../types/Equipment";
 import EquipmentCard from "../../common/EquipmentCard";
-import { useCurrentUser } from "../../common/CurrentUserProvider";
-import { ModuleStatus, moduleStatusMapper, TrainingModule } from "../../common/TrainingModuleUtils";
+import { TrainingModule } from "../../common/TrainingModuleUtils";
 import { useIsMobile } from "../../common/IsMobileProvider";
-import ModuleStatusRow from "../../common/ModuleStatusRow";
 
 interface RoomSectionProps {
   room: Room;
@@ -21,7 +19,6 @@ interface RoomSectionProps {
 }
 
 export default function RoomSection(props: RoomSectionProps) {
-  const currentUser = useCurrentUser();
   const isMobile = useIsMobile();
   const roomEquipment = props.room.equipment;
 
@@ -30,36 +27,13 @@ export default function RoomSection(props: RoomSectionProps) {
   const archivedEquipment = sortedEquipment.filter((equipment: Equipment) => equipment.archived);
   const liveEquipment = sortedEquipment.filter((equipment: Equipment) => !equipment.archived);
 
-  const roomTrainings = props.room.trainingModules.map(moduleStatusMapper(currentUser.passedModules, currentUser.trainingHolds));
-
   if (liveEquipment.length < 1) {
     return null;
   }
 
   return (
     <Stack padding={"10px 0"} spacing={1}>
       <Typography variant="h4" pl={"10px"}>{props.room.name}</Typography>
-      {
-        roomTrainings.length > 0 &&
-        <Stack direction={"column"} alignItems={isMobile ? "center" : "flex-start"} pl={"10px"} spacing={1}>
-          <Stack direction={isMobile ? "column" : "row"} spacing={2} alignItems={"center"}>
-            <Typography variant="h6">Area Trainings</Typography>
-            {
-              roomTrainings.some((ms) => (ms.status !== "Passed" && ms.status !== "Expiring Soon"))
-                ? <Alert severity="error">You must pass the area trainings before you can use equipment in the area!</Alert>
-                : null
-            }
-          </Stack>
-          <Stack direction={isMobile ? "column" : "row"} spacing={1} alignItems={"center"}>
-            {
-              roomTrainings.length > 0 && roomTrainings.map((ms: ModuleStatus) => (
-                <ModuleStatusRow ms={ms} />
-              ))
-            }
-          </Stack>
-          <Divider orientation="horizontal" variant="fullWidth" flexItem />
-        </Stack>
-      }
       <Grid container spacing={isMobile ? 2 : 3} justifyContent="center">
         {
           liveEquipment.map((equipment: Equipment) => (