Skip to content
This repository has been archived by the owner on Dec 23, 2021. It is now read-only.

[WIP] Migrate header #182

Merged
merged 11 commits into from
Aug 4, 2016
Merged

[WIP] Migrate header #182

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2b12dd4
first cut of header migration
clkao Aug 3, 2016
b697c05
attempt to link the send() actions
clkao Aug 3, 2016
29b9f39
universal rendering. rehydration seems not working yet.
clkao Aug 3, 2016
593bedb
remove unused require
clkao Aug 3, 2016
61ef042
dispatch namespaced effects correctly
clkao Aug 3, 2016
5a8ab07
implement all header appearances
clkao Aug 3, 2016
5cd3eeb
cleanup server page boilerplate
clkao Aug 4, 2016
d7701a8
pass in explicit undefined state to on server for now so its clear
laurengarcia Aug 4, 2016
d5d7e88
pass in explicit undefined state to landing page route on server for …
laurengarcia Aug 4, 2016
0047407
Merge branch 'migrate-header' of https://github.com/datproject/dat.la…
laurengarcia Aug 4, 2016
f625f51
changes from master
laurengarcia Aug 4, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions client/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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/home')),
route('/:archiveKey', require('./pages/archive'))
])

// start app:
app.start('#archive-list')
if (module.parent) {
module.exports = app
} else {
app.start('#app-root')
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, ok cool, i'm into this ^^

13 changes: 0 additions & 13 deletions client/js/components/archive/index.js
View file
Open in desktop

This file was deleted.

32 changes: 32 additions & 0 deletions client/js/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const html = require('choo/html')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

header should be server-rendered per discussion at the bottom of #103

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
17 changes: 16 additions & 1 deletion client/js/models/archive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ module.exports = {
namespace: 'archive',
state: {
key: null,
file: null
file: null,
numPeers: 0,
signalhubs: [
'signalhub.mafintosh.com',
'signalhub.dat.land'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

signalhubs will be fed in from the server with the rehydration state. different dats might have different signalhubs it is associated with so we'll need to find that out from the server to speed up discovery. karissa and max and i discussed this a while back.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess a clearer way to say that is signalhubs should not be hard-coded on client, this should probably just be an empty array that gets populated from rehydration object.

Copy link
Contributor

@laurengarcia laurengarcia Aug 3, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, after discussing it with yoshua, he has convinced me that instead of a rehydration object printed into the html document, we should make an xhr call to rehydrate the app. That way the html document pieces become extremely cache-able (then we can CDN them all).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, sorry for back and forth. There is detailed discussion about this in #163. TL;dr let's server-render state directly into server-side template for now and then upgrade later to xhr.

]
},
reducers: {
update: (data, state) => {
Expand All @@ -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)
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool.

load: function (data, state, send, done) {
window.alert('this should load the archive', data)
setTimeout(() => done(), 1000)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i don't think we'll need a generic load function here. Based on the discussion in #103, we are going to server-render the archive metadata into the page, and then use webrtc peers to populate each file's content.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is for the importButton's callback. we'll probably just call send.location(/${key}) once the datlink is validated

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah ok then.

}
}
19 changes: 7 additions & 12 deletions server/pages/archive/index.js → client/js/pages/archive/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
const html = require('choo/html')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I disagree with moving /server/pages/archive/index to client/js/pages/... this app will not be truly isomorphic in the sense that it will be identical on server and client. We will have pieces that are server-rendered and pieces that are client-rendered from rehydration, and the only possible overlap might be certain states of the header, but for the most part the header should be rendered on the server, and so should the basic markup for the page-level template. So moving this to the client doesn't make sense.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but i think we should diverge the render-ness logic in the component level rather than the entry-point to make things simpler. for example: the hyperdrive-ui bit can be rendering the html tree plus a tree object in server, while in client side it's rehydrated with yofs on the tree object, and connects to peer for updates. Does it make sense?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I see your point! Put me down for +1 --> agree.

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>
Expand All @@ -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) => {
Expand Down
0 server/pages/home/index.js → client/js/pages/home/index.js
View file
Open in desktop
File renamed without changes.
4 changes: 4 additions & 0 deletions client/scss/site-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ $site-header-height: 4rem;

.dat-logo {
float: left;

img {
width: 40px;
}
}

// dat-button
Expand Down
10 changes: 0 additions & 10 deletions server/app.js
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions server/components/header/index.js
View file
Open in desktop

This file was deleted.

18 changes: 13 additions & 5 deletions server/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
'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 router = require('server-router')()

router.on('/', {
get: function (req, res, params) {
Expand All @@ -28,12 +28,20 @@ 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(`<html>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this markup should be in server/pages/, plz no markup in router file.

<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>`)
}
})

Expand Down