Fix torrent import (patch)

src/Layout.js

@@ -107,6 +107,7 @@ class Layout extends Component {
       handleRecipeRemove: this.handleRecipeRemove.bind(this),
       handleRecipeEdit: this.handleRecipeEdit.bind(this),
       handleRecipesImportDemo: this.handleRecipesImportDemo.bind(this),
+      handleRecipesTorrentImport: this.handleRecipesTorrentImport.bind(this),
       handleCalculatorSave: this.handleCalculatorSave.bind(this),
       handleTracker: this.handleTracker.bind(this),
       settings,
@@ -271,7 +272,7 @@ class Layout extends Component {
     });
   }
 
-  importRecipes(recipesScanned) {
+  handleRecipesTorrentImport(recipesScanned) {
     const recipes = List(recipesScanned);
 
     this.setState({ recipes }, function saveRecipesToLocal() {

src/sync/Exporter.js

@@ -5,16 +5,16 @@ import { Button } from 'rmwc/Button';
 import { SimpleDialog } from 'rmwc/Dialog';
 import { Typography } from 'rmwc';
 
-const TORRENT_FILE_NAME = 'cheff recipes';
+import { TORRENT_FILE_NAME } from './constants';
 
 class Exporter extends Component {
   constructor(props) {
     super(props);
-    this.exportRecipesToQRCode = this.exportRecipesToQRCode.bind(this);
     this.state = {};
   }
 
-  exportRecipesToQRCode() {
+  exportRecipesToQRCode = () => {
+    const self = this;
     const recipesSerialized = JSON.stringify(this.props.recipes);
 
     const recipesBuffer = Buffer.from(recipesSerialized, 'ascii');
@@ -23,6 +23,7 @@ class Exporter extends Component {
 
     client.seed(recipesBuffer, { name: TORRENT_FILE_NAME }, torrent => {
       console.log('Client is seeding ' + torrent.magnetURI);
+      self.setState({ magnetURI: torrent.magnetURI });
 
       QRCode.toDataURL(torrent.magnetURI)
         .then(url => {
@@ -38,7 +39,7 @@ class Exporter extends Component {
           console.error(err);
         });
     });
-  }
+  };
 
   render() {
     return (
@@ -50,13 +51,17 @@ class Exporter extends Component {
           open={this.state.exportDialogIsOpen}
           onClose={() => this.setState({ exportDialogIsOpen: false })}
           onAccept={() => console.log('accepted')}
-          acceptLabel="Done"
+          acceptLabel="Stop Seeding"
           onCancel={() => console.log('cancelled')}
         >
           <Typography use="subtitle2">QR code generated</Typography>
           <img src={this.state.qrCodeDataUrl} className="qrImage" />
         </SimpleDialog>
 
+        {this.state.magnetURI && `Seeding ${this.state.magnetURI}`}
+
+        {this.state.error}
+
         <style jsx>{`
           .qrImage {
             width: 16rem;

src/sync/Importer.js

@@ -5,57 +5,65 @@ import { Button } from 'rmwc/Button';
 import { SimpleDialog } from 'rmwc/Dialog';
 import { Typography } from 'rmwc';
 
-const TORRENT_FILE_NAME = 'cheff recipes';
+import { TORRENT_FILE_NAME } from './constants';
 
 class Importer extends Component {
   constructor(props) {
     super(props);
-    this.importRecipesToQRCode = this.importRecipesToQRCode.bind(this);
-    this.handleScan = this.handleScan.bind(this);
-    this.handleScanError = this.handleScanError.bind(this);
-    this.startTorrentFetching = this.startTorrentFetching.bind(this);
     this.state = {};
   }
 
-  importRecipesToQRCode() {
+  importRecipesToQRCode = () => {
     this.setState({ importDialogIsOpen: true });
-  }
+  };
 
-  startTorrentFetching() {
+  startTorrentFetching = () => {
+    const self = this;
     const client = new WebTorrent();
 
-    client.add(this.state.torrentId, torrent => {
-      torrent.on('done', () => {
-        console.log('torrent download finished');
+    if (this.state.torrentId) {
+      client.add(this.state.torrentId, torrent => {
+        torrent.on('done', () => {
+          console.log('torrent download finished');
 
-        torrent.files
-          .find(file => file.name === TORRENT_FILE_NAME)
-          .getBuffer((err, buf) => {
-            if (err) throw err;
-            const recipesSerialized = buf.toString('ascii');
-            if (recipesSerialized) {
-              try {
-                const recipes = JSON.parse(recipesSerialized);
-                this.props.importRecipes(recipes);
-              } catch (err) {
+          torrent.files
+            .find(file => file.name === TORRENT_FILE_NAME)
+            .getBuffer((err, buf) => {
+              if (err) {
+                const { message } = err || {};
                 console.error(err);
+                self.setState({ error: message });
+              }
+              const recipesSerialized = buf.toString('ascii');
+              if (recipesSerialized) {
+                try {
+                  const recipes = JSON.parse(recipesSerialized);
+                  self.props.importRecipes(recipes);
+                  self.setState({ done: 'Import complete!' });
+                } catch (err) {
+                  console.error(err);
+                }
               }
-            }
-          });
+            });
+        });
       });
-    });
-  }
+    } else {
+      self.setState({ error: 'missing torrentId' });
+    }
+  };
 
-  handleScan(torrentId) {
+  handleScan = torrentId => {
     if (torrentId) {
       this.setState({ torrentId });
     }
-  }
+  };
 
-  handleScanError(err) {
+  handleScanError = err => {
     // todo show snackbar
     console.error(err);
-  }
+    const { message } = err || {};
+    this.setState({ error: message });
+  };
 
   render() {
     return (
@@ -66,7 +74,7 @@ class Importer extends Component {
           title="Import Recipes"
           open={this.state.importDialogIsOpen}
           onClose={() => this.setState({ importDialogIsOpen: false })}
-          acceptLabel="Save"
+          acceptLabel="Start"
           onAccept={this.startTorrentFetching}
           onCancel={() => console.log('cancelled import')}
         >
@@ -82,6 +90,9 @@ class Importer extends Component {
           <p>{this.state.torrentId && 'Ready'}</p>
         </SimpleDialog>
 
+        {this.state.error}
+        {this.state.done}
+
         <style jsx>{`
           .qrImage {
             width: 16rem;

src/sync/Sync.js

@@ -13,7 +13,7 @@ class Sync extends Component {
           Sync your recipe data within your laptop and mobile devices
         </Typography>
         <Exporter recipes={this.props.recipes} />
-        <Importer importRecipes={this.props.importRecipes} />
+        <Importer importRecipes={this.props.handleRecipesTorrentImport} />
       </div>
     );
   }

src/sync/constants.js

@@ -0,0 +1 @@
+export const TORRENT_FILE_NAME = 'cheff recipes';