replicate model in client

client.js

@@ -1,5 +1,19 @@
 //import { NeedsApp } from './needs'
 var NeedsApp = require('./needs')
 
+var {getModel} = require('./model')
+
+var m = require('mithril')
+
+// Wrapper component to pass in data:
+
+getModel('http://exodus.strfry.org:82/hq_needs').then(model => {
+  var Component = {
+//      view: vnode => m('body', m(NeedsApp, {stores:model} ) )
+      view: vnode => m(NeedsApp, {stores:model})
+  }
+
+//  m.mount(document.body, Component)
+  m.mount(document.querySelector('#mountpoint'), Component)
+})
 
-console.log(NeedsApp)

model.js

@@ -0,0 +1,25 @@
+//import PouchDB from 'pouchdb'
+var PouchDB = require('pouchdb');
+
+
+function getModel(db_url) {
+  db_url = "http://exodus.strfry.org:82/hq_needs/"
+  var db = new PouchDB(db_url)
+  //var db = require('pouchdb')(db_url)
+  return new Promise((resolve, reject) => {
+    db.allDocs({include_docs: true}
+    ).then(docs => {
+      var stores = docs.rows.map(doc => Object({store: doc.id, items: doc.doc.items}))
+      resolve(stores)
+    }).catch(reject)
+  })
+}
+
+var items = [
+        'Apfel',
+        'Birne',
+        'Schokoladenkuchen'
+]
+
+
+module.exports.getModel = getModel;

needs.js

@@ -11,54 +11,46 @@ var {Card, Checkbox, ListTile, List} = require('polythene-mithril')
 //import {Card, Checkbox, ListTile, List} from 'polythene-mithril'
 
 
