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

Week picker (2nd attempt) #4288

Merged
merged 17 commits into from
Nov 17, 2023
Merged

Week picker (2nd attempt) #4288

merged 17 commits into from
Nov 17, 2023

Conversation

philipkocanda
Copy link
Contributor

@philipkocanda philipkocanda commented Oct 4, 2023

📯 Hey everyone, big news

@philipkocanda and @iMartzen have helped get this Merge Request from 2021 over the finish line, so most of the credit goes to @TiesWestendorp 👏

109517347-70796e00-7aa9-11eb-8f8c-08ddaf6688da

⚙️ Implementation

() => {
  const [startDate, setStartDate] = useState(new Date("2021/02/22"));
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      dateFormat="I/R"
      locale="en-GB"
      showWeekNumbers
      showWeekPicker
    />
  );
};

📖 Resources:

🤝 We used our HackerOne Community Service Day to finalize this feature, and we're thrilled to share it today.

🚀 Enjoy the new week picker, and let's make a positive impact together

Copy link

@pullrequest pullrequest bot left a comment

Choose a reason for hiding this comment

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

⚠️ This pull request was not sent to the PullRequest network because the pull request is a draft.

src/week.jsx Outdated Show resolved Hide resolved
Copy link
Contributor

@Zarthus Zarthus left a comment

Choose a reason for hiding this comment

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

Did an initial quick pass over things!

  • There are some linting failures too, please don't forget them too :)
  • We have pull request enabled for this repository, when you undraft they should be triggered for a review.

src/stylesheets/datepicker.scss Show resolved Hide resolved
margin-bottom: -8px;
}

.react-datepicker__week {
white-space: nowrap;
Copy link
Contributor

Choose a reason for hiding this comment

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

have you confirmed this works responsively?

@martijnrusschen
Copy link
Member

@philipkocanda @iMartzen great initiative and excited to see this coming back. Once you mark the PR as ready for review it will be sent to the pullrequest network as well.

@martijnrusschen
Copy link
Member

Please check the CI output. The linter is failing because of unused imports.

@codecov
Copy link

codecov bot commented Oct 4, 2023

Codecov Report

Merging #4288 (f1a59e8) into main (6ff581d) will decrease coverage by 1.40%.
Report is 8 commits behind head on main.
The diff coverage is 67.76%.

❗ Current head f1a59e8 differs from pull request most recent head 8b5ff3c. Consider uploading reports for the commit 8b5ff3c to get more accurate results

@@            Coverage Diff             @@
##             main    #4288      +/-   ##
==========================================
- Coverage   96.67%   95.27%   -1.40%     
==========================================
  Files          27       28       +1     
  Lines        2373     2478     +105     
  Branches      952     1003      +51     
==========================================
+ Hits         2294     2361      +67     
- Misses         79      117      +38     
Files Coverage Δ
src/calendar.jsx 98.32% <ø> (ø)
src/month.jsx 96.37% <ø> (ø)
src/week.jsx 100.00% <100.00%> (ø)
src/day.jsx 96.79% <83.33%> (-0.91%) ⬇️
src/week_number.jsx 88.67% <86.04%> (-11.33%) ⬇️
src/index.jsx 92.78% <59.09%> (-1.65%) ⬇️
test/week_picker_test.js 0.00% <0.00%> (ø)

@martijnrusschen
Copy link
Member

Overall the code coverage seems a bit low, and reduces the project coverage from 96% to 94%, it would be great to make sure we keep this stable and increase the coverage on this PR to the project levels.

@Zarthus
Copy link
Contributor

Zarthus commented Oct 4, 2023

BTW: This MR would benefit from having Co Author data in the commit message.

https://docs.github.com/en/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/creating-a-commit-with-multiple-authors

I would also include @TiesWestendorp if some of their work is included in this MR.

@philipkocanda philipkocanda changed the title Week picker 2023 Week picker (2nd attempt) Oct 4, 2023
@philipkocanda
Copy link
Contributor Author

@Zarthus Great suggestion! I've added Ties Westendorp as the co-author on the first commit.

@iMartzen iMartzen marked this pull request as ready for review October 25, 2023 13:14
Copy link

@pullrequest pullrequest bot left a comment

Choose a reason for hiding this comment

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

✅ This pull request was sent to the PullRequest network.


@philipkocanda you can click here to see the review status or cancel the code review job.

Copy link

@pullrequest pullrequest bot left a comment

Choose a reason for hiding this comment

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

PullRequest Breakdown

Reviewable lines of change

+ 762
- 53

60% JavaScript (tests)
35% JavaScript
4% SCSS
1% Markdown

Type of change

Feature - These changes are adding a new feature or improvement to existing code.

Copy link

@pullrequest pullrequest bot left a comment

Choose a reason for hiding this comment

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

This PR looks fantastic and is really well done. I am glad to see so much work put into unit testing. I only had a few comments about minor issues but that's all.

Image of Andy W Andy W


Reviewed with ❤️ by PullRequest

src/index.jsx Show resolved Hide resolved
src/week_number.jsx Outdated Show resolved Hide resolved
test/week_picker_test.js Show resolved Hide resolved
<DatePicker onChange={onChangeSpy} showWeekPicker />,
);
expect(onChangeSpy.called).to.be.false;
const input = ReactDOM.findDOMNode(weekPicker.input);
Copy link

