From 90efe1e1cba5dd97040b41cc4e7ee0a3fdca32e5 Mon Sep 17 00:00:00 2001 From: Michael Singh Date: Sun, 13 Dec 2020 14:44:35 -0500 Subject: [PATCH 1/3] * create state variable for holding returned availability array for rendering timeslots upon change in date * mapped the returned array to render in the timeslot selection area of the scheduler or returns "not available message" if there is no availability * request query params takes in day, month, year, duration, and user for freebusy query to work correctly --- client/src/pages/scheduling/Scheduler.js | 38 +++++++++++++++++------- server/controllers/availability.js | 19 ++++++------ 2 files changed, 36 insertions(+), 21 deletions(-) diff --git a/client/src/pages/scheduling/Scheduler.js b/client/src/pages/scheduling/Scheduler.js index 2658552..f6fe13f 100644 --- a/client/src/pages/scheduling/Scheduler.js +++ b/client/src/pages/scheduling/Scheduler.js @@ -1,5 +1,4 @@ import React, { useState, useEffect } from "react"; -import { Link } from "react-router-dom"; import axios from "axios"; import Container from "../../components/Layout/Container"; import { Box, Grid, Button, Divider, Typography, Paper, useMediaQuery } from "@material-ui/core"; @@ -24,6 +23,9 @@ const useStyles = makeStyles((theme) => ({ '& > *': { marginTop: theme.spacing(3), } + }, + noAvail: { + marginTop: theme.spacing(3) } })); @@ -31,9 +33,7 @@ const Scheduler = (props) => { const theme = useTheme(); const matches = useMediaQuery(theme.breakpoints.down("sm")); - // console.log(props.match.params.event_type); const eventTypeID = props.match.params.event_type; - const [eventType, setEventType] = useState(null); // Retrieve Event Type Information from params @@ -45,6 +45,16 @@ const Scheduler = (props) => { const classes = useStyles(); const [selectedDay, setSelectedDay] = useState(null); + const [avail, setAvail] = useState([]); + + const handleDaySelection = async (props) => { + console.log(props); + setSelectedDay(props); + const { day, month, year } = props; + await axios.get(`http://localhost:3001/api/avail/freebusy?user=${eventType.user.id}&day=${day}&month=${month - 1}&year=${year}&duration=${eventType.duration}`) + .then(response => setAvail(response.data)); + console.log(avail); + }; return ( @@ -52,7 +62,6 @@ const Scheduler = (props) => { @@ -80,7 +89,7 @@ const Scheduler = (props) => { @@ -88,12 +97,19 @@ const Scheduler = (props) => { {selectedDay && <> {new Date(selectedDay.year, selectedDay.month - 1, selectedDay.day).toLocaleString("default", { month: "long" })} {selectedDay.day}, {selectedDay.year} -
- - - - -
+ { avail.length ? +
+ {avail.map((timeSlot, index) => { + return( + + )})} +
+ : +
+ Sorry, all spots are booked today. + Please try another day. +
+ } } diff --git a/server/controllers/availability.js b/server/controllers/availability.js index fe66ec8..65acb47 100644 --- a/server/controllers/availability.js +++ b/server/controllers/availability.js @@ -4,9 +4,11 @@ const { google } = require("googleapis"); // @desc FreeBusy // @route GET /freebusy?date=143213434&meetingTypeID=df34234fgdg235 -availabilitiesRouter.get("/freebusy", (request, response) => { - // request.query.meetingTypeID - // request.query.date // must be in datetime format +availabilitiesRouter.get("/freebusy", async (request, response) => { + const { day, month, year } = request.query; + const duration = Number(request.query.duration); + const user = await User.findById(request.query.user); + const oauth2Client = new google.auth.OAuth2({ clientID: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, @@ -14,15 +16,12 @@ availabilitiesRouter.get("/freebusy", (request, response) => { }); oauth2Client.credentials = { - access_token: request.user.accessToken, - refresh_token: request.user.refreshToken + access_token: user.accessToken, + refresh_token: user.refreshToken }; - const availStartTime = new Date(2020, 11, 12, 9, 0, 0, 0); - const availEndTime = new Date(2020, 11, 12, 17, 0, 0, 0); - - // Duration in minutes - const duration = 60; + const availStartTime = new Date(year, month, day, 9, 0, 0, 0); + const availEndTime = new Date(year, month, day, 17, 0, 0, 0); const calendar = google.calendar({ version: "v3", auth: oauth2Client }); From e6831d04cad52f85b65ad4f0c92c7dba89ba455a Mon Sep 17 00:00:00 2001 From: Michael Singh Date: Sun, 13 Dec 2020 15:00:34 -0500 Subject: [PATCH 2/3] overflowY creates scroll bar for timeslot picker when slots fill a height larger than 300px --- client/src/pages/scheduling/Scheduler.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/src/pages/scheduling/Scheduler.js b/client/src/pages/scheduling/Scheduler.js index f6fe13f..b1a105e 100644 --- a/client/src/pages/scheduling/Scheduler.js +++ b/client/src/pages/scheduling/Scheduler.js @@ -20,6 +20,8 @@ const useStyles = makeStyles((theme) => ({ marginTop: theme.spacing(4) }, timePicker: { + height: "300px", + overflowY: "auto", '& > *': { marginTop: theme.spacing(3), } From be55b36354c4b1e1323db8d4b00028a40035cdfb Mon Sep 17 00:00:00 2001 From: Michael Singh Date: Sun, 13 Dec 2020 15:20:15 -0500 Subject: [PATCH 3/3] selectedday on calendar defaults to tomorrows date upon render --- client/src/pages/scheduling/Scheduler.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/client/src/pages/scheduling/Scheduler.js b/client/src/pages/scheduling/Scheduler.js index b1a105e..b3692f2 100644 --- a/client/src/pages/scheduling/Scheduler.js +++ b/client/src/pages/scheduling/Scheduler.js @@ -44,18 +44,23 @@ const Scheduler = (props) => { .then(response => setEventType(response.data)); }, []); + const todaysDate = new Date(); + const tomorrowsDate = new Date(todaysDate); + tomorrowsDate.setDate(tomorrowsDate.getDate() + 1); const classes = useStyles(); - const [selectedDay, setSelectedDay] = useState(null); + const [selectedDay, setSelectedDay] = useState({ + day: tomorrowsDate.getDate(), + month: tomorrowsDate.getMonth() + 1, + year: tomorrowsDate.getFullYear() + }); const [avail, setAvail] = useState([]); const handleDaySelection = async (props) => { - console.log(props); setSelectedDay(props); const { day, month, year } = props; await axios.get(`http://localhost:3001/api/avail/freebusy?user=${eventType.user.id}&day=${day}&month=${month - 1}&year=${year}&duration=${eventType.duration}`) .then(response => setAvail(response.data)); - console.log(avail); }; return (