Add router

No issue #

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>:

diff --git a/package.json b/package.json
index 3fde318978b857db6dbe4f99cd89df02f6e9bbae..b213bb5e2e522fc38d592b35eb802a07eb529469 100644 (file)
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "react-dom": "16.3.2",
     "react-redux": "5.0.7",
     "react-router": "4.2.0",
+    "react-router-dom": "4.2.2",
+    "react-router-redux": "5.0.0-alpha.9",
     "react-scripts-ts": "2.16.0",
     "redux": "4.0.0",
     "redux-devtools": "3.4.1",
@@ -27,6 +29,8 @@
     "@types/react-dom": "16.0.5",
     "@types/react-redux": "6.0.0",
     "@types/react-router": "4.0.25",
+    "@types/react-router-dom": "4.2.6",
+    "@types/react-router-redux": "5.0.14",
     "@types/redux-devtools": "3.0.44",
     "typescript": "2.8.3"
   },

diff --git a/src/components/project-list/project-list.tsx b/src/components/project-list/project-list.tsx
new file mode 100644 (file)
index 0000000..3526da3
--- /dev/null
+++ b/src/components/project-list/project-list.tsx
@@ -0,0 +1,62 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { Theme } from "@material-ui/core";
+import { StyleRulesCallback, WithStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper/Paper";
+import withStyles from "@material-ui/core/es/styles/withStyles";
+import Table from "@material-ui/core/Table/Table";
+import TableHead from "@material-ui/core/TableHead/TableHead";
+import TableRow from "@material-ui/core/TableRow/TableRow";
+import TableCell from "@material-ui/core/TableCell/TableCell";
+import TableBody from "@material-ui/core/TableBody/TableBody";
+
+type CssRules = 'root' | 'table';
+
+const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+    root: {
+        width: '100%',
+        marginTop: theme.spacing.unit * 3,
+        overflowX: 'auto',
+    },
+    table: {
+        minWidth: 700,
+    },
+});
+
+interface ProjectListProps {
+}
+
+class ProjectList extends React.Component<ProjectListProps & WithStyles<CssRules>, {}> {
+    render() {
+        const {classes} = this.props;
+        return <Paper className={classes.root}>
+            <Table className={classes.table}>
+                <TableHead>
+                    <TableRow>
+                        <TableCell>Name</TableCell>
+                        <TableCell>Status</TableCell>
+                        <TableCell>Type</TableCell>
+                        <TableCell>Shared by</TableCell>
+                        <TableCell>File size</TableCell>
+                        <TableCell>Last modified</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    <TableRow>
+                        <TableCell>Project 1</TableCell>
+                        <TableCell>Complete</TableCell>
+                        <TableCell>Project</TableCell>
+                        <TableCell>John Doe</TableCell>
+                        <TableCell>1.5 GB</TableCell>
+                        <TableCell>9:22 PM</TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+        </Paper>
+    }
+}
+
+export default withStyles(styles)(ProjectList);

diff --git a/src/index.tsx b/src/index.tsx
index 5bd1dddb56f6c27d0af0996b4e2a0ce119b9fa6b..dacada2e6e2ab496f03de89e835fcab600c39603 100644 (file)
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,12 +6,32 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Provider } from "react-redux";
 import Workbench from './views/workbench/workbench';
-import store from "./store/store";
+import ProjectList from './components/project-list/project-list';
 import './index.css';
+import { Route, Router } from "react-router";
+import createBrowserHistory from "history/createBrowserHistory";
+import configureStore from "./store/store";
+import { ConnectedRouter } from "react-router-redux";
+
+const history = createBrowserHistory();
+const store = configureStore({
+    projects: [
+        { name: 'Mouse genome', createdAt: '2018-05-01' },
+        { name: 'Human body', createdAt: '2018-05-01' },
+        { name: 'Secret operation', createdAt: '2018-05-01' }
+    ],
+    router: {
+        location: null
+    }
+}, history);
 
 const App = () =>
     <Provider store={store}>
