From b6fab9d48df48d645ec1f46144c64f278822049f Mon Sep 17 00:00:00 2001
From: Qudus <qudusopeyemi95@gmail.com>
Date: Thu, 4 Feb 2021 10:05:22 -0500
Subject: [PATCH 1/3] select days from drop down

---
 .../components/profile/ProfileRequestForm.js  | 139 +++++++++++++-----
 client/src/pages/Profile.js                   |   6 +-
 2 files changed, 111 insertions(+), 34 deletions(-)

diff --git a/client/src/components/profile/ProfileRequestForm.js b/client/src/components/profile/ProfileRequestForm.js
index 207ae63..90db7e8 100644
--- a/client/src/components/profile/ProfileRequestForm.js
+++ b/client/src/components/profile/ProfileRequestForm.js
@@ -8,12 +8,17 @@ import {
   TextField,
   Typography,
   makeStyles,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
 } from "@material-ui/core";
 import {
   AuthDispatchContext,
   AuthStateContext,
 } from "../../context/AuthContext";
 import { createRequest } from "../../actions/request";
+import { eachHourOfInterval, format } from "date-fns";
 
 const useStyles = makeStyles(() => ({
   centerContent: {
@@ -40,7 +45,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-function ProfileRequestForm({ sitterId }) {
+function ProfileRequestForm({ sitterId, sitterPrice, sitterAvailability }) {
   const classes = useStyles();
 
   // Get dispatch method and state from auth context
@@ -52,20 +57,10 @@ function ProfileRequestForm({ sitterId }) {
   const todayFormatted = today.toISOString().split("T")[0];
 
   const [requestSending, setRequestSending] = useState(false);
-  const [startDate, setStartDate] = useState(todayFormatted);
-  const [endDate, setEndDate] = useState(todayFormatted);
-  const [startTime, setStartTime] = useState(
-    moment()
-      .add(moment().utcOffset() + 30, "minutes")
-      .startOf("hour")
-      .format("HH:mm")
-  );
-  const [endTime, setEndTime] = useState(
-    moment()
-      .add(moment().utcOffset() + 150, "minutes")
-      .startOf("hour")
-      .format("HH:mm")
-  );
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [startTime, setStartTime] = useState("");
+  const [endTime, setEndTime] = useState("");
   const [requestFormData, setRequestFormData] = useState({
     sitterId: sitterId,
     ownerId: user._id,
@@ -80,6 +75,9 @@ function ProfileRequestForm({ sitterId }) {
       .startOf("hour")
       .format(),
   });
+  const [startHourInterval, setStartHourInterval] = useState([]);
+  const [endHourInterval, seEndhourInterval] = useState([]);
+  const [index, setIndex] = useState();
 
   // Changes 'Send Request' button from spinning to normal when alert pops ups
   useEffect(() => {
@@ -180,11 +178,11 @@ function ProfileRequestForm({ sitterId }) {
 
   return (
     <>
-      <Typography variant="h4" className={classes.hourlyRateHeading}>
-        $14/hr
+      <Typography variant='h4' className={classes.hourlyRateHeading}>
+        ${sitterPrice}/hr
       </Typography>
       <Rating
-        name="simple-controlled"
+        name='simple-controlled'
         value={3}
         readOnly
         className={classes.ratingsAlignment}
@@ -194,22 +192,58 @@ function ProfileRequestForm({ sitterId }) {
           <Typography className={classes.labelStyles}>DROP OFF</Typography>
         </Box>
         <Box className={classes.inputGap}>
+          <FormControl variant='outlined'>
+            <InputLabel id='dropoff-date'>date</InputLabel>
+            <Select
+              labelId='demo-simple-select-outlined-label'
+              id='demo-simple-select-outlined'
+              value={startDate}
+              onChange={(e) => handleStartDateChange(e)}
+              label='Drop Off Date'
+            >
+              <MenuItem value=''>
+                <em>None</em>
+              </MenuItem>
+              {sitterAvailability.map((date, key) => (
+                <MenuItem
+                  key={key}
+                  value={format(new Date(date.start), "yyyy-MM-dd")}
+                >
+                  {format(new Date(date.start), "dd MMMM, yyyy")}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <FormControl variant='outlined'>
+            <InputLabel id='dropoff-date'>time</InputLabel>
+            <Select
+              labelId='demo-simple-select-outlined-label'
+              id='demo-simple-select-outlined'
+              value={startTime}
+              onChange={(e) => handleStartTimeChange(e)}
+              label='Drop Off Time'
+            >
+              <MenuItem value=''>
+                <em>None</em>
+              </MenuItem>
+            </Select>
+          </FormControl>
           <TextField
             InputProps={{
               inputProps: { min: todayFormatted },
             }}
-            type="date"
+            type='date'
             value={startDate}
             onChange={(e) => handleStartDateChange(e)}
-            variant="outlined"
+            variant='outlined'
           ></TextField>
           <TextField
             inputProps={{
               step: 300, // 5 min
             }}
-            type="time"
+            type='time'
             value={startTime}
-            variant="outlined"
+            variant='outlined'
             className={classes.textField + " " + classes.timeInputWidth}
             onChange={(e) => {
               handleStartTimeChange(e);
@@ -222,23 +256,62 @@ function ProfileRequestForm({ sitterId }) {
           <Typography className={classes.labelStyles}>PICK UP</Typography>
         </Box>
         <Box className={classes.endDateAlign}>
+          <FormControl variant='outlined'>
+            <InputLabel id='pickup-date'>date</InputLabel>
+            <Select
+              labelId='demo-simple-select-outlined-label'
+              id='demo-simple-select-outlined'
+              value={endDate}
+              onChange={(e) => handleEndDateChange(e)}
+              label='Age'
+            >
+              <MenuItem value=''>
+                <em>None</em>
+              </MenuItem>
+              {sitterAvailability.map((date) => (
+                <MenuItem
+                  key={date._id}
+                  value={format(new Date(date.start), "yyyy-MM-dd")}
+                >
+                  {format(new Date(date.start), "dd MMMM, yyyy")}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <FormControl variant='outlined'>
+            <InputLabel id='pickup-date'>time</InputLabel>
+            <Select
+              labelId='demo-simple-select-outlined-label'
+              id='demo-simple-select-outlined'
+              value={endTime}
+              onChange={(e) => handleEndDateChange(e)}
+              label='endTime'
+            >
+              <MenuItem value=''>
+                <em>None</em>
+              </MenuItem>
+              <MenuItem value={10}>Ten</MenuItem>
+              <MenuItem value={20}>Twenty</MenuItem>
+              <MenuItem value={30}>Thirty</MenuItem>
+            </Select>
+          </FormControl>
           <TextField
             InputProps={{
               inputProps: { min: startDate },
             }}
-            type="date"
-            variant="outlined"
-            value={endDate}
-            onChange={(e) => handleEndDateChange(e)}
+            type='date'
+            variant='outlined'
+            value={endTime}
+            onChange={(e) => handleEndTimeChange(e)}
           ></TextField>
           <TextField
             inputProps={{
               step: 300, // 5 min
             }}
-            type="time"
+            type='time'
             value={endTime}
             className={classes.textField + " " + classes.timeInputWidth}
-            variant="outlined"
+            variant='outlined'
             onChange={(e) => {
               handleEndTimeChange(e);
             }}
@@ -246,15 +319,15 @@ function ProfileRequestForm({ sitterId }) {
         </Box>
       </Box>
       <Button
-        color="primary"
-        variant="contained"
-        type="submit"
-        size="large"
+        color='primary'
+        variant='contained'
+        type='submit'
+        size='large'
         className={classes.buttonStyles}
         onClick={(e) => handleSubmit(e)}
       >
         {requestSending ? (
-          <CircularProgress color="white" size={20} />
+          <CircularProgress color='white' size={20} />
         ) : (
           `SEND REQUEST`
         )}
diff --git a/client/src/pages/Profile.js b/client/src/pages/Profile.js
index 239f542..8d5db7d 100644
--- a/client/src/pages/Profile.js
+++ b/client/src/pages/Profile.js
@@ -97,7 +97,11 @@ function Profile({ match }) {
                 classes.requestBreakpoints + " " + classes.centerContent
               }
             >
-              <ProfileRequestForm sitterId={match.params.user_id} />
+              <ProfileRequestForm
+                sitterId={match.params.user_id}
+                sitterPrice={profileDetails.price}
+                sitterAvailability={profileDetails.availability}
+              />
             </Paper>
           )}
         </>

From 0a91a6714d8e32d7eea8086e7567c76c269a6271 Mon Sep 17 00:00:00 2001
From: Qudus <qudusopeyemi95@gmail.com>
Date: Thu, 4 Feb 2021 12:00:20 -0500
Subject: [PATCH 2/3] Reset profileRequestForm.js

---
 .../components/profile/ProfileRequestForm.js  | 109 +++---------------
 1 file changed, 18 insertions(+), 91 deletions(-)

diff --git a/client/src/components/profile/ProfileRequestForm.js b/client/src/components/profile/ProfileRequestForm.js
index 90db7e8..627e7e5 100644
--- a/client/src/components/profile/ProfileRequestForm.js
+++ b/client/src/components/profile/ProfileRequestForm.js
@@ -8,17 +8,12 @@ import {
   TextField,
   Typography,
   makeStyles,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
 } from "@material-ui/core";
 import {
   AuthDispatchContext,
   AuthStateContext,
 } from "../../context/AuthContext";
 import { createRequest } from "../../actions/request";
-import { eachHourOfInterval, format } from "date-fns";
 
 const useStyles = makeStyles(() => ({
   centerContent: {
@@ -45,7 +40,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-function ProfileRequestForm({ sitterId, sitterPrice, sitterAvailability }) {
+function ProfileRequestForm({ sitterId }) {
   const classes = useStyles();
 
   // Get dispatch method and state from auth context
@@ -57,10 +52,20 @@ function ProfileRequestForm({ sitterId, sitterPrice, sitterAvailability }) {
   const todayFormatted = today.toISOString().split("T")[0];
 
   const [requestSending, setRequestSending] = useState(false);
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
-  const [startTime, setStartTime] = useState("");
-  const [endTime, setEndTime] = useState("");
+  const [startDate, setStartDate] = useState(todayFormatted);
+  const [endDate, setEndDate] = useState(todayFormatted);
+  const [startTime, setStartTime] = useState(
+    moment()
+      .add(moment().utcOffset() + 30, "minutes")
+      .startOf("hour")
+      .format("HH:mm")
+  );
+  const [endTime, setEndTime] = useState(
+    moment()
+      .add(moment().utcOffset() + 150, "minutes")
+      .startOf("hour")
+      .format("HH:mm")
+  );
   const [requestFormData, setRequestFormData] = useState({
     sitterId: sitterId,
     ownerId: user._id,
@@ -75,9 +80,6 @@ function ProfileRequestForm({ sitterId, sitterPrice, sitterAvailability }) {
       .startOf("hour")
       .format(),
   });
-  const [startHourInterval, setStartHourInterval] = useState([]);
-  const [endHourInterval, seEndhourInterval] = useState([]);
-  const [index, setIndex] = useState();
 
   // Changes 'Send Request' button from spinning to normal when alert pops ups
   useEffect(() => {
@@ -179,7 +181,7 @@ function ProfileRequestForm({ sitterId, sitterPrice, sitterAvailability }) {
   return (
     <>
       <Typography variant='h4' className={classes.hourlyRateHeading}>
-        ${sitterPrice}/hr
+        $14/hr
       </Typography>
       <Rating
         name='simple-controlled'
@@ -192,42 +194,6 @@ function ProfileRequestForm({ sitterId, sitterPrice, sitterAvailability }) {
           <Typography className={classes.labelStyles}>DROP OFF</Typography>
         </Box>
         <Box className={classes.inputGap}>
-          <FormControl variant='outlined'>
-            <InputLabel id='dropoff-date'>date</InputLabel>
-            <Select
-              labelId='demo-simple-select-outlined-label'
-              id='demo-simple-select-outlined'
-              value={startDate}
-              onChange={(e) => handleStartDateChange(e)}
-              label='Drop Off Date'
-            >
-              <MenuItem value=''>
-                <em>None</em>
-              </MenuItem>
-              {sitterAvailability.map((date, key) => (
-                <MenuItem
-                  key={key}
-                  value={format(new Date(date.start), "yyyy-MM-dd")}
-                >
-                  {format(new Date(date.start), "dd MMMM, yyyy")}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          <FormControl variant='outlined'>
-            <InputLabel id='dropoff-date'>time</InputLabel>
-            <Select
-              labelId='demo-simple-select-outlined-label'
-              id='demo-simple-select-outlined'
-              value={startTime}
-              onChange={(e) => handleStartTimeChange(e)}
-              label='Drop Off Time'
-            >
-              <MenuItem value=''>
-                <em>None</em>
-              </MenuItem>
-            </Select>
-          </FormControl>
           <TextField
             InputProps={{
               inputProps: { min: todayFormatted },
@@ -256,53 +222,14 @@ function ProfileRequestForm({ sitterId, sitterPrice, sitterAvailability }) {
           <Typography className={classes.labelStyles}>PICK UP</Typography>
         </Box>
         <Box className={classes.endDateAlign}>
-          <FormControl variant='outlined'>
-            <InputLabel id='pickup-date'>date</InputLabel>
-            <Select
-              labelId='demo-simple-select-outlined-label'
-              id='demo-simple-select-outlined'
-              value={endDate}
-              onChange={(e) => handleEndDateChange(e)}
-              label='Age'
-            >
-              <MenuItem value=''>
-                <em>None</em>
-              </MenuItem>
-              {sitterAvailability.map((date) => (
-                <MenuItem
-                  key={date._id}
-                  value={format(new Date(date.start), "yyyy-MM-dd")}
-                >
-                  {format(new Date(date.start), "dd MMMM, yyyy")}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-          <FormControl variant='outlined'>
-            <InputLabel id='pickup-date'>time</InputLabel>
-            <Select
-              labelId='demo-simple-select-outlined-label'
-              id='demo-simple-select-outlined'
-              value={endTime}
-              onChange={(e) => handleEndDateChange(e)}
-              label='endTime'
-            >
-              <MenuItem value=''>
-                <em>None</em>
-              </MenuItem>
-              <MenuItem value={10}>Ten</MenuItem>
-              <MenuItem value={20}>Twenty</MenuItem>
-              <MenuItem value={30}>Thirty</MenuItem>
-            </Select>
-          </FormControl>
           <TextField
             InputProps={{
               inputProps: { min: startDate },
             }}
             type='date'
             variant='outlined'
-            value={endTime}
-            onChange={(e) => handleEndTimeChange(e)}
+            value={endDate}
+            onChange={(e) => handleEndDateChange(e)}
           ></TextField>
           <TextField
             inputProps={{

From 6cfbb6cdfe654da402ad789981115583b6dc42a3 Mon Sep 17 00:00:00 2001
From: Qudus <qudusopeyemi95@gmail.com>
Date: Fri, 5 Feb 2021 07:36:18 -0500
Subject: [PATCH 3/3] Update ProfileRequestForm.js

---
 .../components/profile/ProfileRequestForm.js  | 63 +++++++++++++++++--
 1 file changed, 58 insertions(+), 5 deletions(-)

diff --git a/client/src/components/profile/ProfileRequestForm.js b/client/src/components/profile/ProfileRequestForm.js
index 627e7e5..f11cb6b 100644
--- a/client/src/components/profile/ProfileRequestForm.js
+++ b/client/src/components/profile/ProfileRequestForm.js
@@ -8,12 +8,17 @@ import {
   TextField,
   Typography,
   makeStyles,
+  FormControl,
+  Select,
+  InputLabel,
+  MenuItem,
 } from "@material-ui/core";
 import {
   AuthDispatchContext,
   AuthStateContext,
 } from "../../context/AuthContext";
 import { createRequest } from "../../actions/request";
+import { format, isBefore, isSameDay, parseISO } from "date-fns";
 
 const useStyles = makeStyles(() => ({
   centerContent: {
@@ -40,7 +45,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-function ProfileRequestForm({ sitterId }) {
+function ProfileRequestForm({ sitterId, sitterPrice, sitterAvailability }) {
   const classes = useStyles();
 
   // Get dispatch method and state from auth context
@@ -88,6 +93,9 @@ function ProfileRequestForm({ sitterId }) {
     }
   }, [alerts]);
 
+  const checkDate = (date) => {
+    return isSameDay(parseISO(date.start), parseISO(startDate));
+  };
   // Handle change in 'Drop Off' (start) date input
   const handleStartDateChange = (e) => {
     const formattedStartDate = moment(
@@ -95,7 +103,7 @@ function ProfileRequestForm({ sitterId }) {
     ).format();
 
     setStartDate(e.target.value);
-
+    const result = sitterAvailability.find(checkDate);
     // If start date is later than end date, change end date to same day as start date.
     if (e.target.value > endDate) {
       const formattedEndDate = moment(
@@ -175,13 +183,14 @@ function ProfileRequestForm({ sitterId }) {
   const handleSubmit = (e) => {
     setRequestSending(true);
     e.preventDefault();
+    console.log(requestFormData);
     createRequest(dispatch, requestFormData);
   };
 
   return (
     <>
       <Typography variant='h4' className={classes.hourlyRateHeading}>
-        $14/hr
+        ${sitterPrice}/hr
       </Typography>
       <Rating
         name='simple-controlled'
@@ -194,6 +203,28 @@ function ProfileRequestForm({ sitterId }) {
           <Typography className={classes.labelStyles}>DROP OFF</Typography>
         </Box>
         <Box className={classes.inputGap}>
+          <FormControl variant='outlined'>
+            <InputLabel htmlFor='start-date'>Date</InputLabel>
+            <Select
+              value={startDate}
+              onChange={(e) => handleStartDateChange(e)}
+              label='Date'
+            >
+              {sitterAvailability.map(
+                (date) =>
+                  !isBefore(parseISO(date.end), new Date()) && (
+                    <MenuItem
+                      key={date._id}
+                      value={format(parseISO(date.start), "yyyy-MM-dd")}
+                    >
+                      {" "}
+                      {format(parseISO(date.start), "MMMM dd, yyyy")}
+                    </MenuItem>
+                  )
+              )}
+            </Select>
+          </FormControl>
+          {/*
           <TextField
             InputProps={{
               inputProps: { min: todayFormatted },
@@ -202,7 +233,7 @@ function ProfileRequestForm({ sitterId }) {
             value={startDate}
             onChange={(e) => handleStartDateChange(e)}
             variant='outlined'
-          ></TextField>
+          ></TextField>*/}
           <TextField
             inputProps={{
               step: 300, // 5 min
@@ -222,6 +253,28 @@ function ProfileRequestForm({ sitterId }) {
           <Typography className={classes.labelStyles}>PICK UP</Typography>
         </Box>
         <Box className={classes.endDateAlign}>
+          <FormControl variant='outlined'>
+            <InputLabel htmlFor='end-date'>Date</InputLabel>
+            <Select
+              value={endDate}
+              onChange={(e) => handleEndDateChange(e)}
+              label='Date'
+            >
+              {sitterAvailability.map(
+                (date) =>
+                  !isBefore(parseISO(date.end), new Date()) && (
+                    <MenuItem
+                      key={date._id}
+                      value={format(parseISO(date.start), "yyyy-MM-dd")}
+                    >
+                      {" "}
+                      {format(parseISO(date.start), "MMMM dd, yyyy")}
+                    </MenuItem>
+                  )
+              )}
+            </Select>
+          </FormControl>
+          {/*
           <TextField
             InputProps={{
               inputProps: { min: startDate },
@@ -230,7 +283,7 @@ function ProfileRequestForm({ sitterId }) {
             variant='outlined'
             value={endDate}
             onChange={(e) => handleEndDateChange(e)}
-          ></TextField>
+          ></TextField>*/}
           <TextField
             inputProps={{
               step: 300, // 5 min