const nest = require('depnest') const Scroller = require('pull-scroll') const pull = require('pull-stream') const { h, watch } = require('mutant') const next = require('pull-next-query') exports.gives = nest({ 'app.html.menuItem': true, 'app.page.profile': true }) exports.needs = nest({ 'about.html.edit': 'first', 'about.obs.name': 'first', 'app.html.scroller': 'first', 'app.sync.goTo': 'first', 'contact.html.relationships': 'first', 'keys.sync.id': 'first', 'message.html.render': 'first', 'sbot.pull.stream': 'first' }) exports.create = function (api) { return nest({ 'app.html.menuItem': menuItem, 'app.page.profile': profilePage }) function menuItem () { return h('a', { 'ev-click': () => api.app.sync.goTo(api.keys.sync.id()) }, '/profile') } function profilePage (location) { const { feed: id } = location const profile = h('Profile', [ h('section.edit', api.about.html.edit(id)), h('section.relationships', api.contact.html.relationships(id)), h('section.activity', [ h('header', 'Activity') // ideally the scroller content would go in here ]) ]) var { container, content } = api.app.html.scroller({ prepend: profile }) const source = (opts) => api.sbot.pull.stream(s => next(s.query.read, opts, ['value', 'timestamp'])) const query = [{ $filter: { value: { timestamp: { $gt: 0 }, author: id } } }] pull( source({ query, live: true, old: false }), Scroller(container, content, api.message.html.render, true, false) ) // how to handle when have scrolled past the start??? pull( source({ query, reverse: true, limit: 50 }), Scroller(container, content, api.message.html.render, false, false) ) watch(api.about.obs.name(id), name => { container.title = '@' + name }) return container } }