Use CollectionView component to render relation box's content
authorFrank Bessou <frank.bessou@logilab.fr>
Wed, 03 May 2017 11:23:26 +0200
changeset 172 71a41a02d5ce
parent 171 12203e38d2b9
child 173 965aeaedcde3
Use CollectionView component to render relation box's content
src/components/Entity.js
--- a/src/components/Entity.js	Tue May 02 18:07:04 2017 +0200
+++ b/src/components/Entity.js	Wed May 03 11:23:26 2017 +0200
@@ -2,7 +2,6 @@
 import {PropTypes} from 'prop-types';
 import {FormWrapper} from './Form';
 
-import {isEmpty} from 'lodash/lang';
 import {merge} from 'lodash/object';
 
 import Api from '../Api';
@@ -10,7 +9,7 @@
 import {createResource, PropTypeJsonaryWrapper} from '../jsonaryutils';
 import {PropTypesEntityModel} from '../model';
 import {buildFormData, appendPath} from '../utils';
-import {ActionsDropDown, CollectionItemLink} from './BaseViews';
+import {ActionsDropDown, CollectionView} from './BaseViews';
 import {WorkflowActions} from './Workflow';
 import {AttributeValue} from './Attribute';
 
@@ -81,7 +80,7 @@
     constructor(props) {
         super(props);
         this.state = {
-            related: [],
+            related: null,
             link: props.link,
         };
     }
@@ -109,23 +108,22 @@
     }
 
     renderRelated() {
-        let relatedItems;
-        if (isEmpty(this.state.related)) {
-            relatedItems = (
-                <div className="panel-body text-muted">
-                    nothing related yet
-                </div>
+        const related = this.state.related;
+        if (related === null) {
+            return (
+                    <div className="panel-body text-muted">
+                        loading...
+                    </div>
             );
+        } else if (related.data.length() === 0) {
+            return (
+                    <div className="panel-body text-muted">
+                        nothing related yet
+                    </div>
+                );
         } else {
-            relatedItems = this.state.related.data.mapItems(
-                (item) => (
-                    <li className="list-group-item" key={item.uniqueId}>
-                        <CollectionItemLink item={item} />
-                    </li>
-                )
-            );
+            return <CollectionView collection={this.state.related} />;
         }
-        return relatedItems;
     }
 
     render() {
@@ -136,9 +134,7 @@
                         { this.renderTitle() }
                     </div>
                 </div>
-                <ul className="list-group">
-                    { this.renderRelated() }
-                </ul>
+                { this.renderRelated() }
             </div>
         );
     }