add netlify-auth dynamic asset search

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"
   },

src/actions/mediaLibrary.js

@@ -32,16 +32,16 @@ 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);
     const integration = selectIntegration(state, null, 'assetStore');
     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 }
   };
 }
 

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}
       >
         <h1>{forImage ? 'Images' : 'Assets'}</h1>
-        <input className={styles.searchInput} type="text" value={this.state.query} onChange={this.handleSearch.bind(this)} placeholder="Search..." disabled={!hasFiles || !hasImages} autoFocus/>
+        <input
+          className={styles.searchInput}
+          value={this.state.query}
+          onChange={this.handleSearchChange}
+          onKeyDown={event => this.handleSearchKeyDown(event, dynamicSearch)}
+          placeholder="Search..."
+          disabled={!hasFiles || !hasImages}
+          autoFocus
+        />
         <div style={{ height: '100%', paddingBottom: '130px' }}>
           <div style={{ height: '100%', overflowY: 'auto' }} ref={ref => this.tableScrollRef = ref}>
             <Table onRowSelect={idx => this.handleRowSelect(tableData[idx])}>

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',

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);
+}

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);