Added the column to calculate the total nights of stay

Author: areebsattar

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

@@ -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>
     </>
   );