From 07c439eee0ffc2554cfb022b66efc4185caf928a Mon Sep 17 00:00:00 2001
From: GitLukeW <gitlukew@gmail.com>
Date: Mon, 17 Jul 2023 20:47:04 -0400
Subject: [PATCH 1/4] added card confirm state

---
 src/pages/SessionSignup/MentorCard.js    | 195 +++++++++++++++--------
 src/pages/SessionSignup/Preview.jsx      |  50 ++++++
 src/pages/SessionSignup/SessionSignup.js |  24 ++-
 src/pages/SessionSignup/SubmitButton.jsx |   2 +-
 4 files changed, 186 insertions(+), 85 deletions(-)
 create mode 100644 src/pages/SessionSignup/Preview.jsx

diff --git a/src/pages/SessionSignup/MentorCard.js b/src/pages/SessionSignup/MentorCard.js
index 45532db..0e7de55 100644
--- 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,
+  onSlotSelect,
+  openSnackbar,
+  handleCloseSnackbar,
+  handleSubmitSession,
+}) {
   const [selected, setSelected] = useState(null);
 
   const handleButtonChange = (event, newSelectedAvailability) => {
     setSelected(newSelectedAvailability);
     if (newSelectedAvailability) {
-      onSlotSelect(newSelectedAvailability.availabilityPk, newSelectedAvailability.start, newSelectedAvailability.end)
+      onSlotSelect(
+        newSelectedAvailability.availabilityPk,
+        newSelectedAvailability.start,
+        newSelectedAvailability.end
+      );
     }
-
   };
 
   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={{ width: 260, maxHeight: 600 }}>
+            {mentor.profile_photo ? (
+              <CardMedia
+                sx={{
+                  height: 200,
+                }}
+                image={mentor.profile_photo}
+                title="Profile Photo"
+              />
+            ) : (
+              <CardMedia
+                sx={{ height: 300 }}
+                image="null"
+                title="Profile Photo"
+              />
+            )}
+            <CardContent sx={{ 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)}
+                  onSlotSelect={onSlotSelect}
+                  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={{
+                      maxHeight: "250px",
+                      textAlign: "center",
+                    }}
+                  >
+                    {/*Makes the time slots scrollable */}
+                    <ToggleButtonGroup
+                      exclusive
+                      value={selected}
+                      orientation="vertical"
+                      onChange={handleButtonChange}
                     >
-                      <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
new file mode 100644
index 0000000..5119520
--- /dev/null
+++ 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
index 1edd03f..4cbac6a 100644
--- a/src/pages/SessionSignup/SessionSignup.js
+++ b/src/pages/SessionSignup/SessionSignup.js
@@ -325,36 +325,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}
+                  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
index aeea4a1..710b76b 100644
--- 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}

From 16778f410d6be234af7a7b6199a4c63188a13bb5 Mon Sep 17 00:00:00 2001
From: GitLukeW <gitlukew@gmail.com>
Date: Tue, 18 Jul 2023 13:43:20 -0400
Subject: [PATCH 2/4] updated mentor card with padding at the bottom

