dat-ecosystem-archive · okdistribute · Jul 15, 2016 · Jul 14, 2016 · Jul 14, 2016 · Jul 15, 2016
diff --git a/index.html b/index.html
@@ -1,32 +1,21 @@
 <html>
   <head>
-    <link rel="icon" type="image/png" href="public/images/dat-data-blank.png" />
+    <link rel="icon" type="image/png" href="public/img/dat-data-blank.png" />
     <link rel="stylesheet" type="text/css" href="public/css/main.css"/>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/introjs.min.css"/>
   </head>
   <body>
-    <header class="site-header">
-      <div class="container">
-        <h1>
-          <a href="http://dat-data.com">
-            <img src="public/images/dat-data.png" style="width:30px;" />
-          </a>
-        </h1>
-        <input type="text" readonly="true" value="" id="share-link" data-intro="">
-        <h3 id="peers"></h3>
-        <button id="help" class="button">?</button>
-        <button id="new" class="button">Reset</button>
-        <h3 id="speed"></h3>
-      </div>
-    </header>
+    <div id="header"></div>
     <div class="status-bar">
       <p id="help-text">Initializing</p>
     </div>
     <main class="site-main">
       <div class="container">
+        <div id="share-link"></div>
         <div id="hyperdrive-size"></div>
+        <div id="speed"></div>
+        <div id="peers"></div>
         <div id="hyperdrive-stats"></div>
-        <!-- <div class="upload-file">Drop Files</div> -->
         <div id="hyperdrive-ui"></div>
       </div>
     </main>

diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "browserify": "^13.0.0",
     "choppa": "^1.0.2",
     "concat-stream": "^1.5.1",
-    "dat-design": "^1.2.5",
+    "dat-design": "^1.2.6",
     "drag-drop": "^2.11.0",
     "es2020": "^1.1.7",
     "filereader-stream": "^1.0.0",

diff --git a/public/images/dat-data.png b/public/images/dat-data.png
diff --git a/public/images/dat-data-blank.png → public/img/dat-data-blank.png b/public/images/dat-data-blank.png → public/img/dat-data-blank.png
diff --git a/public/img/dat-data-logo.svg b/public/img/dat-data-logo.svg
diff --git a/public/img/link.svg b/public/img/link.svg
diff --git a/src/js/app.js b/src/js/app.js
@@ -17,11 +17,17 @@ var $shareLink = document.getElementById('share-link')
 
 var componentCtors = require('./components')
 var components = [
-  componentCtors.Help('help'),
+  componentCtors.Header('header', {
+    create: function (event) {
+      initArchive()
+    },
+    download: function (link) {
+      initArchive(link)
+    }
+  }),
   componentCtors.HyperdriveSize('hyperdrive-size'),
   componentCtors.HyperdriveStats('hyperdrive-stats'),
   componentCtors.Peers('peers'),
-  componentCtors.ResetButton('new', initArchive),
   componentCtors.SpeedDisplay('speed')
 ]
 
@@ -41,7 +47,7 @@ main()
 
 function main () {
   var keypath = window.location.hash.substr(1).match('([^/]+)(/?.*)')
-  var key = keypath ? encoding.decode(keypath[1]) : null
+  var key = keypath ? keypath[1] : null
   var file = keypath ? keypath[2] : null
 
   if (file) {
@@ -58,6 +64,7 @@ function main () {
 }
 
 function getArchive (key, cb) {
+  if ((typeof key) === 'string') key = encoding.decode(key)
   var archive = drive.createArchive(key, {live: true, sparse: true})
   var sw = swarm(archive)
   sw.on('connection', function (peer) {
@@ -74,6 +81,7 @@ function getArchive (key, cb) {
     }
     cb(archive)
   })
+
   archive.on('download', function () {
     store.dispatch({type: 'UPDATE_ARCHIVE', archive: archive})
   })
@@ -110,7 +118,7 @@ function initArchive (key) {
 }
 
 function updateShareLink () {
-  $shareLink.value = window.location
+  $shareLink.innerHTML = window.location
 }
 
 var clearDrop

diff --git a/src/js/components/header/index.js b/src/js/components/header/index.js
@@ -0,0 +1,42 @@
+var yo = require('yo-yo')
+var importButton = require('dat-header/import')
+var help = require('../help')
+var button = require('dat-button')
+
+module.exports = Header
+
+function Header (el, props) {
+  if (!(this instanceof Header)) return new Header(el, props)
+  this.$el = document.getElementById(el)
+  this._props = props
+  this._component = this._render()
+  if (this.$el) this.$el.appendChild(this._component)
+}
+
+Header.prototype.update = function (state) {
+  if (state && state.archiveReducer) {
+    yo.update(this._component, this._render())
+  }
+}
+
+Header.prototype._render = function () {
+  return yo`
+    <header class="dat-header">
+      <a href="http://dat-data.com" class="dat-logo">
+        <img src="./public/img/dat-data-logo.svg" style="width:40px;" />
+      </a>
+      <div class="dat-header__actions">
+        <div class="dat-button">
+          ${button({
+            text: 'Create new Dat',
+            click: this._props.create
+          })}
+        </div>
+        ${importButton({
+          download: this._props.download
+        })}
+        ${help()}
+      </div>
+  </div>
+  `
+}
diff --git a/src/js/components/help/index.js b/src/js/components/help/index.js
@@ -1,26 +1,24 @@
+var yo = require('yo-yo')
 var intro = require('intro.js')
 
-module.exports = Help
-
-function Help (el, clickHandler) {
-  if (!(this instanceof Help)) return new Help(el)
-  this.$el = document.getElementById(el)
-  this.$el.onclick = function () {
+module.exports = function Help () {
+  function onclick () {
     var _intro = intro.introJs()
     _intro.setOptions({
       steps: [{
-        intro: 'You can create a new dat by clicking <b>Reset</b>'
+        intro: 'You can create a new dat by clicking <b>Create New Dat</b>'
       },
       {
         intro: 'Drop some files here',
         element: '#help-text'
       },
       {
         intro: 'You can share the dat with this link',
-        element: 'input#share-link',
+        element: '#share-link',
         position: 'bottom'
       }
     ]})
     _intro.start()
   }
+  return yo`<button id="help" onclick=${onclick} class="btn btn--green btn--header">?</button>`
 }
diff --git a/src/js/components/index.js b/src/js/components/index.js
@@ -1,8 +1,8 @@
 module.exports = {
+  Header: require('./header'),
   Help: require('./help'),
   HyperdriveSize: require('./hyperdrive-size'),
   HyperdriveStats: require('./hyperdrive-stats'),
   Peers: require('./peers'),
-  ResetButton: require('./reset-button'),
   SpeedDisplay: require('./speed-display')
 }
diff --git a/src/js/components/reset-button/index.js b/src/js/components/reset-button/index.js