Choo v5 (#315)

* choo v5

* fix choo-persist usage

* send -> emit

* standard

* fix models/main-view (now models/welcome)

* fix removing a dat

* fix models/window

* rename models/window -> models/drag-drop

* refactor welcome screen into its own element

* refactor empty state into its own element

* models/repos: fix missing .ready state

* fix header

* decouble dat-manager from choo

* move {pause,resume} from model to dat-manager

* move togglePause from model to dat-manager

* move dbPaused logic to dat-manager completely

* move more logic from model to dat-manager

* standard

* fix bugs found in qa (mostly event names)

* move test monkey patching to lib/

* use choo-* dependencies from npm

* lib/monkeypatch: docs

* style

* style

* fix: properly clean up on app quit #311 (cherry-picked)

* standard (cherry-picked)

* the next release is really going to be 1.1.0 (cherry-picked)

* fix progress indicator in case of 0 incopmlete dats #311 (cherry-picked)

* set a max-width on error modal and fix misaligned checkmark icon (#314)

* bump version number

* fix app starting before the bundle has been written (#313)

* fix metadata not always being updated. closes #233 (#316) (cherry-picked)

* standard

app.js

@@ -1,56 +1,34 @@
 const persist = require('choo-persist')
-const mount = require('choo/mount')
 const log = require('choo-log')
 const css = require('sheetify')
-const xtend = require('xtend')
 const choo = require('choo')
+const xtend = Object.assign
 
-const params = require('./lib/param-router')
+require('./lib/monkeypatch')
 
 css('dat-colors')
 css('tachyons')
 css('./public/css/base.css')
 css('./public/css/colors.css')
 
-const opts = {
-  filter: (state) => {
-    state = xtend(state)
-    delete state.repos
-    return state
+const app = choo()
+
+app.use(persist({
+  filter: function (state) {
+    return xtend({}, state, { repos: {} })
   }
+}))
+
+if (process.env.NODE_ENV === 'development') {
+  app.use(log())
 }
 
-persist(opts, (p) => {
-  const app = choo()
-  app.use(onError('error:display'))
-  app.use(p)
+app.use(require('./models/welcome'))
+app.use(require('./models/drag-drop'))
+app.use(require('./models/repos'))
+app.use(require('./models/error'))
 
-  if (process.env.NODE_ENV === 'development') {
-    app.use(log())
-  }
+app.route('/', require('./pages/main'))
+
+app.mount('body div')
 
-  app.model(require('./models/main-view')())
-  app.model(require('./models/window')())
-  app.model(require('./models/repos')())
-  app.model(require('./models/error')())
-
-  app.router([
-    ['/', params({
-      default: require('./pages/main')
-    })]
-  ])
-
-  mount('body div', app.start())
-})
-
-function onError (action) {
-  return {
-    onError: function (err, state, createSend) {
-      var send = createSend('handleError')
-      send(action, err.message, function (err) {
-        // if we hit this point the error handler has failed and we should crash
-        if (err) throw err
-      })
-    }
-  }
-}

elements/empty.js

@@ -0,0 +1,82 @@
+var html = require('choo/html')
+var css = require('sheetify')
+
+var icon = require('../elements/icon')
+
+module.exports = EmptyState
+
+const skeleton = css`
+  :host {
+    position: relative;
+    .skeleton {
+      position: fixed;
+      top: 3.5rem;
+      left: 1.25rem;
+      width: 232px;
+      max-width: 100vw;
+    }
+    .dotted-lines {
+      position: absolute;
+      top: .25rem;
+      right: 5.5rem;
+      width: 17rem;
+      z-index: 3;
+    }
+    .create-new-dat,
+    .link {
+      position: absolute;
+      width: 15rem;
+    }
+    .create-new-dat {
+      top: 14.5rem;
+      right: 4rem;
+      svg {
+        display: inline-block;
+        width: 2rem;
+        height: 2rem;
+      }
+    }
+    .link {
+      top: 6rem;
+      right: 8.5rem;
+      color: red;
+      svg {
+        display: inline-block;
+        width: 2rem;
+        height: 2rem;
+        margin-bottom: -.75rem;
+      }
+    }
+  }
+`
+
+function EmptyState () {
+  return html`
+    <main class="${skeleton}">
+      <img src="./public/img/table-skeleton.svg" alt="" class="skeleton">
+      <div class="tutorial">
+        <img src="./public/img/dotted-lines.svg" alt="" class="dotted-lines">
+        <div class="link">
+          ${icon('link', { class: 'color-blue-disabled' })}
+          <h3 class="f4 ttu mt0 mb0 color-blue-disabled">
+            Import Dat
+          </h3>
+          <p class="f7 color-neutral-40">
+            Download an existing dataset
+            <br>
+            by entering its dat link…
+          </p>
+        </div>
+        <div class="tr create-new-dat">
+          ${icon('create-new-dat', { class: 'color-green-disabled' })}
+          <h3 class="f4 ttu mt0 mb0 color-green-disabled">Create New Dat</h3>
+          <p class="f7 color-neutral-40">
+            … or select one of your local
+            <br>
+            datasets and start sharing it.
+          </p>
+        </div>
+      </div>
+    </main>
+  `
+}

elements/status.js

@@ -79,7 +79,7 @@ const progressSubline = css`
   }
 `
 
-module.exports = function (dat, stats, send) {
+module.exports = function (dat, stats) {
   if (dat.owner && dat.importer) {
     return html`<div>Watching for updates…</div>`
   }

elements/table.js

@@ -112,7 +112,7 @@ const table = css`
 
 module.exports = tableElement
 
-function tableElement (dats, send) {
+function tableElement (dats, emit) {
   return html`
     <main>
       <table class="w-100 collapse ${table}">
@@ -128,15 +128,15 @@ function tableElement (dats, send) {
         </thead>
         <tbody>
           ${dats.map(function (dat) {
-            return row(dat, send)
+            return row(dat, emit)
           })}
         </tbody>
       </table>
     </main>
   `
 }
 
-function row (dat, send) {
+function row (dat, emit) {
   const stats = dat.stats && dat.stats.get()
   var peers = (dat.network)
     ? dat.network.connected
@@ -153,7 +153,7 @@ function row (dat, send) {
         : 'stale'
     : 'paused'
 
-  const togglePause = () => send('repos:togglePause', dat)
+  const togglePause = () => emit('toggle pause', dat)
 
   const hexContent = {
     loading: button.icon('loading', {
@@ -181,13 +181,13 @@ function row (dat, send) {
   var finderButton = button.icon('Open in Finder', {
     icon: icon('open-in-finder'),
     class: 'row-action',
-    onclick: () => send('repos:open', dat)
+    onclick: () => emit('open dat', dat)
   })
 
   var linkButton = button.icon('Share Dat', {
     icon: icon('link'),
     class: 'row-action',
-    onclick: () => send('repos:share', dat)
+    onclick: () => emit('share dat', dat)
   })
 
   var deleteButton = button.icon('Remove Dat', {
@@ -203,7 +203,7 @@ function row (dat, send) {
         target = target.parentNode
       }
       assert.equal(typeof id, 'string', 'elements/table.deleteButton: id should be type string')
-      send('repos:remove', { key: id })
+      emit('remove dat', { key: id })
     }
   })
 
@@ -236,7 +236,7 @@ function row (dat, send) {
         </div>
       </td>
       <td class="cell-3">
-        ${status(dat, stats, send)}
+        ${status(dat, stats)}
       </td>
       <td class="tr cell-4 size">
         ${stats.size}

elements/welcome.js

@@ -0,0 +1,36 @@
+var html = require('choo/html')
+var css = require('sheetify')
+
+var button = require('./button')
+
+module.exports = WelcomeScreen
+
+const welcome = css`
+  :host {
+    height: 100vh;
+    background-color: var(--color-neutral);
+    color: var(--color-white);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    -webkit-app-region: drag;
+  }
+`
+
+function WelcomeScreen (methods) {
+  const onexit = methods.onexit
+  const onLoad = methods.onload
+
+  return html`
+    <main class="${welcome}" onload=${onLoad}>
+      <img src="./public/img/logo-dat-desktop.svg" alt="" class="">
+      <p class="mv4">
+        Share data on the distributed web.
+      </p>
+      ${button.green('Get Started', { onclick: onexit })}
+    </main>
+  `
+}
+

index.js

@@ -4,7 +4,7 @@ const window = require('electron-window')
 const Env = require('envobj')
 const path = require('path')
 const doctor = require('dat-doctor')
-const { Writable } = require('stream')
+const Writable = require('stream').Writable
 
 const autoUpdater = require('./lib/auto-updater')
 const colors = require('dat-colors')