-function Item() {
-  const model = {
-    name: 'Item',
-    confirmed: false
-  };
-
-  return {
-    view: vnode =>
-      m(ListTile, {title: vnode.attrs.name},
-        m(Checkbox, {
-          size: 'large',
-          value: model.confirmed,
-          onChange: state => vnode.state.checked = state.checked,
-          checked: state => vnode.state.checked
-        }) )
-  }
+const Item = {
+/*
+  oninit: vnode => {
+    const checked = stream(false)
+    vnode.state = { checked }
+  },
+*/
+  view: vnode => {
+    console.log('Item.view', vnode)
+    return m(ListTile, {title: vnode.attrs.name},
+      m(Checkbox, {
+        size: 'large',
+//        value: model.confirmed,
+        defaultChecked: vnode.attrs.confirmed,
+//        onChange: state => vnode.attrs.confirmed = state.checked,
+  onChange: state => vnode.state.checked = state.checked,
+//        checked: state => vnode.attrs.confirmed
+  checked: vnode.state.checked,
+      }))}
 }
 
-// Top Component
-
-function needsModel() {
-  return {
-    items: [],
-    newItem: stream('')
-  }
+const StoreCard = {
+  view: vnode => 
+    m(Card, {content:
+         m(List, {
+           header: {title: vnode.attrs.store},
+           tiles: vnode.attrs.items.map(item => m(Item, item)),
+         }),
+    })
 }
 
 //export 
-function NeedsApp() {
-  const model = needsModel();
-
-
-  return {
-    view: (vnode) => {
-       console.log(vnode)
-       const attrs = vnode.attrs
-       return m(Card, {content: 
-         m(List, {
-           header: {title: 'Supermarkt'},
-           tiles: attrs.items.map(item => m(Item(), {name: item.name}))
-         })
-       })
-    },
-    oninit: vnode => { console.log('oninit') },
-    oncreate: vnode => console.log('oncreate'),
-    onupdate: vnode => console.log('onupdate'),
-    onbeforeupdate: vnode => console.log('onbeforeupdate')
-  }
+const NeedsApp = {
+  view: (vnode) => {
+     return m('div', {id: 'mountpoint'}, [vnode.attrs.stores.map(store => m(StoreCard, store))])
+  },
+//  oninit: vnode => { console.log('oninit') },
+//  oncreate: vnode => console.log('oncreate'),
+//  onupdate: vnode => console.log('onupdate'),
+//  onbeforeupdate: vnode => console.log('onbeforeupdate')
 }
 
 

package.json

@@ -10,5 +10,8 @@
     "pouchdb": "^7.0.0",
     "serve-static": "^1.13.2"
   },
-  "type": "module"
+  "type": "module",
+  "devDependencies": {
+    "browserify": "^16.2.3"
+  }
 }

server.js

@@ -1,12 +1,13 @@
 //import {NeedsApp} from './needs'
 var NeedsApp = require('./needs')
 
-//import PouchDB from 'pouchdb'
-var PouchDB = require('pouchdb');
+var { getModel } = require('./model')
+
 
 //import polka from 'polka'
 const polka = require('polka');
 
+//import serve from 'serve-static'
 const serve = require('serve-static')
 
 //import m from 'mithril'
@@ -14,55 +15,56 @@ var m = require('mithril')
 //import render from 'mithril-node-render'
 const render = require('mithril-node-render')
 
-var items = [
-	'Apfel',
-	'Birne',
-	'Schokoladenkuchen'
-]
-
-function getItems(db_url) {
-  db_url = "http://exodus.strfry.org:82/hq_needs/"
-  var db = new PouchDB(db_url)
-  //var db = require('pouchdb')(db_url)
-  return new Promise((resolve, reject) => {
-    db.allDocs({include_docs: true, key: 'Supermarkt'}
-    ).then(docs => {
-      console.log(docs.rows[0].doc.items)
-      resolve(docs.rows[0].doc.items)
-    }).catch(reject)
-  })
+var browserify = require('browserify')
+
+
+const ServerLayout = {
+  view: vnode => [
+  m('!doctype[html]'),
+  m('head',
+    m('meta', {charset: 'utf-8'}),
+  ),
+  m('body',
+    m('script', {src: "https://unpkg.com/mithril@1.1.6/mithril.min.js"}),
+    m('script', {src: "https://unpkg.com/polythene-mithril/dist/polythene-mithril-standalone.js"}),
+    m('script', {src: './bundle.js', defer: true}),
+    vnode.children
+  )]
 }
 
-const scripts = '<!DOCTYPE html>' +
- '<script src="./bundle.js"></script>' +
- '<script src="https://unpkg.com/mithril@1.1.6/mithril.min.js"></script>' +
- '<script src="https://unpkg.com/polythene-mithril/dist/polythene-mithril-standalone.js"></script>' +
- '<script></script>'
+//const scripts = '<!DOCTYPE html>' +
+// '<script src="./bundle.js" defer></script>' +
+// '<script src="https://unpkg.com/mithril@1.1.6/mithril.min.js"></script>' +
+// '<script></script>'
+
+
 
 function render_index(req, res) {
-  getItems().then(items => {
-    console.log("the items i found: ", items)
-    var template = m(NeedsApp(), {items: items})
+  getModel().then(model => {
+    console.log("the items i found: ", model)
+    var template = m(ServerLayout, m(NeedsApp, { stores: model}))
     render(template).then(function (html) {
       res.writeHead(200, {'Content-Type': 'text/html'})
-      res.end(scripts + html)
+      res.end(html)
     })
   })
 }
 
-// do a render run for fun
-getItems().then(db_docs => {
-//  var template = m(NeedsApp(), {items: db_docs})
-//  render(template).then(html => console.log(html))
-})
-
-//import serve from 'serve-static'
 var servejs = serve('.')
 
+
 polka()
   .use(servejs)
-  .get('/', render_index)
+  .get('/bundle.js', (req, res) => {
+    var bundler = browserify({debug: true})
+    bundler.add('./client.js')
+    console.log('bundling the bundle...')
+    bundler.bundle().pipe(res);
+//    res.end()
+  }).get('/', render_index)
   .listen(8000, err => {
     if (err) throw err;
     console.log(`> Running on localhost:8000`);
   });
+
+