Fixes Bunch

package.json

@@ -7,17 +7,18 @@
   "main": "src/index.js",
   "dependencies": {
     "auto-launch": "^5.0.5",
+    "bl": "^1.2.1",
     "debug": "^3.1.0",
     "electron-compile": "^6.4.2",
     "electron-menubar": "^1.0.1",
     "electron-squirrel-startup": "^1.0.0",
+    "file-extension": "^4.0.1",
     "go-ipfs-dep": "^0.4.13",
+    "ipfs-stats": "^1.2.1",
     "ipfsd-ctl": "^0.27.0",
-    "file-extension": "^4.0.1",
-    "ipfs-stats": "^1.0.4",
+    "is-ipfs": "^0.3.2",
     "moment": "^2.20.1",
     "multiaddr": "^3.0.2",
-    "is-ipfs": "^0.3.2",
     "normalize.css": "^7.0.0",
     "pretty-bytes": "^4.0.2",
     "prop-types": "^15.6.0",
@@ -33,7 +34,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "electron-forge": "^4.2.0",
-    "electron-prebuilt-compile": "1.8.1",
+    "electron-prebuilt-compile": "1.8.2-beta.3",
     "eslint": "^4",
     "eslint-config-aegir": "^1.0.1",
     "eslint-config-standard-react": "^5.0.0",

src/components/Block.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+/**
+ * It's a Block.
+ *
+ * @param {Object} props
+ *
+ * @prop {Any}      wrapped
+ * @prop {Any}      unwrapped
+ * @prop {Function} [onClick]
+ *
+ * @return {ReactElement}
+ */
+export default function Block (props) {
+  let className = 'block'
+  if (props.className !== '') {
+    className += ' ' + props.className
+  }
+
+  if (props.onClick !== null) {
+    className += ' clickable'
+  }
+
+  return (
+    <div className={className} {...props.onClick !== null && { onClick: props.onClick }}>
+      <div className='wrapper'>
+        {props.wrapped}
+      </div>
+      {props.unwrapped && props.unwrapped}
+    </div>
+  )
+}
+
+Block.propTypes = {
+  wrapped: PropTypes.any.isRequired,
+  unwrapped: PropTypes.any,
+  className: PropTypes.string,
+  onClick: PropTypes.func
+}
+
+Block.defaultProps = {
+  className: '',
+  onClick: null
+}

src/components/Breadcrumbs.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function makeBread (root) {
+  root = root || '/'
+  if (root.endsWith('/')) {
+    root = root.substring(0, root.length - 2)
+  }
+
+  let parts = root.split('/').map(part => {
+    return {
+      name: part,
+      path: part
+    }
+  })
+
+  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: 'ipfs',
+    path: '/'
+  }
+
+  return parts
+}
+
+export default function Breadcrumbs ({path, navigate}) {
+  const bread = makeBread(path)
+  const res = []
+
+  bread.forEach((link, index) => {
+    res.push(<a key={`${index}link`} onClick={() => { navigate(link.path) }}>{link.name}</a>)
+    res.push(<span key={`${index}divisor`}>/</span>)
+  })
+
+  res.pop()
+  return (
+    <span className='breadcrumbs'>{res}</span>
+  )
+}
+
+Breadcrumbs.propTypes = {
+  path: PropTypes.string.isRequired,
+  navigate: PropTypes.func.isRequired
+}

src/js/components/view/button.js → src/components/Button.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Input from './Input'
 
 /**
  * Is a Button.
@@ -13,9 +14,11 @@ import PropTypes from 'prop-types'
  */
 export default function Button (props) {
   return (
-    <button onClick={props.onClick} className='button'>
-      <span>{props.text}</span>
-    </button>
+    <Input class='button'>
+      <button onClick={props.onClick}>
+        <span>{props.text}</span>
+      </button>
+    </Input>
   )
 }
 

src/js/components/view/checkbox-block.js → src/components/CheckboxBlock.js

