Merge pull request #134 from TeamProductionSystem/MM88-Session-Signup…

…-Redesign added card confirm state
TeamProductionSystem · Jul 18, 2023 · 8130a76 · 8130a76
2 parents 896642a + f57dedf
commit 8130a76
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 88 deletions.
diff --git a/src/pages/SessionSignup/MentorCard.js b/src/pages/SessionSignup/MentorCard.js
@@ -10,6 +10,7 @@ import {
 } from "@mui/material";
 import { useState } from "react";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+import Preview from "./Preview";
 
 const theme = createTheme({
   components: {
@@ -23,90 +24,144 @@ const theme = createTheme({
   },
 });
 
-export default function MentorCard({ mentor, selectedDay, onSlotSelect }) {
+export default function MentorCard({
+  mentor,
+  selectedDay,
+  handleSlotSelect,
+  openSnackbar,
+  handleCloseSnackbar,
+  handleSubmitSession,
+}) {
   const [selected, setSelected] = useState(null);
 
   const handleButtonChange = (event, newSelectedAvailability) => {
     setSelected(newSelectedAvailability);
     if (newSelectedAvailability) {
-      onSlotSelect(newSelectedAvailability.availabilityPk, newSelectedAvailability.start, newSelectedAvailability.end)
+      handleSlotSelect(
+        newSelectedAvailability.availabilityPk,
+        newSelectedAvailability.start
+      );
     }
-
   };
 
   return (
     <ThemeProvider theme={theme}>
-      <Grid container alignItems="center" justifyContent="center">
-        <Card
-          sx={{ minWidth: 300, maxWidth: 375, minHeight: 300 }}
-          elevation={4}
+      <Grid container>
+        <Grid
+          item
+          style={{ padding: 0 }}
+          alignItems="center"
+          justifyContent="center"
         >
-          {mentor.profile_photo ? (
-            <CardMedia
-              sx={{
-                height: 300,
-              }}
-              image={mentor.profile_photo}
-              title="Profile Photo"
-            />
-          ) : (
-            <CardMedia
-              sx={{ height: 300 }}
-              image="null"
-              title="Profile Photo"
-            />
-          )}
-          <CardContent>
-            {mentor.first_name} {mentor.last_name}
-            <Typography>Bio: {mentor.about_me}</Typography>
-            {/* Pull in bio from database */}
-            <Typography>
+          <Card sx={{ display: 'flex', flexDirection: 'column', width: 260, height: 550 }}>
+            {mentor.profile_photo ? (
+              <CardMedia
+                sx={{
+                  height: 300,
+                }}
+                image={mentor.profile_photo}
+                title="Profile Photo"
+              />
+            ) : (
+              <CardMedia
+                sx={{ height: 200 }}
+                image="null"
+                title="Profile Photo"
+              />
+            )}
+            <CardContent sx={{ flexGrow: 1, overflowY: "auto"  }}>
+              <Typography gutterBottom variant="h5" component="div">
+                {mentor.first_name}
+              </Typography>
+              {/* Flip to preview if time is selected */}
+              {selected ? (
+                <Preview
+                  selected={selected}
+                  onCancel={() => setSelected(null)}
+                  openSnackbar={openSnackbar}
+                  handleCloseSnackbar={handleCloseSnackbar}
+                  handleSubmitSession={handleSubmitSession}
+                />
+              ) : (
+                <>
+                  <Typography sx={{ fontWeight: "bold" }} component="span">
+                    Bio:
+                  </Typography>
+                  <Typography component="span"> {mentor.about_me}</Typography>
+
+                  {/* Pull in bio from database */}
+                  {/* <Typography>
               Skills:{" "}
               {mentor.skills ? mentor.skills.join(", ") : "No skills listed"}
-            </Typography>
-            <Typography>Available Time Slots:</Typography>
-            <Box style={{maxHeight: '250px', overflowY: 'auto'}}> {/*Makes the time slots scrollable */}
-            <ToggleButtonGroup
-              sx={{
-                marginTop: "1rem",
-              }}
-              exclusive
-              value={selected}
-              orientation='vertical'
-              onChange={handleButtonChange}
-            >
-              {mentor.availabilities &&
-                mentor.availabilities
-                  .filter(availability => (
-                      new Date(availability.start).toDateString() ===
-                      new Date(selectedDay).toDateString()
-                    )
-                  ) 
-                  .map((availability) => (
-                    <ToggleButton
-                      key={availability.pk}
-                      value={availability}
-                      sx={{
-                        marginTop: "1rem",
-                        alignSelf: "center",
-                        width: "100%",
-                        border: "darkgrey solid",
-                      }}
+            </Typography> */}
+                  <Typography
+                    sx={{
+                      textAlign: "center",
+                      fontWeight: "bold",
+                      marginTop: ".5rem",
+                    }}
+                  >
+                    Available Time Slots:
+                  </Typography>
+                  <Box
+                    style={{
+                      height: "20rem",
+                      textAlign: "center",
+                    }}
+                  >
+                    {/*Makes the time slots scrollable */}
+                    <ToggleButtonGroup
+                      exclusive
+                      value={selected}
+                      orientation="vertical"
+                      onChange={handleButtonChange}
+                      sx={{paddingBottom: "2rem"}}
                     >
-                      <Typography
-                        sx={{
-                          cursor: "pointer",
-                        }}
-                      >
-                        {new Date(availability.start).toLocaleTimeString()} -{" "}
-                        {new Date(availability.end).toLocaleTimeString()}
-                      </Typography>
-                    </ToggleButton>
-                  ))}
-            </ToggleButtonGroup>
-            </Box>
-          </CardContent>
-        </Card>
+                      {mentor.availabilities &&
+                        mentor.availabilities
+                          .filter(
+                            (availability) =>
+                              new Date(availability.start).toDateString() ===
+                              new Date(selectedDay).toDateString()
+                          )
+                          .map((availability) => (
+                            <ToggleButton
+                              key={availability.pk}
+                              value={availability}
+                              sx={{
+                                marginTop: "1rem",
+                                alignSelf: "center",
+                                width: "100%",
+                                border: "darkgrey solid",
+
+                              }}
+                            >
+                              <Typography
+                                sx={{
+                                  cursor: "pointer",
+                                }}
+                              >
+                                {new Date(
+                                  availability.start
+                                ).toLocaleTimeString([], {
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                })}{" "}
+                                -{" "}
+                                {new Date(availability.end).toLocaleTimeString(
+                                  [],
+                                  { hour: "2-digit", minute: "2-digit" }
+                                )}
+                              </Typography>
+                            </ToggleButton>
+                          ))}
+                    </ToggleButtonGroup>
+                  </Box>
+                </>
+              )}
+            </CardContent>
+          </Card>
+        </Grid>
       </Grid>
     </ThemeProvider>
   );

diff --git a/src/pages/SessionSignup/Preview.jsx b/src/pages/SessionSignup/Preview.jsx
@@ -0,0 +1,50 @@
+// Component for previewing the session time prior to submitting the request.
+import SubmitButton from "./SubmitButton";
+import { Box, Button, Typography } from "@mui/material";
+
+const Preview = ({
+  selected,
+  onCancel,
+  openSnackbar,
+  handleCloseSnackbar,
+  handleSubmitSession,
+}) => {
+  return (
+    <div>
+      <Typography variant="h6" sx={{ textAlign: "center", minWidth: 200 }}>
+        Confirm Session?
+      </Typography>
+      <Typography
+        sx={{ marginTop: ".5rem", marginBottom: ".5rem", textAlign: "center" }}
+      >
+        {new Date(selected.start).toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        })}{" "}
+        -{" "}
+        {new Date(selected.end).toLocaleTimeString([], {
+          hour: "2-digit",
+          minute: "2-digit",
+        })}
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+        }}
+      >
+        <SubmitButton
+          handleSubmitSession={handleSubmitSession}
+          openSnackbar={openSnackbar}
+          handleCloseSnackbar={handleCloseSnackbar}
+        />
+        <Button variant="outlined" onClick={onCancel}>
+          Cancel
+        </Button>
+      </Box>
+    </div>
+  );
+};
+
+export default Preview;
diff --git a/src/pages/SessionSignup/SessionSignup.js b/src/pages/SessionSignup/SessionSignup.js
@@ -2,7 +2,6 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import { useState, useEffect } from "react";
 import MentorCard from "./MentorCard";
