Merge pull request #113 from UoaWDCC/uasc-92/UserBooking-BookingHistory

uasc-92/UserBooking-BookingHistory
UoaWDCC · Jan 7, 2024 · 0db4682 · 0db4682
2 parents 9a4563d + 70e94db
commit 0db4682
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 59 deletions.
diff --git a/frontend/firestore.rules b/frontend/firestore.rules
@@ -3,7 +3,7 @@ service cloud.firestore {
   match /databases/{database}/documents {
     match /{document=**} {
       allow read, write: if
-        request.time < timestamp.date(2023, 10, 31);
+        request.time < timestamp.date(2024, 1, 31);
     }
   }
 }
diff --git a/frontend/src/components/ProfileBookingHistory.js b/frontend/src/components/ProfileBookingHistory.js
@@ -1,64 +1,79 @@
 import React from "react"
-import { CardContent, Stack, Card, Typography } from "@mui/material"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+  Card,
+  CardContent,
+  Typography,
+  Stack,
+} from "@mui/material"
+
+const ProfileBookingHistory = ({ bookings }) => {
+  // Filter out bookings that have check-out dates in the past.
+  const pastBookings =
+    bookings?.filter(
+      (booking) => booking.data().check_out.toDate() < new Date()
+    ) || []
 
-function ProfileBookingHistory() {
-  const mockBookingHistoryData = [
-    {
-      check_in: "Jan 1st 2021",
-      check_out: "Jan 4th 2021",
-      total_days: 4,
-      booking_id: 0,
-    },
-    {
-      check_in: "Aug 21st 2021",
-      check_out: "Aug 22nd 2021",
-      total_days: 2,
-      booking_id: 1,
-    },
-    {
-      check_in: "Sep 25th 2022",
-      check_out: "Sep 26th 2022",
-      total_days: 2,
-      booking_id: 2,
-    },
-  ]
   return (
-    <div>
-      <Card
-        sx={{
-          boxShadow: "0px 8px 44px 0px rgba(0, 0, 0, 0.14)",
-          backgroundColor: "white",
-          borderRadius: "15px",
-        }}
-      >
-        <CardContent sx={{ padding: "36px" }}>
-          <Stack spacing={4}>
-            <Typography
-              variant="h5"
-              align="left"
-              color="#457CC3"
-              sx={{ fontWeight: "900" }}
-            >
-              Booking History{" "}
+    <Card
+      sx={{
+        boxShadow: "0px 8px 44px 0px rgba(0, 0, 0, 0.14)",
+        backgroundColor: "white",
+        borderRadius: "15px",
+      }}
+    >
+      <CardContent sx={{ padding: "36px" }}>
+        <Stack spacing={4}>
+          <Typography
+            variant="h5"
+            align="left"
+            color="#457CC3"
+            sx={{ fontWeight: "900" }}
+          >
+            Booking History
+          </Typography>
+          {pastBookings.length === 0 ? (
+            <Typography variant="body1" align="left">
+              {" "}
+              You have no past bookings.{" "}
             </Typography>
-            <Stack spacing={2}>
-              {mockBookingHistoryData.map((booking) => (
-                <Stack
-                  key={booking.booking_id}
-                  direction="row"
-                  justifyContent="space-between"
-                >
-                  <Typography variant="body1" align="left">
-                    {" "}
-                    {booking.check_in} - {booking.check_out}{" "}
-                  </Typography>
-                </Stack>
-              ))}
-            </Stack>
-          </Stack>
-        </CardContent>
-      </Card>
-    </div>
+          ) : (
+            <TableContainer component={Paper}>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableCell align="right">Check In</TableCell>
+                    <TableCell align="right">Check Out</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {pastBookings.map((booking) => (
+                    <TableRow key={booking.id}>
+                      <TableCell align="right">
+                        {new Date(
+                          booking.data().check_in.seconds * 1000
+                        ).toLocaleDateString("en-GB") || "N/A"}
+                      </TableCell>
+                      <TableCell align="right">
+                        {new Date(
+                          booking.data().check_out.seconds * 1000
+                        ).toLocaleDateString("en-GB") || "N/A"}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </Stack>
+      </CardContent>
+    </Card>
   )
 }
 

diff --git a/frontend/src/pages/Profile.js b/frontend/src/pages/Profile.js
@@ -80,7 +80,7 @@ export default function Profile() {
             </Typography>
             <ProfileCalendarCard bookings={bookings} />
             <ProfileCurrentBookings bookings={bookings} />
-            <ProfileBookingHistory />
+            <ProfileBookingHistory bookings={bookings} />
           </Stack>
         </Stack>
       </Stack>