feat: add favouriting rooms functionality (#808)

* fix: fix merge conflict issues

* feat: add useBookmarks.ts hook file and functions

* fix: pass new bookmarks value to StorageEvent and convert ServerBookmarkSnapshot to use stable primitive value

* fix: bookmarks resolve sync loop issue and persist bookmark state via. snapshot caching correctly

* style: linting

* style: clean up bookmarks code

* style: move bookmark button to right side of UI next to booking button and add aria-label for accessibility

* style: linting

* style: alter bookmark button to be heart rather than save icon

* fix: add back 'View on Map' button to room page

* feat: rewrite useBookmarks hook to reflect style in clientLayout (StorageEvent/useSyncExternalStore)

* fix: cache parsed bookmarks array to prevent duplicate array contents with new array reference

* style: linting

* test: add BookmarkButton test cases

* refactor: rename Bookmarks functionality to Favourites

---------

Co-authored-by: Cormac <cormac@LAPTOP-0C8K460R.localdomain>

Author: Cfla446

frontend/__tests__/FavouriteButton.test.tsx

@@ -0,0 +1,118 @@
+import "@testing-library/jest-dom";
+
+import store from "@frontend/redux/store";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useParams, useRouter } from "next/navigation";
+import { Provider } from "react-redux";
+
+import Page from "../app/room/[room]/page";
+
+jest.mock("next/navigation", () => ({
+  useParams: jest.fn(),
+  useRouter: jest.fn(),
+}));
+
+jest.mock("@mui/material", () => ({
+  ...jest.requireActual("@mui/material"),
+  useMediaQuery: jest.fn().mockReturnValue(false),
+}));
+
+jest.mock("../hooks/useBuilding", () => ({
+  __esModule: true,
+  default: (buildingId: string) => {
+    return {
+      building: { id: buildingId, name: "Ainsworth" },
+      error: null,
+    };
+  },
+}));
+
+jest.mock("../hooks/useRoom", () => ({
+  __esModule: true,
+  default: (roomId: string) => {
+    return {
+      room: {
+        name: "Ainsworth 101",
+        id: "K-J17-101",
+        abbr: "Ainswth101",
+        capacity: 50,
+        usage: "TUSM",
+        school: " ",
+      },
+      error: null,
+    };
+  },
+}));
+
+describe("Favourite button", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+
+    (useParams as jest.Mock).mockReturnValue({ room: "K-J17-101" });
+    (useRouter as jest.Mock).mockReturnValue({ back: jest.fn() });
+  });
+
+  const renderRoomPage = () => {
+    return render(
+      <Provider store={store}>
+        <Page />
+      </Provider>
+    );
+  };
+
+  test("shows add favourite button when the room is not favourited", () => {
+    renderRoomPage();
+
+    const favouriteIcon = screen.getByRole("button", {
+      name: /Add as favourite/i,
+    });
+    expect(favouriteIcon).toBeInTheDocument();
+  });
+
+  test("shows remove favourite button when the room is not favourited", () => {
+    renderRoomPage();
+
+    fireEvent.click(screen.getByRole("button", { name: /Add as favourite/i })); // Trigger button click event.
+
+    const removeFavouriteIcon = screen.getByRole("button", {
+      name: /Remove as favourite/i,
+    });
+    expect(removeFavouriteIcon).toBeInTheDocument();
+  });
+
+  test("adds the room to localStorage when clicked", () => {
+    renderRoomPage();
+
+    fireEvent.click(screen.getByRole("button", { name: /Add as favourite/i }));
+
+    const storedFavourites = JSON.parse(
+      window.localStorage.getItem("favourite") ?? "[]"
+    );
+    expect(storedFavourites).toContain("K-J17-101");
+
+    const removefavouriteIcon = screen.getByRole("button", {
+      name: /Remove as favourite/i,
+    });
+    expect(removefavouriteIcon).toBeInTheDocument();
+  });
+
+  test("removes the room from localStorage when clicked again", () => {
+    window.localStorage.setItem("favourite", JSON.stringify(["K-J17-101"]));
+
+    renderRoomPage();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /Remove as favourite/i })
+    );
+
+    const storedFavourites = JSON.parse(
+      window.localStorage.getItem("favourite") ?? "[]"
+    );
+    expect(storedFavourites).not.toContain("K-J17-101");
+
+    const favouriteIcon = screen.getByRole("button", {
+      name: /Add as favourite/i,
+    });
+    expect(favouriteIcon).toBeInTheDocument();
+  });
+});

frontend/app/room/[room]/page.tsx

@@ -4,6 +4,8 @@ import translateRoomUsage from "@common/roomUsages";
 import getSchoolDetails from "@common/schools";
 import type { Booking, Room } from "@common/types";
 import CloseIcon from "@mui/icons-material/Close";
