Skip to content

Create SearchField component #188

Description

@zaviermiller

Description

We need a way to search through our applicants. This will enable that.

Technical Details

  • Create the compoent at apps/applicant-tracking/components/SearchField/index.tsx
  • Use an MUI Text Field for this (that should be the only component you render!)
  • Put a search icon at the end of the field (hint).
  • Whenever a user types in this field, you should add whatever they typed to a URL search parameter called q (for query)
    • For example, if the user types "test" into the field you should see the URL as http://localhost:3000?q=test
  • If the user clears out their search, the search param should be removed (you shouldn't see ?q=)
  • There is an example of this being done here.

Warning

Don't just copy the code in the file. Spoiler alert: it won't work. Use the example as a jumping off point to understand the general strategy being used and write it yourself.

Teachables

We use URL search params for any kind of filtering at Hack4Impact. This allows our search fields to be super easily sharable. If I look something up and want to send the result of that search to someone, I can just copy the URL and send it!

Testing Steps

Dependencies

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions