Add ResourceView component intended to render either a collection or an entity
authorFrank Bessou <frank.bessou@logilab.fr>
Wed, 10 May 2017 14:53:10 +0200
changeset 189 c6d48aca5190
parent 188 8cc2ed471ffb
child 190 bc61eaa9d97a
Add ResourceView component intended to render either a collection or an entity Currently it only implements collections.
src/components/Resource.js
--- a/src/components/Resource.js	Wed May 10 10:47:10 2017 +0200
+++ b/src/components/Resource.js	Wed May 10 14:53:10 2017 +0200
@@ -5,6 +5,7 @@
 import {appendPath} from '../utils';
 import {EntityForm} from './Entity';
 import {PropTypesResourceModel} from '../model';
+import {PropTypeJsonaryWrapper} from '../jsonaryutils';
 import {ActionsDropDown, CollectionView} from './BaseViews';
 
 export class ResourceContainer extends React.Component {
@@ -97,36 +98,46 @@
 };
 
 export function ResourceCollectionView(props) {
-    const collection = props.resource.data;
-    function renderActions() {
-        return <ActionsDropDown target={props.resource} />;
-    }
-
-    function renderTitle() {
-        return collection.getLink('self').title;
+    if (props.collection.length() > 0) {
+        return <CollectionView collection={props.collection} />;
     }
 
-    function renderEntities() {
-        if (collection.length() > 0) {
-            return <CollectionView collection={collection} />;
-        }
+    return <div className="text-mutted">
+        No entities yet
+    </div>;
+}
+ResourceCollectionView.propTypes = {
+    collection: PropTypeJsonaryWrapper.isRequired,
+};
 
-        return <div className="text-mutted">
-            No entities yet
-        </div>;
+export function ResourceView(props) {
+    const data = props.resource.data;
+    function renderHeader() {
+        return (
+            <div>
+                <ActionsDropDown target={props.resource} ignore={['view']}/>
+                <div className="clearfix" />
+                <h3>{ data.schemas().title() }</h3>
+            </div>
+        );
     }
-
+    function renderData() {
+        const isCollection = data.schemas().basicTypes()[0] === 'array';
+        if (isCollection) {
+            return <ResourceCollectionView collection={data} />;
+        } else {
+            throw Error('Not implemented');
+        }
+    }
     return (
         <div>
-            { renderActions() }
-            <div className="clearfix" />
-            <h3>{ renderTitle() }</h3>
-            { renderEntities() }
+            { renderHeader() }
+            { renderData() }
         </div>
     );
 }
-ResourceCollectionView.propTypes = {
-    resource: PropTypesResourceModel.isRequired,
+ResourceView.propTypes = {
+    resource: PropTypesResourceModel,
 };
 
 export function Resource(props) {
@@ -136,7 +147,7 @@
                 return ResourceCreationForm;
             case 'view':
             default:
-                return ResourceCollectionView;
+                return ResourceView;
         }
     }
     return <ResourceContainer url={props.match.params.apiUrl} component={selectView()} />;