Riders Tab

Riders

The page that displays the list of riders in table format. Consists of the components RiderModal and RidersTable.

Rider data type

type Rider = {
  id: string;
  email: string;
  phoneNumber: string;
  firstName: string;
  lastName: string;
  pronouns: string;
  accessibility: Array<string>;
  description: string;
  joinDate: string;
  address: string;
  favoriteLocations: Array<string>;
  organization: string;
};

RiderModal

The modal through which riders can be added to the endpoint /api/riders.

Props

RiderModal takes in riders, setRiders from useState.

type RiderModalProps = {
  riders: Array<Rider>;
  setRiders: Dispatch<SetStateAction<Rider[]>>;
}

Functions

RiderModal uses useState to manage several of its states.

Managing the state of the form is handled by formData and setFormData. The function saveDataThen() fills out the form with setFormData.

Submitting the form is handled by isSubmitted and setIsSubmmitted. The function submitData() calls setIsSubmmitted(true) and closes the modal. submitData() takes no argument and returns void.

Toggling the modal is handled by isOpen and setIsOpen. The functions openModal() and closeModal() opens and closes the modal. Both functions take no argument and return void.

RidersTable

The table of riders. Fetches riders from the endpoint /api/riders.

Props

RidersTable takes in riders, setRiders from useState.

type RidersTableProps = {
  riders: Array<Rider>;
  setRiders: Dispatch<SetStateAction<Rider[]>>;
};

Functions

renderTableHeader() returns a row of table headers and has a return type of JSX.Element. This function should be called before renderTableData() because the table header should be the first row of the table.

renderTableData() takes in a list of riders Rider[], maps each rider to a TableRow, and returns the list of table rows JSX.Element[].

TableRow

A table row that displays details of a Rider.

Values passed into TableRow should mirror the order to which the table headers appear. For example if 'name' is the first column of the table, then the rider's name should be passed in first.

Props

TableRow takes in an array of values and maps each value to a TableCell.

type TableRowProps = {
  values: Array<TableValue>;
};

type TableValue = {
  data: string | ReactNode | null;
  tag?: string;
  buttonHandler?: () => void;
  ButtonModal?: () => JSX.Element;
};

TableCell

A table cell that represents data of a Rider such as name, netId, phone number, etc...

Props

Values passed into TableCell should be independent from ordering for flexibility. The first and last cells must be distinguishable from normal cells because the first and last cells have rounded edges for styling.

type TableCellProps = {
  data: string | ReactNode | null;
  index: number;
  first: boolean;
  last: boolean;
  tag?: string;
  buttonHandler?: () => void;
  ButtonModal?: () => JSX.Element;
}