From d0824fe724fc31e176e5baf2f827ea8a34432402 Mon Sep 17 00:00:00 2001
From: Tomas Bures <bures@d3s.mff.cuni.cz>
Date: Sat, 3 Jun 2017 07:49:59 +0200
Subject: [PATCH] Updates

---
 client/package.json                          |   3 +-
 client/src/namespaces.js                     | 208 ++++++++-----------
 client/src/namespaces/NamespacesTreeTable.js |  86 ++++++++
 3 files changed, 174 insertions(+), 123 deletions(-)
 create mode 100644 client/src/namespaces/NamespacesTreeTable.js

diff --git a/client/package.json b/client/package.json
index ed1cd8ff..87eafd6d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,7 +20,8 @@
     "prop-types": "^15.5.10",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "react-i18next": "^4.1.0"
+    "react-i18next": "^4.1.0",
+    "react-router-dom": "^4.1.1"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
diff --git a/client/src/namespaces.js b/client/src/namespaces.js
index b379d854..7959d7fe 100644
--- a/client/src/namespaces.js
+++ b/client/src/namespaces.js
@@ -1,122 +1,86 @@
-'use strict';
-
-import ReactDOM from 'react-dom';
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import jQuery from 'jquery';
-import '../public/jquery/jquery-ui-1.12.1.min.js';
-import '../public/fancytree/jquery.fancytree-all.min.js';
-import '../public/fancytree/skin-bootstrap/ui.fancytree.min.css';
-
-import { I18nextProvider, translate } from 'react-i18next';
-import i18n from './i18n';
-
-class TestTreeTable extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            treeData: [
-                {title: 'A', key: '1', expanded: true},
-                {title: 'B', key: '2', expanded: true, folder: true, children: [
-                    {title: 'BA', key: '3', expanded: true, folder: true, children: [
-                        {title: 'BAA', key: '4', expanded: true},
-                        {title: 'BAB', key: '5', expanded: true}
-                    ]},
-                    {title: 'BB', key: '6', expanded: true, folder: true, children: [
-                        {title: 'BBA', key: '7', expanded: true},
-                        {title: 'BBB', key: '8', expanded: true}
-                    ]}
-                ]}
-            ]
-        };
-    }
-
-    componentDidMount() {
-        const glyphOpts = {
-            map: {
-                expanderClosed: 'glyphicon glyphicon-menu-right',
-                expanderLazy: 'glyphicon glyphicon-menu-right',  // glyphicon-plus-sign
-                expanderOpen: 'glyphicon glyphicon-menu-down',  // glyphicon-collapse-down
-            }
-        };
-
-        this.tree = jQuery(this.domTable).fancytree({
-            extensions: ['glyph', 'table'],
-            glyph: glyphOpts,
-            selectMode: 1,
-            icon: false,
-            autoScroll: true,
-            scrollParent: jQuery(this.domTableContainer),
-            source: this.state.treeData,
-            table: {
-                nodeColumnIdx: 0
-            }
-        });
-    }
-
-    componentDidUpdate() {
-        this.tree.reload(this.state.treeData);
-    }
-
-    render() {
-        const container =
-            <div ref={(domElem) => { this.domTableContainer = domElem; }} style={{ height: '100px', overflow: 'auto'}}>
-                <table ref={(domElem) => { this.domTable = domElem; }} className="table table-hover table-striped table-condensed">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>B</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td></td>
-                        <td></td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>;
-
-        return (
-            container
-        );
-    }
-
-}
-
-@translate()
-class Namespaces extends Component {
-    render() {
-        const t = this.props.t;
-
-        return (
-            <div>
-                <ol className="breadcrumb">
-                    <li><a href="/">{t('Home')}</a></li>
-                    <li className="active">{t('Namespaces')}</li>
-                </ol>
-
-                <div className="pull-right">
-                    <a className="btn btn-primary" href="/reports/create" role="button"><i className="glyphicon glyphicon-plus"></i> {t('Create Namespace')}</a>
-                </div>
-
-                <h2>{t('Namespaces')}</h2>
-
-                <hr />
-
-                <TestTreeTable />
-            </div>
-        );
-    }
-}
-
-export default function() {
-    ReactDOM.render(
-        <I18nextProvider i18n={ i18n }><Namespaces/></I18nextProvider>,
-        document.getElementById('root')
-    );
-};
-
-
+'use strict';
+
+import ReactDOM from 'react-dom';
+import React, { Component } from 'react';
+import {
+    BrowserRouter as Router,
+    Route,
+    Link
+} from 'react-router-dom'
+
+import { I18nextProvider, translate } from 'react-i18next';
+import i18n from './i18n';
+
+import NamespacesTreeTable from './namespaces/NamespacesTreeTable';
+
+
+@translate()
+class List extends Component {
+    render() {
+        console.log(this.props);
+        console.log(this.props.routes);
+        const t = this.props.t;
+
+        return (
+            <div>
+                <h2>{t('Namespaces')}</h2>
+
+                <hr />
+
+                <NamespacesTreeTable />
+            </div>
+        );
+    }
+}
+
+
+@translate()
+class Create extends Component {
+    render() {
+        console.log(this.props);
+        console.log(this.props.routes);
+        const t = this.props.t;
+        return (
+            <div>
+                <h2>{t('Create Namespace')}</h2>
+
+                <hr />
+            </div>
+        );
+    }
+}
+
+
+@translate()
+class Namespaces extends Component {
+    render() {
+        const t = this.props.t;
+
+        return (
+            <Router>
+                <div>
+                    <ol className="breadcrumb">
+                        <li><a href="/">{t('Home')}</a></li>
+                        <li className="active">{t('Namespaces')}</li>
+                    </ol>
+
+                    <div className="pull-right">
+                        <Link to="/namespaces/create"><span className="btn btn-primary" role="button"><i className="glyphicon glyphicon-plus"></i> {t('Create Namespace')}</span></Link>
+                    </div>
+
+                    <Route exact path="/namespaces" component={List} />
+                    <Route exact path="/namespaces/create" component={Create} />
+                </div>
+            </Router>
+        );
+    }
+}
+
+export default function() {
+    ReactDOM.render(
+        <I18nextProvider i18n={ i18n }><Namespaces/></I18nextProvider>,
+        document.getElementById('root')
+    );
+};
+
+
diff --git a/client/src/namespaces/NamespacesTreeTable.js b/client/src/namespaces/NamespacesTreeTable.js
new file mode 100644
index 00000000..7de1c471
--- /dev/null
+++ b/client/src/namespaces/NamespacesTreeTable.js
@@ -0,0 +1,86 @@
+'use strict';
+
+import React, { Component } from 'react';
+import { translate } from 'react-i18next';
+
+import jQuery from 'jquery';
+import '../../public/jquery/jquery-ui-1.12.1.min.js';
+import '../../public/fancytree/jquery.fancytree-all.min.js';
+import '../../public/fancytree/skin-bootstrap/ui.fancytree.min.css';
+
+translate();
+class NamespacesTreeTable extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            treeData: [
+                {title: 'A', key: '1', expanded: true},
+                {title: 'B', key: '2', expanded: true, folder: true, children: [
+                    {title: 'BA', key: '3', expanded: true, folder: true, children: [
+                        {title: 'BAA', key: '4', expanded: true},
+                        {title: 'BAB', key: '5', expanded: true}
+                    ]},
+                    {title: 'BB', key: '6', expanded: true, folder: true, children: [
+                        {title: 'BBA', key: '7', expanded: true},
+                        {title: 'BBB', key: '8', expanded: true}
+                    ]}
+                ]}
+            ]
+        };
+    }
+
+    componentDidMount() {
+        const glyphOpts = {
+            map: {
+                expanderClosed: 'glyphicon glyphicon-menu-right',
+                expanderLazy: 'glyphicon glyphicon-menu-right',  // glyphicon-plus-sign
+                expanderOpen: 'glyphicon glyphicon-menu-down',  // glyphicon-collapse-down
+            }
+        };
+
+        this.tree = jQuery(this.domTable).fancytree({
+            extensions: ['glyph', 'table'],
+            glyph: glyphOpts,
+            selectMode: 1,
+            icon: false,
+            autoScroll: true,
+            scrollParent: jQuery(this.domTableContainer),
+            source: this.state.treeData,
+            table: {
+                nodeColumnIdx: 0
+            }
+        });
+    }
+
+    componentDidUpdate() {
+        this.tree.reload(this.state.treeData);
+    }
+
+    render() {
+        const container =
+            <div ref={(domElem) => { this.domTableContainer = domElem; }} style={{ height: '100px', overflow: 'auto'}}>
+                <table ref={(domElem) => { this.domTable = domElem; }} className="table table-hover table-striped table-condensed">
+                    <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>B</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>;
+
+        return (
+            container
+        );
+    }
+
+}
+
+export default NamespacesTreeTable;
\ No newline at end of file