Add react-router

master
Drew DeVault 2017-08-24 08:30:22 -04:00
parent 1e1027aeb2
commit 2103334a21
11 changed files with 60 additions and 12 deletions

View File

@ -39,7 +39,10 @@
"express": "^4.15.3", "express": "^4.15.3",
"file-loader": "^0.11.2", "file-loader": "^0.11.2",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"history": "^4.7.2",
"node-sass": "^4.5.3", "node-sass": "^4.5.3",
"react-router-dom": "^4.2.0",
"react-router-redux": "^5.0.0-alpha.6",
"sass-loader": "^6.0.6" "sass-loader": "^6.0.6"
} }
} }

View File

@ -1 +1,2 @@
export const UPDATE_RESOURCES = 'UPDATE_RESOURCES'; export const UPDATE_RESOURCES = 'UPDATE_RESOURCES';
export const RESOURCES_REMOVED = 'RESOURCES_REMOVED';

View File

@ -1,8 +1,9 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import store from './store'; import store, { history } from './store';
import scss from '../scss/main.scss'; import scss from '../scss/main.scss';
import { ws_init } from './socket'; import { ws_init } from './socket';
import { filter_subscribe } from './actions/filter_subscribe'; import { filter_subscribe } from './actions/filter_subscribe';
@ -17,12 +18,14 @@ ws_init(() => {
render( render(
<Provider store={store}> <Provider store={store}>
<div> <ConnectedRouter history={history}>
<Nav /> <div>
<div className="container"> <Nav />
<Main /> <div className="container">
<Main />
</div>
</div> </div>
</div> </ConnectedRouter>
</Provider>, </Provider>,
document.getElementById('root') document.getElementById('root')
); );

View File

@ -1,4 +1,5 @@
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux'
import subscribe from './subscribe'; import subscribe from './subscribe';
import filter_subscribe from './filter_subscribe'; import filter_subscribe from './filter_subscribe';
import torrents from './torrents'; import torrents from './torrents';
@ -6,7 +7,8 @@ import torrents from './torrents';
const root = combineReducers({ const root = combineReducers({
subscribe, subscribe,
filter_subscribe, filter_subscribe,
torrents torrents,
router: routerReducer
}); });
export default root; export default root;

View File

@ -1,4 +1,7 @@
import { UPDATE_RESOURCES } from '../actions/resources'; import {
UPDATE_RESOURCES,
RESOURCES_REMOVED
} from '../actions/resources';
export default function torrents(state = {}, action) { export default function torrents(state = {}, action) {
switch (action.type) { switch (action.type) {
@ -12,6 +15,10 @@ export default function torrents(state = {}, action) {
[r.id]: { ...state[r.id], ...r } [r.id]: { ...state[r.id], ...r }
}), {}) }), {})
}; };
case RESOURCES_REMOVED:
return Object.values(state)
.filter(r => action.ids.indexOf(r.id) === -1)
.reduce((s, r) => ({ ...s, [r.id]: r }), {});
} }
return state; return state;
} }

View File

@ -38,4 +38,5 @@ export function ws_init(cb) {
ws = new WebSocket("ws://127.0.0.1:8412"); ws = new WebSocket("ws://127.0.0.1:8412");
ws.addEventListener("open", cb); ws.addEventListener("open", cb);
ws.addEventListener("message", ws_recv); ws.addEventListener("message", ws_recv);
ws.addEventListener("close", () => console.log("ws closed"));
} }

View File

@ -4,14 +4,18 @@ import {
compose compose
} from 'redux'; } from 'redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware, push } from 'react-router-redux'
import reducer from './reducers'; import reducer from './reducers';
export const history = createHistory();
const _compose = const _compose =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
|| compose; || compose;
const store = createStore( const store = createStore(
reducer, reducer,
_compose(applyMiddleware(thunk)), _compose(applyMiddleware(thunk, routerMiddleware(history))),
); );
export const dispatch = action => store.dispatch(action); export const dispatch = action => store.dispatch(action);

View File

@ -0,0 +1,9 @@
import React from 'react';
export default function add_torrent(props) {
return (
<div>
<h3>Add torrent</h3>
</div>
);
}

View File

@ -1,5 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Route } from 'react-router';
import TorrentTable from './torrent_table'; import TorrentTable from './torrent_table';
import AddTorrent from './add_torrent';
import TorrentDetails from './torrent_details';
export default class Main extends Component { export default class Main extends Component {
render() { render() {
@ -9,8 +12,8 @@ export default class Main extends Component {
<TorrentTable /> <TorrentTable />
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<h3>archlinux-2017.08.01-x86_64.iso</h3> <Route path="/add-torrent" component={AddTorrent} />
<p>TODO details</p> <Route path="/torrents/:id" component={TorrentDetails} />
</div> </div>
</div> </div>
); );

View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import { NavLink } from 'react-router-dom';
export default function render(props) { export default function render(props) {
return <nav className="navbar navbar-light navbar-toggleable-xl"> return <nav className="navbar navbar-light navbar-toggleable-xl">
@ -6,7 +7,11 @@ export default function render(props) {
<div className="navbar-collapse collapse"> <div className="navbar-collapse collapse">
<ul className="navbar-nav mr-auto"> <ul className="navbar-nav mr-auto">
<li className="nav-item"> <li className="nav-item">
<a className="nav-link" href="#">add torrent</a> <NavLink
to="/add-torrent"
className="nav-link"
activeClassName="nav-link active"
>add torrent</NavLink>
</li> </li>
<li className="nav-item" style={{minWidth: "1rem"}}> <li className="nav-item" style={{minWidth: "1rem"}}>
</li> </li>

View File

@ -0,0 +1,10 @@
import React from 'react';
export default function add_torrent(props) {
return (
<div>
<h3>Torrent details</h3>
</div>
);
}