2808: Add a filter by date option to events

[bahaaTuffaha]

Short description

Filtering events by date

Proposed changes

For web:

• Created a component called CustomDatePicker and used Input type='date' as date picker.

For native:

• Created a component called CustomDatePicker used react-native TextInput and IconButton to show calendar modal.
• Another component I added is for Calender Range picker called CalendarRangeModal I used react-native-calendars library and tried to mimic the styling like the design in figma.

Shared:

• Created a hook called useDateFilter that accepts events then will validate and returns filteredEvents.

Side effects

None.

Resolved issues

Fixes: #2808

---

[steffenkleinle]

Hey, thank you for your PR, looks pretty nice already! Nice work 🎉

I just reviewed and tested native so far and everything works and looks as expected. I will review web once the comments have been addressed (I think the PR is quite huge, perhaps it would be better to merge it one by one and split up the PR, if possible).

I have a few remarks regarding coding style and complexity. If you feel like I misunderstood something or your solution makes more sense, please tell.

General changes that would be a good addition:

• Use DateTime to avoid manual parsing and formatting as well as validating
• Clicking next to the date picker could/should close it for better UX
• If you delete a slash in the date picker, you can't readd it (since the keyboard only shows numbers). A better choice would perhaps be to implement fields for day, month, and year separately, so you can only edit either one at a time. Not sure if this is an optimal solution though, so if you have any other ideas let me know.

Keep in mind that I did not mention every occurrence of things that could be improved, please apply the suggestions to other parts in the code, too.

[steffenkleinle]

Some thoughts on the behavior:

• My personal opinion is that if I never selected a time period, no filtering should be done and all events should be shown. Only if I manually set a start and end date, I want the events to be filtered.
• Usually, confirming actions, i.e. ok in this case, are placed on the right side while `cancel´ should be placed on the left side of the screen (at least for LTR languages): https://m2.material.io/components/dialogs#actions. This is also the case in the designs.
• If an invalid date range is selected with the date picker (i.e. no start date, no end date, end date before start date) it should not be possible to press ok (as nothing will happen anyway and the user will be confused about that). Instead the button should be disabled, greyed out.
• If a date is selected that is before the current fromDate (and if set, the toDate), it should be set as new fromDate and toDate should be cleared. Currently, if only a fromDate is selected, the following happens (see screenshot)

One more general question:
Is there any reason you chose the names fromDate and toDate over e.g. startDate and endDate?

[steffenkleinle]

Sadly I just realized we have another problem. A lot of our events are recurring, i.e. happening multiple times, for example every week. Our filtering should reflect that and include events that have recurrences in the selected time period. This might not be that easy, so perhaps we should do that in a separate PR. Has to be done before this is good to go though sadly :/

[bahaaTuffaha]

Sadly I just realized we have another problem. A lot of our events are recurring, i.e. happening multiple times, for example every week. Our filtering should reflect that and include events that have recurrences in the selected time period. This might not be that easy, so perhaps we should do that in a separate PR. Has to be done before this is good to go though sadly :/

I think it can be done by modifying the filter maybe using rrule.between() event.date has recurrenceRule type RRuleType | null

[steffenkleinle]

Do we need both to be LTR/RTL dependent?

[steffenkleinle]

Hmm, as this is user readable sometimes, I think this should for example be:

Suggested change

	placeholder='Date-input'
	placeholder={DateTime.now().toLocaleString()}

You should be able to assert on this too.

[bahaaTuffaha]

There is a reason for this: I used in the test getByPlaceholderText() I think this better than alt='Date-input' or getByTestId()

[codeclimate]

Code Climate has analyzed commit 52db677 and detected 4 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	4

The test coverage on the diff in this pull request is 57.8% (50% is the threshold).

This pull request will bring the total coverage in the repository to 73.8%.

View more on Code Climate.