Editor Media Google Photos: date range filter #25762

Add both a config feature flag and prop to determine whether to show the Date Filters. Append `?flags=external-media/google-photos/date-filters` to enable the feature for testing

Updates DatePicker component to allow for usage of selectedDays and to show more than 1 month at a time. MediaDateRange component can now take advantage of this functionality to enable a date-range style picker.

Previously DatePicker component was missing support for toMonth, fromMonth and selectedDays props. This limited ability of consumers of DatePicker component to utilise features of React Day Picker library. Particularly useful if you need to create a range picker. See http://react-day-picker.js.org/examples/selected-range

Previously component render was one huge method. Refactored to several smaller utliity methods to make main render more concise.

# Conflicts: # package.json

Ensure dates used in MediaDateRange implements correct internationalization of dates and times using the moment instance provided by `i18n-calypso` https://github.com/Automattic/i18n-calypso

Prevously code attempted to access `from` and `to` properties of the `selectedDays` Component prop before checking that `selectedDays` existed.

Previously was hard coded to be in UK date format (DD/MM/YYYY). Updated to use moment utility to display in local date format.

Adds a new onDateSelect prop which is trigger each time a date is selected by the user. Adds tests coverage for this. Also sets a known locale for the injected momentJS in tests to ensure consistent results.

Previously `onDateSelect` and `onDateCommit` callbacks were called without arguments. This meant they weren’t that useful. Now passes start and end dates as args when called. Test coverage added.

Previously the selected date range was not communicated outside of the MediaDateRange component. Adds a dateRange prop and onDateChange callback prop which are used to store the current date range and update the state of the dateRange prop respectively. This enables us to pass the dateRange into the API query used to retrieve photos data.

Previously due to use of localize HOC, the tests were failing due to the missing moment property which is injected by the HOC but not included in the tests. Unlike the similarly required translate prop, we cannot simply ‘identity’ this so we inject the actual moment lib from i18n-calypso during tests

Tweak test to utilise exists() rather than isEmpty(). Required inverting the assertions as the assertion itself is the inverse

Previously only way to select dates was to use the DatePicker. However, many users may be unable (or choose not) to use that interface. Best a11y practice is to provide a standard form input. Adds functionality and test coverage.

…nput’s date Previously when blurring input #1 the value would be automatically be “copied” to input #2 if input #1’s value was the same as that stored in state. This is due to the way the DateUtils.addDayToRange() method works. Fix this by checking whether the value of the input that has just been blurred is the same as that stored in state. If so then don’t trigger an update of the selected date range. Adds test coverage.

On screens smaller than 480px: * removes selected date text on button (leaving just an icon) * displays only 1 month of calendar at a time (instead of two) Adds tests to cover this.

Standardise implementation to utilise prop “showOutsideDays” rather than the previously added (non-standard) “enableOutsideDays”.

Update tests to utilise “showOutsideDays” prop and properly mock matchMedia using standard Jest pattern

Date range picker styling update to ensure 2 datepickers are in 2 columns.

Previously dates were being passed to momentJS using a nonstandard format (“MM/DD/YYYY”). Moment falls back to JS Date which has unreliable rules around parsing formats, so it’s best practise to give moment a explicit format as the second arg. Apply to code and tests.

Previously utillised a bespoke DateRange implementation. Updates to use the standard core DateRange component created in `29938`. Also removes custom `dateRange` prop and ensure `filter` and `onFilterChange` props are passed down into ExternalMediaHeader

Previously within the post editor Media Modal the Popover wasn’t visible because it was “behind” the Media modal. `client/components/date-range/index.js` defines a modifier `is-dialog-visible` which accounts for this. Ensure this is always applied to the DateRange to account for this scenario.

Working prototype of date filtering of Google Photos Media now in place for post media modal view _only_. Adds “queryFilter” data prop and handler prop and update the query past to the REST API if the `DateRange` component triggers an update.

