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.

Sign up for GitHub

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

External Media: Update Google Photo Filters #16190

Merged
merged 2 commits into from
Jun 25, 2020
Merged

External Media: Update Google Photo Filters #16190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
166ccf2
Update Google Photo Filters
marekhrabe Jun 18, 2020
87a8b9b
Update filter label
obenland Jun 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 34 additions & 1 deletion extensions/shared/external-media/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Intentionally left in, as the filtering logic is fully implemented. UI will follow in a different PR.

//{
// value: DATE_RANGE_CUSTOM,
// label: __( 'Custom Range', 'jetpack' ),
//},
];
22 changes: 0 additions & 22 deletions extensions/shared/external-media/sources/google-photos/date-formatting.js
View file
Open in desktop

This file was deleted.

54 changes: 20 additions & 34 deletions extensions/shared/external-media/sources/google-photos/filter-option.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
/**
* External dependencies
*/
import { dateI18n, __experimentalGetSettings } from '@wordpress/date';
marekhrabe marked this conversation as resolved.
Show resolved Hide resolved
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 (
Expand All @@ -23,31 +25,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={ __( 'Filter by time period', 'jetpack' ) }
value={ value?.range || DATE_RANGE_ANY }
options={ GOOGLE_PHOTOS_DATE_PRESETS }
onChange={ range => updateFilter( { range } ) }
/>
);
}
Expand Down Expand Up @@ -78,8 +62,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' ) {
Expand All @@ -93,14 +77,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>
);
}
Expand Down
49 changes: 45 additions & 4 deletions extensions/shared/external-media/sources/google-photos/filter-request.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ) {
Expand All @@ -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' );
marekhrabe marked this conversation as resolved.
Show resolved Hide resolved
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 }` );
}
Expand Down
3 changes: 1 addition & 2 deletions extensions/shared/external-media/sources/google-photos/filter-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
];
Expand Down
43 changes: 27 additions & 16 deletions extensions/shared/external-media/sources/google-photos/google-photos-media.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -29,10 +35,15 @@ function GooglePhotosMedia( props ) {
allowedTypes,
path,
copyMedia,
showAdditionalFilters = false,
obenland marked this conversation as resolved.
Show resolved Hide resolved
} = 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( '' );
Expand Down Expand Up @@ -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
Expand Down