components, flatness and mfs

use mfs
make components more independent
flatten some directories

package.json

@@ -11,13 +11,13 @@
     "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.1.4",
     "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",

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,124 @@
+import React 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'
+
+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 function FileBlock (props) {
+  const extension = fileExtension(props.name)
+  let icon = 'file'
+
+  if (props.type === 'directory') {
+    icon = 'folder'
+  } else if (fileTypes[extension]) {
+    icon = fileTypes[extension]
+  }
+
+  const open = () => {
+    if (props.type === 'directory') {
+      props.navigate(props.name, props.hash)
+    } else {
+      props.open(props.name, props.hash)
+    }
+  }
+
+  const copy = wrapper(() => { props.copy(props.hash) })
+  const remove = wrapper(() => { props.remove(props.name) })
+
+  const wrapped = (
+    <div>
+      <div className='icon'>
+        <Icon name={icon} />
+      </div>
+      <div>
+        <p className='label'>{props.name}</p>
+        <p className='info'>{prettyBytes(props.size)} | {props.hash}</p>
+      </div>
+    </div>
+  )
+
+  const unwrapped = (
+    <div className='button-overlay'>
+      { typeof props.copy === 'function' &&
+        <IconButton icon='clipboard' onClick={copy} />
+      }
+      { typeof props.remove === 'function' &&
+        <IconButton icon='trash' onClick={remove} />
+      }
+    </div>
+  )
+
+  return (
+    <Block
+      {...props.open !== null && { onClick: open }}
+      className='file'
+      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 = {

src/js/components/view/heartbeat.js → src/components/Heartbeat.js

@@ -2,8 +2,8 @@ import React from 'react'
 import {resolve, join} from 'path'
 import PropTypes from 'prop-types'
 
-const icyLogo = resolve(join(__dirname, '../../../img/ipfs-logo-ice.png'))
-const blackLogo = resolve(join(__dirname, '../../../img/ipfs-logo-black.png'))
+const icyLogo = resolve(join(__dirname, '../img/ipfs-logo-ice.png'))
+const blackLogo = resolve(join(__dirname, '../img/ipfs-logo-black.png'))
 
 /**
  * Is an Hearbeat.

src/js/components/view/icon.js → src/components/Icon.js

@@ -1,5 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import {resolve, join} from 'path'
+
+const logoBlack = resolve(join(__dirname, '../img/ipfs-logo-black.png'))
 
 /**
  * Is an Icon.
@@ -14,7 +17,7 @@ export default function Icon (props) {
   if (props.name === 'ipfs') {
     return (
       <span className='icon'>
-        <img src='../img/ipfs-logo-black.png' />
+        <img alt='IPFS Logo' src={`file://${logoBlack}`} />
       </span>
     )
   }

src/js/components/view/icon-button.js → src/components/IconButton.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import Icon from './icon'
+import Icon from './Icon'
 
 /**
  * Is a Button with an Icon.

src/js/components/view/icon-dropdown-list.js → src/components/IconDropdownList.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Icon from './icon'
+import Icon from './Icon'
 
 function onChangeWrapper (fn) {
   return event => {