docs(example:file-feed): Refactor and cleanup

haadcode · haadcode · commit a7b60493ed90 · 2017-01-29T13:09:18.000+02:00
Use callbacks instead of Promises.
Refactor DataStore.
Move fonts import to CSS.
Add "postinstall" step to package.json to copy the webpack config file to its correct directory.
Remove old files that were added back to due to a messed up rebase.
diff --git a/examples/file-feed/complete/package.json b/examples/file-feed/complete/package.json
@@ -17,6 +17,7 @@
     "react-router": "^3.0.1"
   },
   "scripts": {
+    "postinstall": "cp config/webpack.config.dev.js node_modules/react-scripts/config/webpack.config.dev.js",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
diff --git a/examples/file-feed/complete/public/index.html b/examples/file-feed/complete/public/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Anonymous+Pro|Source+Code+Pro" rel="stylesheet">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <title>File Feed</title>
   </head>
diff --git a/examples/file-feed/complete/src/browser-app/App.js b/examples/file-feed/complete/src/browser-app/App.js
@@ -28,13 +28,16 @@ class App extends Component {
     this.setStatus('Starting IPFS')
 
     // Initialize our DataStore, ie. start IPFS
-    dataStore = DataStore.init({
-      path: '/ipfs/' + new Date().toString(),
+    DataStore.init({
+      path: '/ipfs-file-feed/',
       signalAddr: '/dns4/star-signal.cloud.ipfs.team'
-    })
+    }, (err, res) => {
+      if (err) {
+        console.error(err)
+        return
+      }
 
-    dataStore.on('error', (e) => console.error(e))
-    dataStore.on('ready', () => {
+      dataStore = res
       this.setStatus('IPFS Started', 5000)
 
       const feedName = this.props.params.hash
diff --git a/examples/file-feed/complete/src/browser-app/DataStore.js b/examples/file-feed/complete/src/browser-app/DataStore.js
@@ -10,48 +10,50 @@ let instance
 class DataStore extends EventEmitter {
   constructor (options) {
     super()
+    this.ipfs = null
+  }
+
+  init (options, callback) {
     spawnNode(options, (err, node) => {
       if (err) {
-        console.log(err)
+        callback(err)
+      } else {
+        this.ipfs = node
+        callback(null, this)
       }
-      this.ipfs = node
-      this.emit('ready')
     })
   }
 
   // Open an orbit-db database and hook up to the emitted events
   openFeed (name) {
     this.orbitdb = new OrbitDB(this.ipfs)
-    this.feed = this.orbitdb.feed(name, { cachePath: '/ipfd/ipfd2.db' })
+    this.feed = this.orbitdb.feed(name, { cachePath: '/file-feed.db' })
     this.feed.events.on('ready', () => this.emit('feed'))
     this.feed.events.on('history', () => this.emit('update'))
     this.feed.events.on('data', () => this.emit('update'))
     if (this.timer) clearInterval(this.timer)
     this.timer = setInterval(() => this._updatePeers(name), 1000)
   }
 
-  getFile (hash) {
-    return new Promise((resolve, reject) => {
-      // Cat the contents of a multihash
-      this.ipfs.files.cat(hash)
-        .then((stream) => {
-          // Buffer all contents of the file as text
-          // and once buffered, create a blob for the picture
-          let buffer = []
-          let bytes = 0
-          stream.on('error', (e) => console.error(e))
-          stream.on('data', (d) => {
-            bytes += d.length
-            buffer.push(d)
-            this.emit('load', hash, bytes)
-          })
-          stream.on('end', () => {
-            this.emit('load', hash, bytes)
-            resolve(buffer)
-          })
+  getFile (hash, callback) {
+    // Cat the contents of a multihash
+    this.ipfs.files.cat(hash)
+      .then((stream) => {
+        // Buffer all contents of the file
+        let buffer = []
+        let bytes = 0
+        stream.on('error', callback)
+        stream.on('data', (d) => {
+          bytes += d.length
+          buffer.push(d)
+          this.emit('load', hash, bytes)
         })
-        .catch(reject)
-    })
+        stream.on('end', () => {
+          this.emit('load', hash, bytes)
+          callback(null, buffer)
+        })
+      })
+      .catch(callback)
   }
 
   addFiles (file) {
@@ -70,13 +72,14 @@ class DataStore extends EventEmitter {
       })
     }
 
-    readFileContents(file)
-      .then((content) => addToIpfs(file.name, content))
-      .then((files) => {
-        files.forEach((e) => addToOrbitDB(e, file.type))
-      })
-      .then(() => this.emit('file', file))
-      .catch((e) => console.error(e))
+    readFileContents(file, (err, content) => {
+      addToIpfs(file.name, content)
+        .then((files) => {
+          files.forEach((e) => addToOrbitDB(e, file.type))
+        })
+        .then(() => this.emit('file', file))
+        .catch((e) => console.error(e))      
+    })
   }
 
   connectToPeer (multiaddr) {
@@ -95,9 +98,13 @@ class DataStore extends EventEmitter {
 }
 
 class DataStoreSingleton {
-  static init (options) {
-    instance = !instance ? new DataStore(options) : instance
-    return instance
+  static init (options, callback) {
+    if (!instance) {
+      instance = new DataStore()
+      instance.init(options, callback)
+    } else {
+      callback(null, instance)
+    }
   }
 }
 
diff --git a/examples/file-feed/complete/src/browser-app/Preview.js b/examples/file-feed/complete/src/browser-app/Preview.js
@@ -13,7 +13,10 @@ class Preview extends Component {
       progress: 'Loading...'
     }
     // Get a DataStore instance (singleton across the app)
-    dataStore = DataStore.init()
+    DataStore.init(null, (err, res) => {
+      if (err) { console.error(err) }
+      dataStore = res
+    })
     this.handleLoadProgress = this.handleLoadProgress.bind(this)
   }
 
@@ -22,16 +25,18 @@ class Preview extends Component {
 
     dataStore.on('load', this.handleLoadProgress)
 
-    dataStore.getFile(this.props.hash)
-      .then((content) => {
+    dataStore.getFile(this.props.hash, (err, content) => {
+      if (err) {
+        console.error(err)
+      } else {
         const data = isMediaFile(this.props.type)
           ? URL.createObjectURL(new Blob(content))
           : content.map((e) => e.toString()).join('')
 
         // Set the content for this preview
         this.setState({ data: data })
-      })
-      .catch((e) => console.error(e))
+      }
+    })
   }
 
   componentWillUnmount () {
diff --git a/examples/file-feed/complete/src/browser-app/index.css b/examples/file-feed/complete/src/browser-app/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro|Source+Code+Pro');
+
 body {
   margin: 0;
   padding: 0;
diff --git a/examples/file-feed/complete/src/browser-app/read-file.js b/examples/file-feed/complete/src/browser-app/read-file.js
@@ -1,9 +1,7 @@
 // Read contents of a File (TODO: link to MDN) and
 // return the contents as an ArrayBuffer
-export function readFileContents (file) {
-  return new Promise((resolve) => {
-    const reader = new FileReader()
-    reader.onload = (event) => resolve(event.target.result)
-    reader.readAsArrayBuffer(file)
-  })
+export function readFileContents (file, callback) {
+  const reader = new FileReader()
+  reader.onload = (event) => callback(null, event.target.result)
+  reader.readAsArrayBuffer(file)
 }
diff --git a/examples/file-feed/complete/src/util/spawn-node.js b/examples/file-feed/complete/src/util/spawn-node.js
@@ -8,12 +8,24 @@ const multiaddr = require('multiaddr')
 const series = require('async/series')
 
 function spawnNode (options, callback) {
-  options.path = options.path || '/ipfd/tmp/' + Math.random()
+  options.path = options.path || '/ipfs/'
+  options.initRepo = options.initRepo || true
 
   const node = new IPFS(options.path)
 
   series([
-    (cb) => node.init({ emptyRepo: true, bits: 2048 }, cb),
+    (cb) => {
+      node.init({ emptyRepo: true, bits: 2048 }, (err) => {
+        if (err) {
+          const errStr = String(err).match(/repo already exists/)
+          if (errStr.length > 0) {
+            cb(null)
+          }
+        } else {
+          cb(null)
+        }
+      })
+    },
     (cb) => {
       node.config.get((err, config) => {
         if (err) { return cb(err) }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro\|Source+Code+Pro');`
	`2`	`+`
`1`	`3`	`body {`
`2`	`4`	`margin: 0;`
`3`	`5`	`padding: 0;`