[WIP] Hot reloading and redesign

.babelrc

@@ -0,0 +1,28 @@
+{
+  "stage": 0,
+  "env": {
+    "production": {
+      "optional": [
+        "utility.inlineEnvironmentVariables",
+        "optimisation"
+      ]
+    },
+    "development": {
+      "plugins": [
+        "react-transform"
+      ],
+      "extra": {
+        "react-transform": {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }]
+        }
+      }
+    }
+  }
+}

.eslintignore

@@ -0,0 +1,2 @@
+build
+release

.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["standard", "standard-react"],
+  "parser": "babel-eslint"
+}

.gitignore

@@ -1,4 +1,6 @@
 debug.log
 node_modules
 build
-dist
+release
+npm-debug.log
+app.log

.travis.yml

@@ -0,0 +1,13 @@
+sudo: false
+language: node_js
+node_js:
+  - "4.0"
+
+# Make sure we have a new npm@3
+before_install:
+  - npm install -g npm
+  - npm config set loglevel warn
+
+script:
+  - npm run lint
+  - NODE_ENV=production npm run build

README.md

@@ -1,57 +1,46 @@
-IPFS Native Application
-=======================
+# IPFS Native Application
 
-[![](https://img.shields.io/badge/made%20by-Protocol%20Labs-blue.svg?style=flat-square)](http://ipn.io) [![](https://img.shields.io/badge/project-IPFS-blue.svg?style=flat-square)](http://ipfs.io/) [![](https://img.shields.io/badge/freenode-%23ipfs-blue.svg?style=flat-square)](http://webchat.freenode.net/?channels=%23ipfs) [![Dependency Status](https://david-dm.org/ipfs/electron-app.svg?style=flat-square)](https://david-dm.org/ipfs/electron-app)
+[![](https://img.shields.io/badge/made%20by-Protocol%20Labs-blue.svg?style=flat-square)](http://ipn.io) [![](https://img.shields.io/badge/project-IPFS-blue.svg?style=flat-square)](http://ipfs.io/) [![](https://img.shields.io/badge/freenode-%23ipfs-blue.svg?style=flat-square)](http://webchat.freenode.net/?channels=%23ipfs) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/ipfs/electron-app)
 
-> A Native Application for your OS to run your own IPFS Node. Built with Electron Shell
+[![Build Status](https://img.shields.io/travis/ipfs/electron-app/master.svg?style=flat-square)](https://travis-ci.org/ipfs/electron-app) [![Dependency Status](https://img.shields.io/david/ipfs/electron-app.svg?style=flat-square)](https://david-dm.org/ipfs/electron-app) [![devDependency Status](https://img.shields.io/david/dev/ipfs/electron-app.svg?style=flat-square)](https://david-dm.org/ipfs/electron-app#info=devDependencies)
 
-## folder structure
+> A Native Application for your OS to run your own IPFS Node. Built with [Electron](http://electron.atom.io/).
 
-```bash
-$ tree app
-app
-├── controls        # Application controls to interact with the system
-├── img
-│   ├── loading.gif
-│   └── logo.png
-├── init.js
-├── js              # React/Frontend components
-│   ├── help.js
-│   ├── menubar.jsx # React view for all the things menu bar
-│   ├── toggle.jsx
-│   └── welcome.jsx # React component for the welcoming screen for 1st time users
-├── styles
-│   ├── common.css
-│   └── menu.css
-└── views
-    ├── help.html
-    ├── menubar.html
-    └── welcome.html
-```
+## Development
+
+## Setup
 
-# usage
+You will need [Node.js](https://nodejs.org/en/) installed. Preferrably a version `>=4.0`. Also you will need [npm](npmjs.org). After that you should run
 
 ```bash
-$ npm i
+$ git clone git@github.com:ipfs/electron-app.git
+$ cd electron-app
+$ npm install
 $ npm start
 ```
 
 This launches the app and runs it in your menu bar. Click the IPFS icon to open a console. For example (in OSX):
 
-![](https://ipfs.io/ipfs/QmU5AghSAezpYFNyuYZ7gX1zcHCheQndPtBMj1MHr5QpWL/cap.png)
+![](https://ipfs.io/ipfs/QmaufMhYVWPKwhC1jSb4qHBxgiahrq9ct2hgqk5cZxeE7s)
 
-# packaging
-
-will be written to ./dist
-
-### make a package for your system
+## Tasks
 
 ```bash
-npm run dist
+$ npm run clean         # Clean the build directory
+$ npm run start         # Start a development instance
+$ npm run lint          # Run linting on all files
+$ npm run dist          # Create a package for the current platform
+$ npm run dist-all      # Create a package for all platforms
+$ npm run start:prod    # Start a packaged instance
 ```
 
-### make packages for all platforms
+## Packaging
+
+Th output will be written to the `dist` folder.
 
 ```bash
-npm run dist-all
+# Package for your current platform
+$ npm run dist
+# Package for all platforms
+$ npm run dist-all
 ```

app/config.js

@@ -1,31 +1,75 @@
-var path = require('path')
-var os = require('os')
-var fs = require('fs')
-var app = require('app')
-
-var IPFS_PATH_FILE = app.getDataPath() + '/ipfs-electron-app-node-path'
-
-exports = module.exports = {
-  'menu-bar-width': 240,
-  window: {
-    icon: path.resolve(__dirname, '../node_modules/ipfs-logo/ipfs-logo-256-ice.png'),
-    'auto-hide-menu-bar': true,
-    width: 800,
-    height: 600
-  },
-  'tray-icon': (os.platform() !== 'darwin' ?
-    path.resolve(__dirname, '../node_modules/ipfs-logo/ipfs-logo-256-ice.png')
-    : path.resolve(__dirname, '../node_modules/ipfs-logo/platform-icons/osx-menu-bar.png')),
+import path from 'path'
+import os from 'os'
+import fs from 'fs'
+
+const app = require('app')
+
+const isProduction = process.env.NODE_ENV === 'production'
+const IPFS_PATH_FILE = app.getDataPath() + '/ipfs-electron-app-node-path'
+
+const trayIcon = () => {
+  if (os.platform() !== 'darwin') {
+    return path.resolve(__dirname, '../node_modules/ipfs-logo/ipfs-logo-256-ice.png')
+  }
+
+  return path.resolve(__dirname, '../node_modules/ipfs-logo/platform-icons/osx-menu-bar.png')
+}
+
+const menuBar = {
+  dir: __dirname,
+  width: 300,
+  height: 400,
+  index: isProduction
+    ? `file://${__dirname}/menubar.html`
+    : 'http://localhost:3000/menubar.html',
+  icon: trayIcon(),
+  'always-on-top': true,
+  preloadWindow: true,
+  resizable: false,
+  'web-preferences': {
+    'web-security': false
+  }
+}
+
+const window = {
+  icon: path.resolve(__dirname, '../node_modules/ipfs-logo/ipfs-logo-256-ice.png'),
+  'auto-hide-menu-bar': true,
+  width: 800,
+  height: 500,
+  'web-preferences': {
+    'web-security': false
+  }
+}
+
+const ipfsPath = () => {
+  let pathIPFS
+  try {
+    pathIPFS = fs.readFileSync(IPFS_PATH_FILE, 'utf-8')
+  } catch (e) {
+    pathIPFS = process.env.IPFS_PATH ||
+      (process.env.HOME || process.env.USERPROFILE) + '/.ipfs'
+  }
+
+  return pathIPFS
+}
+
+// -- Window URLs
+
+const fileURL = name => `file://${__dirname}/${name}.html`
+const serverURL = name => `http://localhost:3000/${name}.html`
+
+const currentURL = name => isProduction ? fileURL(name) : serverURL(name)
+
+export default {
+  menuBar,
+  window,
+  isProduction,
+  'tray-icon': trayIcon(),
   'webui-path': '/webui',
-  'ipfs-path': (function () {
-    var pathIPFS
-    try {
-      pathIPFS = fs.readFileSync(IPFS_PATH_FILE, 'utf-8')
-    } catch (e) {
-      pathIPFS = process.env.IPFS_PATH ||
-       (process.env.HOME || process.env.USERPROFILE) + '/.ipfs'
-    }
-    return pathIPFS
-  })(),
-  'ipfs-path-file': IPFS_PATH_FILE
+  'ipfs-path': ipfsPath(),
+  'ipfs-path-file': IPFS_PATH_FILE,
+  urls: {
+    welcome: currentURL('welcome'),
+    settings: currentURL('settings')
+  }
 }

app/controls/drag-drop.js

@@ -1,41 +1,61 @@
-var init = require('./../init')
-var ipfsAPI = require('ipfs-api')('localhost', '5001')
-var clipboard = require('clipboard')
-var path = require('path')
-var shell = require('shell')
+import API from 'ipfs-api'
+import notifier from 'node-notifier'
+import {join} from 'path'
+import {getIPFS, logger} from './../init'
 
-var ipc = require('ipc')
+const ipfsAPI = API('localhost', '5001')
 
-exports = module.exports = dragDrop
+const clipboard = require('clipboard')
 
-// TODO persist this to disk
-var filesUploaded = []
+const iconPath = join(__dirname, '..', '..', 'node_modules', 'ipfs-logo', 'platform-icons/osx-menu-bar@2x.png')
 
-function dragDrop (event, fileArray) {
-  if (!init.getIPFS()) {
-    // TODO show an error to the user
-    return console.error(new Error('Can\'t upload file, IPFS Node is off'))
-  }
+// TODO persist this to disk
+const filesUploaded = []
+
+function notify (title, message) {
+  notifier.notify({
+    title,
+    message,
+    icon: iconPath,
+    sound: true,
+    wait: false
+  })
+}
 
-  fileArray.forEach(function (file) {
-    console.log('uploading ->', path.basename(file))
-    ipc.emit('uploading', {Name: path.basename(file)})
+function notifyError (message) {
+  notifier.notify({
+    title: 'Error in file upload',
+    message,
+    icon: iconPath,
+    sound: true,
+    wait: false
   })
+}
 
-  ipfsAPI.add(fileArray, function (err, res) {
+export default function dragDrop (event, files) {
+  if (!getIPFS()) {
+    notifyError('Can\'t upload file, IPFS Node is offline')
+    return
+  }
+  ipfsAPI.add(files, (err, res) => {
     if (err || !res) {
-      return console.error(err)
+      logger.error(err)
+      notifyError(err || 'Failed to upload files')
     }
 
-    res.forEach(function (file) {
-      clipboard.writeText('http://gateway.ipfs.io/ipfs/' + file.Hash)
+    logger.info('Uploading files', {files})
+
+    res.forEach(file => {
+      const url = `https://ipfs.io/ipfs/${file.Hash}`
+      clipboard.writeText(url)
       filesUploaded.push(file)
-      ipc.emit('uploaded', file)
 
-      shell.beep()
+      logger.info('Uploaded file %s', file.Name)
 
-      console.log(file.Hash)
-      console.log(file.Name)
+      notify(
+        `Finished uploading ${file.Name}`,
+        `${file.Name} was uploaded to ${url}.`
+      )
     })
   })
 }

app/controls/open-browser.js

@@ -1,22 +1,23 @@
-var ipc = require('ipc')
-var apiAddrToUrl = require('./utils').apiAddrToUrl
-var init = require('./../init')
-var open = require('open')
+import ipc from 'electron-safe-ipc/host'
+import {apiAddrToUrl} from './utils'
+import {getIPFS} from './../init'
 
-ipc.on('open-browser', openBrowser)
+const shell = require('shell')
 
 function openBrowser (cb) {
-  if (init.getIPFS()) {
-    init.getIPFS().config.get('Addresses.API', function (err, res) {
+  if (getIPFS()) {
+    getIPFS().config.get('Addresses.API', (err, res) => {
       if (err) { // TODO error should be emited to a error panel
         return console.error(err)
       }
 
-      open(apiAddrToUrl(res.Value))
+      shell.openExternal(apiAddrToUrl(res.Value))
     })
   } else {
     // TODO error should be emited to a error panel
-    var err = new Error('Cannot open browser, IPFS daemon not running')
+    const err = new Error('Cannot open browser, IPFS daemon not running')
     console.error(err)
   }
 }
+
+ipc.on('open-browser', openBrowser)