From 9704892760dbec9ae20e76604d43a6d73be109e3 Mon Sep 17 00:00:00 2001
From: Jonathan Loh <jonathanloh02@gmail.com>
Date: Thu, 15 Feb 2024 20:37:43 +0800
Subject: [PATCH] Remove dashboard page and make bookings page default

---
 .../booking-creation-finalize-view.tsx        |  4 +-
 .../bookings-tab/bookings-tab.tsx             | 18 ---------
 .../bookings-tab/index.ts                     |  1 -
 .../navigation-container.tsx                  |  3 --
 .../bookings-creation-page.tsx                |  4 +-
 .../src/pages/bookings-page/bookings-page.tsx | 35 +++++++++++------
 .../dashboard-page/dashboard-page.module.scss | 10 -----
 .../pages/dashboard-page/dashboard-page.tsx   | 39 -------------------
 frontend/src/pages/dashboard-page/index.ts    |  1 -
 frontend/src/routes/paths.ts                  |  3 +-
 frontend/src/routes/routes.tsx                |  6 ---
 11 files changed, 29 insertions(+), 95 deletions(-)
 delete mode 100644 frontend/src/components/navigation-container/bookings-tab/bookings-tab.tsx
 delete mode 100644 frontend/src/components/navigation-container/bookings-tab/index.ts
 delete mode 100644 frontend/src/pages/dashboard-page/dashboard-page.module.scss
 delete mode 100644 frontend/src/pages/dashboard-page/dashboard-page.tsx
 delete mode 100644 frontend/src/pages/dashboard-page/index.ts

diff --git a/frontend/src/components/booking-creation-finalize-view/booking-creation-finalize-view.tsx b/frontend/src/components/booking-creation-finalize-view/booking-creation-finalize-view.tsx
index d8850f2..e05b8d1 100644
--- a/frontend/src/components/booking-creation-finalize-view/booking-creation-finalize-view.tsx
+++ b/frontend/src/components/booking-creation-finalize-view/booking-creation-finalize-view.tsx
@@ -16,7 +16,7 @@ import {
   selectSelectedVenue,
   successBookingFormSubmissionAction,
 } from "../../redux/slices/booking-creation-slice";
-import { BOOKINGS_PATH } from "../../routes/paths";
+import { DASHBOARD_PATH } from "../../routes/paths";
 import { FieldType } from "../../types/venues";
 import { resolveApiError } from "../../utils/error-utils";
 import { displayDateTimeRange } from "../../utils/transform-utils";
