Add react-router

package.json

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

src/actions/resources.js

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

src/index.js

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

src/reducers/index.js

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

src/reducers/torrents.js

@@ -1,4 +1,7 @@
-import { UPDATE_RESOURCES } from '../actions/resources';
+import {
+  UPDATE_RESOURCES,
+  RESOURCES_REMOVED
+} from '../actions/resources';
 
 export default function torrents(state = {}, action) {
   switch (action.type) {
@@ -12,6 +15,10 @@ export default function torrents(state = {}, action) {
             [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;
 }

src/socket.js

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

src/store.js

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

src/ui/add_torrent.js

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

src/ui/main.js

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

src/ui/navigation.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 
 export default function render(props) {
   return <nav className="navbar navbar-light navbar-toggleable-xl">
@@ -6,7 +7,11 @@ export default function render(props) {
     <div className="navbar-collapse collapse">
       <ul className="navbar-nav mr-auto">
         <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 className="nav-item" style={{minWidth: "1rem"}}>
         </li>

src/ui/torrent_details.js

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