Add and use ResourceCollectionView to render collections
authorFrank Bessou <frank.bessou@logilab.fr>
Wed, 10 May 2017 10:47:10 +0200
changeset 188 8cc2ed471ffb
parent 187 94c1c16ec8a0
child 189 c6d48aca5190
Add and use ResourceCollectionView to render collections Currently rendered for all routes ending with a trailing slash which are not /{etype}/{eid}.
src/components/Entities.js
src/components/Resource.js
src/index.js
--- a/src/components/Entities.js	Tue May 09 10:29:46 2017 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,68 +0,0 @@
-import React from 'react';
-import {PropTypes} from 'prop-types';
-import {ActionsDropDown, CollectionView} from './BaseViews';
-import Api from '../Api';
-import {PropTypesEntitiesModel} from '../model';
-
-export default class Entities extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {entities: null};
-    }
-
-    componentDidMount() {
-        const {etype} = this.props.match.params;
-        Api.getEntities(etype)
-            .then(entities => this.setState({entities: entities}));
-    }
-
-    render() {
-        if (this.state.entities === null) {
-            return <p>loading...</p>;
-        }
-        return <EntitiesView {...this.state} />;
-    }
-}
-
-Entities.propTypes = {
-    match: PropTypes.shape({
-        params: PropTypes.shape({
-            etype: PropTypes.string.isRequired,
-        }),
-    }),
-};
-
-function EntitiesView(props) {
-
-    function renderActions() {
-        return <ActionsDropDown target={props.entities} />;
-    }
-
-    function renderTitle() {
-        return props.entities.data.getLink('self').title;
-    }
-
-    function renderEntities() {
-        if (props.entities.data.length() > 0) {
-            return <CollectionView collection={props.entities.data} />;
-        }
-
-        return <div className="text-mutted">
-            no {props.entities.etype} entity yet
-        </div>;
-    }
-
-    return (
-        <div>
-            { renderActions() }
-            <div className="clearfix" />
-            <h3>{ renderTitle() }</h3>
-            { renderEntities() }
-        </div>
-    );
-}
-
-EntitiesView.propTypes = {
-    entities: PropTypesEntitiesModel.isRequired,
-};
--- a/src/components/Resource.js	Tue May 09 10:29:46 2017 +0200
+++ b/src/components/Resource.js	Wed May 10 10:47:10 2017 +0200
@@ -5,6 +5,7 @@
 import {appendPath} from '../utils';
 import {EntityForm} from './Entity';
 import {PropTypesResourceModel} from '../model';
+import {ActionsDropDown, CollectionView} from './BaseViews';
 
 export class ResourceContainer extends React.Component {
     constructor(props) {
@@ -95,10 +96,47 @@
     router: PropTypes.object,
 };
 
+export function ResourceCollectionView(props) {
+    const collection = props.resource.data;
+    function renderActions() {
+        return <ActionsDropDown target={props.resource} />;
+    }
+
+    function renderTitle() {
+        return collection.getLink('self').title;
+    }
+
+    function renderEntities() {
+        if (collection.length() > 0) {
+            return <CollectionView collection={collection} />;
+        }
+
+        return <div className="text-mutted">
+            No entities yet
+        </div>;
+    }
+
+    return (
+        <div>
+            { renderActions() }
+            <div className="clearfix" />
+            <h3>{ renderTitle() }</h3>
+            { renderEntities() }
+        </div>
+    );
+}
+ResourceCollectionView.propTypes = {
+    resource: PropTypesResourceModel.isRequired,
+};
+
 export function Resource(props) {
     function selectView() {
-        if (props.match.params.action === 'new') {
-            return ResourceCreationForm;
+        switch (props.match.params.action) {
+            case 'new':
+                return ResourceCreationForm;
+            case 'view':
+            default:
+                return ResourceCollectionView;
         }
     }
     return <ResourceContainer url={props.match.params.apiUrl} component={selectView()} />;
--- a/src/index.js	Tue May 09 10:29:46 2017 +0200
+++ b/src/index.js	Wed May 10 10:47:10 2017 +0200
@@ -4,7 +4,6 @@
 
 import {App, NotFound} from './components/App';
 import {Root} from './components/Root';
-import Entities from './components/Entities';
 import {Entity, AddRelated} from './components/Entity';
 import {Resource} from './components/Resource';
 
@@ -18,10 +17,16 @@
             <Switch>
                 <Route exact path='/' component={Root} />
                 <Route exact path=":apiUrl(.*)@@:action(new)" component={Resource} />
+                {/* Entity (view, edit, delete) route */}
+                <Route exact path="/:etype/:eid@@:view" component={Entity} />
+                <Route exact path="/:etype/:eid/@@:view" component={Entity} />
+                <Route exact path="/:etype/:eid" component={Entity} />
+
+                {/* ResourceCollectionView route */}
+                <Route exact path=":apiUrl(.*/)@@:action(view)" component={Resource} />
+                <Route exact path=":apiUrl(.*/)" component={Resource} />
+
                 <Route path="/:etype/:eid/relationships/:rtype" component={AddRelated} />
-                <Route path="/:etype/:eid@@:view" component={Entity} />
-                <Route path="/:etype/:eid" component={Entity} />
-                <Route path="/:etype" component={Entities} />
                 <Route path="*" component={NotFound} />
             </Switch>
         </App>