@@ -208,7 +208,7 @@ function BookingCreationFinalizeView() {
             <Button
               color="blue"
               content="Done"
-              onClick={() => history.push(BOOKINGS_PATH)}
+              onClick={() => history.push(DASHBOARD_PATH)}
             />
           </HorizontalLayoutContainer>
         ) : (
diff --git a/frontend/src/components/navigation-container/bookings-tab/bookings-tab.tsx b/frontend/src/components/navigation-container/bookings-tab/bookings-tab.tsx
deleted file mode 100644
index 33b6527..0000000
--- a/frontend/src/components/navigation-container/bookings-tab/bookings-tab.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { BOOKINGS_PATH } from "../../../routes/paths";
-import TabItem from "../tab-item";
-
-type Props = {
-  onTabClick?: () => void;
-};
-
-function BookingsTab({ onTabClick }: Props) {
-  return (
-    <TabItem
-      label="Bookings"
-      redirectPath={BOOKINGS_PATH}
-      onTabClick={onTabClick}
-    />
-  );
-}
-
-export default BookingsTab;
diff --git a/frontend/src/components/navigation-container/bookings-tab/index.ts b/frontend/src/components/navigation-container/bookings-tab/index.ts
deleted file mode 100644
index 6135d4c..0000000
--- a/frontend/src/components/navigation-container/bookings-tab/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./bookings-tab";
diff --git a/frontend/src/components/navigation-container/navigation-container.tsx b/frontend/src/components/navigation-container/navigation-container.tsx
index 4142574..ff4b59c 100644
--- a/frontend/src/components/navigation-container/navigation-container.tsx
+++ b/frontend/src/components/navigation-container/navigation-container.tsx
@@ -7,7 +7,6 @@ import FullPageContainer from "../full-page-container";
 import PageBody from "../page-body";
 // import EventsTab from "./events-tab";
 import RoleRestrictedWrapper from "../role-restricted-wrapper";
-import BookingsTab from "./bookings-tab";
 import DashboardTab from "./dashboard-tab";
 import DesktopAboutTab from "./desktop-about-tab";
 import DesktopAdminTab from "./desktop-admin-tab";
@@ -47,7 +46,6 @@ function NavigationContainer({ children }: Props) {
       >
         <LogoTab onTabClick={closeSidebar} />
         <DashboardTab onTabClick={closeSidebar} />
-        <BookingsTab onTabClick={closeSidebar} />
         {/* <EventsTab onTabClick={closeSidebar} /> */}
         <MobileAboutTab onTabClick={closeSidebar} />
         <RoleRestrictedWrapper allowedRoles={[Role.Admin]}>
@@ -62,7 +60,6 @@ function NavigationContainer({ children }: Props) {
               <>
                 <LogoTab />
                 <DashboardTab />
-                <BookingsTab />
                 {/* <EventsTab /> */}
                 <DesktopAboutTab />
                 <RoleRestrictedWrapper allowedRoles={[Role.Admin]}>
diff --git a/frontend/src/pages/bookings-creation-page/bookings-creation-page.tsx b/frontend/src/pages/bookings-creation-page/bookings-creation-page.tsx
index d9f047c..d763073 100644
--- a/frontend/src/pages/bookings-creation-page/bookings-creation-page.tsx
+++ b/frontend/src/pages/bookings-creation-page/bookings-creation-page.tsx
@@ -3,7 +3,7 @@ import { Button, Icon } from "semantic-ui-react";
 
 import BookingCreationSection from "../../components/booking-creation-section";
 import useScrollToTop from "../../custom-hooks/use-scroll-to-top";
-import { BOOKINGS_PATH } from "../../routes/paths";
+import { DASHBOARD_PATH } from "../../routes/paths";
 
 function BookingsCreationPage() {
   useScrollToTop();
@@ -15,7 +15,7 @@ function BookingsCreationPage() {
         fluid
         color="red"
         as={Link}
-        to={BOOKINGS_PATH}
+        to={DASHBOARD_PATH}
       >
         <Button.Content hidden content="Cancel Booking Creation" />
         <Button.Content visible content={<Icon name="times" fitted />} />
diff --git a/frontend/src/pages/bookings-page/bookings-page.tsx b/frontend/src/pages/bookings-page/bookings-page.tsx
index 5f3a15d..3aa2142 100644
--- a/frontend/src/pages/bookings-page/bookings-page.tsx
+++ b/frontend/src/pages/bookings-page/bookings-page.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { Button, Icon, Popup } from "semantic-ui-react";
+import { useMediaQuery } from "react-responsive";
 
 import BookingUserCalendar from "../../components/booking-user-calendar";
 import BookingUserTable from "../../components/booking-user-table";
@@ -33,6 +34,10 @@ const OPTIONS: TabOption[] = [
 ];
 
 function BookingsPage() {
+  const { name } = useAppSelector(selectCurrentUserDisplayInfo) ?? {};
+
+  const isTabletOrLarger = useMediaQuery({ query: "(min-width: 768px)" });
+
   const { getBookings: _getBookings } = useGetBookings();
   const loading = useAppSelector(selectBookingsLoadingState);
   const { id: userId } =
@@ -59,17 +64,13 @@ function BookingsPage() {
 
   return (
     <>
-      <Button
-        animated="vertical"
-        fluid
-        color="teal"
-        as={Link}
-        to={BOOKINGS_CREATION_PATH}
-      >
-        <Button.Content hidden content="Create New Bookings" />
-        <Button.Content visible content={<Icon name="plus" fitted />} />
-      </Button>
-
+      <h2>Welcome, {name}!</h2>
+      <p>
+        <strong>Note:</strong> Treeckle is currently in development and we are
+        working hard towards making residential life better for you. For urgent
+        queries or if you have found any bugs, please contact us at
+        treeckle@googlegroups.com.
+      </p>
       <h1>
         <HorizontalLayoutContainer align="center">
           <span>My Bookings</span>
@@ -90,6 +91,18 @@ function BookingsPage() {
           />
         </HorizontalLayoutContainer>
       </h1>
+      <Button
+        animated="vertical"
+        fluid
+        color="teal"
+        as={Link}
+        to={BOOKINGS_CREATION_PATH}
+      >
+        <Button.Content hidden content="Create New Bookings" />
+        <Button.Content visible content={<Icon name="plus" fitted />} />
+      </Button>
+
+      {isTabletOrLarger ? <div /> : <br />}
 
       <Tab options={OPTIONS} showTitle={false} />
     </>
diff --git a/frontend/src/pages/dashboard-page/dashboard-page.module.scss b/frontend/src/pages/dashboard-page/dashboard-page.module.scss
deleted file mode 100644
index 23c35ad..0000000
--- a/frontend/src/pages/dashboard-page/dashboard-page.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use "../../base";
-
-.dashboardPage {
-  @include base.primary-color-link;
-
-  .timetable {
-    width: 100%;
-    height: 50rem;
-  }
-}
diff --git a/frontend/src/pages/dashboard-page/dashboard-page.tsx b/frontend/src/pages/dashboard-page/dashboard-page.tsx
deleted file mode 100644
index 772090c..0000000
--- a/frontend/src/pages/dashboard-page/dashboard-page.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import LinkifyTextViewer from "../../components/linkify-text-viewer";
-import useScrollToTop from "../../custom-hooks/use-scroll-to-top";
-import { useAppSelector } from "../../redux/hooks";
-import { selectCurrentUserDisplayInfo } from "../../redux/slices/current-user-slice";
-import styles from "./dashboard-page.module.scss";
-
-function DashboardPage() {
-  const { name } = useAppSelector(selectCurrentUserDisplayInfo) ?? {};
-
-  useScrollToTop();
-
-  return (
-    <div className={styles.dashboardPage}>
-      <LinkifyTextViewer>
-        <h2>Welcome, {name}!</h2>
-        <h3>
-          Head over to the &quot;Bookings&quot; tab to view/make bookings.
-        </h3>
-
-        {/* <h3>Visit the "Events" tab to see upcoming events!</h3> */}
-
-        <p>
-          <strong>Note:</strong> Treeckle is currently in development and we are
-          working hard towards making residential life better for you. For
-          urgent queries or if you have found any bugs, please contact us at
-          treeckle@googlegroups.com.
-        </p>
-        <br />
-        <iframe
-          title="NUSMods"
-          className={styles.timetable}
-          src="https://nusmods.com"
-        />
-      </LinkifyTextViewer>
-    </div>
-  );
-}
-
-export default DashboardPage;
diff --git a/frontend/src/pages/dashboard-page/index.ts b/frontend/src/pages/dashboard-page/index.ts
deleted file mode 100644
index c08e62e..0000000
--- a/frontend/src/pages/dashboard-page/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./dashboard-page";
diff --git a/frontend/src/routes/paths.ts b/frontend/src/routes/paths.ts
index b6c6e81..f2f678a 100644
--- a/frontend/src/routes/paths.ts
+++ b/frontend/src/routes/paths.ts
@@ -2,8 +2,7 @@ import { EVENT_ID, USER_ID, VENUE_ID } from "../constants";
 
 export const HOME_PATH = "/";
 export const DASHBOARD_PATH = "/dashboard";
-export const BOOKINGS_PATH = "/bookings";
-export const BOOKINGS_CREATION_PATH = "/bookings/create";
+export const BOOKINGS_CREATION_PATH = "/dashboard/create";
 export const EVENTS_PATH = "/events";
 export const EVENTS_SIGNED_UP_PATH = "/events/signedup";
 export const EVENTS_SUBSCRIPTIONS_PATH = "/events/subscriptions";
diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx
index 3f7e848..28c402d 100644
--- a/frontend/src/routes/routes.tsx
+++ b/frontend/src/routes/routes.tsx
@@ -29,7 +29,6 @@ import {
   ADMIN_VENUES_EDIT_PATH,
   ADMIN_VENUES_PATH,
   BOOKINGS_CREATION_PATH,
-  BOOKINGS_PATH,
   DASHBOARD_PATH,
   HOME_PATH,
   // AUTH_CALLBACK_PATH,
@@ -42,7 +41,6 @@ import RoleRestrictedRoute from "./role-restricted-route";
 import GaProvider from "../components/ga-provider";
 
 // Code splitting
-const DashboardPage = lazy(() => import("../pages/dashboard-page"));
 // const EventsPage = lazy(() => import("../pages/events-page"));
 const BookingsPage = lazy(() => import("../pages/bookings-page"));
 const AdminBookingsPage = lazy(() => import("../pages/admin-bookings-page"));
@@ -110,10 +108,6 @@ function Routes() {
               {/* Authenticated routes  */}
 
               <Route path={DASHBOARD_PATH} exact strict>
-                <DashboardPage />
-              </Route>
-
-              <Route path={BOOKINGS_PATH} exact strict>
                 <BookingsPage />
               </Route>