---
 src/pages/SessionSignup/MentorCard.js    | 9 ++++++---
 src/pages/SessionSignup/SessionSignup.js | 1 -
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/SessionSignup/MentorCard.js b/src/pages/SessionSignup/MentorCard.js
index 0e7de55..066fcb6 100644
--- a/src/pages/SessionSignup/MentorCard.js
+++ b/src/pages/SessionSignup/MentorCard.js
@@ -54,7 +54,7 @@ export default function MentorCard({
           alignItems="center"
           justifyContent="center"
         >
-          <Card sx={{ width: 260, maxHeight: 600 }}>
+          <Card sx={{ display: 'flex', flexDirection: 'column', width: 260, maxHeight: 600 }}>
             {mentor.profile_photo ? (
               <CardMedia
                 sx={{
@@ -70,7 +70,7 @@ export default function MentorCard({
                 title="Profile Photo"
               />
             )}
-            <CardContent sx={{ overflowY: "auto" }}>
+            <CardContent sx={{ flexGrow: 1, overflowY: "auto"  }}>
               <Typography gutterBottom variant="h5" component="div">
                 {mentor.first_name}
               </Typography>
@@ -87,7 +87,7 @@ export default function MentorCard({
               ) : (
                 <>
                   <Typography sx={{ fontWeight: "bold" }} component="span">
-                    Bio: 
+                    Bio:
                   </Typography>
                   <Typography component="span"> {mentor.about_me}</Typography>
 
@@ -109,6 +109,7 @@ export default function MentorCard({
                     style={{
                       maxHeight: "250px",
                       textAlign: "center",
+                      overflowY: "auto",
                     }}
                   >
                     {/*Makes the time slots scrollable */}
@@ -117,6 +118,7 @@ export default function MentorCard({
                       value={selected}
                       orientation="vertical"
                       onChange={handleButtonChange}
+                      sx={{paddingBottom: "2rem"}}
                     >
                       {mentor.availabilities &&
                         mentor.availabilities
@@ -134,6 +136,7 @@ export default function MentorCard({
                                 alignSelf: "center",
                                 width: "100%",
                                 border: "darkgrey solid",
+                                
                               }}
                             >
                               <Typography
diff --git a/src/pages/SessionSignup/SessionSignup.js b/src/pages/SessionSignup/SessionSignup.js
index 4cbac6a..c7e7edb 100644
--- 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 {

From e0eb750acf39564e523bad8e9d2e2c207fc5dc47 Mon Sep 17 00:00:00 2001
From: GitLukeW <gitlukew@gmail.com>
Date: Tue, 18 Jul 2023 15:27:02 -0400
Subject: [PATCH 3/4] took out second over-flow

---
 src/pages/SessionSignup/MentorCard.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/SessionSignup/MentorCard.js b/src/pages/SessionSignup/MentorCard.js
index 066fcb6..db8aa39 100644
--- a/src/pages/SessionSignup/MentorCard.js
+++ b/src/pages/SessionSignup/MentorCard.js
@@ -109,7 +109,6 @@ export default function MentorCard({
                     style={{
                       maxHeight: "250px",
                       textAlign: "center",
-                      overflowY: "auto",
                     }}
                   >
                     {/*Makes the time slots scrollable */}

From f57dedf385f3ec586c9ff70c7002536ec9b324b5 Mon Sep 17 00:00:00 2001
From: GitLukeW <gitlukew@gmail.com>
Date: Tue, 18 Jul 2023 15:49:04 -0400
Subject: [PATCH 4/4] fixed the naming on slot select and tweaked css on the
 card

---
 src/pages/SessionSignup/MentorCard.js    | 16 +++++++---------
 src/pages/SessionSignup/SessionSignup.js |  4 ++--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/pages/SessionSignup/MentorCard.js b/src/pages/SessionSignup/MentorCard.js
index db8aa39..5e779ad 100644
--- a/src/pages/SessionSignup/MentorCard.js
+++ b/src/pages/SessionSignup/MentorCard.js
@@ -27,7 +27,7 @@ const theme = createTheme({
 export default function MentorCard({
   mentor,
   selectedDay,
-  onSlotSelect,
+  handleSlotSelect,
   openSnackbar,
   handleCloseSnackbar,
   handleSubmitSession,
@@ -37,10 +37,9 @@ export default function MentorCard({
   const handleButtonChange = (event, newSelectedAvailability) => {
     setSelected(newSelectedAvailability);
     if (newSelectedAvailability) {
-      onSlotSelect(
+      handleSlotSelect(
         newSelectedAvailability.availabilityPk,
-        newSelectedAvailability.start,
-        newSelectedAvailability.end
+        newSelectedAvailability.start
       );
     }
   };
@@ -54,18 +53,18 @@ export default function MentorCard({
           alignItems="center"
           justifyContent="center"
         >
-          <Card sx={{ display: 'flex', flexDirection: 'column', width: 260, maxHeight: 600 }}>
+          <Card sx={{ display: 'flex', flexDirection: 'column', width: 260, height: 550 }}>
             {mentor.profile_photo ? (
               <CardMedia
                 sx={{
-                  height: 200,
+                  height: 300,
                 }}
                 image={mentor.profile_photo}
                 title="Profile Photo"
               />
             ) : (
               <CardMedia
-                sx={{ height: 300 }}
+                sx={{ height: 200 }}
                 image="null"
                 title="Profile Photo"
               />
@@ -79,7 +78,6 @@ export default function MentorCard({
                 <Preview
                   selected={selected}
                   onCancel={() => setSelected(null)}
-                  onSlotSelect={onSlotSelect}
                   openSnackbar={openSnackbar}
                   handleCloseSnackbar={handleCloseSnackbar}
                   handleSubmitSession={handleSubmitSession}
@@ -107,7 +105,7 @@ export default function MentorCard({
                   </Typography>
                   <Box
                     style={{
-                      maxHeight: "250px",
+                      height: "20rem",
                       textAlign: "center",
                     }}
                   >
diff --git a/src/pages/SessionSignup/SessionSignup.js b/src/pages/SessionSignup/SessionSignup.js
index c7e7edb..8bad3c3 100644
--- a/src/pages/SessionSignup/SessionSignup.js
+++ b/src/pages/SessionSignup/SessionSignup.js
@@ -31,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);
   };
@@ -342,7 +342,7 @@ export default function SessionSignup({ token }) {
                   mentor={mentor}
                   token={token}
                   selectedDay={selectedDay}
-                  onSlotSelect={handleSlotSelect}
+                  handleSlotSelect={handleSlotSelect}
                   handleSubmitSession={handleSubmitSession}
                 />
               </Grid>