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

refactor: Make range calendar selection controllable #526

Merged
merged 1 commit into from
Nov 25, 2022

Conversation

just-boris
Copy link
Member

Description

Move state into a single place in DateRangePickerDropdown component. This will allow to expose programmatic API to control this value outside the component

Related links, issue #, if available: n/a

How has this been tested?

PR build, dev-pipeline (link in DM)

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@just-boris just-boris requested a review from a team as a code owner November 24, 2022 10:40
@just-boris just-boris requested review from michaeldowseza and removed request for a team November 24, 2022 10:40
@@ -23,7 +25,7 @@ export default function RangeCalendarScenario() {

<RangeCalendar
value={value}
onChange={setValue}
setValue={setValue}
Copy link
Member Author

Choose a reason for hiding this comment

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

onChange has become setValue to support full React's setState signature, including update in callback

@@ -97,7 +80,7 @@ export const Grids = ({
const newMonth = !isSingleGrid && direction === -1 ? addMonths(baseDate, -1) : baseDate;
const nearestBaseDate = getBaseDate(newMonth, isDateEnabled);

const newFocusedDate = selectFocusedDate(focusedDate, nearestBaseDate, isDateEnabled);
const newFocusedDate = findDateToFocus(focusedDate, nearestBaseDate, isDateEnabled);
Copy link
Member Author

Choose a reason for hiding this comment

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

If function does not make any side effects (actually selecting something), then it is find..., not select...

Comment on lines -83 to -84
// This effect "synchronizes" the local state update back up to the parent component.
useEffect(() => {
Copy link
Member Author

Choose a reason for hiding this comment

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

React docs explicitly call this an anti-pattern: https://beta.reactjs.org/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes

Avoid code patterns like this

import { formatDate } from './format-date';
import { formatTime } from './format-time';

export function formatDateTime(date: Date) {
Copy link
Member Author

Choose a reason for hiding this comment

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

Very surprised we did not have this function yet. Did I miss something?

@@ -4,3 +4,8 @@
export function joinDateTime(dateString: string, timeString: string) {
return `${dateString}T${timeString}`;
}

export function splitDateTime(dateStr: string) {
Copy link
Member Author

Choose a reason for hiding this comment

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

Taking suggestions how to rename the file, since now it includes both ways, split and join

Copy link
Member

Choose a reason for hiding this comment

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

Since we seem to be splitting every function into its own file, this could also go into slit-date-time.ts

Copy link
Member Author

Choose a reason for hiding this comment

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

I would prefer having symmetric functions in a single file (because they are always changed together)

@codecov
Copy link

codecov bot commented Nov 24, 2022

Codecov Report

Base: 92.61% // Head: 92.59% // Decreases project coverage by -0.01% ⚠️

Coverage data is based on head (57ae6d9) compared to base (70d3224).
Patch coverage: 88.23% of modified lines in pull request are covered.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #526      +/-   ##
==========================================
- Coverage   92.61%   92.59%   -0.02%     
==========================================
  Files         567      568       +1     
  Lines       16131    16127       -4     
  Branches     4417     4411       -6     
==========================================
- Hits        14939    14933       -6     
- Misses       1112     1114       +2     
  Partials       80       80              
Impacted Files Coverage Δ
src/date-range-picker/calendar/utils.ts 77.77% <77.77%> (ø)
src/date-range-picker/calendar/index.tsx 95.23% <85.71%> (-1.58%) ⬇️
src/date-range-picker/calendar/grids/index.tsx 80.00% <100.00%> (+0.20%) ⬆️
src/date-range-picker/dropdown.tsx 100.00% <100.00%> (ø)
src/date-range-picker/utils.tsx 100.00% <100.00%> (+4.54%) ⬆️
src/internal/utils/date-time/format-date-time.ts 100.00% <100.00%> (ø)
src/internal/utils/date-time/index.ts 100.00% <100.00%> (ø)
src/internal/utils/date-time/join-date-time.ts 100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@just-boris just-boris merged commit b8f915c into main Nov 25, 2022
@just-boris just-boris deleted the refactor-date-range-picker branch November 25, 2022 16:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants