Skip to content

Officer Section Component #83

@Quashnock

Description

@Quashnock

Update - Build Fix

Renaming the folder to OfficerSection made the OfficerSection component unable to be found by the About Us page. The About Us page still looks for the OfficerSelector folder when trying to find the OfficerSection component, so we need to update it to look for OfficerSection instead.

From the root folder, the About Us page can be found at:
/src/pages/AboutUs/AboutUs.js

  • In AboutUs.js, change the path used to import OfficerSection to point to the OfficerSection folder instead of Officer Selector. This should be on line 8 of the file and should replace the path string with: "../../components/OfficerSection/OfficerSection"

Overview

Rework the Officer Selector component to get rid of the categories and instead display all officers when loaded.

To run the website locally, first run npm i in the terminal to install all dependencies. Then run npm run start to run the site on local host.

From the root folder, the component can be found at:
/src/components/OfficerSelector/OfficerSection

If you have any questions of need any help, contact Aaron or schedule a meeting!

Requirements

  • Remove the Desktop Selector Tabs. In the React component, this is listed under the comment "Desktop Selector Tabs". Also remove the respective styles in the SCSS file; These should be listed under the .tabs selector.
  • Remove the Mobile Dropdown. In the React component, this is listed under the comment "Mobile Dropdown". Also remove the respective styles in the SCSS file; these should be listed under the .mobile-tabs selector.
  • You can remove all of the constants above the return statement. These were used for the logic of the dropdown menu and for sorting the officers, but we don't need these anymore.
  • replace "displayedOfficers" with "allOfficers" in the line mapping the officers to the cards that are shown on the website. If this is replaced, the site should instead list all of the officers instead of just the ones in one category
  • While you're at it, please rename the folder containing the files to "OfficerSection" so that they match the name of the files

Design Reference

Figma(Message Aaron if you need access)
Image

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions