Main React Components (technical)

Collapsible

For hostView:

• Applied
• Interviewed
• Accepted

For candidateView:

• OpenRoles
• AppliedTo

Filterable list

Presentational component, needs state. Each has:

• Search bar, container component (allows to filter jobs by keyword) (?);
• Group of filter buttons, container component e.g.:
  • candidates for a role (host view): successful, unsuccessful, in progress;
  • roles (candidate view): applied for, match my skills (non-applied for);
• List of items (roles / candidates), presentational component.

Lists (candidates / roles)

Lists themselves will be presentational components, potentially renderable with a collapse/expand UI. They shouldn't need props, as they will render multiple children based on (hardcoded) db data, passed down to their children as props.

List items

List items will be presentational components, receiving props from the parent list.

Candidate List item (seen by hosts)

The list appears for a specific role, showing the candidates that are interested (i.e. have applied). Render a Bootstrap table row with the following table data:

• Candidate name w/ Link to profile (to open up modal)
• Profile photo, presentational component getting props from parent(s)

Roles list item (seen by candidates) (different?)

Each item in the list of offered roles (candidates view) will be a presentational component taking props, with:

• Role name (w/ Link to the role modal)
• Host name (w/ Link to their website)
• Salary
• # of applicants
• # available positions (?)
• # accepted candidates (?)
• Button to apply / or view status of application - container component

Roles list item (seen by hosts)

Each item in the list of offered roles (host view) will be a presentational component taking props, with:

• Role name (w/ Link to the role modal)
• # of applicants
• # available positions (?)
• # accepted candidates (?)
• List of candidates interested, each with
  • Name (w/ link to open modal with profile) - presentational
  • Update-candidate-status (Button?) (successful / interview / unsuccessful) - container component

Recurring

Text+link to open modal

Simple Container component - should take props (name) and return a name linked to a modal opening.

Edit/Add content Open modal button

Simple Container component - should take props (text) and return a button for modal opening.

Modals

Candidate profile modal

Presentational component, needs state. Appears when clicking on candidate name (w/ link).

Role details modal

Presentational component, needs state. Appears when clicking on role title (w/ link).

Add role modal (?)

Container component. Overlaid on host page, when clicking on 'add role' button.

Update role modal (?)

Container component. Overlaid on host page, when clicking on 'update role' button.

Navigation items

Navbar

Presentational component, no props.

Footer

Presentational component, no props.