497 feature make the overall rating display (#533)

* created OverallRating component

* made new LinearRating Component

* finished updating overall rating

* Finished the Overall Rating with dummy data

* finished render tests for OverallRating

* fixed import linting issues

* finished backbone for the modal not entirely sure how to design the look

* made change to fix ui issue to overall rating in mobile view

* made changes to modal to fit theme better and also
to fix mobile ui issues

* readded ripple on review buttons

* increased fontsize of number rating

* made fix to mobile ui and also created ReviewRating component to simplify and clean up code

* * Moved the Stack containing the Overall Rating Typography and Linear Ratings
into a new component called LinearRatings

* Moved the code for the modal into a separate component called ReviewModal

* Increased the size of the Leave a review text on the room page as well as the submit text
within the ReviewModal

* Created a new handleSubmit functiuon stub to be later implemented that handles review submission
within ReviewModal

* Removed the Unnecessary overall-rating id as getByText was used during testing

* component="h2" removed as it was Unnecessary

* sorted imports to fix linting errors

* Creating new DecimalStarRating component which contains the decimal and the star rating of the room
to reduce nesting

* *adjusted font size for submit and leave review buttons

*added hover shadow to submit and leave review buttons

---------

Co-authored-by: Jessica Feng <[email protected]>

frontend/__tests__/OverallRating.test.tsx

@@ -0,0 +1,50 @@
+import "@testing-library/jest-dom";
+
+import { render, screen } from "@testing-library/react";
+
+import OverallRating from "../components/OverallRating";
+
+jest.mock("react-redux", () => ({
+  ...jest.requireActual("react-redux"),
+  useDispatch: jest.fn(),
+}));
+
+describe("OverallRating", () => {
+  it("renders overall rating title", () => {
+    render(<OverallRating />);
+
+    const heading = screen.getByText("Overall 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();
+  });
+
+  it("renders leave a review", () => {
+    render(<OverallRating />);
+
+    const review = screen.getByRole("button", {
+      name: "Leave A Review",
+    });
+
+    expect(review).toBeInTheDocument();
+  });
+});

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

@@ -17,6 +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 Image from "next/image";
 import React, { useState } from "react";
 
@@ -70,6 +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 ?? []} />
+          <OverallRating />
         </Stack>
       ) : (
         <LoadingCircle />

frontend/components/DecimalStarRating.tsx

@@ -0,0 +1,33 @@
+import { Rating, Typography } from "@mui/material";
+import React from "react";
+
+const DecimalStarRating = () => {
+  return (
+    <>
+      <Typography
+        component="legend"
+        variant="h3"
+        sx={{
+          marginBottom: "16px",
+          fontSize: {
+            xs: "2.5rem",
+            md: "5rem",
+          },
+          width: "100%",
+          textAlign: "center",
+        }}
+      >
+        {4.5}
+      </Typography>
+      <Rating
+        name="decimal-rating"
+        defaultValue={4.5}
+        precision={0.1}
+        readOnly
+        size="large"
+      />
+    </>
+  );
+};
+
+export default DecimalStarRating;

frontend/components/LinearRating.tsx

@@ -0,0 +1,33 @@
+import Box from "@mui/material/Box";
+import LinearProgress from "@mui/material/LinearProgress";
+import Typography from "@mui/material/Typography";
+import React from "react";
+
+interface LinearRatingProps {
+  value: number;
+}
+
+const LinearRating: React.FC<LinearRatingProps> = ({ value }) => {
+  return (
+    <Box display="flex" alignItems="center">
+      <Typography variant="body1" sx={{ marginRight: "8px" }}>
+        {`${Math.round(value)}`}
+      </Typography>
+
+      <LinearProgress
+        variant="determinate"
+        value={100}
+        sx={{
+          height: "8px",
+          borderRadius: "4px",
+          flexGrow: 1,
+          "& .MuiLinearProgress-bar": {
+            borderRadius: "4px",
+          },
+        }}
+      />
+    </Box>
+  );
+};
+
+export default LinearRating;

frontend/components/LinearRatings.tsx

@@ -0,0 +1,27 @@
+import { Stack, Typography } from "@mui/material";
+import React from "react";
+
+import LinearRating from "./LinearRating";
+
+const LinearRatings = () => {
+  return (
+    <Stack width="300px" height="50%">
+      <Typography
+        variant="h2"
+        sx={{ fontSize: "20px", fontWeight: "bold" }}
+        marginBottom={2}
+      >
+        Overall Rating
+      </Typography>
+      <Stack spacing={2} aria-label="Linear Ratings" width="100%">
+        <LinearRating value={5} />
+        <LinearRating value={4} />
+        <LinearRating value={3} />
+        <LinearRating value={2} />
+        <LinearRating value={1} />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default LinearRatings;

frontend/components/OverallRating.tsx

@@ -0,0 +1,58 @@
+import { Button } from "@mui/material";
+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 = () => {
+  const [open, setOpen] = useState(false);
+
+  const handleOpen = () => setOpen(true);
+  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
+          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>
+    </Stack>
+  );
+};
+
+export default OverallRating;

frontend/components/ReviewModal.tsx

@@ -0,0 +1,56 @@
+import { Box, Button, Modal, Stack } from "@mui/material";
+import React from "react";
+
+import ReviewRating from "./ReviewRating";
+interface ReviewModalProps {
+  open: boolean;
+  handleClose: () => void;
+}
+
+const ReviewModal: React.FC<ReviewModalProps> = ({ open, handleClose }) => {
+  const handleSubmit = () => {
+    // insert future code to deal with submission of review
+    handleClose();
+  };
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      sx={{ height: "30%", width: "30%" }}
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          top: "160%",
+          left: "165%",
+          transform: "translate(-50%, -50%)",
+          width: "20vw",
+          minWidth: "300px",
+          bgcolor: "white",
+          p: 4,
+          borderRadius: "16px",
+        }}
+      >
+        <Stack spacing={2} alignItems="center">
+          <ReviewRating text="Quietness" />
+          <ReviewRating text="Location" />
+          <ReviewRating text="Cleanliness" />
+          <ReviewRating text="Overall" />
+          <Button
+            onClick={handleSubmit}
+            sx={{
+              fontSize: "16px",
+              color: "#1E90FF",
+            }}
+          >
+            Submit
+          </Button>
+        </Stack>
+      </Box>
+    </Modal>
+  );
+};
+
+export default ReviewModal;

frontend/components/ReviewRating.tsx

@@ -0,0 +1,24 @@
+import { Rating, Typography } from "@mui/material";
+import React from "react";
+
+interface ReviewRatingProps {
+  text: string;
+}
+
+const ReviewRating: React.FC<ReviewRatingProps> = ({ text }) => {
+  return (
+    <>
+      <Typography id="modal-modal-title" variant="h6" component="h2">
+        {text}
+      </Typography>
+      <Rating
+        name={text.toLowerCase()}
+        defaultValue={0}
+        precision={0.5}
+        size="large"
+      />
+    </>
+  );
+};
+
+export default ReviewRating;