docs: update getAsset documentation (#3080)

decaporg · Jan 13, 2020 · b733419 · b733419
1 parent 69b130a
commit b733419
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 16 deletions.
diff --git a/website/content/docs/architecture.md b/website/content/docs/architecture.md
@@ -34,7 +34,7 @@ Selectors are functions defined within reducers used to compute derived data fro
 
 **selectEntries:** Selects all entries for a given collection.
 
-**getAsset:** Selects a single AssetProxy object for the given URI.
+**getAsset:** Selects a single AssetProxy object for the given path.
 
 ## Value Objects
 **AssetProxy:** AssetProxy is a Value Object that holds information regarding an asset file (for example, an image), whether it's persisted online or held locally in cache.
@@ -59,7 +59,7 @@ The control component receives one (1) callback as a prop: `onChange`.
 * onChange (required): Should be called when the users changes the current value. It will ultimately end up updating the EntryDraft object in the Redux Store, thus updating the preview component.
 * onAddAsset & onRemoveAsset (optionals): Should be invoked with an `AssetProxy` value object if the field accepts file uploads for media (images, for example). `onAddAsset` will get the current media stored in the Redux state tree while `onRemoveAsset` will remove it. AssetProxy objects are stored in the `Medias` object and referenced in the `EntryDraft` object on the state tree.
 
-Both control and preview widgets receive a `getAsset` selector via props. Displaying the media (or its URI) for the user should always be done via `getAsset`, as it returns an AssetProxy that can return the correct value for both medias already persisted on the server and cached media not yet uploaded.
+Both control and preview widgets receive a `getAsset` selector via props. Displaying the media (or its URI) for the user should always be done via `getAsset`, as it returns a Promise that resolves to an AssetProxy that can return the correct value for both medias already persisted on the server and cached media not yet uploaded.
 
 The actual persistence of the content and medias inserted into the control component is delegated to the backend implementation. The backend will be called with the updated values and a list of assetProxy objects for each field of the entry, and should return a promise that can resolve into the persisted entry object and the list of the persisted media URIs.
 

diff --git a/website/content/docs/customization.md b/website/content/docs/customization.md
@@ -71,20 +71,54 @@ Registers a template for a folder collection or an individual file in a file col
     ```html
     <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
     <script>
-    var PostPreview = createClass({
-      render: function() {
-        var entry = this.props.entry;
-        var image = entry.getIn(['data', 'image']);
-        var bg = this.props.getAsset(image);
-        return h('div', {},
-          h('h1', {}, entry.getIn(['data', 'title'])),
-          h('img', {src: bg.toString()}),
-          h('div', {"className": "text"}, this.props.widgetFor('body'))
-        );
-      }
-    });
-
-    CMS.registerPreviewTemplate("posts", PostPreview);
+      var PostPreview = createClass({
+        subscribed: true,
+
+        getInitialState: function() {
+          return {
+            src: '',
+          };
+        },
+
+        _fetchAsset: function() {
+          const path = this.props.entry.getIn(['data', 'image']);
+          path &&
+            this.props.getAsset(path).then(value => {
+              if (this.subscribed) {
+                this.setState({ src: value.toString() });
+              }
+            });
+        },
+
+        componentDidMount: function() {
+          this._fetchAsset();
+        },
+
+        componentWillUnmount: function() {
+          this.subscribed = false;
+        },
+
+        componentDidUpdate: function(prevProps) {
+          const prevPath = prevProps.entry.getIn(['data', 'image']);
+          const path = this.props.entry.getIn(['data', 'image']);
+          if (prevPath !== path || prevProps.getAsset !== this.props.getAsset) {
+            this._fetchAsset();
+          }
+        },
+
+        render: function() {
+          var entry = this.props.entry;
+          return h(
+            'div',
+            {},
+            h('h1', {}, entry.getIn(['data', 'title'])),
+            h('img', { src: this.state.src }),
+            h('div', { className: 'text' }, this.props.widgetFor('body')),
+          );
+        },
+      });
+
+      CMS.registerPreviewTemplate('posts', PostPreview);
     </script>
     ```
     ### Lists and Objects