Add the files to IPFS when creating a Share

app/actions/share.js

@@ -1,9 +1,11 @@
 // @flow
 import { createAction } from 'redux-actions'
 import Share from 'models/Share'
+import Contact from 'models/Contact'
 import { IpfsConnector } from '@akashaproject/ipfs-connector'
 import type { IpfsObject } from 'models/IpfsObject'
 import { waitForIpfsReady } from 'ipfs/index'
+import path from 'path'
 
 export const addEmptyObject = createAction('SHARE_EMPTY_OBJECT_ADD',
   (id: number, name: string, hash: string) => ({id, name, hash})
@@ -45,3 +47,40 @@ export function triggerDownload(share: Share) {
     }
   }
 }
+
+export function createShare(title: string, description: string, recipients: Array<Contact>, content: Array) {
+  return async function* (dispatch) {
+    const instance = IpfsConnector.getInstance()
+    await waitForIpfsReady()
+
+    const objects = []
+
+    let addedSize = 0
+    const totalSize = content.reduce((a,b) => a + b.size, 0)
+
+    for(const {path: contentPath, size, directory} of content) {
+
+      // Feedback with the progress
+      yield {
+        progress: addedSize / totalSize,
+        nextProgress: (addedSize + size) / totalSize,
+        adding: path.basename(contentPath)
+      }
+
+      const result = await instance.api.apiClient.util.addFromFs(contentPath, {
+        recursive: true,
+        hidden: true,
+        // ignore: ['subfolder/to/ignore/**']
+      })
+
+      addedSize += size
+
+      objects.push(directory
+        ? result.last()
+        : result
+      )
+    }
+
+    return objects
+  }
+}

app/components/sharing/NewShare.css

@@ -2,6 +2,10 @@
 
 }
 
+.progressWrapper {
+  margin-top: 10px;
+}
+
 .buttons {
   display: flex;
   justify-content: space-around;

app/components/sharing/NewShare.js

@@ -2,6 +2,8 @@
 import React, { Component } from 'react'
 import styles from './NewShare.css'
 import Button from 'material-ui/Button'
+import { LinearProgress } from 'material-ui/Progress'
+import Typography from 'material-ui/Typography'
 import { Field, reduxForm } from 'redux-form'
 import { renderTextField } from 'utils/forms'
 import ContactList from 'models/ContactList'
@@ -18,10 +20,11 @@ class NewShare extends Component {
     contactList: ContactList,
     onCancelClick: () => any,
     onSubmit: (values: {}) => any,
+    progress: any
   }
 
   render() {
-    const { contactList, error, handleSubmit, pristine, submitting, waiting } = this.props
+    const { contactList, error, progress, handleSubmit, pristine, submitting, waiting } = this.props
 
     return (
       <form className={styles.wrapper} onSubmit={handleSubmit}>
@@ -32,6 +35,13 @@ class NewShare extends Component {
 
         { error && <Error>{error}</Error>}
 
+        { progress &&
+          <div className={styles.progressWrapper}>
+            <LinearProgress mode="buffer" value={progress.progress*100} valueBuffer={progress.nextProgress*100} />
+            <Typography>Adding {progress.adding}</Typography>
+          </div>
+        }
+
         <div className={styles.buttons}>
           <Button raised onClick={this.props.onCancelClick} disabled={waiting}>Cancel</Button>
           <Button raised primary type='submit' disabled={pristine || submitting }>

app/containers/sharing/NewSharePage.js

@@ -3,69 +3,70 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import NewShare, { formName } from 'components/sharing/NewShare'
 import { Store } from 'utils/types'
-import type {Action} from 'utils/types'
-import ContactList from 'models/ContactList'
 import * as ui from 'actions/ui'
-import {reset} from 'redux-form'
+import * as share from 'actions/share'
+import {reset, SubmissionError} from 'redux-form'
 
-/**
- * Container around the new Share form
- */
-class NewShareContainer extends Component {
-  state = {
-    waiting: false
-  }
+class NewSharePage extends Component {
 
   props: {
-    contactList: ContactList,
-    dispatch: (Action) => any
+    dispatch: (any) => any
+  }
+
+  state = {
+    progress: null
   }
 
   async handleSubmit(values) {
-    const dispatch = this.props.dispatch
-    console.log(values)
-    this.setState({ waiting: true })
+    const { dispatch } = this.props
 
     try {
+      const progressGen = dispatch(share.createShare(
+        values.title,
+        values.description || '',
+        values.recipients,
+        values.content
+      ))
+
+      for await (const progress of progressGen) {
+        this.setState({progress})
+      }
+
+      this.setState({progress: null})
 
-      this.setState({ waiting: false })
       dispatch(ui.closeNewShare())
+      // Wait for the end of the UI animation
+      setTimeout(() => { dispatch(reset(formName)) }, 500)
     } catch(err) {
-      this.setState({ waiting: false })
-      // TODO: do something with the error
       console.log(err)
+      throw new SubmissionError({ _error: err })
     }
   }
 
-  // Intercept the cancel click to reset the form
-  handleCancel() {
-    const { dispatch } = this.props
-
-    dispatch(ui.closeNewShare())
-
-    // Wait for the end of the UI animation
-    setTimeout(() => { dispatch(reset(formName)) }, 1000)
-  }
-
   render() {
     return (
       <NewShare
         onSubmit={::this.handleSubmit}
-        onCancelClick={::this.handleCancel}
-        waiting={this.state.waiting}
+        progress={this.state.progress}
         { ...this.props }
       />
     )
   }
 }
 
-
 const mapStateToProps = (state: Store) => ({
   contactList: state.contactList
 })
 
 const mapDispatchToProps = dispatch => ({
-  dispatch
+  dispatch,
+
+  onCancelClick: () => {
+    dispatch(ui.closeNewShare())
+
+    // Wait for the end of the UI animation
+    setTimeout(() => { dispatch(reset(formName)) }, 500)
+  },
 })
 
-export default connect(mapStateToProps, mapDispatchToProps)(NewShareContainer)
+export default connect(mapStateToProps, mapDispatchToProps)(NewSharePage)

app/utils/delay.js

@@ -0,0 +1,2 @@
+// @flow
+export default (t) => new Promise(resolve => setTimeout(resolve, t))

webpack.config.development.js

@@ -16,6 +16,7 @@ export default merge(baseConfig, {
   devtool: 'inline-source-map',
 
   entry: [
+    'babel-polyfill',
     'react-hot-loader/patch',
     `webpack-dev-server/client?http://localhost:${port}/`,
     'webpack/hot/only-dev-server',