Migrate to choo5 (#590)

* choo migration

* standard

* couple workflow bugs in register/login profile flow

* redirect to dat:// if user not found

* fix test

client/js/app.js

@@ -1,49 +1,55 @@
-const mount = require('choo/mount')
 const choo = require('choo')
+const persist = require('choo-persist')
 const app = choo()
+const defaults = require('./models/defaults')
 const css = require('sheetify')
-// Enable webrtc debugging:
-// try { localStorage.debug = 'webrtc-swarm' } catch (e) {}
 
 // define models:
-app.model(require('./models/archive'))
-app.model(require('./models/township'))
-app.model(require('./models/explore'))
-app.model(require('./models/profile'))
-app.model(require('./models/message'))
-app.model(require('./models/preview'))
+app.use(persist())
+app.use(logger)
+app.use(require('./defaults')(defaults))
+app.use(require('./models/archive'))
+app.use(require('./models/township'))
+app.use(require('./models/explore'))
+app.use(require('./models/profile'))
+app.use(require('./models/message'))
+app.use(require('./models/preview'))
+
+function logger (state, emitter) {
+  emitter.on('*', function (messageName, data) {
+    console.log('event', messageName, data)
+  })
+}
 
 css('dat-colors')
 
 // define routes:
-app.router({default: '/404'}, [
-  ['/install', require('./pages/install')],
-  ['/publish', require('./pages/publish')],
-  ['/explore', require('./pages/explore')],
-  ['/register', require('./pages/auth/register')],
-  ['/login', require('./pages/auth/login')],
-  ['/reset-password', require('./pages/auth/reset-password')],
-  ['/download/:archiveKey', require('./pages/download')],
-  ['/dat/:archiveKey', require('./pages/archive')],
-  ['/dat://:archiveKey', require('./pages/archive')],
-  ['/view/:archiveKey', require('./pages/archive')],
-  ['/view', require('./pages/archive')],
-  ['/profile/:username', require('./pages/auth/profile')],
-  ['/profile/edit', require('./pages/auth/edit-profile')],
-  ['/profile/delete', require('./pages/auth/delete-account')],
-  ['/404', require('./pages/fourohfour')],
-  ['/team', require('./pages/landing/team')],
-  ['/about', require('./pages/landing/about')],
-  ['/:archiveKey/contents', require('./pages/archive')],
-  ['/:archiveKey/contents/*', require('./pages/archive')],
-  ['/:username/:dataset', require('./pages/archive')],
-  ['/:username/:dataset/*', require('./pages/archive')],
-  ['/:archiveKey', require('./pages/archive')],
-  ['/', require('./pages/landing/splash')]
-])
+app.route('/install', require('./pages/install'))
+app.route('/publish', require('./pages/publish'))
+app.route('/explore', require('./pages/explore'))
+app.route('/register', require('./pages/auth/register'))
+app.route('/login', require('./pages/auth/login'))
+app.route('/reset-password', require('./pages/auth/reset-password'))
+app.route('/404', require('./pages/fourohfour'))
+app.route('/team', require('./pages/landing/team'))
+app.route('/about', require('./pages/landing/about'))
+app.route('/view', require('./pages/archive'))
+app.route('/download/:archiveKey', require('./pages/download'))
+app.route('/dat/:archiveKey', require('./pages/archive'))
+app.route('/dat://:archiveKey', require('./pages/archive'))
+app.route('/profile/edit', require('./pages/auth/edit-profile'))
+app.route('/profile/delete', require('./pages/auth/delete-account'))
+app.route('/dat://:archiveKey/contents', require('./pages/archive'))
+app.route('/dat://:archiveKey/contents/*', require('./pages/archive'))
+app.route('/:username/:dataset', require('./pages/archive'))
+app.route('/:username/:dataset/*', require('./pages/archive'))
+app.route('/:username', require('./pages/auth/profile'))
+app.route('/', require('./pages/landing/splash'))
+
+app.defaults = defaults
 
 if (module.parent) {
   module.exports = app
 } else {
-  mount('#app-root', app.start())
+  app.mount('#app-root')
 }

client/js/components/auth/login.js

@@ -1,10 +1,10 @@
 const html = require('choo/html')
 const form = require('get-form-data')
 
-const login = (state, prev, send) => {
+const login = (state, emit) => {
   function onSubmit (e) {
     const data = form(e.target)
-    send('township:login', data)
+    emit('township:login', data)
     e.preventDefault()
     return false
   }

client/js/components/auth/register.js

@@ -1,10 +1,10 @@
 const html = require('choo/html')
 const form = require('get-form-data')
 
-const register = (state, prev, send) => {
+const register = (state, emit) => {
   function onSubmit (e) {
     const data = form(e.target)
-    send('township:register', data)
+    emit('township:register', data)
     e.preventDefault()
     return false
   }

client/js/components/auth/user-panel.js

@@ -74,25 +74,25 @@ const prefix = css`
   }
 `
 
-module.exports = function (state, prev, send) {
+module.exports = function (state, emit) {
   if (!state.township.username) return
 
   return html`<div class="user-panel ${prefix} ${state.township.sidePanel}">
-      <a class="close-button" title="Close" href="#" onclick=${() => send('township:sidePanel')}>
+      <a class="close-button" title="Close" href="#" onclick=${() => emit('township:sidePanel')}>
         <svg>
           <use xlink:href="#daticon-cross" />
         </svg>
       </a>
       <div class="flex items-center mb2">
         <div>
-          ${state.township.email}
+          Signed in as <b>${state.township.profile.username}</b>
         </div>
       </div>
       <ul>
-        <li><a href="/profile/${state.township.username}" data-no-routing>View Profile</a></li>
+        <li><a href="/${state.township.username}" data-no-routing>View Profile</a></li>
         <li><a href="/profile/edit" data-no-routing>Edit Profile</a></li>
         <li><a href="http://github.com/datproject/datproject.org/issues" target="_blank" class="color-neutral-50 hover-color-neutral-70">Report Bug</a></li>
-        <li><a href="#" onclick=${() => send('township:logout', {})}>Logout</a></li>
+        <li><a href="#" onclick=${() => emit('township:logout', {})}>Logout</a></li>
       </ul>
   </div>`
 }

client/js/components/copy-button.js

@@ -17,7 +17,7 @@ var copyButton = css`
   }
 `
 
-module.exports = function (text, send) {
+module.exports = function (text, emit) {
   if (module.parent) return html``
   var el = html`
     <a class="clipboard ${copyButton}" data-clipboard-text="${text}">
@@ -29,7 +29,7 @@ module.exports = function (text, send) {
   `
   var clipboard = new Clipboard('a.clipboard')
   clipboard.on('success', function () {
-    send('message:success', 'Link copied to clipboard')
+    emit('message:success', 'Link copied to clipboard')
   })
   return el
 }

client/js/components/display.js

@@ -6,14 +6,13 @@ const html = require('choo/html')
 const renderData = module.parent ? function () { } : require('render-data')
 const display = html`<div id="item"></div>`
 
-module.exports = function (state, prev, send) {
+module.exports = function (state, emit) {
   if (module.parent) return
   const entryName = state.preview.entry && state.preview.entry.name
-  const previousEntryName = prev && prev.preview ? prev.preview.entry && prev.preview.entry.name : null
 
   if (state.preview.error) {
     if (!state.preview.isPanelOpen) {
-      send('preview:openPanel', {})
+      emit('preview:openPanel', {})
     }
     return fourohfour({
       icon: state.preview.error.icon,
@@ -22,40 +21,43 @@ module.exports = function (state, prev, send) {
       link: false
     })
   }
-  if (!entryName) return
-  if (entryName === previousEntryName) return display
-  if (!state.preview.isPanelOpen) send('preview:openPanel', {})
+  if (!entryName) return display
+  if (!state.preview.isPanelOpen) return emit('preview:openPanel', {})
   if (state.preview.entry.size > (1048576 * 10)) {
-    return send('preview:update', {error: {
+    return emit('preview:update', {error: {
       message: 'Cannot preview',
       body: 'This file is too big, use the desktop app or CLI.'
     }})
   }
 
-  send('preview:update', {error: {
-    message: 'Loading',
-    body: 'Please wait…',
-    icon: 'loader'
-  }})
+  emit('preview:update', {isLoading: true})
   // proper escape is done, but # is special
   http({url: `/download/${state.archive.key}/${entryName.replace(/#/g, '%23')}`, method: 'GET'}, function (err, resp, file) {
     if (resp.statusCode === 400) err = new Error('File does not exist.')
-    if (err) return send('preview:update', {error: err})
-    renderData.render({
-      name: entryName,
-      createReadStream: function () {
-        return from([file])
-      }
-    }, display, function (err) {
-      if (err) {
-        var update = {}
-        console.error(err)
-        var message = 'Unsupported filetype'
-        update.isLoading = false // Allow downloads for unsupported files
-        update.error = {message: message}
-        return send('preview:update', update)
-      }
-      send('preview:update', {isLoading: false, error: err})
-    })
+    if (err) return emit('preview:update', {error: err})
+    try {
+      renderData.render({
+        name: entryName,
+        createReadStream: function () {
+          return from([file])
+        }
+      }, display, function (err) {
+        if (err) return onerror(err)
+      })
+    } catch (err) {
+      onerror(err)
+    }
+
+    function onerror (err) {
+      console.log('got err', err)
+      var update = {}
+      console.error(err)
+      var message = 'Unsupported filetype'
+      update.isLoading = false // Allow downloads for unsupported files
+      update.error = {message: message}
+      console.log('sending', update)
+      return emit('preview:update', update)
+    }
   })
+  return display
 }

client/js/components/header.js

@@ -21,25 +21,25 @@ var navStyles = css`
   }
 `
 
-const header = (state, prev, send) => {
+const header = (state, emit) => {
   return html`<div>
     <header class="relative ${headerStyles}">
       ${message(state.message)}
       <div class="container container--top-bar">
         <div class="flex justify-between items-center relative">
-          ${panel(state, prev, send)}
+          ${panel(state, emit)}
           <nav class="flex items-center ${navStyles}">
             <a href="/" data-no-routing class="dat-logo">
               <img src="/public/img/dat-hexagon.svg" />
               <span class="dat-logo__word">Dat</span>
             </a>
-            ${importButton(send)}
+            ${importButton(emit)}
             <a href="/explore" data-no-routing class="header-nav-link">Explore</a>
             <a href="/install" class="header-nav-link">Install</a>
           </nav>
           <div>
             ${state.township.email ? html`<a href="/publish" class="btn btn--green">Publish</a>` : ''}
-            ${loginButton(state, prev, send)}
+            ${loginButton(state, emit)}
           </div>
         </div>
       </div>

client/js/components/help.js

@@ -1,9 +1,9 @@
 const html = require('choo/html')
 const button = require('../elements/button')
 
-module.exports = (state, prev, send) => {
+module.exports = (state, emit) => {
   if (module.parent || window.location.pathname === '/') return ''
-  const intro = () => send('help:show')
+  const intro = () => emit('help:show')
   return html`
     ${button({
       icon: '/public/img/question.svg',

client/js/components/hyperdrive/index.js

@@ -1,14 +1,14 @@
 const hyperdriveRenderer = require('./client.js')
 const noop = function () {}
 
-module.exports = function (state, prev, send) {
+module.exports = function (state, emit) {
   var onclick = (ev, entry) => {
     if (entry.type === 'directory') {
-      send('archive:directory', entry.name)
+      emit('archive:directory', entry.name)
       return true
     } else {
       entry.archiveKey = state.archive.key
-      send('preview:file', {entry: entry}, noop)
+      emit('preview:file', {entry: entry}, noop)
       return false
     }
   }

client/js/components/import-queue.js

@@ -1,6 +1,6 @@
 const html = require('choo/html')
 
-module.exports = (state, prev, send) => {
+module.exports = (state, emit) => {
   const writing = state.importQueue.writing
   const writingProgressPct = state.importQueue.writingProgressPct
   const next = state.importQueue.next

client/js/components/list.js

@@ -2,7 +2,7 @@ const html = require('choo/html')
 const copyButton = require('./copy-button')
 const relativeDate = require('relative-date')
 
-module.exports = (dats, send) => {
+module.exports = (dats, emit) => {
   function open (dat) {
     window.location.href = `/${dat.shortname}`
   }
@@ -27,7 +27,7 @@ module.exports = (dats, send) => {
         </div>
       </div>
       <div class="flex-none pv2">
-        ${copyButton(dat.url, send)}
+        ${copyButton(dat.url, emit)}
       </div>
     </div>
     `

client/js/components/login-button.js

@@ -18,12 +18,13 @@ var avatarStyles = css`
   }
 `
 
-module.exports = function (state, prev, send) {
+module.exports = function (state, emit) {
+  if (module.parent || !state.township.whoami) return html``
   if (state.township.email) {
     return html`
       ${button({
         text: gravatar({email: state.township.email}, {}, avatarStyles),
-        click: () => send('township:sidePanel'),
+        click: () => emit('township:sidePanel'),
         klass: 'btn bn pr0'
       })}
     `

client/js/components/preview.js

@@ -14,7 +14,7 @@ var displayStyles = css`
     }
     iframe {
       width: 100%;
-      height: 70%;
+      height: 100%;
       border: 1px solid var(--color-neutral-20);
     }
     table {
@@ -37,13 +37,14 @@ var displayStyles = css`
   }
 `
 
-const preview = (state, prev, send) => {
+const preview = (state, emit) => {
   if (typeof document !== 'undefined') {
     if (state.preview.isPanelOpen) document.body.classList.add('panel-open')
     else document.body.classList.remove('panel-open')
   }
   const isOpen = state.preview.isPanelOpen ? 'open' : ''
   const entry = state.preview.entry
+  if (!entry) return
   const entryName = entry && entry.name
   const size = (entry && entry.size) ? prettyBytes(entry.size) : 'N/A'
   const downloadDisabled = entry && (entry.size > (1048576 * 10))
@@ -61,7 +62,7 @@ const preview = (state, prev, send) => {
 
   return html`<section id="preview" class="bg-white panel ${isOpen}">
     <div class="panel-header">
-      <button onclick=${() => send('preview:closePanel')} class="panel-header__close-button">
+      <button onclick=${() => emit('preview:closePanel')} class="panel-header__close-button">
       Close
       </button>
       <div class="panel-header__title-group">
@@ -83,8 +84,8 @@ const preview = (state, prev, send) => {
       </div>
     </div>
     <div class="panel-main">
-      <div id="display" class="${displayStyles} mb5">
-        ${display(state, prev, send)}
+      <div id="display" class="${displayStyles}">
+        ${display(state, emit)}
       </div>
     </div>
   </section>