From 166ccf2503b45b9f8eb014af606fb6f748df43d7 Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Thu, 18 Jun 2020 16:53:59 +0200 Subject: [PATCH] Update Google Photo Filters implement simpler date filter and hide other filters update the label for recent photos colocate filters and recent/album switch comment out custom range simplified date range update recent label change 'older' filter to 'last 12 months' [not verified] update date range select label remove extraneous import --- extensions/shared/external-media/constants.js | 35 +++++++++++- .../sources/google-photos/date-formatting.js | 22 -------- .../sources/google-photos/filter-option.js | 55 +++++++------------ .../sources/google-photos/filter-request.js | 49 +++++++++++++++-- .../sources/google-photos/filter-view.js | 3 +- .../google-photos/google-photos-media.js | 43 +++++++++------ 6 files changed, 128 insertions(+), 79 deletions(-) delete mode 100644 extensions/shared/external-media/sources/google-photos/date-formatting.js diff --git a/extensions/shared/external-media/constants.js b/extensions/shared/external-media/constants.js index 526f9a731ab67..9f5692e607bbd 100644 --- a/extensions/shared/external-media/constants.js +++ b/extensions/shared/external-media/constants.js @@ -12,7 +12,7 @@ export const PATH_ROOT = '/'; export const PATH_OPTIONS = [ { value: PATH_RECENT, - label: __( 'Recent Photos', 'jetpack' ), + label: __( 'Photos', 'jetpack' ), }, { value: PATH_ROOT, @@ -135,3 +135,36 @@ export const PEXELS_EXAMPLE_QUERIES = [ 'abstract', 'sky', ]; +export const DATE_RANGE_ANY = 'ANY'; +export const DATE_RANGE_LAST_7_DAYS = 'LAST_7_DAYS'; +export const DATE_RANGE_LAST_30_DAYS = 'LAST_30_DAYS'; +export const DATE_RANGE_LAST_6_MONTHS = 'LAST_6_MONTHS'; +export const DATE_RANGE_LAST_12_MONTHS = 'LAST_12_MONTHS'; +export const DATE_RANGE_CUSTOM = 'CUSTOM'; +export const GOOGLE_PHOTOS_DATE_PRESETS = [ + { + value: DATE_RANGE_ANY, + label: __( 'Any time', 'jetpack' ), + }, + { + value: DATE_RANGE_LAST_7_DAYS, + label: __( 'Last 7 days', 'jetpack' ), + }, + { + value: DATE_RANGE_LAST_30_DAYS, + label: __( 'Last 30 days', 'jetpack' ), + }, + { + value: DATE_RANGE_LAST_6_MONTHS, + label: __( 'Last 6 months', 'jetpack' ), + }, + { + value: DATE_RANGE_LAST_12_MONTHS, + label: __( 'Last 12 months', 'jetpack' ), + }, + // TODO: Implement a UI for selecting month & year. + //{ + // value: DATE_RANGE_CUSTOM, + // label: __( 'Custom Range', 'jetpack' ), + //}, +]; diff --git a/extensions/shared/external-media/sources/google-photos/date-formatting.js b/extensions/shared/external-media/sources/google-photos/date-formatting.js deleted file mode 100644 index 139ed45971890..0000000000000 --- a/extensions/shared/external-media/sources/google-photos/date-formatting.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * External dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; - -export function getDateValue( name, value ) { - if ( name === 'startDate' ) { - /* translators: %s is formatted date */ - return sprintf( __( 'After %s', 'jetpack' ), value ); - } - - /* translators: %s is formatted date */ - return sprintf( __( 'Before %s', 'jetpack' ), value ); -} - -export function getDateName( name ) { - if ( name === 'startDate' ) { - return __( 'After Date', 'jetpack' ); - } - - return __( 'Before Date', 'jetpack' ); -} diff --git a/extensions/shared/external-media/sources/google-photos/filter-option.js b/extensions/shared/external-media/sources/google-photos/filter-option.js index d10cd8cc74718..c48861c4ad9c0 100644 --- a/extensions/shared/external-media/sources/google-photos/filter-option.js +++ b/extensions/shared/external-media/sources/google-photos/filter-option.js @@ -1,16 +1,19 @@ /** * External dependencies */ -import { dateI18n, __experimentalGetSettings } from '@wordpress/date'; +import { __experimentalGetSettings } from '@wordpress/date'; import { __ } from '@wordpress/i18n'; -import { SelectControl, Button, DateTimePicker, Dropdown } from '@wordpress/components'; +import { SelectControl, Button } from '@wordpress/components'; import { omit } from 'lodash'; /** * Internal dependencies */ -import { GOOGLE_PHOTOS_CATEGORIES } from '../../constants'; -import { getDateValue, getDateName } from './date-formatting'; +import { + GOOGLE_PHOTOS_CATEGORIES, + GOOGLE_PHOTOS_DATE_PRESETS, + DATE_RANGE_ANY, +} from '../../constants'; function CategoryOption( { value, updateFilter } ) { return ( @@ -23,31 +26,13 @@ function CategoryOption( { value, updateFilter } ) { ); } -function DateOption( { value, name, updateFilter } ) { - const settings = __experimentalGetSettings(); - const update = ( selected, onToggle ) => { - onToggle(); - updateFilter( selected ); - }; - +function DateOption( { value, updateFilter } ) { return ( - ( - - ) } - renderContent={ ( { onToggle } ) => ( -
- update( selected, onToggle ) } - currentDate={ value } - /> -
- ) } + updateFilter( { range } ) } /> ); } @@ -78,8 +63,8 @@ function getFilterOption( optionName, optionValue, updateFilter ) { return ; } - if ( optionName === 'startDate' || optionName === 'endDate' ) { - return ; + if ( optionName === 'date' ) { + return ; } if ( optionName === 'favorite' ) { @@ -93,14 +78,16 @@ function getFilterOption( optionName, optionValue, updateFilter ) { return null; } -function FilterOption( { children, removeFilter } ) { +function FilterOption( { children, removeFilter, isRemovable = false } ) { return (
{ children } - + { !! isRemovable && ( + + ) }
); } diff --git a/extensions/shared/external-media/sources/google-photos/filter-request.js b/extensions/shared/external-media/sources/google-photos/filter-request.js index 1cccdf84ca883..cb3010c6bc084 100644 --- a/extensions/shared/external-media/sources/google-photos/filter-request.js +++ b/extensions/shared/external-media/sources/google-photos/filter-request.js @@ -1,5 +1,23 @@ +/** + * External dependencies + */ +import moment from 'moment'; + +/** + * Internal dependencies + */ +import { + DATE_RANGE_LAST_7_DAYS, + DATE_RANGE_CUSTOM, + DATE_RANGE_LAST_30_DAYS, + DATE_RANGE_LAST_6_MONTHS, + DATE_RANGE_LAST_12_MONTHS, +} from '../../constants'; + +const TODAY = moment(); + export default function getFilterRequest( filters ) { - const { mediaType, category, favorite, startDate, endDate } = filters; + const { mediaType, category, favorite, date } = filters; const query = []; if ( mediaType ) { @@ -14,9 +32,32 @@ export default function getFilterRequest( filters ) { query.push( 'feature=favorite' ); } - if ( startDate || endDate ) { - const start = startDate ? startDate.substr( 0, 10 ) : '0000-00-00'; - const end = endDate ? endDate.substr( 0, 10 ) : '0000-00-00'; + if ( date ) { + let startDate = null; + let endDate = TODAY; + switch ( date.range ) { + case DATE_RANGE_LAST_7_DAYS: + startDate = moment( TODAY ).subtract( 7, 'days' ); + break; + case DATE_RANGE_LAST_30_DAYS: + startDate = moment( TODAY ).subtract( 30, 'days' ); + break; + case DATE_RANGE_LAST_6_MONTHS: + startDate = moment( TODAY ).subtract( 6, 'months' ); + break; + case DATE_RANGE_LAST_12_MONTHS: + startDate = moment( TODAY ).subtract( 1, 'year' ); + break; + case DATE_RANGE_CUSTOM: + if ( date.year && date.month ) { + startDate = moment( [ date.year, date.month - 1 ] ); + endDate = moment( startDate ).endOf( 'month' ); + } + break; + } + + const start = startDate ? startDate.format( 'YYYY-MM-DD' ) : '0000-00-00'; + const end = endDate ? endDate.format( 'YYYY-MM-DD' ) : '0000-00-00'; query.push( `dateRange=${ start }:${ end }` ); } diff --git a/extensions/shared/external-media/sources/google-photos/filter-view.js b/extensions/shared/external-media/sources/google-photos/filter-view.js index 0bf78a369afec..1271dd46d6348 100644 --- a/extensions/shared/external-media/sources/google-photos/filter-view.js +++ b/extensions/shared/external-media/sources/google-photos/filter-view.js @@ -7,8 +7,7 @@ import { SelectControl, Button } from '@wordpress/components'; const FILTERS = [ { label: __( 'Category', 'jetpack' ), value: 'category' }, - { label: __( 'After date', 'jetpack' ), value: 'startDate' }, - { label: __( 'Before date', 'jetpack' ), value: 'endDate' }, + { label: __( 'Date', 'jetpack' ), value: 'date' }, { label: __( 'Favorites', 'jetpack' ), value: 'favorite' }, { label: __( 'Media Type', 'jetpack' ), value: 'mediaType' }, ]; diff --git a/extensions/shared/external-media/sources/google-photos/google-photos-media.js b/extensions/shared/external-media/sources/google-photos/google-photos-media.js index b033675f99acc..7eec2cb849766 100644 --- a/extensions/shared/external-media/sources/google-photos/google-photos-media.js +++ b/extensions/shared/external-media/sources/google-photos/google-photos-media.js @@ -8,7 +8,13 @@ import { SelectControl } from '@wordpress/components'; /** * Internal dependencies */ -import { SOURCE_GOOGLE_PHOTOS, PATH_RECENT, PATH_ROOT, PATH_OPTIONS } from '../../constants'; +import { + SOURCE_GOOGLE_PHOTOS, + PATH_RECENT, + PATH_ROOT, + PATH_OPTIONS, + DATE_RANGE_ANY, +} from '../../constants'; import MediaBrowser from '../../media-browser'; import { getApiUrl } from '../api'; import GoogleFilterOption from './filter-option'; @@ -29,10 +35,15 @@ function GooglePhotosMedia( props ) { allowedTypes, path, copyMedia, + showAdditionalFilters = false, } = props; const imageOnly = isImageOnly( allowedTypes ); - const [ filters, setFilters ] = useState( imageOnly ? { mediaType: 'photo' } : {} ); + const [ filters, setFilters ] = useState( + imageOnly + ? { mediaType: 'photo', date: { range: DATE_RANGE_ANY } } + : { date: { range: DATE_RANGE_ANY } } + ); const lastQuery = useRef( '' ); const lastPath = useRef( '' ); @@ -90,7 +101,7 @@ function GooglePhotosMedia( props ) { onChange={ setPath } /> - { path.ID === PATH_RECENT && ( + { showAdditionalFilters && path.ID === PATH_RECENT && ( ) } - -
- { path.ID === PATH_RECENT && ( - - ) } - { path.ID !== PATH_RECENT && path.ID !== PATH_ROOT && ( - - ) } +
+ { path.ID === PATH_RECENT && ( + + ) } + { path.ID !== PATH_RECENT && path.ID !== PATH_ROOT && ( + + ) } +