Add Root component to access main resources
authorFrank Bessou <frank.bessou@logilab.fr>
Fri, 07 Apr 2017 16:55:03 +0200
changeset 100 13ff8842ff33
parent 99 6c5e7ccfd728
child 101 80b3bcb94070
Add Root component to access main resources
src/components/Root.js
src/index.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/components/Root.js	Fri Apr 07 16:55:03 2017 +0200
@@ -0,0 +1,45 @@
+import React from 'react';
+import {Link} from 'react-router';
+import Api from '../Api';
+
+export class Root extends React.Component {
+    constructor() {
+        super();
+        this.state = {resource: null};
+    }
+
+    componentDidMount() {
+        Api.getRoot().then(resource => {
+            this.setState({resource: resource});
+        });
+    }
+
+    render() {
+        if (this.state.resource === null) {
+            return (<p>loading...</p>)
+        }
+        return <RootView resource={this.state.resource} />;
+    }
+}
+
+export function RootView({resource}) {
+    function renderTitle() {
+        return resource.data.schemas().title();
+    }
+    return (
+            <div>
+                <h3>{renderTitle()}</h3>
+                <ul className="list-group">{
+                Array.map(resource.data.links(), link =>
+                    <li className="list-group-item" key={link.href}>
+                        <Link to={link.href}>{link.title}</Link>
+                    </li>
+                    )
+                }</ul>
+            </div>
+    );
+}
+
+RootView.propTypes = {
+    resource: React.PropTypes.object.isRequired,
+}
--- a/src/index.js	Fri Apr 07 15:28:19 2017 +0200
+++ b/src/index.js	Fri Apr 07 16:55:03 2017 +0200
@@ -3,6 +3,7 @@
 import {Router, Route, browserHistory} from 'react-router';
 
 import {App, NotFound} from './components/App';
+import {Root} from './components/Root';
 import Entities from './components/Entities';
 import {Entity, EntityCreationForm, AddRelated} from './components/Entity';
 
@@ -12,12 +13,16 @@
 
 render((
     <Router history={browserHistory}>
-        <Route path='/' component={App}>
-            <Route path=":etype" component={Entities} />
-            <Route path=":etype/new" component={EntityCreationForm} />
-            <Route path=":etype/:eid(/:view)" component={Entity} />
-            <Route path=":etype/:eid/relationships/:rtype" component={AddRelated} />
-            <Route path="*" component={NotFound} />
+        <Route path='' component={App}>
+            <Route exact path='/' component={Root} />
+            <Route path='/'>
+                <Route path=":etype" component={Entities} />
+                <Route path=":etype/new" component={EntityCreationForm} />
+                <Route path=":etype/:eid(/:view)" component={Entity} />
+                <Route path=":etype/:eid/relationships/:rtype" component={AddRelated} />
+                <Route path=":etype/:eid/relationships/:rtype" component={AddRelated} />
+                <Route path="*" component={NotFound} />
+            </Route>
         </Route>
     </Router>
 ), appElement);