Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added card confirm state #134

Merged
merged 4 commits into from
Jul 18, 2023
Merged

added card confirm state #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
07c439e
added card confirm state
GitLukeW Jul 18, 2023
16778f4
updated mentor card with padding at the bottom
GitLukeW Jul 18, 2023
e0eb750
took out second over-flow
GitLukeW Jul 18, 2023
f57dedf
fixed the naming on slot select and tweaked css on the card
GitLukeW Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 125 additions & 70 deletions src/pages/SessionSignup/MentorCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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>
);
Expand Down
50 changes: 50 additions & 0 deletions src/pages/SessionSignup/Preview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
29 changes: 12 additions & 17 deletions src/pages/SessionSignup/SessionSignup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
};
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/SessionSignup/SubmitButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const SubmitButton = ({ handleSubmitSession, openSnackbar, handleCloseSnackbar }
onClick={handleSubmitSession}
sx={{ justifyContent: "center", backgroundColor: "#0EC202" }}
>
Submit Session
Request
</Button>
<Snackbar
open={openSnackbar}
Expand Down
Loading