Update to handle edge cases around selected date ranges. Now handles scenarios where dates in the range aren’t selected and replaces with the “wildcard” selection. Any portion of the range passed as `0000-00-00` means any date. https://developers.google.com/photos/library/reference/rest/v1/mediaItems/search#Date

This has been replaced with the core `DateRange` component

Previously the DateRange button was large on small screens. With the limited screen real estate we need to drop down to only using icons. This commit implements that whilst also removing all of the other Media Date Range styles which are now part of the core DateRange and thus no longer needed.

These tests are now covered in the core `DateRange` component.

Previously the Trigger button and the Clear “X” button we’re spaced due to a blanket CSS rule applying RHS margin to all `.button` elements. Overides this to ensure button and clear are butting up alongside each other as per a standard button group element.

Previously strings such as “InvalidDate” were being propagated upwards with `onQueryFiltersChange`. This caused logic errors further up the component tree. Fixed by checking date validity prior to propagating.

Previously if a queryFilter (eg: date range) caused there to be no Media returned then the UI would show “No photos in your library” (or simialr). Updates so that if there is no Media when a queryFilter is applied then this is treated as a “No results” rather than “No content” issue and the appropriate UI is displayed.

ESLint was triggering warnings that had to be resolved (annoyingly in a single commit!). Firstly, regarding usage of setState in componentDidMount. This is often true. However React docs themselves say this is valid when doing DOM interaction such as measuring widths…etc. > …when you need to measure a DOM node before rendering something that depends on its size or position See https://reactjs.org/docs/react-component.html#componentdidmount Secondly, string refs were being used. Modified to use createRef() pattern.

Previously the query filters that allow for Date Range filtering were only added to the Media Modal instance of Media Library. Manually copied these across into the “main” Media library instance as well.

React has deprecated string based refs. Converted to a `createRef()` version.

Previously conditional logic and accompanying comment we’re very clear as to the intent of the conditional. Amended for clarity.

Resolves #25762 (comment)

Matches existing toolbar styles more closely.

Previously the responsive behaviour of the toolbar wasn’t consistent across viewports. Moreover the alignment and centering of content was achieved via hacks such as absolute positioning and margins. Updates to utilise flexbox for alignment in order to improve resilience of layout across various viewports sizes. Resolves: #25762 (comment)

Resolves #25762 (comment)

Previously if you selected a single date away from the current month by a few months in the past and closed the picker and then reopened it the calendar would be focused on today’s date rather than the date you just picked. Fixes to always focus on the start date if there is not focused date explicitly set. Resolves #25762 (comment)

Comparing with production all buttons were suddenly larger. Fixes to ensure toolbar buttons are not suddenly taller. Resolves #25762 (comment)

… output

Previously tests were out of sync with changes to files. Added initial date range filter test. Also updated wording of tests to avoid using the term “media query” as this is potentially confusing due to it’s significance in responsive design.

Updating tests to cover various scenarios uncovered x2 errors: 1. Non-string dates were accepted by moment’s parsing and were incorrectly added to the filter (eg: `new Date()`) 2. If either from or to were wildcards (eg: `0000-00-00`) then the filer wouldn’t be added. However we only wanrt to avoid the filter being added if BOTH the dates are wildcards. Fixed and added tests to cover.

@johngodley

…s listing Previously translated strings were broken up into separately translated strings and then concatenated to produce a full “no results” status string for the UI. This would not have been best practice as often sentances need to be compeltely reordered in other languages. Updates to ensure strings are translated in a single go. As part of this @johngodley and I decided to remove the Media type from the no results statement as it didn’t add much value and would have added considerably verbosity to the code. Resolves #25762 (comment)

Resolves Circle CI Lint warnings: 1. incorrect usages of let var declaration 2. 'component-event' should be listed in the project's dependencies. Run 'npm i -S component-event' to add it. Both fixed.

See https://calypsop2.wordpress.com/2018/09/24/migrating-calypso-css-build-to-webpack/

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editor Media Google Photos: date range filter #25762

Editor Media Google Photos: date range filter #25762

Commits on Feb 1, 2019