Merge pull request #35 from areebsattar/FeatureCalculateDuration

NW-6 | AREEB-SATTAR | REACT| React Module Project - FeatureCalculateDuration | WEEK-1

Author: Sabella-8

package-lock.json

@@ -14,6 +14,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package.json

@@ -1,17 +1,17 @@
 import Bookings from "@/components/Bookings/Bookings.jsx";
 import "./App.scss";
-
-import Deck from "../Deck/Deck";
-
 import Footer from "../Footer/Footer";
 import Deck from "../Deck/Deck";
 import AppHeader from "../AppHeader/AppHeader";
+
 const App = () => (
   <div className="app">
-    <header className="app__header">
-      <h1 className="app__heading">CYF Hotel</h1>
-    </header>
-    <AppHeader />
+    <div className="header">
+      <header className="app__header">
+        <h1 className="app__heading">CYF Hotel</h1>
+      </header>
+      <AppHeader />
+    </div>
     <Bookings />
 
     <Deck />

src/components/App/App.jsx

@@ -14,6 +14,7 @@
 
 .app__heading {
   margin: 0;
+  margin-top: 30%;
 }
 
 .footer {

src/components/App/App.scss

@@ -1,4 +1,4 @@
 import Logo from "@/assets/spa-logo.png";
 import "./AppHeader.scss";
-const AppHeader = () => <img src={Logo}></img>;
+const AppHeader = () => <img className="LogoImg" src={Logo}></img>;
 export default AppHeader;

src/components/AppHeader/AppHeader.jsx

@@ -7,3 +7,16 @@
     max-width: 100px;
   }
 }
+
+.header {
+  margin-right: 35%;
+  margin-left: 35%;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-evenly;
+}
+
+.LogoImg {
+  height: 150px;
+  width: 150px;
+}

src/components/AppHeader/AppHeader.scss

@@ -2,6 +2,8 @@ import "./SearchResult.scss";
 import FakeBookings from "@/data/fakeBookings.json";
 import TableBody from "./TableBody";
 import TableHead from "./TableHead";
+import dayjs from "dayjs";
+
 const Bookings = FakeBookings;
 function SearchResult() {
   return (
@@ -10,21 +12,28 @@ function SearchResult() {
         <TableHead />
       </thead>
       <tbody>
-        {Bookings.map((book) => (
-          <>
-            <TableBody
-              key={book.id}
-              id={book.id}
-              title={book.title}
-              firstName={book.firstName}
-              surName={book.surname}
-              email={book.email}
-              roomId={book.roomId}
-              checkInDate={book.checkInDate}
-              checkOutDate={book.checkOutDate}
-            />
-          </>
-        ))}
+        {Bookings.map((book) => {
+          const stayNightsTotal = dayjs(book.checkOutDate).diff(
+            dayjs(book.checkInDate),
+            "day"
+          );
+          return (
+            <>
+              <TableBody
+                key={book.id}
+                id={book.id}
+                title={book.title}
+                firstName={book.firstName}
+                surName={book.surname}
+                email={book.email}
+                roomId={book.roomId}
+                checkInDate={book.checkInDate}
+                checkOutDate={book.checkOutDate}
+                stayNights={stayNightsTotal}
+              />
+            </>
+          );
+        })}
       </tbody>
     </table>
   );

src/components/SearchResult/SearchResult.jsx

@@ -11,6 +11,7 @@ function TableBody(props) {
     roomId,
     checkInDate,
     checkOutDate,
+    stayNights,
   } = props;
   return (
     <>
@@ -23,6 +24,7 @@ function TableBody(props) {
         <td>{roomId}</td>
         <td>{checkInDate}</td>
         <td>{checkOutDate}</td>
+        <td>{stayNights}</td>
       </tr>
     </>
   );

src/components/SearchResult/TableBody.jsx

@@ -10,6 +10,7 @@ function TableHead() {
         <th>Room id</th>
         <th>Check in date</th>
         <th>Check out date</th>
+        <th>Total Nights to Stay</th>
       </tr>
     </>
   );