Implement add torrent

font-awesome.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  styles: {
+    "mixins": true,
+
+    "path": true,
+    "core": true,
+    "larger": true,
+    "fixed-width": true,
+    "list": true,
+    "bordered-pulled": true,
+    "animated": true,
+    "rotated-flipped": true,
+    "stacked": true,
+    "icons": true,
+    "screen-reader": true,
+  },
+};

package.json

@@ -26,6 +26,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.5",
+    "reactstrap": "^4.8.0",
     "redux": "^3.7.2",
     "redux-thunk": "^2.2.0",
     "style-loader": "^0.18.2",
@@ -35,14 +36,20 @@
   },
   "dependencies": {
     "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.0.0-alpha.6",
     "express": "^4.15.3",
     "file-loader": "^0.11.2",
     "font-awesome": "^4.7.0",
+    "font-awesome-sass-loader": "^2.0.1",
     "history": "^4.7.2",
+    "isomorphic-fetch": "^2.2.1",
     "node-sass": "^4.5.3",
+    "react-fontawesome": "^1.6.1",
     "react-router-dom": "^4.2.0",
     "react-router-redux": "^5.0.0-alpha.6",
-    "sass-loader": "^6.0.6"
+    "react-transition-group": "^2.2.0",
+    "sass-loader": "^6.0.6",
+    "url-loader": "^0.5.9"
   }
 }

scss/main.scss

@@ -52,3 +52,31 @@
     margin-top: -11px;
   }
 }
+
+.card {
+  border-radius: 0;
+
+  .card-block {
+    padding: 0.5rem;
+  }
+}
+
+.progress-maxheight {
+  height: 100%;
+
+  .progress-bar {
+    height: 100%;
+  }
+}
+
+.nav-link {
+  &.btn-primary {
+    color: white !important;
+
+    &.active {
+      color: black !important;
+      background: transparent !important;
+      border: 1px solid $brand-primary;
+    }
+  }
+}

src/index.js

@@ -1,3 +1,4 @@
+import "babel-polyfill";
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';

src/ui/add_torrent.js

@@ -1,9 +1,127 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import { connect } from 'react-redux';
+import { push } from 'react-router-redux';
+import { Progress, Collapse, Card, CardBlock } from 'reactstrap';
+import FontAwesome from 'react-fontawesome';
+import fetch from 'isomorphic-fetch';
+import ws_send from '../socket';
 
-export default function add_torrent(props) {
-  return (
-    <div>
-      <h3>Add torrent</h3>
-    </div>
-  );
+class AddTorrent extends Component {
+  constructor() {
+    super();
+    this.state = {
+      loading: false,
+      customize: false,
+      file: null
+    };
+  }
+
+  async handleTransferOffer(offer, file) {
+    const headers = new Headers();
+    headers.append("Authorization", "Bearer " + offer.token);
+    try {
+      const resp = await fetch('http://localhost:8412/', {
+        method: 'POST',
+        body: file,
+        headers: headers
+      });
+    } catch (ex) {
+      // TODO: synapse borks up this response
+      console.log(ex);
+    }
+  }
+
+  uploadFile() {
+    this.setState({ loading: true });
+    const { file } = this.state;
+    const { dispatch } = this.props;
+    const reader = new FileReader();
+    reader.onload = e => {
+      ws_send("UPLOAD_TORRENT", { size: file.size }, async offer => {
+        switch (offer.type) {
+          case "TRANSFER_OFFER":
+            return await this.handleTransferOffer(offer, file);
+          case "RESOURCES_EXTANT":
+            const [id] = offer.ids;
+            dispatch(push(`/torrents/${id}`));
+            break;
+        }
+      });
+    };
+    reader.readAsArrayBuffer(file);
+  }
+
+  handleFile(e) {
+    const file = e.target.files[0];
+    this.setState({ file });
+  }
+
+  render() {
+    const { file, loading } = this.state;
+    return (
+      <div>
+        <h3>Add torrent</h3>
+        <div className="form-group">
+          <input
+            style={{display: "none"}}
+            type="file"
+            accept=".torrent"
+            onChange={this.handleFile.bind(this)}
+          />
+          <button
+            type="button"
+            className="btn btn-default"
+            onClick={() => findDOMNode(this).querySelector("input[type='file']").click()}
+          >Select torrent</button>
+          <p>{file ? file.name : ""}</p>
+        </div>
+        <div className="form-group">
+          <p>
+            <button
+              className="btn btn-sm btn-default"
+              onClick={() => this.setState({ customize: !this.state.customize })}
+            >
+              Torrent options
+              <FontAwesome
+                name={`chevron-${this.state.customize ? "up" : "down"}`}
+                style={{marginLeft: "0.25rem"}}
+              />
+            </button>
+          </p>
+          <Collapse isOpen={this.state.customize}>
+            <Card>
+              <CardBlock>
+                TODO
+              </CardBlock>
+            </Card>
+          </Collapse>
+        </div>
+        <div className="form-group">
+          <div className="row">
+            <div className="col-md-5">
+              <button
+                type="button"
+                className="btn btn-primary btn-block"
+                disabled={file === null || loading}
+                onClick={this.uploadFile.bind(this)}
+              >Add torrent</button>
+            </div>
+            <div className="col-md-7">
+              {loading ?
+                <Progress
+                  value={100}
+                  animated={true}
+                  striped={true}
+                  color="info"
+                  className="progress-maxheight"
+                /> : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
 }
+
+export default connect()(AddTorrent);

src/ui/main.js

@@ -13,7 +13,7 @@ export default class Main extends Component {
         </div>
         <div className="col-md-4">
           <Route path="/add-torrent" component={AddTorrent} />
-          <Route path="/torrents/:id" component={TorrentDetails} />
+          <Route path="/torrents/:ids" component={TorrentDetails} />
         </div>
       </div>
     );

src/ui/navigation.js

@@ -9,7 +9,7 @@ export default function render(props) {
         <li className="nav-item">
           <NavLink
             to="/add-torrent"
-            className="nav-link"
+            className="nav-link btn-primary"
             activeClassName="nav-link active"
           >add torrent</NavLink>
         </li>

webpack.config.js

@@ -1,6 +1,7 @@
 const path = require("path");
 const webpack = require("webpack");
 
+
 const defines = {
   "DEFAULT_WS_URI": process.env.WEBSOCKET_URI || "ws://localhost:8412/"
 };
@@ -9,6 +10,7 @@ module.exports = {
   devtool: "source-map",
   entry: [
     "webpack-hot-middleware/client",
+    "font-awesome-sass-loader!./font-awesome.config.js",
     "./src/index.js"
   ],
   output: {
@@ -19,7 +21,17 @@ module.exports = {
   module: {
     rules: [
       { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
-      { test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
+      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: [
+          {
+            loader: 'url-loader',
+            options: { limit: 10000, mimetype: 'application/font-woff' },
+          }
+        ]
+      },
+      {
+        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [ { loader: 'file-loader' } ]
+      },
       { test: /\.scss$/,
         use: [
           'style-loader',