568-feature-remove-linear-ratings (#569)

* removed linear ratings

* fixed tests

* removed unused imports

---------

Co-authored-by: Livia Wang <z5417230@ad.unsw.edu.au>
Co-authored-by: Jessica Feng <54833118+JessicaF@users.noreply.github.com>

Author: 3 people

frontend/__tests__/CircularRating.test.tsx

@@ -1,41 +1,20 @@
 import "@testing-library/jest-dom";
 
-import { Booking } from "@common/types";
 import { render, screen } from "@testing-library/react";
-import { Provider } from "react-redux";
+import RoomRatingList from "components/Rooms/RoomRatingList";
 
-import BookingCalendar from "../components/BookingCalendar";
-import store from "../redux/store";
-
-const start: Date = new Date();
-const end: Date = new Date();
-const roomID: string = "test";
-
-const events: Booking[] = [
-  {
-    name: "MARK5827 TUT",
-    bookingType: "(CLASS)",
-    start: start,
-    end: end,
-  },
-];
-
-describe("Booking calendar with circular rating", () => {
+describe("Rooms page with circular rating component", () => {
   it("renders the CircularRating component", () => {
-    render(
-      <Provider store={store}>
-        <BookingCalendar events={events} roomID={roomID} />
-      </Provider>
-    );
+    const mockParams = "K-J17-101";
+
+    render(<RoomRatingList roomID={mockParams} />);
 
     const cleanlinessRating = screen.getByText("Cleanliness");
     const quietnessRating = screen.getByText("Quietness");
     const locationRating = screen.getByText("Location");
-    const overallRating = screen.getByText("Overall");
 
     expect(cleanlinessRating).toBeInTheDocument();
     expect(quietnessRating).toBeInTheDocument();
     expect(locationRating).toBeInTheDocument();
-    expect(overallRating).toBeInTheDocument();
   });
 });

frontend/__tests__/OverallRating.test.tsx

@@ -10,40 +10,18 @@ jest.mock("react-redux", () => ({
 }));
 
 describe("OverallRating", () => {
-  it("renders overall rating title", () => {
+  it("renders decimal rating", () => {
     render(<OverallRating />);
 
-    const heading = screen.getByText("Overall Rating");
+    const decimalRating = screen.getByLabelText("decimal-rating");
 
-    expect(heading).toBeInTheDocument();
-  });
-
-  it("renders linear ratings", () => {
-    render(<OverallRating />);
-
-    const linearRatings = screen.getByRole("generic", {
-      name: "Linear Ratings",
-    });
-
-    expect(linearRatings).toBeInTheDocument();
-  });
-
-  it("renders overall number and star rating", () => {
-    render(<OverallRating />);
-
-    const numberStarRating = screen.getByRole("generic", {
-      name: "Number Star Rating",
-    });
-
-    expect(numberStarRating).toBeInTheDocument();
+    expect(decimalRating).toBeInTheDocument();
   });
 
   it("renders leave a review", () => {
     render(<OverallRating />);
 
-    const review = screen.getByRole("button", {
-      name: "Leave A Review",
-    });
+    const review = screen.getByLabelText("leave-review-link");
 
     expect(review).toBeInTheDocument();
   });

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

@@ -17,7 +17,7 @@ import Link from "@mui/material/Link";
 import Rating from "@mui/material/Rating";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import OverallRating from "components/OverallRating";
+import RoomRatingList from "components/Rooms/RoomRatingList";
 import Image from "next/image";
 import React, { useState } from "react";
 
@@ -71,7 +71,7 @@ export default function Page({ params }: { params: { room: string } }) {
           <RoomPageHeader room={room} buildingName={building.name} />
           <RoomImage src={`/assets/building_photos/${campus}-${grid}.webp`} />
           <BookingCalendar events={adjustedBookings ?? []} roomID={room.id} />
-          <OverallRating />
+          <RoomRatingList roomID={room.id} />
         </Stack>
       ) : (
         <LoadingCircle />

frontend/components/BookingCalendar.tsx

@@ -353,7 +353,6 @@ const BookingCalendar: React.FC<{ events: Array<Booking>; roomID: string }> = ({
             }}
           />
         </StyledCalendarContainer>
-        <RoomRatingList roomID={roomID} />
       </Stack>
     </>
   );

frontend/components/DecimalStarRating.tsx

@@ -8,7 +8,6 @@ const DecimalStarRating = () => {
         component="legend"
         variant="h3"
         sx={{
-          marginBottom: "16px",
           fontSize: {
             xs: "2.5rem",
             md: "5rem",
@@ -24,7 +23,8 @@ const DecimalStarRating = () => {
         defaultValue={4.5}
         precision={0.1}
         readOnly
-        size="large"
+        size="medium"
+        aria-label="decimal-rating"
       />
     </>
   );

frontend/components/OverallRating.tsx

@@ -3,7 +3,6 @@ import Stack from "@mui/system/Stack";
 import React, { useState } from "react";
 
 import DecimalStarRating from "./DecimalStarRating";
-import LinearRatings from "./LinearRatings";
 import ReviewModal from "./ReviewModal";
 
 const OverallRating = () => {
@@ -13,44 +12,20 @@ const OverallRating = () => {
   const handleClose = () => setOpen(false);
 
   return (
-    <Stack
-      direction="row"
-      spacing={2}
-      width="100%"
-      alignItems="flex-start"
-      marginTop={3}
-      sx={{ flexGrow: 1 }}
-    >
-      <LinearRatings />
-      <Stack
-        spacing={2}
-        alignItems={{ xs: "center", sm: "flex-start" }}
-        width="40%"
-        height="40%"
+    <Stack direction="column" alignItems="center" justifyContent="center">
+      <DecimalStarRating />
+      <Button
+        onClick={handleOpen}
+        sx={{
+          textAlign: "center",
+          fontSize: "14px",
+          color: "#1E90FF",
+        }}
+        aria-label="leave-review-link"
       >
-        <Stack
-          alignItems="center"
-          justifyContent="flex-end"
-          spacing={1}
-          width="40%"
-          height="150%"
-          aria-label="Number Star Rating"
-        >
-          <DecimalStarRating />
-          <Button
-            onClick={handleOpen}
-            sx={{
-              textAlign: "center",
-              fontSize: "14px",
-              color: "#1E90FF",
-            }}
-            aria-label="Leave A Review"
-          >
-            Leave a Review
-          </Button>
-          <ReviewModal open={open} handleClose={handleClose} />
-        </Stack>
-      </Stack>
+        Leave a Review
+      </Button>
+      <ReviewModal open={open} handleClose={handleClose} />
     </Stack>
   );
 };

frontend/components/Rooms/RoomRatingList.tsx

@@ -1,4 +1,6 @@
 import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid2";
+import OverallRating from "components/OverallRating";
 import useRoomRatings from "hooks/useRoomRatings";
 import React from "react";
 
@@ -9,31 +11,40 @@ const RoomRatingList: React.FC<{
 }> = ({ roomID }) => {
   const { ratings } = useRoomRatings(roomID);
 
-  let cleanlinesRating = 0;
+  let cleanlinessRating = 0;
   let quietnessRating = 0;
   let locationRating = 0;
   let overallRating = 0;
 
   if (ratings && ratings.length > 0) {
     ratings.forEach((rating) => {
-      cleanlinesRating += rating.cleanliness;
+      cleanlinessRating += rating.cleanliness;
       quietnessRating += rating.cleanliness;
       locationRating += rating.location;
       overallRating += rating.overall;
     });
 
-    cleanlinesRating = cleanlinesRating / ratings.length;
+    cleanlinessRating = cleanlinessRating / ratings.length;
     quietnessRating = quietnessRating / ratings.length;
     locationRating = locationRating / ratings.length;
     overallRating = overallRating / ratings.length;
   }
-
   return (
-    <Box display="flex" justifyContent="flex-start" mt={2} gap={9}>
-      <CircularRating category="Cleanliness" rating={cleanlinesRating} />
-      <CircularRating category="Quietness" rating={quietnessRating} />
-      <CircularRating category="Location" rating={locationRating} />
-      <CircularRating category="Overall" rating={overallRating} />
+    <Box display="flex" justifyContent="center" mt={2}>
+      <Grid container spacing={{ xs: 1, sm: 2 }} columns={{ xs: 2, sm: 4 }}>
+        <Grid size={1}>
+          <OverallRating />
+        </Grid>
+        <Grid size={1}>
+          <CircularRating category="Cleanliness" rating={cleanlinessRating} />
+        </Grid>
+        <Grid size={1}>
+          <CircularRating category="Quietness" rating={quietnessRating} />
+        </Grid>
+        <Grid size={1}>
+          <CircularRating category="Location" rating={locationRating} />
+        </Grid>
+      </Grid>
     </Box>
   );
 };