Wire up search routing

package.json

@@ -48,6 +48,7 @@
     "node-sass": "^4.7.2",
     "preact": "^8.2.7",
     "preact-compat": "^3.17.0",
+    "query-string": "^5.0.1",
     "react": "^15.6.2",
     "react-dom": "^15.6.2",
     "react-fontawesome": "^1.6.1",

src/actions/filter_subscribe.js

@@ -3,9 +3,9 @@ import ws_send from '../socket';
 export const FILTER_SUBSCRIBE = 'FILTER_SUBSCRIBE';
 export const FILTER_UNSUBSCRIBE = 'FILTER_UNSUBSCRIBE';
 
-export function filter_subscribe(kind='torrent', criteria=[]) {
+export function filter_subscribe(kind='torrent', criteria=[], serial=null) {
   return dispatch => {
-    const serial = ws_send(FILTER_SUBSCRIBE, { kind, criteria });
+    const serial = ws_send(FILTER_SUBSCRIBE, { kind, criteria }, null, serial);
     dispatch({ type: FILTER_SUBSCRIBE, serial, kind, criteria });
   };
 }

src/index.js

@@ -12,7 +12,6 @@ import { ws_init } from './socket';
 import { filter_subscribe } from './actions/filter_subscribe';
 import { socket_uri, socket_update, SOCKET_STATE } from './actions/socket';
 
-import Nav from './ui/navigation';
 import Main from './ui/main';
 import Connection from './ui/connection';
 
@@ -33,12 +32,7 @@ const render = main =>
   ReactDOM.render(
     <Provider store={store}>
       <ConnectedRouter history={history}>
-        <div>
+        {main}
-          <Nav />
-          <div className="container-fluid">
-            {main}
-          </div>
-        </div>
       </ConnectedRouter>
     </Provider>, document.getElementById('root'));
 

src/socket.js

@@ -10,8 +10,8 @@ let queue = [];
 const getURI = ({ uri, password }) => `${uri}${password ?
   `?password=${encodeURIComponent(password)}` : ''}`;
 
-export default function ws_send(type, body, callback = null) {
+export default function ws_send(type, body, callback = null, __serial = null) {
-  const _serial = serial++;
+  const _serial = __serial !== null ? __serial : serial++;
   if (callback) {
     transactions[_serial] = callback;
   }

src/ui/main.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Route, DefaultRoute } from 'react-router';
 import { connect } from 'react-redux';
+import Nav from './navigation';
 import TorrentTable from './torrent_table';
 import AddTorrent from './add_torrent';
 import TorrentDetails from './torrent_details';
@@ -10,17 +11,22 @@ import ConnectionOverlay from './connection';
 export default class Main extends Component {
   render() {
     return (
-      <div className="row">
+      <div>
-        <div className="col-md-8">
+        <Nav />
-          <TorrentTable />
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-8">
+              <TorrentTable />
+            </div>
+            <div className="col-md-4">
+              <Route exact path="/add-torrent" component={AddTorrent} />
+              <Route path="/add-torrent/:magnet" component={AddTorrent} />
+              <Route path="/torrents/:ids" component={TorrentDetails} />
+              <Route exact path="/" component={Server} />
+            </div>
+            <ConnectionOverlay />
+          </div>
         </div>
-        <div className="col-md-4">
-          <Route exact path="/add-torrent" component={AddTorrent} />
-          <Route path="/add-torrent/:magnet" component={AddTorrent} />
-          <Route path="/torrents/:ids" component={TorrentDetails} />
-          <Route exact path="/" component={Server} />
-        </div>
-        <ConnectionOverlay />
       </div>
     );
   }

src/ui/navigation.js

@@ -1,7 +1,31 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { Link, NavLink } from 'react-router-dom';
+import { filter_subscribe } from '../actions/filter_subscribe';
+import { push } from 'react-router-redux';
+import query from 'query-string';
 
-export default function render(props) {
+function search_qs(text) {
+  const qs = query.stringify({
+    ...query.parse(location.search),
+    s: text || undefined
+  });
+  return `${
+    location.pathname === "/" ? location.pathname : ""
+  }${qs && "?" + qs}`;
+}
+
+function update_filter(text, fs, location, dispatch) {
+  dispatch(push(search_qs(text)));
+}
+
+function render(props) {
+  const { dispatch, router } = props;
+  const qs = query.parse(router.location.search);
+  const navto = where => e => {
+    e.preventDefault();
+    dispatch(push(where));
+  };
   return <nav className="navbar navbar-light navbar-toggleable-xl">
     <Link to="/" className="navbar-brand">receptor</Link>
     <div className="navbar-collapse collapse">
@@ -16,22 +40,45 @@ export default function render(props) {
         <li className="nav-item" style={{minWidth: "1rem"}}>
         </li>
         <li className="nav-item">
-          <a className="nav-link" href="#">all</a>
+          <a
+            className="nav-link"
+            href={search_qs("")}
+            onClick={navto(search_qs(""))}
+          >all</a>
         </li>
         <li className="nav-item">
-          <a className="nav-link" href="#">leeching</a>
+          <a
+            className="nav-link"
+            href={search_qs("status:leeching")}
+            onClick={navto(search_qs("status:leeching"))}
+          >leeching</a>
         </li>
         <li className="nav-item">
-          <a className="nav-link" href="#">seeding</a>
+          <a
+            className="nav-link"
+            href={search_qs("status:seeding")}
+            onClick={navto(search_qs("status:seeding"))}
+          >seeding</a>
         </li>
         <form className="form-inline">
           <input
             className="form-control mr-sm-2"
             type="text"
             placeholder="Search"
-            aria-label="Search" />
+            aria-label="Search"
+            value={qs.s}
+            onChange={e => update_filter(
+              e.target.value,
+              props.filter_subscribe,
+              router.location,
+              dispatch)} />
         </form>
       </ul>
     </div>
   </nav>;
 }
+
+export default connect(state => ({
+  filter_subscribe: state.filter_subscribe,
+  router: state.router,
+}))(render);