From fe2424779343400adba0007295d4773b2ba6eedb Mon Sep 17 00:00:00 2001 From: Jonah Paten Date: Fri, 25 Nov 2022 21:33:06 -0800 Subject: [PATCH 1/6] Bookingform gets data from db --- parkshark/package.json | 1 + .../src/components/Listings/bookingForm.js | 40 +++++++++++++++---- parkshark/src/components/SignIn/LoginPage.js | 2 +- parkshark/src/index_test.js | 4 +- 4 files changed, 37 insertions(+), 10 deletions(-) diff --git a/parkshark/package.json b/parkshark/package.json index 5eba365..b943332 100644 --- a/parkshark/package.json +++ b/parkshark/package.json @@ -2,6 +2,7 @@ "name": "parkshark", "version": "0.1.0", "private": true, + "proxy": "http://localhost:5000", "dependencies": { "@appbaseio/reactivesearch": "^3.42.1", "@emotion/core": "^11.0.0", diff --git a/parkshark/src/components/Listings/bookingForm.js b/parkshark/src/components/Listings/bookingForm.js index f7d5743..3275b74 100644 --- a/parkshark/src/components/Listings/bookingForm.js +++ b/parkshark/src/components/Listings/bookingForm.js @@ -1,10 +1,11 @@ -import {useState} from "react"; +import {useEffect, useState} from "react"; import Calendar from "react-calendar"; import './calendar.css' //import {createBooking} from "../../utils/mongodb"; import {Container, TextField} from "@mui/material"; //import {createBooking} from "../../utils/mongodb"; import Cookies from "js-cookie"; +import {useParams} from "react-router-dom"; const LISTING_NAME = "907 Westwood Blvd"; @@ -16,19 +17,37 @@ const LANDLORD_ID = 2; export function BookingForm({listingName}) { + let availability = []; + const [name, setName] = useState(listingName); const [arrivalDate, setArrivalDate] = useState(new Date()); const [arrivalTime, setArrivalTime] = useState(""); const [departureDate, setDepartureDate] = useState(new Date()); const [departureTime, setDepartureTime] = useState(""); const [notes, setNotes] = useState(""); - const [hasSubmitted, setHasSubmitted] = useState(""); + const [hasSubmitted, setHasSubmitted] = useState(false); const [hasBooked, setHasBooked] = useState(false); + const {id} = useParams(); + + useEffect(() => { + fetch( `/listings/${id}`) + .then((response) => response.json()) + .then((data) => { + for(let datePair in data.availability){ + let startDate = new Date(data.availability[datePair].start_time); + let endDate = new Date(data.availability[datePair].end_time); + availability.push([startDate, endDate]) + } + }); + console.log(availability); + + + }) const isAvailable = (dateInfo) => { - for (let i = 0; i < AVAILABLE.length; i++){ - if (AVAILABLE[i][0] <= dateInfo.date && dateInfo.date <= AVAILABLE[i][1]){ + for (let i = 0; i < availability.length; i++){ + if (availability[i][0] <= dateInfo.date && dateInfo.date <= availability[i][1]){ return 0; } } @@ -37,6 +56,11 @@ export function BookingForm({listingName}) { } const submitBooking = () => { + if(name === "" || isNaN(arrivalDate.getDay()) || isNaN(departureDate.getDay()) || ( arrivalDate > departureDate)){ + // BAD SUBMISSION + setHasSubmitted(true) + return; + } let splitArrivalTime = arrivalTime.split(":"); arrivalDate.setHours(parseInt(splitArrivalTime[0])); arrivalDate.setMinutes(parseInt(splitArrivalTime[1])); @@ -57,11 +81,13 @@ export function BookingForm({listingName}) { updatedAt: Date.now() }; - /*fetch("URL", { + fetch("/users", { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newBooking), - });//ADD ERROR RESPONSE*/ + }) + .then((response) => response.json()) + .then((data) => console.log(data)); // HANDLE ERRORS setHasBooked(true); } @@ -116,7 +142,7 @@ export function BookingForm({listingName}) { } else{ return( -
j +

Thanks for booking {listingName}! You have the spot from {new Intl.DateTimeFormat("en-US", {month: "long"}).format(arrivalDate)} {arrivalDate.getDay()} at {arrivalDate.toLocaleTimeString()} to {new Intl.DateTimeFormat("en-US", {month: "long"}).format(departureDate)} {departureDate.getDay()} at {departureDate.toLocaleTimeString()}

diff --git a/parkshark/src/components/SignIn/LoginPage.js b/parkshark/src/components/SignIn/LoginPage.js index 0f52850..ed681d4 100644 --- a/parkshark/src/components/SignIn/LoginPage.js +++ b/parkshark/src/components/SignIn/LoginPage.js @@ -125,7 +125,7 @@ function LoginPage() { - + diff --git a/parkshark/src/index_test.js b/parkshark/src/index_test.js index cb02266..14f8d46 100644 --- a/parkshark/src/index_test.js +++ b/parkshark/src/index_test.js @@ -10,7 +10,7 @@ const bookingRouter = require('./routers/booking') // require("./db/mongodb") // ensures mongoose connects to the db const app = express() -const port = process.env.PORT || 3000 +const port = process.env.PORT || 5000 app.use(express.json()) app.use(userRouter) @@ -27,6 +27,6 @@ geocode("UCLA", (error, {latitude, longitude, location} = {}) => { if (error) { return console.log(error) } - return console.log({latitude, longitude, location}) + return console.log({latitude, longitude, location}) }) */ \ No newline at end of file From 3a834375bda31d21e652271cfb467da8194dc8bb Mon Sep 17 00:00:00 2001 From: Jonah Paten Date: Sat, 26 Nov 2022 10:54:23 -0800 Subject: [PATCH 2/6] Fixed availability function --- .../src/components/Listings/bookingForm.js | 87 +++++++++---------- .../src/components/Listings/listingPage.js | 26 +++++- 2 files changed, 66 insertions(+), 47 deletions(-) diff --git a/parkshark/src/components/Listings/bookingForm.js b/parkshark/src/components/Listings/bookingForm.js index 3275b74..351318a 100644 --- a/parkshark/src/components/Listings/bookingForm.js +++ b/parkshark/src/components/Listings/bookingForm.js @@ -8,18 +8,17 @@ import Cookies from "js-cookie"; import {useParams} from "react-router-dom"; -const LISTING_NAME = "907 Westwood Blvd"; -const AVAILABLE = [[new Date(2022, 10, 3,), new Date(2022,10,4)]]; -const USER_ID = 10; +const USER_ID = "6361cd507f98f5c0249b249a"; const LISTING_ID = 2; const LANDLORD_ID = 2; -export function BookingForm({listingName}) { +export function BookingForm() { - let availability = []; - const [name, setName] = useState(listingName); + let [availability, setAvailability] = useState([]); + + const [name, setName] = useState(""); const [arrivalDate, setArrivalDate] = useState(new Date()); const [arrivalTime, setArrivalTime] = useState(""); const [departureDate, setDepartureDate] = useState(new Date()); @@ -29,25 +28,28 @@ export function BookingForm({listingName}) { const [hasBooked, setHasBooked] = useState(false); const {id} = useParams(); - - useEffect(() => { - fetch( `/listings/${id}`) - .then((response) => response.json()) - .then((data) => { - for(let datePair in data.availability){ - let startDate = new Date(data.availability[datePair].start_time); - let endDate = new Date(data.availability[datePair].end_time); - availability.push([startDate, endDate]) - } - }); + let [listingUserId, setListingUserId] = useState(""); + + useEffect(() => { + fetch(`/listings/${id}`) + .then((response) => response.json()) + .then((data) => { + const newAvailability = []; + for (let datePair in data.availability) { + let startDate = new Date(data.availability[datePair].start_time); + let endDate = new Date(data.availability[datePair].end_time); + newAvailability.push([startDate, endDate]) + } + setAvailability(newAvailability); + //setListingUserId(data.userid); + }); + }, []); + + + const isAvailable = ({activeStartDate, date, view}) => { console.log(availability); - - - }) - - const isAvailable = (dateInfo) => { for (let i = 0; i < availability.length; i++){ - if (availability[i][0] <= dateInfo.date && dateInfo.date <= availability[i][1]){ + if (availability[i][0] <= date && date <= availability[i][1]){ return 0; } } @@ -67,48 +69,43 @@ export function BookingForm({listingName}) { let splitDepartureTime = departureTime.split(":"); departureDate.setHours(parseInt(splitDepartureTime[0])); departureDate.setMinutes(parseInt(splitDepartureTime[1])); - console.log(arrivalDate); let newBooking = { - renter_id: Cookies.get("userID"), - listing_id: LISTING_ID, - rentee_id: LANDLORD_ID, - time_interval: { - starttime: arrivalDate, - endtime: departureDate, - }, - createdAt: Date.now(), - updatedAt: Date.now() + renter_id: id, + host_id: "636488383f7d443468218b01", + listing_id: id, + start_time: arrivalDate, + end_time: departureDate, }; - fetch("/users", { + fetch("/bookings", { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newBooking), }) .then((response) => response.json()) - .then((data) => console.log(data)); // HANDLE ERRORS + .then((data) => { + console.log(data); + setHasSubmitted(true); + setHasBooked(true); + + } + );// HANDLE ERRORS - setHasBooked(true); } if(!hasBooked) { return (
+

Let's book {listingUserId[0]}

-