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
Automattic · Jun 23, 2020 · 166ccf2 · 166ccf2
1 parent db23c23
commit 166ccf2
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 79 deletions.
diff --git 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
diff --git 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 (
-		<Dropdown
-			position="bottom left"
-			renderToggle={ ( { onToggle } ) => (
-				<Button onClick={ onToggle } isTertiary>
-					{ value
-						? getDateValue( name, dateI18n( settings.formats.date, value ) )
-						: getDateName( name ) }
-				</Button>
-			) }
-			renderContent={ ( { onToggle } ) => (
-				<div className="jetpack-external-media-header__dropdown">
-					<DateTimePicker
-						onChange={ selected => update( selected, onToggle ) }
-						currentDate={ value }
-					/>
-				</div>
-			) }
+		<SelectControl
+			label={ __( 'Sort by time period', 'jetpack' ) }
+			value={ value?.range || DATE_RANGE_ANY }
+			options={ GOOGLE_PHOTOS_DATE_PRESETS }
+			onChange={ range => updateFilter( { range } ) }
 		/>
 	);
 }
@@ -78,8 +63,8 @@ function getFilterOption( optionName, optionValue, updateFilter ) {
 		return <CategoryOption value={ optionValue } updateFilter={ updateFilter } />;
 	}
 
-	if ( optionName === 'startDate' || optionName === 'endDate' ) {
-		return <DateOption value={ optionValue } name={ optionName } updateFilter={ updateFilter } />;
+	if ( optionName === 'date' ) {
+		return <DateOption value={ optionValue } updateFilter={ updateFilter } />;
 	}
 
 	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 (
 		<div className="jetpack-external-media-googlephotos-filter">
 			{ children }
 
-			<Button onClick={ removeFilter } isSmall>
-				{ __( 'Remove Filter', 'jetpack' ) }
-			</Button>
+			{ !! isRemovable && (
+				<Button onClick={ removeFilter } isSmall>
+					{ __( 'Remove Filter', 'jetpack' ) }
+				</Button>
+			) }
 		</div>
 	);
 }

diff --git 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
@@ -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
@@ -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,28 +101,28 @@ function GooglePhotosMedia( props ) {
 					onChange={ setPath }
 				/>
 
-				{ path.ID === PATH_RECENT && (
+				{ showAdditionalFilters && path.ID === PATH_RECENT && (
 					<GoogleFilterView
 						filters={ filters }
 						isLoading={ isLoading }
 						setFilters={ setFilters }
 						canChangeMedia={ ! imageOnly }
 					/>
 				) }
-			</div>
 
-			<div className="jetpack-external-media-header__filter">
-				{ path.ID === PATH_RECENT && (
-					<GoogleFilterOption
-						filters={ filters }
-						isLoading={ isLoading }
-						setFilters={ setFilters }
-						canChangeMedia={ ! imageOnly }
-					/>
-				) }
-				{ path.ID !== PATH_RECENT && path.ID !== PATH_ROOT && (
-					<Breadcrumbs path={ path } setPath={ setPath } />
-				) }
+				<div className="jetpack-external-media-header__filter">
+					{ path.ID === PATH_RECENT && (
+						<GoogleFilterOption
+							filters={ filters }
+							isLoading={ isLoading }
+							setFilters={ setFilters }
+							canChangeMedia={ ! imageOnly }
+						/>
+					) }
+					{ path.ID !== PATH_RECENT && path.ID !== PATH_ROOT && (
+						<Breadcrumbs path={ path } setPath={ setPath } />
+					) }
+				</div>
 			</div>
 
 			<MediaBrowser