Make RelatedResources a functional component
authorPhilippe Pepiot <philippe.pepiot@logilab.fr>
Tue, 30 May 2017 16:24:33 +0200
changeset 217 67419e09a231
parent 216 29ef6742d635
child 218 b1eb36b816da
Make RelatedResources a functional component By using ResourceContainer to actually get the resource and render using RelatedResources.
src/components/Entity.js
src/components/Resource.js
--- a/src/components/Entity.js	Tue May 23 11:26:35 2017 +0200
+++ b/src/components/Entity.js	Tue May 30 16:24:33 2017 +0200
@@ -2,7 +2,7 @@
 import {PropTypes} from 'prop-types';
 import {FormWrapper} from './Form';
 
-import HypermediaClient from '../services/hypermedia';
+import {PropTypesResourceModel} from '../model';
 import {PropTypeJsonaryWrapper} from '../jsonaryutils';
 import {ActionsDropDown, CollectionView} from './BaseViews';
 import {AttributeValue} from './Attribute';
@@ -69,31 +69,9 @@
     data: PropTypeJsonaryWrapper.isRequired,
 };
 
-export class RelatedResources extends React.Component {
-    // XXX This is very similar to Entities component...
-    constructor(props) {
-        super(props);
-        this.state = {
-            related: null,
-            link: props.link,
-        };
-    }
-
-    componentDidMount() {
-        HypermediaClient.getResource(this.state.link.href)
-            .then(entities => this.setState({related: entities}))
-            .catch(error => {
-                console.error(`error on RelatedResources  ${error}`);
-            });
-    }
-
-    componentWillReceiveProps(nextProps) {
-        this.setState({link: nextProps.link});
-        this.componentDidMount();
-    }
-
-    renderActions() {
-        const related = this.state.related;
+export function RelatedResources(props) {
+    function renderActions() {
+        const related = props.resource;
         if (!related || related.allowedActions.length <= 1) {
             return null;
         }
@@ -101,52 +79,49 @@
 
     }
 
-    renderTitle() {
-        const title = this.state.link.title;
+    function renderTitle() {
         return (
             <div>
-                { title }
-                { this.renderActions() }
+                { props.link.title }
+                { renderActions() }
                 <div className="clearfix" />
             </div>
         );
     }
 
-    renderRelated() {
-        const related = this.state.related;
-        if (related === null) {
+    function renderRelated() {
+        if (props.resource === null) {
             return (
                     <div className="panel-body text-muted">
                         loading...
                     </div>
             );
-        } else if (related.data.length() === 0) {
+        } else if (props.resource.data.length() === 0) {
             return (
                     <div className="panel-body text-muted">
                         nothing related yet
                     </div>
             );
         } else {
-            return <CollectionView collection={this.state.related.data} />;
+            return <CollectionView collection={props.resource.data} />;
         }
     }
 
-    render() {
-        return (
-            <div className="panel panel-default">
-                <div className="panel-heading">
-                    <div className="panel-title">
-                        { this.renderTitle() }
-                    </div>
+    return (
+        <div className="panel panel-default">
+            <div className="panel-heading">
+                <div className="panel-title">
+                    { renderTitle() }
                 </div>
-                { this.renderRelated() }
             </div>
-        );
-    }
+            { renderRelated() }
+        </div>
+    );
 }
 
 RelatedResources.propTypes = {
     link: PropTypes.object.isRequired,
+    resource: PropTypesResourceModel.isRequired,
 };
 
 const uiSchema = {
--- a/src/components/Resource.js	Tue May 23 11:26:35 2017 +0200
+++ b/src/components/Resource.js	Tue May 30 16:24:33 2017 +0200
@@ -132,7 +132,7 @@
         const links = entity.links('related');
         if (links.length > 0) {
             return Array.prototype.map.call(links, (link) => {
-                return <RelatedResources key={link.title} link={link} />;
+                return <ResourceContainer url={link.href} component={RelatedResources} childProps={{link: link}} key={link.title} />;
             });
         }
         return null;