From 6b1577acd20626b3cc75cce672610f20f7e142e6 Mon Sep 17 00:00:00 2001 From: azjy89 <145690917+azjy89@users.noreply.github.com> Date: Wed, 2 Oct 2024 16:28:56 +1000 Subject: [PATCH] 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 <54833118+JessicaF@users.noreply.github.com> --- frontend/__tests__/OverallRating.test.tsx | 50 +++++++++++++++++++ frontend/app/room/[room]/page.tsx | 2 + frontend/components/DecimalStarRating.tsx | 33 +++++++++++++ frontend/components/LinearRating.tsx | 33 +++++++++++++ frontend/components/LinearRatings.tsx | 27 +++++++++++ frontend/components/OverallRating.tsx | 58 +++++++++++++++++++++++ frontend/components/ReviewModal.tsx | 56 ++++++++++++++++++++++ frontend/components/ReviewRating.tsx | 24 ++++++++++ 8 files changed, 283 insertions(+) create mode 100644 frontend/__tests__/OverallRating.test.tsx create mode 100644 frontend/components/DecimalStarRating.tsx create mode 100644 frontend/components/LinearRating.tsx create mode 100644 frontend/components/LinearRatings.tsx create mode 100644 frontend/components/OverallRating.tsx create mode 100644 frontend/components/ReviewModal.tsx create mode 100644 frontend/components/ReviewRating.tsx diff --git a/frontend/__tests__/OverallRating.test.tsx b/frontend/__tests__/OverallRating.test.tsx new file mode 100644 index 00000000..191f79d1 --- /dev/null +++ b/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(); + + const heading = screen.getByText("Overall Rating"); + + expect(heading).toBeInTheDocument(); + }); + + it("renders linear ratings", () => { + render(); + + const linearRatings = screen.getByRole("generic", { + name: "Linear Ratings", + }); + + expect(linearRatings).toBeInTheDocument(); + }); + + it("renders overall number and star rating", () => { + render(); + + const numberStarRating = screen.getByRole("generic", { + name: "Number Star Rating", + }); + + expect(numberStarRating).toBeInTheDocument(); + }); + + it("renders leave a review", () => { + render(); + + const review = screen.getByRole("button", { + name: "Leave A Review", + }); + + expect(review).toBeInTheDocument(); + }); +}); diff --git a/frontend/app/room/[room]/page.tsx b/frontend/app/room/[room]/page.tsx index be3428ca..81217d9c 100644 --- a/frontend/app/room/[room]/page.tsx +++ b/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 } }) { + ) : ( diff --git a/frontend/components/DecimalStarRating.tsx b/frontend/components/DecimalStarRating.tsx new file mode 100644 index 00000000..3056b5b6 --- /dev/null +++ b/frontend/components/DecimalStarRating.tsx @@ -0,0 +1,33 @@ +import { Rating, Typography } from "@mui/material"; +import React from "react"; + +const DecimalStarRating = () => { + return ( + <> + + {4.5} + + + + ); +}; + +export default DecimalStarRating; diff --git a/frontend/components/LinearRating.tsx b/frontend/components/LinearRating.tsx new file mode 100644 index 00000000..9129e4fe --- /dev/null +++ b/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 = ({ value }) => { + return ( + + + {`${Math.round(value)}`} + + + + + ); +}; + +export default LinearRating; diff --git a/frontend/components/LinearRatings.tsx b/frontend/components/LinearRatings.tsx new file mode 100644 index 00000000..45b67ed8 --- /dev/null +++ b/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 ( + + + Overall Rating + + + + + + + + + + ); +}; + +export default LinearRatings; diff --git a/frontend/components/OverallRating.tsx b/frontend/components/OverallRating.tsx new file mode 100644 index 00000000..9b50939b --- /dev/null +++ b/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 ( + + + + + + + + + + + ); +}; + +export default OverallRating; diff --git a/frontend/components/ReviewModal.tsx b/frontend/components/ReviewModal.tsx new file mode 100644 index 00000000..da2338a3 --- /dev/null +++ b/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 = ({ open, handleClose }) => { + const handleSubmit = () => { + // insert future code to deal with submission of review + handleClose(); + }; + return ( + + + + + + + + + + + + ); +}; + +export default ReviewModal; diff --git a/frontend/components/ReviewRating.tsx b/frontend/components/ReviewRating.tsx new file mode 100644 index 00000000..3afb015e --- /dev/null +++ b/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 = ({ text }) => { + return ( + <> + + {text} + + + + ); +}; + +export default ReviewRating;