Skip to content

ApartmentCard

Kinjal Jasani edited this page Oct 8, 2021 · 4 revisions

Overview

src/components/ApartmentCard: holds all components associated with the apartment cards that are displayed on the home page. The data used to populate the apartment cards is retrieved from the Firebase database.

Component Hierarchy

ApartmentCards   
     |
      --- ApartmentCard

ApartmentCard

  • Takes buildingData, the number of reviews, and company (optional) as props.
  • Renders a single card that displays the data for the apartment, where the name and photos of the apartment come from buildingData, and the photo displayed is either a default photo if no photos are available, or the first photo if photos are available. If the company is passed in as a prop, it also renders the company name on the card. Finally, the card also displays the number of reviews for the apartment.
type Props = {
  buildingData: Apartment;
  numReviews: number;
  company?: string;
};

export type Apartment = {
  readonly name: string;
  readonly address: string; // may change to placeID for Google Maps integration
  readonly landlordId: string | null;
  readonly numBaths: number | null;
  readonly numBeds: number | null;
  readonly photos: readonly string[]; // can be empty
  readonly area: 'COLLEGETOWN' | 'WEST' | 'NORTH' | 'DOWNTOWN' | 'OTHER';
};

ApartmentCards

  • Takes an array of CardData as props.
  • Renders a list of ApartmentCard components representing different landlords. The cards also link to the page for the landlord whose information they display.
type Props = {
  data: CardData[];
};

export type CardData = {
  buildingData: Apartment;
  numReviews: number;
  company?: string;
};