NW6 | Fikret Ellek | React-Module-Project | Week-1 | Calculate Duration

src/components/SearchResults/SearchResults.jsx

@@ -1,9 +1,10 @@
 // SearchResults.jsx
-import React from 'react';
-import TableHead from './TableHead';
-import TableBody from './TableBody';
+import React from "react";
+import TableHead from "./TableHead";
+import TableBody from "./TableBody";
+import dayjs from "dayjs";
 
-const SearchResults = ({results}) => {
+const SearchResults = ({ results }) => {
   return (
     <table>
       <thead>
@@ -17,13 +18,16 @@ const SearchResults = ({results}) => {
             title={booking.title}
             firstName={booking.firstName}
             surName={booking.surname}
+            nights={dayjs(booking.checkOutDate)
+              .diff(dayjs(booking.checkInDate), "days")
+              .toString()
+              .padStart(2, "0")}
             email={booking.email}
           />
         ))}
       </tbody>
     </table>
   );
-}
+};
 
 export default SearchResults;
-

src/components/SearchResults/TableBody.jsx

@@ -1,15 +1,16 @@
-import React from 'react';
+import React from "react";
 
-const TableBody = ({ id, title, firstName, surName, email }) => {
+const TableBody = ({ id, title, firstName, surName, email, nights }) => {
   return (
     <tr>
       <td>{id}</td>
       <td>{title}</td>
       <td>{firstName}</td>
       <td>{surName}</td>
+      <td>{nights}</td>
       <td>{email}</td>
     </tr>
   );
-}
+};
 
 export default TableBody;

src/components/SearchResults/TableHead.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const TableHead = () => {
   return (
@@ -7,9 +7,10 @@ const TableHead = () => {
       <th>Title</th>
       <th>First Name</th>
       <th>Last Name</th>
+      <th>Nights</th>
       <th>Email</th>
     </tr>
   );
-}
+};
 
-export default TableHead;
+export default TableHead;