Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Issue #1458]: Setup query param management - writing to the URL part 1 #1462

Closed
wants to merge 22 commits into from

Conversation

rylew1
Copy link
Contributor

@rylew1 rylew1 commented Mar 11, 2024

Summary

Fixes #1458

Time to review: 5 min

Changes proposed

  • Write query params to URL as user enters inputs

Context

  • We decided filters would be a comma-separated list status=forecasted,closed,archived

This is just part 1 - I will need to come back for part 2 and set it to:

  • read from the initial query params in the request URL
  • support back button to load checkboxes appropriately

Demo

Screen.Recording.2024-03-12.at.4.35.22.PM.mov

@rylew1
Copy link
Contributor Author

rylew1 commented Mar 12, 2024

cc @andycochran

frontend/src/app/search/SearchForm.tsx Outdated Show resolved Hide resolved
frontend/src/components/search/SearchOpportunityStatus.tsx Outdated Show resolved Hide resolved
frontend/src/components/search/SearchOpportunityStatus.tsx Outdated Show resolved Hide resolved
frontend/src/components/search/SearchSortBy.tsx Outdated Show resolved Hide resolved
frontend/src/hooks/useSearchParamUpdater.ts Outdated Show resolved Hide resolved
@rylew1 rylew1 marked this pull request as ready for review March 12, 2024 21:06
{/* TODO: href here needs to be set to:
dev/staging: https://grants.gov/search-results-detail/<opportunity_id>
local/prod: https://grants.gov/search-results-detail/<opportunity_id>
*/}
Copy link
Contributor Author

@rylew1 rylew1 Mar 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a note to set the anchor link to the actual grant/opportunity - it differs for each environment

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW, this is the same URL twice. eg. https://grants.gov/search-results-detail/<opportunity_id>

@rylew1 rylew1 requested a review from andycochran March 12, 2024 21:15
@rylew1 rylew1 changed the title [Issue #1458]: Setup query param management [Issue #1458]: Setup query param management - writing to the URL part 1 Mar 12, 2024
@@ -20,20 +21,25 @@ export function SearchForm({ initialSearchResults }: SearchFormProps) {
initialSearchResults,
);

const formRef = useRef(null);
Copy link
Contributor Author

@rylew1 rylew1 Mar 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ref here allows us to submit from non button inputs (which are basically most our inputs since we just have one submit/search button in the SearchBar component

const [mounted, setMounted] = useState(false);
const { updateQueryParams } = useSearchParamUpdater();

// eslint-disable-next-line @typescript-eslint/no-unused-vars
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we get to remove the eslint disable statement in the part 2 pr

Copy link
Collaborator

@coilysiren coilysiren left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rubber stamp approval since I'm not familiar with frontend code

@rylew1 rylew1 closed this Mar 16, 2024
@rylew1
Copy link
Contributor Author

rylew1 commented Mar 16, 2024

Merging this PR is irrelevant since the pagination PR was branched off this and merged: #1480

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Task]: Setup query param management
3 participants