-import SubmitButton from "./SubmitButton";
 // import SessionForm from "./SessionForm";
 
 import {
@@ -32,7 +31,7 @@ export default function SessionSignup({ token }) {
     setTimeBlock(event.target.value);
   };
 
-  const handleSlotSelect = (availPk, start, end) => {
+  const handleSlotSelect = (availPk, start) => {
     setSelectedAvailabilityPk(availPk);
     setSelectedStartTime(start);
   };
@@ -325,36 +324,32 @@ export default function SessionSignup({ token }) {
         {/* Once a skill and day is selected view a list of mentors that have the skill selected and have an open avaliblity on the day they selected */}
         <Grid
           container
-          spacing={2}
           marginTop={"2rem"}
           justifyContent={"center"}
+          sx={{ paddingBottom: "5rem" }}
         >
           {filteredMentors.map((mentor) =>
             mentor.skills ? (
-              <Grid item xs={12} sm={6} md={4} key={mentor.pk}>
+              <Grid
+                item
+                xs={12}
+                sm={6}
+                md={3}
+                key={mentor.pk}
+                sx={{ padding: 1 }}
+              >
                 <MentorCard
                   mentor={mentor}
                   token={token}
                   selectedDay={selectedDay}
-                  onSlotSelect={handleSlotSelect}
+                  handleSlotSelect={handleSlotSelect}
+                  handleSubmitSession={handleSubmitSession}
                 />
               </Grid>
             ) : null
           )}
         </Grid>
       </Box>
-      {/* The Submit button. It's only be visible if a mentor is selected */}
-      <Box
-        sx={{ display: "flex", justifyContent: "center", marginTop: "1rem" }}
-      >
-        {filteredMentors.length > 0 && (
-          <SubmitButton
-            handleSubmitSession={handleSubmitSession}
-            openSnackbar={openSnackbar}
-            handleCloseSnackbar={handleCloseSnackbar}
-          />
-        )}
-      </Box>
 
       {/* <SessionForm /> */}
     </Box>

diff --git a/src/pages/SessionSignup/SubmitButton.jsx b/src/pages/SessionSignup/SubmitButton.jsx
@@ -9,7 +9,7 @@ const SubmitButton = ({ handleSubmitSession, openSnackbar, handleCloseSnackbar }
         onClick={handleSubmitSession}
         sx={{ justifyContent: "center", backgroundColor: "#0EC202"  }}
       >
-        Submit Session
+        Request
       </Button>
       <Snackbar
         open={openSnackbar}