@@ -1,6 +1,9 @@
+
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Block from './Block'
+
 /**
  * Is a Checkbox Block.
  *
@@ -19,18 +22,21 @@ export default function CheckboxBlock (props) {
   }
 
   return (
-    <div onClick={_onClick} className='info-block checkbox'>
-      <div className='wrapper'>
+    <Block
+      onClick={_onClick}
+      className='checkbox'
+      wrapped={(
         <div>
-          <p className='label'>{props.title}</p>
-          <p className='info'>{props.info}</p>
-        </div>
-        <div className='right'>
-          <input type='checkbox' onChange={_onClick} checked={props.value} />
-          <span className='checkbox' />
+          <div>
+            <p className='label'>{props.title}</p>
+            <p className='info'>{props.info}</p>
+          </div>
+          <div className='right'>
+            <input type='checkbox' onChange={_onClick} checked={props.value} />
+            <span className='checkbox' />
+          </div>
         </div>
-      </div>
-    </div>
+      )} />
   )
 }
 

src/components/FileBlock.js

@@ -0,0 +1,170 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import fileExtension from 'file-extension'
+import prettyBytes from 'pretty-bytes'
+
+import Block from './Block'
+import Icon from './Icon'
+import IconButton from './IconButton'
+import Button from './Button'
+
+const wrapper = (fn) => {
+  return (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+    fn()
+  }
+}
+
+/**
+ * Is a File Block.
+ *
+ * @param {Object} props
+ *
+ * @prop {String} name - file name
+ * @prop {String} date - date when the file was modified/uploaded
+ * @prop {String} hash - file's hash in IPFS system
+ *
+ * @return {ReactElement}
+ */
+export default class FileBlock extends Component {
+  constructor (props) {
+    super(props)
+
+    const extension = fileExtension(this.props.name)
+    let icon = 'file'
+
+    if (this.props.type === 'directory') {
+      icon = 'folder'
+    } else if (fileTypes[extension]) {
+      icon = fileTypes[extension]
+    }
+
+    this.state = {
+      icon: icon,
+      deleting: false
+    }
+  }
+
+  open = () => {
+    if (this.props.type === 'directory') {
+      this.props.navigate(this.props.name, this.props.hash)
+    } else {
+      this.props.open(this.props.name, this.props.hash)
+    }
+  }
+
+  copy = wrapper(() => {
+    this.props.copy(this.props.hash)
+  })
+
+  remove = wrapper(() => {
+    this.props.remove(this.props.name)
+  })
+
+  delete = wrapper(() => {
+    this.setState({ deleting: true })
+  })
+
+  undelete = () => {
+    this.setState({ deleting: false })
+  }
+
+  render () {
+    const wrapped = (
+      <div>
+        <div className='icon'>
+          <Icon name={this.state.icon} />
+        </div>
+        <div>
+          <p className='label'>{this.props.name}</p>
+          { this.state.deleting &&
+            <p className='info'>Are you sure? This is permanent.</p>
+          }
+          { !this.state.deleting &&
+            <p className='info'>{prettyBytes(this.props.size)} | {this.props.hash}</p>
+          }
+        </div>
+      </div>
+    )
+
+    let unwrapped = null
+
+    if (this.state.deleting) {
+      unwrapped = (
+        <div className='button-overlay'>
+          <Button text='Cancel' onClick={this.undelete} />
+          <Button text='Delete' onClick={this.remove} />
+        </div>
+      )
+    } else {
+      unwrapped = (
+        <div className='button-overlay'>
+          { typeof this.props.copy === 'function' &&
+            <IconButton icon='clipboard' onClick={this.copy} />
+          }
+          { typeof this.props.remove === 'function' &&
+            <IconButton icon='trash' color='#F44336' onClick={this.delete} />
+          }
+        </div>
+      )
+    }
+
+    let className = 'file'
+    if (this.state.deleting) {
+      className += ' deleting'
+    }
+
+    return (
+      <Block
+        {...this.props.open !== null && !this.state.deleting && { onClick: this.open }}
+        className={className}
+        wrapped={wrapped}
+        unwrapped={unwrapped} />
+    )
+  }
+}
+
+FileBlock.propTypes = {
+  name: PropTypes.string.isRequired,
+  hash: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  navigate: PropTypes.func,
+  copy: PropTypes.func,
+  remove: PropTypes.func,
+  type: PropTypes.string,
+  open: PropTypes.func
+}
+
+FileBlock.defaultProps = {
+  type: 'file'
+}
+
+const fileTypes = {
+  png: 'image',
+  jpg: 'image',
+  tif: 'image',
+  tiff: 'image',
+  bmp: 'image',
+  gif: 'image',
+  eps: 'image',
+  raw: 'image',
+  cr2: 'image',
+  nef: 'image',
+  orf: 'image',
+  sr2: 'image',
+  jpeg: 'image',
+  mp3: 'music-alt',
+  flac: 'music-alt',
+  ogg: 'music-alt',
+  oga: 'music-alt',
+  aa: 'music-alt',
+  aac: 'music-alt',
+  m4p: 'music-alt',
+  webm: 'music-alt',
+  mp4: 'video-clapper',
+  mkv: 'video-clapper',
+  avi: 'video-clapper',
+  asf: 'video-clapper',
+  flv: 'video-clapper'
+}

src/js/components/view/header.js → src/components/Header.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types'
  *
  * @param {Object} props
  *
- * @prop {String} title       - The title of the pane
- * @prop {String} [subtitle]  - Subtitle of the pane
+ * @prop {String|Node} title       - The title of the pane
+ * @prop {String|Node} [subtitle]  - Subtitle of the pane
  * @prop {Node}   [children]  - Header children (e.g.: buttons)
  * @prop {Bool}   [loading]   - Show a loading animation
  *
@@ -35,10 +35,18 @@ export default function Header (props) {
 }
 
 Header.propTypes = {
-  title: PropTypes.string.isRequired,
+  title: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ]).isRequired,
+  subtitle: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node)
+  ]).isRequired,
   children: PropTypes.node,
-  loading: PropTypes.bool,
-  subtitle: PropTypes.string
+  loading: PropTypes.bool
 }
 
 Header.defaultProps = {