Commit d0ffcb2afd083ec1a77409a74c50f7064993f28a
issue #70: My subscriptions working
andre alves garzia committed on 1/28/2018, 4:12:22 PMParent: ffaed8d26b49d20b5798ee6e1958fa206bedaf0a
Files changed
| app/html/channelCard.js | changed |
| app/index.js | changed |
| app/page/channelShow.js | added |
| app/page/channelShow.mcss | added |
| channel/async.js | changed |
| channel/index.js | changed |
| channel/sync.js | added |
| router/sync/routes.js | changed |
| translations/en.js | changed |
| app/html/channelCard.js | ||
|---|---|---|
| @@ -14,9 +14,9 @@ | ||
| 14 | 14 | 'translations.sync.strings': 'first', |
| 15 | 15 | 'channel.obs.subscribed': 'first', |
| 16 | 16 | 'channel.async.subscribe': 'first', |
| 17 | 17 | 'channel.async.unsubscribe': 'first', |
| 18 | - 'channel.async.isSubscribed': 'first', | |
| 18 | + 'channel.sync.isSubscribedTo': 'first', | |
| 19 | 19 | }) |
| 20 | 20 | |
| 21 | 21 | exports.create = function (api) { |
| 22 | 22 | |
| @@ -24,30 +24,31 @@ | ||
| 24 | 24 | var strings = api.translations.sync.strings() |
| 25 | 25 | |
| 26 | 26 | const myId = api.keys.sync.id() |
| 27 | 27 | const { subscribed } = api.channel.obs |
| 28 | - const { subscribe, unsubscribe, isSubscribed } = api.channel.async | |
| 28 | + const { subscribe, unsubscribe } = api.channel.async | |
| 29 | + const { isSubscribedTo } = api.channel.sync | |
| 29 | 30 | const myChannels = subscribed(myId) |
| 30 | 31 | let cs = myChannels().values() |
| 31 | - const youSubscribe = Value(isSubscribed(channel)) | |
| 32 | + const youSubscribe = Value(isSubscribedTo(channel, myId)) | |
| 32 | 33 | |
| 33 | 34 | let cb = () => { |
| 34 | - youSubscribe.set(isSubscribed(channel)) | |
| 35 | + youSubscribe.set(isSubscribedTo(channel, myId)) | |
| 35 | 36 | } |
| 36 | 37 | |
| 37 | 38 | const goToChannel = (e, channel) => { |
| 38 | 39 | e.stopPropagation() |
| 39 | 40 | |
| 40 | - api.history.sync.push({ page: 'blogSearch', channel }) | |
| 41 | + api.history.sync.push({ page: 'channelShow', channel: channel }) | |
| 41 | 42 | } |
| 42 | 43 | |
| 43 | 44 | var b = h('ChannelCard', [ |
| 44 | 45 | h('div.content', [ |
| 45 | 46 | h('div.text', [ |
| 46 | 47 | h('h2', {'ev-click': ev => goToChannel(ev, channel)}, channel), |
| 47 | 48 | when(youSubscribe, |
| 48 | - h('Button', { 'ev-click': () => unsubscribe(channel, cb) }, "Unsubscribe"), | |
| 49 | - h('Button', { 'ev-click': () => subscribe(channel, cb) }, "Subscribe") | |
| 49 | + h('Button', { 'ev-click': () => unsubscribe(channel, cb) }, strings.channelShow.action.unsubscribe), | |
| 50 | + h('Button', { 'ev-click': () => subscribe(channel, cb) }, strings.channelShow.action.subscribe) | |
| 50 | 51 | ), |
| 51 | 52 | ]) |
| 52 | 53 | ]) |
| 53 | 54 | ]) |
| app/index.js | ||
|---|---|---|
| @@ -24,8 +24,9 @@ | ||
| 24 | 24 | blogIndex: require('./page/blogIndex'), |
| 25 | 25 | blogNew: require('./page/blogNew'), |
| 26 | 26 | blogSearch: require('./page/blogSearch'), |
| 27 | 27 | blogShow: require('./page/blogShow'), |
| 28 | + channelShow: require('./page/channelShow'), | |
| 28 | 29 | error: require('./page/error'), |
| 29 | 30 | settings: require('./page/settings'), |
| 30 | 31 | channelSubscriptions: require('./page/channelSubscriptions'), |
| 31 | 32 | // channel: require('./page/channel'), |
| app/page/channelShow.js | ||
|---|---|---|
| @@ -1,0 +1,105 @@ | ||
| 1 | +const nest = require('depnest') | |
| 2 | +const { h, Value, computed, map, when, resolve } = require('mutant') | |
| 3 | +const pull = require('pull-stream') | |
| 4 | + | |
| 5 | +exports.gives = nest('app.page.channelShow') | |
| 6 | + | |
| 7 | +exports.needs = nest({ | |
| 8 | + 'app.html.sideNav': 'first', | |
| 9 | + 'app.html.topNav': 'first', | |
| 10 | + 'app.html.scroller': 'first', | |
| 11 | + 'app.html.blogCard': 'first', | |
| 12 | + 'channel.obs.recent': 'first', | |
| 13 | + 'feed.pull.channel': 'first', | |
| 14 | + 'feed.pull.public': 'first', | |
| 15 | + 'history.sync.push': 'first', | |
| 16 | + 'keys.sync.id': 'first', | |
| 17 | + 'message.html.channel': 'first', | |
| 18 | + 'translations.sync.strings': 'first', | |
| 19 | + 'unread.sync.isUnread': 'first', | |
| 20 | + 'channel.obs.subscribed': 'first', | |
| 21 | + 'channel.async.subscribe': 'first', | |
| 22 | + 'channel.async.unsubscribe': 'first', | |
| 23 | + 'channel.sync.isSubscribedTo': 'first' | |
| 24 | +}) | |
| 25 | + | |
| 26 | +exports.create = (api) => { | |
| 27 | + return nest('app.page.channelShow', channelShow) | |
| 28 | + | |
| 29 | + function channelShow(location) { | |
| 30 | + | |
| 31 | + var strings = api.translations.sync.strings() | |
| 32 | + const myId = api.keys.sync.id() | |
| 33 | + const { subscribed } = api.channel.obs | |
| 34 | + const { subscribe, unsubscribe } = api.channel.async | |
| 35 | + const { isSubscribedTo } = api.channel.sync | |
| 36 | + const myChannels = subscribed(myId) | |
| 37 | + let cs = myChannels().values() | |
| 38 | + const youSubscribe = Value(isSubscribedTo(location.channel, myId)) | |
| 39 | + | |
| 40 | + let cb = () => { | |
| 41 | + youSubscribe.set(isSubscribedTo(location.channel, myId)) | |
| 42 | + } | |
| 43 | + | |
| 44 | + var searchVal = resolve(location.channel) | |
| 45 | + var searchResults = computed([api.channel.obs.recent(), searchVal], (channels, val) => { | |
| 46 | + if (val.length < 2) return [] | |
| 47 | + | |
| 48 | + return channels.filter(c => c.toLowerCase().indexOf(val.toLowerCase()) > -1) | |
| 49 | + }) | |
| 50 | + | |
| 51 | + | |
| 52 | + | |
| 53 | + createStream = api.feed.pull.channel(location.channel) | |
| 54 | + | |
| 55 | + | |
| 56 | + const prepend = [ | |
| 57 | + api.app.html.topNav(location), | |
| 58 | + h('section.about', [ | |
| 59 | + h('h1', location.channel), | |
| 60 | + h('div.actions', [ | |
| 61 | + when(youSubscribe, | |
| 62 | + h('Button', { 'ev-click': () => unsubscribe(location.channel, cb) }, strings.channelShow.action.subscribe), | |
| 63 | + h('Button', { 'ev-click': () => subscribe(location.channel, cb) }, strings.channelShow.action.unsubscribe) | |
| 64 | + ) | |
| 65 | + ]) | |
| 66 | + ]), | |
| 67 | + ] | |
| 68 | + | |
| 69 | + var channelPosts = api.app.html.scroller({ | |
| 70 | + classList: ['content'], | |
| 71 | + prepend, | |
| 72 | + stream: createStream, | |
| 73 | + filter: () => pull( | |
| 74 | + pull.filter(msg => { | |
| 75 | + const type = msg.value.content.type | |
| 76 | + return type === 'post' || type === 'blog' | |
| 77 | + }), | |
| 78 | + pull.filter(msg => !msg.value.content.root) // show only root messages | |
| 79 | + ), | |
| 80 | + // FUTURE : if we need better perf, we can add a persistent cache. At the moment this page is fast enough though. | |
| 81 | + // See implementation of app.html.sideNav for example | |
| 82 | + // store: recentMsgCache, | |
| 83 | + // updateTop: updateRecentMsgCache, | |
| 84 | + // updateBottom: updateRecentMsgCache, | |
| 85 | + render | |
| 86 | + }) | |
| 87 | + | |
| 88 | + return h('Page -channelShow', { title: strings.home }, [ | |
| 89 | + api.app.html.sideNav(location), | |
| 90 | + channelPosts | |
| 91 | + ]) | |
| 92 | + } | |
| 93 | + | |
| 94 | + | |
| 95 | + function render(blog) { | |
| 96 | + const { recps, channel } = blog.value.content | |
| 97 | + var onClick | |
| 98 | + if (channel && !recps) | |
| 99 | + onClick = (ev) => api.history.sync.push(Object.assign({}, blog, { page: 'blogShow' })) | |
| 100 | + | |
| 101 | + return api.app.html.blogCard(blog, { onClick }) | |
| 102 | + } | |
| 103 | +} | |
| 104 | + | |
| 105 | + | |
| app/page/channelShow.mcss | ||
|---|---|---|
| @@ -1,0 +1,67 @@ | ||
| 1 | +Page -channelShow { | |
| 2 | + div.content { padding: 0 } | |
| 3 | + | |
| 4 | + div.Scroller.content { | |
| 5 | + | |
| 6 | + section.top { | |
| 7 | + position: sticky | |
| 8 | + left: 0 | |
| 9 | + right: 0 | |
| 10 | + top: 0 | |
| 11 | + z-index: 99 | |
| 12 | + | |
| 13 | + | |
| 14 | + | |
| 15 | + section.about { | |
| 16 | + | |
| 17 | + display: flex | |
| 18 | + flex-direction: column | |
| 19 | + align-items: center | |
| 20 | + padding-bottom: 1rem | |
| 21 | + | |
| 22 | + | |
| 23 | + h1 { | |
| 24 | + font-weight: bold | |
| 25 | + font-size: 1.5rem | |
| 26 | + padding: 1rem | |
| 27 | + | |
| 28 | + margin: auto | |
| 29 | + | |
| 30 | + } | |
| 31 | + | |
| 32 | + div.actions { | |
| 33 | + display: flex | |
| 34 | + | |
| 35 | + div.Button { | |
| 36 | + margin: auto | |
| 37 | + } | |
| 38 | + | |
| 39 | + } | |
| 40 | + } | |
| 41 | + | |
| 42 | + } | |
| 43 | + | |
| 44 | + section.content { | |
| 45 | + background-color: #fff | |
| 46 | + $maxWidth | |
| 47 | + padding: .5rem 2rem | |
| 48 | + | |
| 49 | + display: flex | |
| 50 | + flex-wrap: wrap | |
| 51 | + | |
| 52 | + div.BlogCard { | |
| 53 | + flex-basis: 100% | |
| 54 | + | |
| 55 | + border-bottom: 1px solid gainsboro | |
| 56 | + } | |
| 57 | + } | |
| 58 | + | |
| 59 | + section.bottom { | |
| 60 | + div.Button { | |
| 61 | + margin: 1rem 0 | |
| 62 | + } | |
| 63 | + } | |
| 64 | + } | |
| 65 | +} | |
| 66 | + | |
| 67 | + | |
| channel/async.js | ||
|---|---|---|
| @@ -7,14 +7,14 @@ | ||
| 7 | 7 | 'channel.obs.subscribed': 'first', |
| 8 | 8 | }) |
| 9 | 9 | |
| 10 | 10 | exports.gives = nest({ |
| 11 | - 'channel.async': ['subscribe', 'unsubscribe', 'isSubscribed'] | |
| 11 | + 'channel.async': ['subscribe', 'unsubscribe'] | |
| 12 | 12 | }) |
| 13 | 13 | |
| 14 | 14 | exports.create = function (api) { |
| 15 | 15 | return nest({ |
| 16 | - 'channel.async': {subscribe, unsubscribe, isSubscribed} | |
| 16 | + 'channel.async': {subscribe, unsubscribe} | |
| 17 | 17 | }) |
| 18 | 18 | |
| 19 | 19 | function subscribe (channel, cb) { |
| 20 | 20 | if (!channel) throw new Error('a channel must be specified') |
| @@ -33,13 +33,5 @@ | ||
| 33 | 33 | subscribed: false |
| 34 | 34 | }, cb) |
| 35 | 35 | } |
| 36 | 36 | |
| 37 | - function isSubscribed (channel, cb) { | |
| 38 | - const myId = api.keys.sync.id() | |
| 39 | - | |
| 40 | - const { subscribed } = api.channel.obs | |
| 41 | - const myChannels = subscribed(myId) | |
| 42 | - let v = myChannels().values() | |
| 43 | - return [...v].includes(channel) | |
| 44 | - } | |
| 45 | 37 | } |
| channel/index.js | ||
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| 1 | 1 | module.exports = { |
| 2 | - async: require('./async') | |
| 2 | + async: require('./async'), | |
| 3 | + sync: require('./sync') | |
| 3 | 4 | } |
| 4 | 5 | |
| 5 | 6 | |
| channel/sync.js | ||
|---|---|---|
| @@ -1,0 +1,24 @@ | ||
| 1 | +var nest = require('depnest') | |
| 2 | +var ref = require('ssb-ref') | |
| 3 | + | |
| 4 | +exports.needs = nest({ | |
| 5 | + 'keys.sync.id': 'first', | |
| 6 | + 'channel.obs.subscribed': 'first', | |
| 7 | +}) | |
| 8 | + | |
| 9 | +exports.gives = nest('channel.sync.isSubscribedTo') | |
| 10 | + | |
| 11 | +exports.create = function (api) { | |
| 12 | + return nest('channel.sync.isSubscribedTo', isSubscribedTo) | |
| 13 | + | |
| 14 | + function isSubscribedTo (channel, id) { | |
| 15 | + if (!ref.isFeed(id)) { | |
| 16 | + id = api.keys.sync.id() | |
| 17 | + } | |
| 18 | + | |
| 19 | + const { subscribed } = api.channel.obs | |
| 20 | + const myChannels = subscribed(id) | |
| 21 | + let v = myChannels().values() | |
| 22 | + return [...v].includes(channel) | |
| 23 | + } | |
| 24 | +} | |
| router/sync/routes.js | ||
|---|---|---|
| @@ -12,8 +12,9 @@ | ||
| 12 | 12 | 'app.page.blogSearch': 'first', |
| 13 | 13 | 'app.page.blogShow': 'first', |
| 14 | 14 | 'app.page.settings': 'first', |
| 15 | 15 | 'app.page.channelSubscriptions': 'first', |
| 16 | + 'app.page.channelShow': 'first', | |
| 16 | 17 | // 'app.page.channel': 'first', |
| 17 | 18 | // 'app.page.groupFind': 'first', |
| 18 | 19 | // 'app.page.groupIndex': 'first', |
| 19 | 20 | // 'app.page.groupNew': 'first', |
| @@ -49,10 +50,12 @@ | ||
| 49 | 50 | }, pages.blogShow ], |
| 50 | 51 | |
| 51 | 52 | // Channel related pages |
| 52 | 53 | [ location => location.page === 'channelSubscriptions', pages.channelSubscriptions], |
| 54 | + [ location => location.page === 'channelShow', pages.channelShow ], | |
| 53 | 55 | |
| 54 | 56 | |
| 57 | + | |
| 55 | 58 | // Private Thread pages |
| 56 | 59 | // [ location => location.page === 'threadNew' && location.channel, pages.threadNew ], |
| 57 | 60 | [ location => location.page === 'threadNew' && isFeed(location.feed), pages.threadNew ], |
| 58 | 61 | [ location => isMsg(location.key), pages.threadShow ], |
Built with git-ssb-web