diff --git a/client/js/app.js b/client/js/app.js index c844cc24..395af2eb 100644 --- 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 deleted file mode 100644 index ddd4ea88..00000000 --- a/client/js/components/archive/index.js +++ /dev/null @@ -1,13 +0,0 @@ -const html = require('choo/html') - -const archive = (state, prev, send) => { - return html`
-

Client-rendered properties:

- -
` -} - -module.exports = archive diff --git a/client/js/components/header/index.js b/client/js/components/header/index.js new file mode 100644 index 00000000..2beb4bb7 --- /dev/null +++ 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`
${button({text: '?', click: intro})}
` +} + +const header = (state, prev, send) => { + return html`
+
+ +
+
+ ${button({ + text: 'Create new Dat', + click: () => send('archive:new') + })} +
+ ${importButton({ + download: (link) => send('archive:load', link) + })} + ${help()} +
+
+
` +} + +module.exports = header diff --git a/client/js/models/archive.js b/client/js/models/archive.js index 68bd9cac..6e82e728 100644 --- 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 b/client/js/pages/archive/index.js similarity index 53% rename from server/pages/archive/index.js rename to client/js/pages/archive/index.js index 6c2c313f..8676005b 100644 --- a/server/pages/archive/index.js +++ b/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` - - - - - - ${header(state, prev)} +const archivePage = (state, prev, send) => { + return html` +
+ ${header(state, prev, send)}

ArchivePage

Server-rendered properties:

@@ -17,7 +13,7 @@ const archivePage = (state, prev) => {
  • peers: ${state.archive.numPeers}
  • signalhubs:
      - ${state.signalhubs.map(function (fqdn) { + ${state.archive.signalhubs.map(function (fqdn) { return signalhubs(fqdn) })}
    @@ -25,8 +21,7 @@ const archivePage = (state, prev) => {
    • - - ` +
    ` } const signalhubs = (fqdn) => { diff --git a/client/js/pages/landing/index.js b/client/js/pages/landing/index.js new file mode 100644 index 00000000..269b6fe7 --- /dev/null +++ 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` + + + + + + ${header(state, prev)} +
    +
    + Dat is a dataset sharing system. +
    + Give it a try: +
    +
    + +
    +

    Create New Dat

    +

    + Drag and drop files to upload and start sharing your data +

    +
    + +
    +

    Or Open An Existing Dat

    + +
    +
    +
    + ` +} + +module.exports = homePage diff --git a/client/scss/site-header.scss b/client/scss/site-header.scss index cf46a9ad..ad4cdbdc 100644 --- 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 deleted file mode 100644 index f393fa29..00000000 --- a/server/app.js +++ /dev/null @@ -1,10 +0,0 @@ -const choo = require('choo') -const app = choo() -// TODO: server-side choo logger - -app.router((route) => [ - route('/', require('./pages/landing')), - route('/:archiveId', require('./pages/archive')) -]) - -module.exports = app diff --git a/server/components/header/index.js b/server/components/header/index.js deleted file mode 100644 index 30381eec..00000000 --- a/server/components/header/index.js +++ /dev/null @@ -1,7 +0,0 @@ -const html = require('choo/html') - -const header = (state, prev) => { - return html`
    TODO: migrate header + + + + + ${contents} + + ` +} + +module.exports = page diff --git a/server/router.js b/server/router.js index aad733aa..a8c8a338 100644 --- 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)) } })