From 2103334a21dfa48b2b896ff27872236257f9fbaa Mon Sep 17 00:00:00 2001
From: Drew DeVault <sir@cmpwn.com>
Date: Thu, 24 Aug 2017 08:30:22 -0400
Subject: [PATCH] Add react-router

---
 package.json              |  3 +++
 src/actions/resources.js  |  1 +
 src/index.js              | 15 +++++++++------
 src/reducers/index.js     |  4 +++-
 src/reducers/torrents.js  |  9 ++++++++-
 src/socket.js             |  1 +
 src/store.js              |  6 +++++-
 src/ui/add_torrent.js     |  9 +++++++++
 src/ui/main.js            |  7 +++++--
 src/ui/navigation.js      |  7 ++++++-
 src/ui/torrent_details.js | 10 ++++++++++
 11 files changed, 60 insertions(+), 12 deletions(-)
 create mode 100644 src/ui/add_torrent.js
 create mode 100644 src/ui/torrent_details.js

diff --git a/package.json b/package.json
index d221a70..aebb174 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/actions/resources.js b/src/actions/resources.js
index 2eaff0a..b4afc58 100644
--- a/src/actions/resources.js
+++ b/src/actions/resources.js
@@ -1 +1,2 @@
 export const UPDATE_RESOURCES = 'UPDATE_RESOURCES';
+export const RESOURCES_REMOVED = 'RESOURCES_REMOVED';
diff --git a/src/index.js b/src/index.js
index 5204d12..202ac0a 100644
--- a/src/index.js
+++ b/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}>
-    <div>
-      <Nav />
-      <div className="container">
-        <Main />
+    <ConnectedRouter history={history}>
+      <div>
+        <Nav />
+        <div className="container">
+          <Main />
+        </div>
       </div>
-    </div>
+    </ConnectedRouter>
   </Provider>,
   document.getElementById('root')
 );
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 1cc260d..709c0f6 100644
--- a/src/reducers/index.js
+++ b/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;
diff --git a/src/reducers/torrents.js b/src/reducers/torrents.js
index 5e9c768..8c8bcd2 100644
--- a/src/reducers/torrents.js
+++ b/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;
 }
diff --git a/src/socket.js b/src/socket.js
index 0072dda..54725e1 100644
--- a/src/socket.js
+++ b/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"));
 }
diff --git a/src/store.js b/src/store.js
index faf3c90..3629363 100644
--- a/src/store.js
+++ b/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);
diff --git a/src/ui/add_torrent.js b/src/ui/add_torrent.js
new file mode 100644
index 0000000..d4af755
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/ui/main.js b/src/ui/main.js
index e8322b7..97c098e 100644
--- a/src/ui/main.js
+++ b/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>
     );
diff --git a/src/ui/navigation.js b/src/ui/navigation.js
index 37fd735..29e543b 100644
--- a/src/ui/navigation.js
+++ b/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>
diff --git a/src/ui/torrent_details.js b/src/ui/torrent_details.js
new file mode 100644
index 0000000..00532cd
--- /dev/null
+++ b/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>
+  );
+}
+