+import FavouriteIcon from "@mui/icons-material/Favorite";
+import FavouriteBorderIcon from "@mui/icons-material/FavoriteBorder";
 import {
   Dialog,
   DialogContent,
@@ -32,6 +34,7 @@ import RoomBackButton from "../../../components/RoomBackButton";
 import ViewOnMapButton from "../../../components/ViewOnMapButton";
 import useBookings from "../../../hooks/useBookings";
 import useBuilding from "../../../hooks/useBuilding";
+import useFavourites from "../../../hooks/useFavourites";
 import useRoom from "../../../hooks/useRoom";
 import room_photos from "../../../public/room-photos.json";
 import { getBuildingIdFromRoomId } from "../../../utils/utils";
@@ -65,6 +68,7 @@ export default function Page() {
   const { room } = useRoom(roomParam);
   const [campus, grid] = room ? room.id.split("-") : ["", ""];
   const { building } = useBuilding(`${campus}-${grid}`);
+  const { isFavourite, toggleFavourite } = useFavourites();
 
   return (
     <Container maxWidth="xl">
@@ -82,7 +86,12 @@ export default function Page() {
             paddingRight: { xs: 3, md: 15 },
           }}
         >
-          <RoomPageHeader room={room} buildingName={building.name} />
+          <RoomPageHeader
+            room={room}
+            buildingName={building.name}
+            favourite={isFavourite(room.id)}
+            onToggleFavourite={() => toggleFavourite(room.id)}
+          />
           <RoomImage
             src={
               roomParam in room_photos
@@ -101,10 +110,12 @@ export default function Page() {
   );
 }
 
-const RoomPageHeader: React.FC<{ room: Room; buildingName: string }> = ({
-  room,
-  buildingName,
-}) => {
+const RoomPageHeader: React.FC<{
+  room: Room;
+  buildingName: string;
+  favourite: boolean;
+  onToggleFavourite: () => void;
+}> = ({ room, buildingName, favourite, onToggleFavourite }) => {
   const [openDialog, setDialog] = useState(false);
 
   const toggleDialog = () => {
@@ -183,11 +194,23 @@ const RoomPageHeader: React.FC<{ room: Room; buildingName: string }> = ({
           <Typography variant="h4" sx={{ fontWeight: 550 }}>
             {room.name}
           </Typography>
-          <Stack
-            direction={{ xs: "column", sm: "row" }}
-            sx={{ justifyContent: "space-between" }}
-          >
+
+          <Stack direction="row" spacing={1} align-items="center">
+            <IconButton
+              onClick={onToggleFavourite}
+              aria-label={
+                favourite ? "Remove as favourite" : "Add as favourite"
+              }
+            >
+              {favourite ? (
+                <FavouriteIcon color="primary" />
+              ) : (
+                <FavouriteBorderIcon />
+              )}
+            </IconButton>
+
             <ViewOnMapButton buildingId={buildingId} />
+
             <BookingButton
               school={room.school}
               usage={room.usage}

frontend/hooks/useFavourites.ts

@@ -0,0 +1,73 @@
+"use client";
+
+import { useCallback, useSyncExternalStore } from "react";
+
+// Caches last parsed favourites to avoid re-parsing identical arrays (which would create a duplicate array with different reference).
+// JS compares by reference rather than contents of array.
+let lastStoredFavourites: string | null = null;
+let lastParsedFavourites: string[] = [];
+
+const subscribeToFavourites = (callback: () => void) => {
+  const handleStorage = (event: StorageEvent) => {
+    if (event.key === "favourite") {
+      callback();
+    }
+  };
+
+  window.addEventListener("storage", handleStorage);
+  return () => {
+    window.removeEventListener("storage", handleStorage);
+  };
+};
+
+const getClientFavouriteSnapshot = (): string[] => {
+  const storedFavourites = window.localStorage.getItem("favourite");
+
+  // Ensuring JSON.parse does not create a new array each call.
+  if (storedFavourites === lastStoredFavourites) {
+    return lastParsedFavourites;
+  }
+
+  lastStoredFavourites = storedFavourites;
+  lastParsedFavourites = storedFavourites ? JSON.parse(storedFavourites) : [];
+
+  return lastParsedFavourites;
+};
+
+const getServerFavouriteSnapshot = (): string[] => [];
+
+export default function useFavourites() {
+  const favourites = useSyncExternalStore(
+    subscribeToFavourites,
+    getClientFavouriteSnapshot,
+    getServerFavouriteSnapshot
+  );
+
+  const isFavourite = (roomId: string) => {
+    return favourites.includes(roomId);
+  };
+
+  const toggleFavourite = useCallback(
+    (roomId: string) => {
+      const nextFavourites = favourites.includes(roomId)
+        ? favourites.filter((id) => id !== roomId)
+        : [...favourites, roomId];
+      const nextValue = JSON.stringify(nextFavourites);
+
+      window.localStorage.setItem("favourite", nextValue);
+      window.dispatchEvent(
+        new StorageEvent("storage", {
+          key: "favourite",
+          newValue: nextValue,
+        })
+      );
+    },
+    [favourites]
+  );
+
+  return {
+    favourites,
+    isFavourite,
+    toggleFavourite,
+  };
+}