feat: add files page

package.json

@@ -27,6 +27,7 @@
     "ipfs-css": "^0.5.0",
     "ipld-dag-pb": "^0.14.3",
     "ipfs-unixfs": "^0.1.14",
+    "is-binary": "^0.1.0",
     "milliseconds": "^1.0.3",
     "multibase": "^0.4.0",
     "multicodec": "^0.2.6",

src/App.js

@@ -45,4 +45,9 @@ export class App extends Component {
   }
 }
 
-export default connect('selectRoute', 'doUpdateUrl', 'doInitIpfs', App)
+export default connect(
+  'selectRoute',
+  'doUpdateUrl',
+  'doInitIpfs',
+  App
+)

src/App.test.js

@@ -19,7 +19,7 @@ it('example test', async () => {
   let titleText = await page.evaluate(el => el.innerHTML, title)
   expect(titleText).toBe('Status')
 
-  await page.click('nav a[href="#/files"]')
+  await page.click('nav a[href="#/files/"]')
 
   title = await page.$('[data-id=title]')
   titleText = await page.evaluate(el => el.innerHTML, title)

src/bundles/files.js

@@ -0,0 +1,146 @@
+import { createAsyncResourceBundle, createSelector } from 'redux-bundler'
+import { join } from '../lib/path'
+
+const bundle = createAsyncResourceBundle({
+  name: 'files',
+  actionBaseType: 'FILES',
+  getPromise: (args) => {
+    const {store, getIpfs} = args
+    let path = store.selectRouteParams().path
+
+    if (!path) {
+      store.doUpdateHash('/files/')
+      return Promise.resolve()
+    }
+
+    // FIX: dirs with actually encoded names
+    // will get decoded... it shouldn't happen
+    path = decodeURIComponent(path)
+
+    return getIpfs().files.stat(path)
+      .then(stats => {
+        if (stats.type === 'directory') {
+          return getIpfs().files.ls(path, {l: true}).then((res) => {
+            // FIX: open PR on js-ipfs-api
+            if (res) {
+              res = res.map(file => {
+                file.type = file.type === 0 ? 'file' : 'directory'
+                return file
+              })
+            }
+
+            return {
+              path: path,
+              type: 'directory',
+              files: res
+            }
+          })
+        } else {
+          stats.name = path
+
+          return {
+            path: path,
+            type: 'file',
+            stats: stats,
+            read: () => getIpfs().files.read(path)
+          }
+        }
+      })
+  },
+  staleAfter: 100,
+  checkIfOnline: false
+})
+
+bundle.reactFilesFetch = createSelector(
+  'selectFilesShouldUpdate',
+  'selectIpfsReady',
+  'selectRouteInfo',
+  'selectFiles',
+  (shouldUpdate, ipfsReady, {url, params}, files) => {
+    if (shouldUpdate && ipfsReady && url.startsWith('/files')) {
+      if (!files || files.path !== params.path) {
+        return { actionCreator: 'doFetchFiles' }
+      }
+    }
+  }
+)
+
+bundle.doFilesDelete = (files) => ({dispatch, getIpfs, store}) => {
+  dispatch({ type: 'FILES_DELETE_STARTED' })
+
+  const promises = files.map(file => getIpfs().files.rm(file, { recursive: true }))
+  Promise.all(promises)
+    .then(() => {
+      store.doFetchFiles()
+      dispatch({ type: 'FILES_DELETE_FINISHED' })
+    })
+    .catch((error) => {
+      dispatch({ type: 'FILES_DELETE_ERRORED', payload: error })
+    })
+}
+
+function runAndFetch ({ dispatch, getIpfs, store }, type, action, args) {
+  dispatch({ type: `${type}_STARTED` })
+
+  return getIpfs().files[action](...args)
+    .then(() => {
+      store.doFetchFiles()
+      dispatch({ type: `${type}_FINISHED` })
+    })
+    .catch((error) => {
+      dispatch({ type: `${type}_ERRORED`, payload: error })
+    })
+}
+
+bundle.doFilesRename = (from, to) => (args) => {
+  runAndFetch(args, 'FILES_RENAME', 'mv', [[from, to]])
+}
+
+bundle.doFilesCopy = (from, to) => (args) => {
+  runAndFetch(args, 'FILES_RENAME', 'cp', [[from, to]])
+}
+
+bundle.doFilesMakeDir = (path) => (args) => {
+  runAndFetch(args, 'FILES_MKDIR', 'mkdir', [path, { parents: true }])
+}
+
+function readAsBuffer (file) {
+  return new Promise((resolve, reject) => {
+    const reader = new window.FileReader()
+    reader.onload = (event) => {
+      resolve({
+        content: Buffer.from(reader.result),
+        name: file.name
+      })
+    }
+    reader.onerror = (event) => {
+      reject(reader.error)
+    }
+
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+bundle.doFilesWrite = (root, files) => ({dispatch, getIpfs, store}) => {
+  dispatch({ type: 'FILES_WRITE_STARTED' })
+
+  let promises = []
+
+  for (const file of files) {
+    promises.push(readAsBuffer(file))
+  }
+
+  return Promise.all(promises).then(files => {
+    return Promise.all(files.map((file) => {
+      const target = join(root, file.name)
+      return getIpfs().files.write(target, file.content, { create: true })
+    }))
+  }).then(() => {
+    store.doFetchFiles()
+    dispatch({ type: 'FILES_WRITE_FINISHED' })
+  }).catch((error) => {
+    dispatch({ type: 'FILES_WRITE_ERRORED', payload: error })
+  })
+}
+
+export default bundle

src/bundles/index.js

@@ -6,12 +6,14 @@ import appIdle from './app-idle'
 import peersBundle from './peers'
 import routesBundle from './routes'
 import redirectsBundle from './redirects'
+import filesBundle from './files'
 
 export default composeBundles(
   appIdle({idleTimeout: 5000}),
   ipfsBundle,
   objectBundle,
   peersBundle,
   routesBundle,
-  redirectsBundle
+  redirectsBundle,
+  filesBundle
 )

src/bundles/ipfs.js

@@ -8,6 +8,15 @@ export default {
     if (action.type === 'IPFS_INIT_FINISHED') {
       return { ...state, ipfsReady: true }
     }
+
+    if (action.type === 'IPFS_GATEWAY_URL_FINISHED') {
+      return { ...state, gatewayUrl: action.payload }
+    }
+
+    if (!state.gatewayUrl) {
+      return { ...state, gatewayUrl: 'https://ipfs.io' }
+    }
+
     return state
   },
 
@@ -17,7 +26,9 @@ export default {
 
   selectIpfsReady: state => state.ipfs.ipfsReady,
 
-  doInitIpfs: () => async ({ dispatch }) => {
+  selectGatewayUrl: state => state.ipfs.gatewayUrl,
+
+  doInitIpfs: () => async ({ dispatch, store }) => {
     dispatch({ type: 'IPFS_INIT_STARTED' })
 
     try {
@@ -26,6 +37,23 @@ export default {
       return dispatch({ type: 'IPFS_INIT_FAILED', payload: err })
     }
 
+    store.doGetGatewayUrl()
     dispatch({ type: 'IPFS_INIT_FINISHED' })
+  },
+
+  doGetGatewayUrl: () => async ({ dispatch, getIpfs }) => {
+    dispatch({ type: 'IPFS_GATWAY_URL_STARTED' })
+
+    getIpfs().config.get('Addresses.Gateway', (err, res) => {
+      if (err) {
+        dispatch({ type: 'IPFS_GATWAY_URL_ERRORED', payload: err })
+        return
+      }
+
+      const split = res.split('/')
+      const gateway = '//' + split[2] + ':' + split[4]
+
+      dispatch({ type: 'IPFS_GATWAY_URL_FINISHED', payload: gateway })
+    })
   }
 }

src/bundles/routes.js

@@ -8,6 +8,7 @@ import SettingsPage from '../settings/SettingsPage'
 export default createRouteBundle({
   '/files': FilesPage,
   '/explore*': IpldPage,
+  '/files*': FilesPage,
   '/peers': PeersPage,
   '/settings': SettingsPage,
   '/': StatusPage,

src/files/FilesPage.js

@@ -1,2 +1,106 @@
 import React from 'react'
-export default () => <h1 data-id='title'>Files</h1>
+import PropTypes from 'prop-types'
+import { connect } from 'redux-bundler-react'
+import Breadcrumbs from './breadcrumbs/Breadcrumbs'
+import FilesList from './files-list/FilesList'
+import FilePreview from './file-preview/FilePreview'
+import FileInput from './file-input/FileInput'
+
+const action = (name) => {
+  return (...args) => {
+    console.log(name, args)
+  }
+}
+
+const empty = (
+  <div>
+    <h2>It seems a bit lonely here :(</h2>
+  </div>
+)
+
+class FilesPage extends React.Component {
+  static propTypes = {
+    files: PropTypes.object
+  }
+
+  state = {
+    clipboard: [],
+    copy: false
+  }
+
+  onLinkClick = (link) => {
+    const {doUpdateHash} = this.props
+    doUpdateHash(`/files${link}`)
+  }
+
+  onInspect = (hash) => {
+    const {doUpdateHash} = this.props
+    doUpdateHash(`/explore/ipfs/${hash}`)
+  }
+
+  onRename = ([path]) => {
+    const oldName = path.split('/').pop()
+    const newName = window.prompt('Insert the new name:')
+
+    if (newName) {
+      this.props.doFilesRename(path, path.replace(oldName, newName))
+    }
+  }
+
+  onFilesUpload = (files) => {
+    this.props.doFilesWrite(this.props.files.path, files)
+  }
+
+  render () {
+    const {files} = this.props
+
+    if (!files) {
+      return <div>
+        <h1 data-id='title'>Files</h1>
+      </div>
+    }
+
+    let body
+    if (files.type === 'directory') {
+      if (files.files.length === 0) {
+        body = empty
+      } else {
+        body = <FilesList
+          maxWidth='calc(100% - 240px)'
+          root={files.path}
+          files={files.files}
+          onShare={action('Share')}
+          onInspect={this.onInspect}
+          onRename={this.onRename}
+          onDownload={action('Download')}
+          onDelete={this.props.doFilesDelete}
+          onNavigate={this.onLinkClick}
+          onCancelUpload={action('Cancel Upload')}
+        />
+      }
+    } else {
+      body = <FilePreview {...files} gatewayUrl={this.props.gatewayUrl} />
+    }
+
+    return (
+      <div>
+        <div className='flex items-center justify-between mb4'>
+          <Breadcrumbs path={files.path} onClick={this.onLinkClick} />
+          <FileInput upload={this.onFilesUpload} />
+        </div>
+        {body}
+        <h1 data-id='title'>Files</h1>
+      </div>
+    )
+  }
+}
+
+export default connect(
+  'doUpdateHash',
+  'doFilesDelete',
+  'doFilesRename',
+  'doFilesWrite',
+  'selectFiles',
+  'selectGatewayUrl',
+  FilesPage
+)

src/files/breadcrumbs/Breadcrumbs.js

@@ -14,15 +14,16 @@ function makeBread (root) {
     }
   })
 
-  parts[0].name = 'Root'
-
   for (let i = 1; i < parts.length; i++) {
     parts[i] = {
       name: parts[i].name,
       path: parts[i - 1].path + '/' + parts[i].path
     }
   }
 
+  parts[0].name = 'Root'
+  parts[0].path = '/'
+
   return parts
 }