LeaveReview

Overview

src/components/LeaveReview holds all components needed to enable leaving a review for a specific landlord. It communicates with the Firebase database to get information about landlords, and upload reviews for landlords.

Component Hierarchy

LeaveReview
             |
              --- ReviewModal
                   |
                    --- ReviewRating
                   |
                    --- Toast

Toast

• Takes a boolean for whether the toast is open, a color for the severity of the alert, a message, and a time to automatically hide the toast as props.
• Renders a toast with the supplied message, and with the color specified by the severity prop. The toast is automatically hidden based on the time prop, and it is viewable based on the passed in prop open.

type Props = {
  isOpen: boolean;
  severity: AlertProps['color'];
  message: string;
  time: number;
};

ReviewRating

• Takes a name, a label, and a function to handle a change to the component as props.
• Renders a component to leave a review for one feature of an apartment. The first subcomponent of this component is a HeartRating component with a name used to refer to it by its parent (this name is used internally and is not displayed to the user). When the user changes the heart rating, the function that was passed in as a prop to the HeartRating component is used to handle the change. The ReviewRating component also has a form label subcomponent to display to the user which feature they are reviewing.

interface Props {
  name: string;
  label: string;
  onChange: (event: React.ChangeEvent<{}>, value: number | null) => void;
}

ReviewModal

• Takes a boolean to specify whether the modal is open, a function to be called after closing the modal, a function to set if the modal is open, a landlord ID, a function to be called after successfully leaving a review, and a time to automatically close a toast as props.
• Takes an overall rating, an address, ratings of type DetailedRating, a File array of local photos, and a body message as form data.
• Renders a review modal with several ReviewRating components, one for each feature of the apartment a user can review. The user can also write text as part of the review in a text field rendered in the modal, and they can also upload photos by clicking a button in the modal. Upon submission of the review a toast is displayed that indicates the success or failure of the submission.

interface Props {
  open: boolean;
  onClose: () => void;
  setOpen: Dispatch<SetStateAction<boolean>>;
  landlordId: string;
  onSuccess: () => void;
  toastTime: number;
}

interface FormData {
  overallRating: number;
  address: string;
  ratings: DetailedRating;
  localPhotos: File[];
  body: string;
}

export type DetailedRating = {
  readonly location: number;
  readonly safety: number;
  readonly value: number;
  readonly maintenance: number;
  readonly communication: number;
  readonly conditions: number;
};