Add some error handling for booking form and update minor css

Author: ashton-huxtable

dist/index.html

@@ -12,8 +12,7 @@
   <header>
     <h1>The Overlook Hotel</h1>
     <nav>
-      <!-- <button>view availability</button> -->
-      <button class="nav-btn" id="changeUserBtn">logout</buttons>
+      <button class="nav-btn" id="changeUserBtn">Logout</buttons>
     </nav>
   </header>
   <section class="log-in-view" id="logInView">

src/apiCalls.js

@@ -44,7 +44,7 @@ const postData = (user, dateSelected, roomNum) => {
   })
   .then(checkForError)
   .then(() => loadPageInfo())
-  .catch(err => console.error(err))
+  .catch(domUpdates.displayCatchE)
 }
 
 const checkForError = (response) => {

src/css/_login.scss

@@ -19,6 +19,7 @@
   width: 30vw;
   height: 6vw;
   margin: 0.7rem;
+  font-size: 2vw;
 }
 
 .log-in-form{

src/css/_roomCards.scss

@@ -40,7 +40,9 @@ img {
 }
 
 .go-home{
+  width: 20vw;
   margin-left: 3vw;
+  font: 2vw;
 }
 
 .select-room{

src/domUpdates.js

@@ -88,6 +88,9 @@ const domUpdates = {
   },
 
   renderAvailableRooms(guest, bookings, rooms, hotel) {
+    const noRooms = document.getElementById('noRoomsError');
+    noRooms.innerText = ''
+
     availableCards.innerHTML = ''
     let date = dayjs(arrivalDate.value).format('YYYY/MM/DD');
     if(searchOptions.value === 'empty') {
@@ -148,7 +151,6 @@ const domUpdates = {
 
   displayNoRoomsError(){
     const noRooms = document.getElementById('noRoomsError');
-    console.log(noRooms)
     noRooms.innerText = 'Sorry there are no rooms available for your search requirements, please try again!'
 
   },
@@ -161,6 +163,16 @@ const domUpdates = {
   displaySuccess(){
     const successMsg = document.getElementById('successMsg');
     successMsg.innerText = 'Your booking was added successfully!'
+  },
+
+  displayBookingError(){
+    const successMsg = document.getElementById('successMsg');
+    successMsg.innerText = 'Something went wrong. Please try again later!'
+  },
+
+  displayLoginCatchError(){
+    const signInError = document.getElementById('signInError');
+    signInError.innerText = 'Sorry, something went wrong with the server. Please try again later!'
   }
 
 }

src/scripts.js

@@ -56,12 +56,10 @@ export function loadPageInfo(){
       bookingsData = response[2].bookings;
       instantiateRooms(roomsData);
       instantiateBookings(bookingsData)
-      // guest = new Guest(guestData[5]);
       hotel = new Hotel(rooms, bookings)
       domUpdates.displayGuestDashboard(guest, rooms, bookings, hotel)
     })
-    console.log(bookings, 'outside')
-
+    console.log(bookings)
 }
 
 function getUser(customerID){
@@ -71,6 +69,7 @@ function getUser(customerID){
       guest = new Guest(currentUser);
       loadPageInfo();
   })
+
 }
 
 function instantiateRooms(roomsData) {
@@ -99,7 +98,6 @@ function displayAvailableRooms() {
   event.preventDefault();
   domUpdates.renderAvailableRooms(guest, bookings, rooms, hotel);
   form.reset();
-
 }
 
 function displaySelectedRoom(event) {
@@ -122,7 +120,7 @@ function addNewBooking(event) {
 
     apiCalls.postData(user, dateSelected, roomNum)
     }
-    // setTimeout()
+    setTimeout(returnHome, 2000);
 
   }
 
@@ -153,6 +151,7 @@ function logIn(customerID){
   logInView.classList.add('hidden');
   mainPage.classList.remove('hidden');
   getUser(customerID)
+
 }
 
 function changeUser(){
@@ -161,5 +160,6 @@ function changeUser(){
 
 function returnHome(){
   domUpdates.goHome();
+  selectedRoom.classList.add('hide');
   loadPageInfo();
 }