[ARVADOS-WORKBENCH2] updated: a92bb3822b537682ca621df3c05a458b9ae3420b
Git user
git at public.curoverse.com
Thu May 24 16:19:48 EDT 2018
Summary of changes:
package.json | 4 ++
src/components/project-list/project-list.tsx | 62 ++++++++++++++++++++++++++++
src/index.tsx | 24 ++++++++++-
src/store/root-reducer.ts | 4 +-
src/store/store.ts | 18 +++-----
src/views/workbench/workbench.test.tsx | 4 +-
src/views/workbench/workbench.tsx | 12 +++++-
yarn.lock | 46 ++++++++++++++++++---
8 files changed, 151 insertions(+), 23 deletions(-)
create mode 100644 src/components/project-list/project-list.tsx
via a92bb3822b537682ca621df3c05a458b9ae3420b (commit)
from cf48e928d4d334b0b6434529d7619c616da319f2 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit a92bb3822b537682ca621df3c05a458b9ae3420b
Author: Daniel Kos <daniel.kos at contractors.roche.com>
Date: Thu May 24 22:19:05 2018 +0200
Add router
No issue #
Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos at contractors.roche.com>:
diff --git a/package.json b/package.json
index 3fde318..b213bb5 100644
--- 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
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 5bd1ddd..dacada2 100644
--- 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 333cf98..f86eed0 100644
--- 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 20ee09d..975debe 100644
--- 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 6bd35b3..f7128a7 100644
--- 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 a92e486..365835a 100644
--- 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 d30c297..93702cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -88,7 +88,24 @@
"@types/react" "*"
redux "^4.0.0"
-"@types/react-router at 4.0.25":
+"@types/react-router-dom at 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 at 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 at 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 at 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 at 5.0.7:
loose-envify "^1.1.0"
prop-types "^15.6.0"
-react-router at 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 at 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 at 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 at 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 at 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:
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list