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.

Sign up for GitHub

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

Jump to bottom

Date selector cleanup #1856

Merged
merged 10 commits into from
Jan 30, 2024
Merged

Date selector cleanup #1856

merged 10 commits into from
Jan 30, 2024

Conversation

lpsinger
Copy link
Member

Fix several front-end bugs in the date selector:

  • When you expand the date selector, the correct default values are selected if have chosen all time or a custom date range.
  • We now submit the form using ordinary form submission rather than manually adjusting the query string. This allows for easier composition with additional inputs elements in the same form.
  • We now submit the form automatically when you select a fuzzy date radio button.
  • Switch to display with the YYYY-MM-DD format, which more closely resembles dates displayed in the GCN Circular archive. Note that this depends upon feat: add DateSelector dateFormat prop trussworks/react-uswds#2726.

Finally, remove the feature flag.

@lpsinger lpsinger added enhancement New feature or request frontend Issue relates to front-end development (react-uswds widgets) labels Jan 22, 2024
@lpsinger lpsinger requested review from Courey and tylerbarna January 22, 2024 22:36
tylerbarna
tylerbarna suggested changes Jan 24, 2024
View reviewed changes
Copy link
Member

@tylerbarna tylerbarna left a comment

Choose a reason for hiding this comment

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

The menu seems to persist after the page is reloaded, but this is overall a much more elegant implementation

app/routes/_gcn.circulars._archive._index/DateSelectorMenu.tsx Show resolved Hide resolved
app/routes/_gcn.circulars._archive._index/DateSelectorMenu.tsx Outdated Show resolved Hide resolved
app/routes/_gcn.circulars._archive._index/DateSelectorMenu.tsx Outdated Show resolved Hide resolved
@lpsinger
Rename DateSelector default values
c28a607 
Generally HTML input elements and React components have a default
value property to set their value before the user has interacted
with them (or after the user has reset the form) and a separate
property for their current value.

Rename DateSelector's props and states to mimic this convention.
@lpsinger
Fix default field states on menu open
e7b8f03
@lpsinger
Clean up onChange handlers
fabf2a5
@lpsinger
Remove fake input elements from form submission
be145d0
@lpsinger
Use ordinary form submission rather than query strings
461dc25
@lpsinger
Set hidden field values using ref
5e2b0c0 
This way the field values are guaranteed to be updated when we
submit the form.
@lpsinger
Fix buggy alignment of submit button
605f8ca
@lpsinger
Only show submit button if date range visible
2101c36
@lpsinger
Remove unnecessary icon
2f476e6
@lpsinger lpsinger force-pushed the date-selector-cleanup branch from 5f22745 to 7d38205 Compare January 29, 2024 16:26
@lpsinger lpsinger force-pushed the date-selector-cleanup branch from 7d38205 to 04b2070 Compare January 29, 2024 17:15
@lpsinger lpsinger requested a review from tylerbarna January 29, 2024 17:15
tylerbarna added a commit to tylerbarna/gcn.nasa.gov that referenced this pull request Jan 29, 2024
@tylerbarna
made form a property of the sortSelector
fd573ae 
using same implementation as pr nasa-gcn#1856 to remove hard-coding of form id in route.tsx as well.
@lpsinger lpsinger merged commit 19c8929 into nasa-gcn:main Jan 30, 2024
6 checks passed
@lpsinger lpsinger deleted the date-selector-cleanup branch January 30, 2024 20:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Courey Courey Courey approved these changes

@tylerbarna tylerbarna Awaiting requested review from tylerbarna

Assignees
No one assigned
Labels
enhancement New feature or request frontend Issue relates to front-end development (react-uswds widgets)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@lpsinger @Courey @tylerbarna