Skip to content

Commit

Permalink
Merge pull request #16 from jpaten/listingPage
Browse files Browse the repository at this point in the history 
Listing page
  • Loading branch information
@jpaten
jpaten authored Nov 27, 2022
2 parents c9ec8a8 + 66dfd99 commit f01f044
Show file tree
Hide file tree
Showing 5 changed files with 185 additions and 60 deletions.
1 change: 1 addition & 0 deletions parkshark/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
210 changes: 156 additions & 54 deletions parkshark/src/components/Listings/bookingForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,185 @@
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 USER_ID = "6361cd507f98f5c0249b249a";

const LISTING_NAME = "907 Westwood Blvd";
const AVAILABLE = [[new Date(2022, 10, 3,), new Date(2022,10,4)]];
export function BookingForm() {

const USER_ID = 10;
const LISTING_ID = 2;
const LANDLORD_ID = 2;

export function BookingForm({listingName}) {
const [availability, setAvailability] = useState([]);

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: listingId} = useParams();
const [bookingId, setBookingId] = useState("");
const [allListingBookings, setAllListingBookings] = useState([])

const isAvailable = (dateInfo) => {
for (let i = 0; i < AVAILABLE.length; i++){
if (AVAILABLE[i][0] <= dateInfo.date && dateInfo.date <= AVAILABLE[i][1]){
const [listingUserId, setListingUserId] = useState("");
const [hourlyPrice, setHourlyPrice] = useState(-1)
const [timeDelta, setTimeDelta] = useState(-1)

const dateOptions = {day: "2-digit", month: "long", year:"numeric"};
const timeOptions = { hour: "2-digit", minute: "2-digit" };


useEffect(() => {
// Get info about the current listing
fetch(`/listings/${listingId}`)
.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);
setHourlyPrice(data.price);
setAllListingBookings(data.bookings_id);
});
}, []);

useEffect( () => {
// Check if current user has a booking
fetch(`/users/${USER_ID}`)
.then((response) => response.json())
.then((userData) => {
console.log(userData.renter_bookings_id, allListingBookings);
for(let checkId in userData.renter_bookings_id){
if(allListingBookings.includes(userData.renter_bookings_id[checkId])){
setBookingId(checkId);
setHasBooked(true);
setHasSubmitted(true);
}
}
});
}, [allListingBookings]);


useEffect( () => {
// Update arrival date
if(arrivalTime !== ""){
let splitArrivalTime = arrivalTime.split(":");
arrivalDate.setHours(parseInt(splitArrivalTime[0]));
arrivalDate.setMinutes(parseInt(splitArrivalTime[1]));
arrivalDate.setSeconds(0);
}
setTimeDelta(departureDate.getTime()-arrivalDate.getTime()-330)
console.log("ArrivalDate", arrivalDate, timeDelta/1000)
}, [arrivalTime, arrivalDate]);

useEffect( () => {
// Update departure date
if(departureTime !== ""){
let splitDepartureTime = departureTime.split(":");
departureDate.setHours(parseInt(splitDepartureTime[0]));
departureDate.setMinutes(parseInt(splitDepartureTime[1]));
departureDate.setSeconds(0);
}
setTimeDelta(departureDate.getTime()-arrivalDate.getTime()-330)
console.log("DepartureDate", departureDate, timeDelta/1000)
}, [departureTime, departureDate]);



const isAvailable = ({activeStartDate, date, view}) => {
for (let i = 0; i < availability.length; i++){
if (availability[i][0] <= date && date <= availability[i][1]){
return 0;
}
}
return 1;

}

const isInError = (fieldBody) => hasSubmitted && (fieldBody === "");

const priceLine = () => {
if(timeDelta > 0 && arrivalTime !== "" && departureTime !== "") {
return (
<p>Price: ${Math.round(((timeDelta / 3600000.0 * hourlyPrice) + Number.EPSILON)*100)/100}</p>
);
} else {
return (
<p>Enter a valid set of dates to determine the price</p>
);
}
}
const submitBooking = () => {
let splitArrivalTime = arrivalTime.split(":");
arrivalDate.setHours(parseInt(splitArrivalTime[0]));
arrivalDate.setMinutes(parseInt(splitArrivalTime[1]));
let splitDepartureTime = departureTime.split(":");
departureDate.setHours(parseInt(splitDepartureTime[0]));
departureDate.setMinutes(parseInt(splitDepartureTime[1]));
console.log(arrivalDate);
if(isNaN(arrivalDate.getDay())
|| isNaN(departureDate.getDay())
|| arrivalTime === ""
|| departureTime === ""
|| ( arrivalDate > departureDate))
{
// BAD SUBMISSION
setHasSubmitted(true)
}
else {
console.log("hi!")

let newBooking = {
renter_id: USER_ID,
host_id: listingUserId,
listing_id: listingId,
start_time: arrivalDate,
end_time: departureDate,
};
console.log(JSON.stringify((newBooking)));
fetch("/bookings", {
method: "POST",
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(newBooking),
})
.then((response) => response.json())
.then((data) => {
console.log(data);
setBookingId(data._id);
console.log(bookingId);
setHasSubmitted(true);
setHasBooked(true);

}
);// HANDLE ERRORS

}
}

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()
};

