From a92bb3822b537682ca621df3c05a458b9ae3420b Mon Sep 17 00:00:00 2001 From: Daniel Kos Date: Thu, 24 May 2018 22:19:05 +0200 Subject: [PATCH] Add router No issue # Arvados-DCO-1.1-Signed-off-by: Daniel Kos : --- 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 diff --git a/package.json b/package.json index 3fde3189..b213bb5e 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 00000000..3526da39 --- /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 = (theme: Theme) => ({ + root: { + width: '100%', + marginTop: theme.spacing.unit * 3, + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, +}); + +interface ProjectListProps { +} + +class ProjectList extends React.Component, {}> { + render() { + const {classes} = this.props; + return + + + + Name + Status + Type + Shared by + File size + Last modified + + + + + Project 1 + Complete + Project + John Doe + 1.5 GB + 9:22 PM + + +
+ + } +} + +export default withStyles(styles)(ProjectList); diff --git a/src/index.tsx b/src/index.tsx index 5bd1dddb..dacada2e 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 = () => - + +
+ +
+ ; ReactDOM.render( diff --git a/src/store/root-reducer.ts b/src/store/root-reducer.ts index 333cf98f..f86eed0e 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; diff --git a/src/store/store.ts b/src/store/store.ts index 20ee09d4..975debe8 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 6bd35b34..f7128a74 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(, div); ReactDOM.unmountComponentAtNode(div); }); diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index a92e486e..365835a9 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, W }}>
- {p.name} + {p.name} }/>
- Hello new workbench! + + + Hello new workbench! + + +
); diff --git a/yarn.lock b/yarn.lock index d30c2979..93702cd0 100644 --- 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: -- 2.30.2