Merge pull request #182 from datproject/migrate-header

[WIP] Migrate header
dat-ecosystem-archive · Aug 4, 2016 · ba50d1d · ba50d1d
2 parents 8dd4be6 + f625f51
commit ba50d1d
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 64 deletions.
diff --git a/client/js/app.js b/client/js/app.js
@@ -1,14 +1,17 @@
 const choo = require('choo')
 const app = choo()
-// TODO: client-side choo logger
 
 // define models:
 app.model(require('./models/archive'))
 
 // define routes:
 app.router((route) => [
-  route('/:archiveId', require('./components/archive'))
+  route('/', require('./pages/landing')),
+  route('/:archiveKey', require('./pages/archive'))
 ])
 
-// start app:
-app.start('#archive-list')
+if (module.parent) {
+  module.exports = app
+} else {
+  app.start('#app-root')
+}
diff --git a/client/js/components/archive/index.js b/client/js/components/archive/index.js
diff --git a/client/js/components/header/index.js b/client/js/components/header/index.js
@@ -0,0 +1,32 @@
+const html = require('choo/html')
+const button = require('dat-button')
+const importButton = require('dat-header/import')
+
+const help = () => {
+  const intro = () => window.alert('not yet')
+  return html`<div class="dat-button">${button({text: '?', click: intro})}</div>`
+}
+
+const header = (state, prev, send) => {
+  return html`<header class="site-header">
+    <div class="container">
+      <a href="http://dat-data.com" class="dat-logo">
+        <img src="./public/img/dat-data-logo.svg" />
+      </a>
+      <div class="site-header__actions">
+        <div class="dat-button dat-button--new-dat">
+          ${button({
+            text: 'Create new Dat',
+            click: () => send('archive:new')
+          })}
+        </div>
+        ${importButton({
+          download: (link) => send('archive:load', link)
+        })}
+        ${help()}
+      </div>
+    </div>
+  </header>`
+}
+
+module.exports = header
diff --git a/client/js/models/archive.js b/client/js/models/archive.js
@@ -3,7 +3,12 @@ module.exports = {
   namespace: 'archive',
   state: {
     key: null,
-    file: null
+    file: null,
+    numPeers: 0,
+    signalhubs: [
+      'signalhub.mafintosh.com',
+      'signalhub.dat.land'
+    ]
   },
   reducers: {
     update: (data, state) => {
@@ -12,5 +17,15 @@ module.exports = {
         file: null
       }
     }
+  },
+  effects: {
+    new: function (data, state, send, done) {
+      window.alert('this should create a new archive')
+      setTimeout(() => done(), 1000)
+    },
+    load: function (data, state, send, done) {
+      window.alert('this should load the archive', data)
+      setTimeout(() => done(), 1000)
+    }
   }
 }
diff --git a/server/pages/archive/index.js → client/js/pages/archive/index.js b/server/pages/archive/index.js → client/js/pages/archive/index.js
@@ -1,14 +1,10 @@
 const html = require('choo/html')
-const header = require('./../../components/header')
+const header = require('../../components/header')
 
-const archivePage = (state, prev) => {
-  return html`<html>
-    <head>
-      <link rel="icon" type="image/png" href="public/img/dat-data-blank.png" />
-      <link rel="stylesheet" type="text/css" href="public/css/main.css"/>
-    </head>
-    <body>
-      ${header(state, prev)}
+const archivePage = (state, prev, send) => {
+  return html`
+    <div>
+      ${header(state, prev, send)}
       <div class="archive-metadata">
         <h1>ArchivePage</h1>
         <h2>Server-rendered properties:</h2>
@@ -17,16 +13,15 @@ const archivePage = (state, prev) => {
         <li>peers: ${state.archive.numPeers}</li>
         <li>signalhubs:
           <ul>
-          ${state.signalhubs.map(function (fqdn) {
+          ${state.archive.signalhubs.map(function (fqdn) {
             return signalhubs(fqdn)
           })}
           </ul>
         </li>
         </ul>
       </div>
       <main id="archive-list"></main>
-      <script type="text/javascript" src="public/js/app.js"></script>
-    </body></html>`
+    </div>`
 }
 
 const signalhubs = (fqdn) => {

diff --git a/client/js/pages/landing/index.js b/client/js/pages/landing/index.js
@@ -0,0 +1,36 @@
+const html = require('choo/html')
+const header = require('./../../components/header')
+
+const homePage = (state, prev) => {
+  return html`<html>
+    <head>
+      <link rel="icon" type="image/png" href="public/img/dat-data-blank.png" />
+      <link rel="stylesheet" type="text/css" href="public/css/main.css"/>
+    </head>
+    <body>
+      ${header(state, prev)}
+      <div class="tmp-home-view">
+        <div class="landing-header">
+          Dat is a dataset sharing system.
+          <br>
+          Give it a try:
+        </div>
+        <div class="landing-main container">
+
+          <div class="landing-create-new-dat">
+            <h3>Create New Dat</h3>
+            <p>
+              Drag and drop files to upload and start sharing your data
+            </p>
+          </div>
+
+          <div class="landing-import-dat">
+            <h3>Or Open An Existing Dat</h3>
+            <input />
+          </div>
+        </div>
+      </div>
+    </body></html>`
+}
+
+module.exports = homePage
diff --git a/client/scss/site-header.scss b/client/scss/site-header.scss
@@ -20,6 +20,10 @@ $site-header-height: 4rem;
 
 .dat-logo {
   float: left;
+
+  img {
+    width: 40px;
+  }
 }
 
 // dat-button

diff --git a/server/app.js b/server/app.js
diff --git a/server/components/header/index.js b/server/components/header/index.js
diff --git a/server/models/archive-page.js b/server/models/archive-page.js
diff --git a/server/page.js b/server/page.js
@@ -0,0 +1,12 @@
+function page (contents) {
+  return `<html>
+      <head>
+        <link rel="icon" type="image/png" href="public/img/dat-data-blank.png" />
+        <link rel="stylesheet" type="text/css" href="public/css/main.css"/>
+      </head>
+      <body id="app-root">${contents}</body>
+      <script type="text/javascript" src="public/js/app.js"></script>
+    </html>`
+}
+
+module.exports = page
diff --git a/server/router.js b/server/router.js
@@ -1,14 +1,14 @@
 'use strict'
 
 const fs = require('fs')
-const serverRouter = require('server-router')
-const app = require('./app')
-const router = serverRouter()
+// TODO: determine client-side or server-side choo logger
+const app = require('../client/js/app')
+const page = require('./page')
+const router = require('server-router')()
 
 router.on('/', {
   get: function (req, res, params) {
-    const contents = app.toString('/', app.state)
-    // TODO: send client app state down the pipe to client
+    const contents = app.toString('/', undefined) // no default state (yet)
     res.setHeader('Content-Type', 'text/html')
     res.end(contents)
   }
@@ -28,12 +28,13 @@ router.on('/migrate', {
 // new choo-based archive route:
 router.on('/:archiveKey', {
   get: function (req, res, params) {
-    let state = copyAppState(require('./models/archive-page'))
+    // XXX: get global default state with route params applied
+    let state = copyAppState({archive: require('../client/js/models/archive').state})
     state.archive.key = params.archiveKey
     const contents = app.toString('/:archiveKey', state)
     // TODO: send client app state down the pipe to client
     res.setHeader('Content-Type', 'text/html')
-    res.end(contents)
+    res.end(page(contents))
   }
 })