-        <Workbench/>
+        <ConnectedRouter history={history}>
+            <div>
+                <Route path="/" component={Workbench}/>
+            </div>
+        </ConnectedRouter>
     </Provider>;
 
 ReactDOM.render(

diff --git a/src/store/root-reducer.ts b/src/store/root-reducer.ts
index 333cf98fa12579fcfed989e7ff8323cd0efa46e3..f86eed0ee0a62a4e1f025b7397db0b176b015485 100644 (file)
--- a/src/store/root-reducer.ts
+++ b/src/store/root-reducer.ts
@@ -5,9 +5,11 @@
 import { combineReducers } from "redux";
 import { StateType } from "typesafe-actions";
 import projectsReducer from "./project-reducer";
+import { routerReducer } from "react-router-redux";
 
 const rootReducer = combineReducers({
-    projects: projectsReducer
+    projects: projectsReducer,
+    router: routerReducer
 });
 
 export type RootState = StateType<typeof rootReducer>;

diff --git a/src/store/store.ts b/src/store/store.ts
index 20ee09d40609bd83343a548fbb1b9bf6bf1c2b86..975debe816ce4944bf67aa338b5d80a6c6c4f178 100644 (file)
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -4,24 +4,18 @@
 
 import { createStore, applyMiddleware, compose, Middleware } from 'redux';
 import { default as rootReducer, RootState } from "./root-reducer";
+import { routerMiddleware } from "react-router-redux";
+import { History } from "history";
 
 const composeEnhancers =
     (process.env.NODE_ENV === 'development' &&
     window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
     compose;
 
-function configureStore(initialState?: RootState) {
-    const middlewares: Middleware[] = [];
+export default function configureStore(initialState: RootState, history: History) {
+    const middlewares: Middleware[] = [
+        routerMiddleware(history)
+    ];
     const enhancer = composeEnhancers(applyMiddleware(...middlewares));
     return createStore(rootReducer, initialState!, enhancer);
 }
-
-const store = configureStore({
-    projects: [
-        { name: 'Mouse genome', createdAt: '2018-05-01' },
-        { name: 'Human body', createdAt: '2018-05-01' },
-        { name: 'Secret operation', createdAt: '2018-05-01' }
-    ]
-});
-
-export default store;

diff --git a/src/views/workbench/workbench.test.tsx b/src/views/workbench/workbench.test.tsx
index 6bd35b3449c42f6d86b89b367051bee3567674dd..f7128a7417f3c0cd1000205b701b27946ff4ffe0 100644 (file)
--- a/src/views/workbench/workbench.test.tsx
+++ b/src/views/workbench/workbench.test.tsx
@@ -6,10 +6,12 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import Workbench from '../../views/workbench/workbench';
 import { Provider } from "react-redux";
-import store from "../../store/store";
+import configureStore from "../../store/store";
+import createBrowserHistory from "history/createBrowserHistory";
 
 it('renders without crashing', () => {
     const div = document.createElement('div');
+    const store = configureStore({ projects: [], router: { location: null } }, createBrowserHistory());
     ReactDOM.render(<Provider store={store}><Workbench/></Provider>, div);
     ReactDOM.unmountComponentAtNode(div);
 });

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index a92e486ecf7f133c5092e62a2380a4898944bae9..365835a90a127d101a73c36d1df0040d32003d0c 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -13,6 +13,9 @@ import { connect } from "react-redux";
 import Tree from "../../components/tree/tree";
 import { Project } from "../../models/project";
 import { RootState } from "../../store/root-reducer";
+import ProjectList from "../../components/project-list/project-list";
+import { Route, Switch } from "react-router";
+import { Link } from "react-router-dom";
 
 const drawerWidth = 240;
 
@@ -72,12 +75,17 @@ class Workbench extends React.Component<WorkbenchProps & WithStyles<CssRules>, W
                     }}>
                     <div className={classes.toolbar}/>
                     <Tree items={this.props.projects} render={(p: Project) =>
-                        <span>{p.name}</span>
+                        <Link to={`/project/${p.name}`}>{p.name}</Link>
                     }/>
                 </Drawer>
                 <main className={classes.content}>
                     <div className={classes.toolbar}/>
-                    <Typography noWrap>Hello new workbench!</Typography>
+                    <Switch>
+                        <Route exact path="/">
+                            <Typography noWrap>Hello new workbench!</Typography>
+                        </Route>
+                        <Route path="/project/:name" component={ProjectList}/>
+                    </Switch>
                 </main>
             </div>
         );

diff --git a/yarn.lock b/yarn.lock
index d30c2979bea1a28fd87c0882308dacc51209da3a..93702cd00d0d56754c5593d2d30f127e7ef6543a 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -88,7 +88,24 @@
     "@types/react" "*"
     redux "^4.0.0"
 
-"@types/react-router@4.0.25":
+"@types/react-router-dom@4.2.6":
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.2.6.tgz#9f7eb3c0e6661a9607d878ff8675cc4ea95cd276"
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router-redux@5.0.14":
+  version "5.0.14"
+  resolved "https://registry.yarnpkg.com/@types/react-router-redux/-/react-router-redux-5.0.14.tgz#4f140248f65c74217e296854b1abe8c55e99764c"
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+    redux "^3.7.2"
+
+"@types/react-router@*", "@types/react-router@4.0.25":
   version "4.0.25"
   resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-4.0.25.tgz#1e25490780b80e0d8f96bf649379cca8638c1e5a"
   dependencies:
@@ -107,7 +124,7 @@
   dependencies:
     csstype "^2.2.0"
 
-"@types/redux-devtools@^3.0.44":
+"@types/redux-devtools@3.0.44":
   version "3.0.44"
   resolved "https://registry.yarnpkg.com/@types/redux-devtools/-/redux-devtools-3.0.44.tgz#2781b87067b8aec3102d4cb4a478feb340df5259"
   dependencies:
@@ -5897,7 +5914,26 @@ react-redux@5.0.7:
     loose-envify "^1.1.0"
     prop-types "^15.6.0"
 
-react-router@4.2.0:
+react-router-dom@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
+  dependencies:
+    history "^4.7.2"
+    invariant "^2.2.2"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.4"
+    react-router "^4.2.0"
+    warning "^3.0.0"
+
+react-router-redux@5.0.0-alpha.9:
+  version "5.0.0-alpha.9"
+  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-5.0.0-alpha.9.tgz#825431516e0e6f1fd93b8807f6bd595e23ec3d10"
+  dependencies:
+    history "^4.7.2"
+    prop-types "^15.6.0"
+    react-router "^4.2.0"
+
+react-router@4.2.0, react-router@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986"
   dependencies:
@@ -6090,7 +6126,7 @@ redux-devtools-instrument@^1.0.1:
     lodash "^4.2.0"
     symbol-observable "^1.0.2"
 
-redux-devtools@^3.4.1:
+redux-devtools@3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/redux-devtools/-/redux-devtools-3.4.1.tgz#09d342ce0ab6087be679e953a1d7c530efa1138e"
   dependencies:
@@ -6105,7 +6141,7 @@ redux@4.0.0, redux@^4.0.0:
     loose-envify "^1.1.0"
     symbol-observable "^1.2.0"
 
-redux@^3.6.0:
+redux@^3.6.0, redux@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
   dependencies: