FAQ

Overview

src/components/FAQ holds all components associated with an FAQ on the FAQ page. The data used to populate the FAQs is retrieved from the Firebase database.

Component Hierarchy

FAQ
     |
      --- FAQNavBar
     |      
     |
      --- FAQs
            |
             --- CollapsibleHeader
                  |
                   --- CollapsibleQuestion

CollapsibleQuestion

• Takes a question and answer as props.
• Renders a collapsible card for one FAQ question. question is the card header, and answer is the card body. The card can be opened/collapsed by toggling the icon on the left side.
• Uses the Collapse transition supported by react-bootstrap.

type Props = {
  readonly question: string;
  readonly answer: string;
};

CollapsibleHeader

• Takes a header name and array of FAQs as props.
• Renders a collapsible card containing a list of CollapsibleQuestion components representing the FAQs. headerName is the card header, i.e. the title of the FAQ section, and the card body is a list of FAQ questions. The card be opened/collapsed to show the FAQs by toggling the icon on the left side.
• Uses the Collapse transition supported by react-bootstrap.

type Props = {
  readonly headerName: string;
  readonly faqs: FAQ[];
};

export type FAQ = {
  question: string;
  answer: string;
};

FAQs

• Takes an array of FAQData as props.
• Renders a list of CollapsibleHeader components representing different FAQ sections.

type Props = {
  readonly data: FAQData[];
};

export type FAQData = {
  headerName: string;
  faqs: FAQ[];
};

FAQNavBar

• Renders the navigation bar on the FAQ page with a button that links to the Reviews page.