diff --git a/package.json b/package.json index ad870740d597..0bd3d2d71860 100644 --- a/package.json +++ b/package.json @@ -162,6 +162,7 @@ "unified": "^6.1.4", "unist-builder": "^1.0.2", "unist-util-visit-parents": "^1.1.1", + "url": "^0.11.0", "uuid": "^2.0.3", "whatwg-fetch": "^1.0.0" }, diff --git a/src/actions/mediaLibrary.js b/src/actions/mediaLibrary.js index 9ba52e16972a..6dfdfa030f30 100644 --- a/src/actions/mediaLibrary.js +++ b/src/actions/mediaLibrary.js @@ -32,7 +32,7 @@ export function insertMedia(mediaPath) { return { type: MEDIA_INSERT, payload: { mediaPath } }; } -export function loadMedia(delay = 0) { +export function loadMedia(delay = 0, query) { return (dispatch, getState) => { const state = getState(); const backend = currentBackend(state.config); @@ -40,8 +40,8 @@ export function loadMedia(delay = 0) { if (integration) { const provider = getIntegrationProvider(state.integrations, backend.getToken, integration); dispatch(mediaLoading()); - return provider.retrieve() - .then(files => dispatch(mediaLoaded(files))) + return provider.retrieve(query) + .then(files => dispatch(mediaLoaded(files, true))) .catch(error => dispatch(mediaLoadFailed())); } dispatch(mediaLoading()); @@ -128,10 +128,10 @@ export function mediaLoading() { return { type: MEDIA_LOAD_REQUEST }; } -export function mediaLoaded(files) { +export function mediaLoaded(files, dynamicSearch) { return { type: MEDIA_LOAD_SUCCESS, - payload: { files } + payload: { files, dynamicSearch } }; } diff --git a/src/components/MediaLibrary/MediaLibrary.js b/src/components/MediaLibrary/MediaLibrary.js index 1789a00f455d..26f2f1a874c1 100644 --- a/src/components/MediaLibrary/MediaLibrary.js +++ b/src/components/MediaLibrary/MediaLibrary.js @@ -26,7 +26,7 @@ class MediaLibrary extends React.Component { componentDidMount() { const { dispatch, closeMediaLibrary } = this.props; - dispatch(loadMedia()); + dispatch(loadMedia(0, this.state.query)); } componentWillReceiveProps(nextProps) { @@ -113,7 +113,7 @@ class MediaLibrary extends React.Component { const files = [...fileList]; const file = files[0]; return dispatch(persistMedia(file, privateUpload)) - .then(() => dispatch(loadMedia())); + .then(() => dispatch(0, loadMedia(this.state.query))); }; handleInsert = () => { @@ -138,7 +138,13 @@ class MediaLibrary extends React.Component { }); }; - handleSearch = event => { + handleSearchKeyDown = (event, dynamicSearch) => { + if (event.key === 'Enter' && dynamicSearch) { + this.props.dispatch(loadMedia(0, this.state.query)); + } + }; + + handleSearchChange = event => { this.setState({ query: event.target.value }); }; @@ -191,10 +197,10 @@ class MediaLibrary extends React.Component { }; render() { - const { isVisible, canInsert, files, forImage, isLoading, isPersisting, isDeleting } = this.props; + const { isVisible, canInsert, files, dynamicSearch, forImage, isLoading, isPersisting, isDeleting } = this.props; const { query, selectedFile } = this.state; const filteredFiles = forImage ? this.filterImages(files) : files; - const queriedFiles = query ? this.queryFilter(query, filteredFiles) : filteredFiles; + const queriedFiles = query && !dynamicSearch ? this.queryFilter(query, filteredFiles) : filteredFiles; const tableData = this.toTableData(queriedFiles); const hasFiles = files && !!files.length; const hasImages = filteredFiles && !!filteredFiles.length; @@ -227,7 +233,15 @@ class MediaLibrary extends React.Component { footer={footer} >

{forImage ? 'Images' : 'Assets'}

- + this.handleSearchKeyDown(event, dynamicSearch)} + placeholder="Search..." + disabled={!hasFiles || !hasImages} + autoFocus + />
this.tableScrollRef = ref}> this.handleRowSelect(tableData[idx])}> diff --git a/src/integrations/providers/assetStore/implementation.js b/src/integrations/providers/assetStore/implementation.js index 878eb33a5797..7bb34989130c 100644 --- a/src/integrations/providers/assetStore/implementation.js +++ b/src/integrations/providers/assetStore/implementation.js @@ -1,3 +1,5 @@ +import { addParams } from '../../../lib/urlHelper'; + export default class AssetStore { constructor(config, getToken) { this.config = config; @@ -66,9 +68,12 @@ export default class AssetStore { }); } - retrieve() { + retrieve(query) { + const url = query ? addParams(this.getSignedFormURL, { search: query }) : this.getSignedFormURL; + console.log(url); + return this.getToken() - .then(token => this.request(this.getSignedFormURL, { + .then(token => this.request(url, { method: 'GET', headers: { 'Content-Type': 'application/json', diff --git a/src/lib/urlHelper.js b/src/lib/urlHelper.js index accf70463f5c..8ed6650f0704 100644 --- a/src/lib/urlHelper.js +++ b/src/lib/urlHelper.js @@ -1,3 +1,5 @@ +import url from 'url'; + function getUrl(url, direct) { return `${ direct ? '/#' : '' }${ url }`; } @@ -9,3 +11,9 @@ export function getCollectionUrl(collectionName, direct) { export function getNewEntryUrl(collectionName, direct) { return getUrl(`/collections/${ collectionName }/entries/new`, direct); } + +export function addParams(urlString, params) { + const parsedUrl = url.parse(urlString, true); + parsedUrl.query = { ...parsedUrl.query, ...params }; + return url.format(parsedUrl); +} diff --git a/src/reducers/mediaLibrary.js b/src/reducers/mediaLibrary.js index a70ee5a629d3..5c9824090f1d 100644 --- a/src/reducers/mediaLibrary.js +++ b/src/reducers/mediaLibrary.js @@ -37,8 +37,9 @@ const mediaLibrary = (state = Map({ isVisible: false, controlMedia: Map() }), ac return state.set('isLoading', true); case MEDIA_LOAD_SUCCESS: return state.withMutations(map => { - map.set('isLoading', false) - map.set('files', action.payload.files) + map.set('isLoading', false); + map.set('files', action.payload.files); + map.set('dynamicSearch', action.payload.dynamicSearch); }); case MEDIA_LOAD_FAILURE: return state.set('isLoading', false);