/*fetch("URL", {
method: "POST",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newBooking),
});//ADD ERROR RESPONSE*/

setHasBooked(true);
const cancelBooking = () => {
fetch(`/bookings/${bookingId}`, {
method: "DELETE",
})
.then((response) => response.json())
.then((data) => {
console.log(data);
setHasBooked(false);
setHasSubmitted(false);
});
}

if(!hasBooked) {
return (
<div className={"booking-form-container"}>
<button onClick={submitBooking}>Hi</button>
<form onSubmit={submitBooking}>
<label>
<p>Your Name</p>
<TextField
name={"name"}
onChange={(event) => setName(event.target.value)}/>
</label>
<label>
<Container>
<p>Date</p>
<Calendar
onChange={(value) => {
setArrivalDate(value[0]);
setDepartureDate(value[0]);
setDepartureDate(value[1]);
}}
tileDisabled={isAvailable}
selectRange={true}
Expand All @@ -94,18 +191,20 @@ export function BookingForm({listingName}) {
<TextField
type={"time"}
name={"arrivalTime"}
error={isInError(arrivalTime)}
onChange={(event) => setArrivalTime(event.target.value)}/>
<p>Departure time</p>
<TextField
type={"time"}
name={"departureTime"}
error={isInError(departureTime)}
onChange={(event) => setDepartureTime(event.target.value)}/>
</label>
<label>
<p>Any notes?</p>
<TextField
name={"notes"}
onChange={(event) => setNotes(event.target.value)}/>
<p>Placeholder for submission error</p>
</label>
<label>
{priceLine()}
</label>
<label>
<button type={"submit"}>Book!</button>
Expand All @@ -116,9 +215,12 @@ export function BookingForm({listingName}) {
}
else{
return(
<div>j
<h1>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()}</h1>
<button onClick={() => setHasBooked(false)}>Cancel</button>
<div>
<h1>Thanks for booking! You have the spot from&nbsp;
{new Intl.DateTimeFormat("en-US", dateOptions).format(arrivalDate)} at {arrivalDate.toLocaleTimeString("en-US", timeOptions)}&nbsp;
to {new Intl.DateTimeFormat("en-US", dateOptions).format(departureDate)} at {departureDate.toLocaleTimeString("en-US", timeOptions)}
</h1>
<button onClick={cancelBooking}>Cancel</button>
</div>
);
}
Expand Down
26 changes: 24 additions & 2 deletions parkshark/src/components/Listings/listingPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,31 @@
import React from 'react';
import React, {useEffect, useState} from 'react';
import BookingForm from "./bookingForm";
import {useParams} from "react-router-dom";

export function ListingPage() {

const { id } = useParams();
let apiData = {}
const availability = [];
let validatedId = "";


useEffect(() => {
fetch( `/listings/${id}`)
.then((response) => response.json())
.then((data) => {
for(const i in data){
apiData[i] = data[i];
}
});
}, []);


console.log(apiData);
return (
<BookingForm/>
<div>
<BookingForm/>
</div>

);
}
Expand Down
4 changes: 2 additions & 2 deletions parkshark/src/components/SignIn/LoginPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function LoginPage() {
renter_bookings_id: [],
listings_id: [],
}
/*fetch("URL", {
/*fetch("/users", {
method: "POST",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(userObject),
Expand Down Expand Up @@ -125,7 +125,7 @@ function LoginPage() {
<Route path="/Home" component={Home} />
<Route path="/Login" component={LoginPage} />
<Route path="/Listings" component={Listings} />
<Route path="/Listing" component={ListingPage}/>
<Route path="/Listing/:id" component={ListingPage}/>
<Route path="/About" component={About} />
<Route path="/Profile" component={Profile} />
</Switch>
Expand Down
4 changes: 2 additions & 2 deletions parkshark/src/index_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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})
})
*/

0 comments on commit f01f044

Please sign in to comment.