Choose a reason for hiding this comment

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

ISSUE: react/no-find-dom-node (Severity: Medium)
Do not use findDOMNode. It doesn’t work with function components and is deprecated in StrictMode. See https://reactjs.org/docs/react-dom.html#finddomnode

Remediation:
this probably doesn't matter because we're inside a test, not a component, right?

🤖 powered by PullRequest Automation 👋 verified by Andy W

Copy link
Member

Choose a reason for hiding this comment

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

This is indeed deprecated behaviour and should not be used anymore.

@martijnrusschen
Copy link
Member

Test coverage seems pretty decent, but src/week_number.jsx coverage seems to have reduced a lot. Can you look into keeping the test coverage stable? We have a high coverage of 96% and I would love to keep it that way. Right now, the overall package coverage would reduce by 2% if we merge this PR.

Copy link

@pullrequest pullrequest bot left a comment

Choose a reason for hiding this comment

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

These changes look good and add the week picker that was described. I don't see any issues, and the changes overall look reasonable including good tests and examples.

Image of James D James D


Reviewed with ❤️ by PullRequest

Copy link

@pullrequest pullrequest bot left a comment

Choose a reason for hiding this comment

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

i see where you responded to my suggestion about a default in a switch statement but I have further comments on how you implemented my suggestion!

Image of Andy W Andy W


Reviewed with ❤️ by PullRequest

src/index.jsx Outdated Show resolved Hide resolved
…_test and year_picker_test"

This reverts commit f99f41a.
@iMartzen iMartzen requested review from martijnrusschen and removed request for Zarthus October 30, 2023 08:18
Copy link
Contributor

@Zarthus Zarthus left a comment

Choose a reason for hiding this comment

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

I've taken a quick look, I'll approve this now since Martijn and Pull Request seems sufficient :) My only note is that in the future I'd encourage splitting up changes (such as CONTRIBUTING) into a separate MR to reduce review overhead and increase focus, but since it's such a small change it's honestly OK.

Martijn and PR have got it from here I'm sure :)

@iMartzen iMartzen requested review from Zarthus and removed request for martijnrusschen October 30, 2023 08:34
<WeekNumber weekNumber={1} onClick={onClick} />,
it("should handle onClick function", () => {
const onClickMock = jest.fn();
const shallowWeekNumber = shallow(
Copy link

Choose a reason for hiding this comment

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

Nit: This is now shadowing the outer variable. Probably not an issue, but generally a bad practice

🔹 Style Consistency (Nice to have)

Image of James D James D

event.preventDefault();
event.key = "Enter";
}
});
Copy link

Choose a reason for hiding this comment

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

This seems suspect, with this mock defined inline, it does not prevent changes to the actual code and system under test, that seems like it weakens the ability of this test to catch errors

🔸 Best Practices (Important)

Image of James D James D

Copy link

@pullrequest pullrequest bot left a comment

Choose a reason for hiding this comment

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

Due to inactivity, PullRequest has cancelled this review job. You can reactivate the code review job from the PullRequest dashboard.

@martijnrusschen martijnrusschen merged commit 095796e into main Nov 17, 2023
4 checks passed
@Cynthiailojeme
Copy link

Hi @martijnrusschen. Thanks for taking this up.

I'd like to know if the latest merge has been published to npm. I can see the the showWeekPicker prop is available in the docs but not available in the library props.

@martijnrusschen
Copy link
Member

It's released now: https://github.com/Hacker0x01/react-datepicker/releases/tag/v4.23.0

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.

5 participants