Commit c26a377b747816479b1dc93f160726ef84bf6205
show nested comments
mix irving committed on 10/19/2017, 3:33:20 AMParent: 19ff7d8be964bd96cd9f8ed89a1ed59c65197700
Files changed
| app/html/comments.js | changed |
| app/html/comments.mcss | changed |
| app/page/blogShow.js | changed |
| app/page/error.js | changed |
| app/page/error.mcss | added |
| app/html/comments.js | ||
|---|---|---|
| @@ -6,10 +6,10 @@ | ||
| 6 | 6 | |
| 7 | 7 | exports.needs = nest({ |
| 8 | 8 | 'about.html.avatar': 'first', |
| 9 | 9 | 'about.obs.name': 'first', |
| 10 | + 'backlinks.obs.for': 'first', | |
| 10 | 11 | 'feed.obs.thread': 'first', |
| 11 | - 'keys.sync.id': 'first', | |
| 12 | 12 | 'message.html.markdown': 'first', |
| 13 | 13 | 'message.html.timeago': 'first', |
| 14 | 14 | 'message.html.likes': 'first', |
| 15 | 15 | 'unread.sync.markRead': 'first', |
| @@ -19,40 +19,78 @@ | ||
| 19 | 19 | exports.create = (api) => { |
| 20 | 20 | return nest('app.html.comments', comments) |
| 21 | 21 | |
| 22 | 22 | function comments (root) { |
| 23 | - const myId = api.keys.sync.id() | |
| 24 | - const { messages } = api.feed.obs.thread(root) | |
| 23 | + const thread = api.feed.obs.thread(root) | |
| 25 | 24 | |
| 26 | 25 | return h('Comments', |
| 27 | - map(messages, Comment) | |
| 26 | + map(thread.messages, Comment) | |
| 28 | 27 | ) |
| 29 | 28 | |
| 30 | - function Comment (msgObs) { | |
| 31 | - const msg = resolve(msgObs) | |
| 32 | - const raw = get(msg, 'value.content.text') | |
| 33 | - var className = api.unread.sync.isUnread(msg) ? ' -unread' : ' -read' | |
| 34 | - api.unread.sync.markRead(msg) | |
| 29 | + } | |
| 35 | 30 | |
| 36 | - if (!get(msg, 'value.content.root')) return | |
| 31 | + function Comment (msgObs) { | |
| 32 | + const msg = resolve(msgObs) | |
| 37 | 33 | |
| 38 | - const { author } = msg.value | |
| 39 | - return h('Comment', { className }, [ | |
| 40 | - h('div.left', api.about.html.avatar(author, 'tiny')), | |
| 41 | - h('div.right', [ | |
| 42 | - h('section.context', [ | |
| 43 | - h('div.name', api.about.obs.name(author)), | |
| 44 | - api.message.html.timeago(msg) | |
| 34 | + const raw = get(msg, 'value.content.text') | |
| 35 | + var className = api.unread.sync.isUnread(msg) ? ' -unread' : ' -read' | |
| 36 | + api.unread.sync.markRead(msg) | |
| 37 | + | |
| 38 | + if (!get(msg, 'value.content.root')) return | |
| 39 | + | |
| 40 | + const { author } = msg.value | |
| 41 | + | |
| 42 | + // TODO - move this upstream into patchcore:feed.obs.thread ?? | |
| 43 | + // OR change strategy to use forks | |
| 44 | + const backlinks = api.backlinks.obs.for(msg.key) | |
| 45 | + const nestedReplies = computed(backlinks, backlinks => { | |
| 46 | + return backlinks.filter(backlinker => { | |
| 47 | + const { type, root } = backlinker.value.content | |
| 48 | + return type === 'post' && root === msg.key | |
| 49 | + }) | |
| 50 | + }) | |
| 51 | + | |
| 52 | + return h('Comment', { className }, [ | |
| 53 | + h('div.left', api.about.html.avatar(author, 'tiny')), | |
| 54 | + h('div.right', [ | |
| 55 | + h('section.context', [ | |
| 56 | + h('div.name', api.about.obs.name(author)), | |
| 57 | + api.message.html.timeago(msg) | |
| 58 | + ]), | |
| 59 | + h('section.content', api.message.html.markdown(raw)), | |
| 60 | + when(nestedReplies, | |
| 61 | + h('section.replies', | |
| 62 | + map(nestedReplies, NestedComment) | |
| 63 | + ) | |
| 64 | + ), | |
| 65 | + h('section.actions', [ | |
| 66 | + h('div.reply', [ | |
| 67 | + h('i.fa.fa-commenting-o'), | |
| 45 | 68 | ]), |
| 46 | - h('section.content', api.message.html.markdown(raw)), | |
| 47 | - h('section.actions', [ | |
| 48 | - h('div.reply', [ | |
| 49 | - h('i.fa.fa-commenting-o'), | |
| 50 | - ]), | |
| 51 | - api.message.html.likes(msg) | |
| 52 | - ]) | |
| 53 | - ]) | |
| 69 | + api.message.html.likes(msg) | |
| 70 | + ]), | |
| 54 | 71 | ]) |
| 55 | - } | |
| 72 | + ]) | |
| 56 | 73 | } |
| 74 | + | |
| 75 | + function NestedComment (msgObs) { | |
| 76 | + const msg = resolve(msgObs) | |
| 77 | + const raw = get(msg, 'value.content.text') | |
| 78 | + if (!raw) return | |
| 79 | + | |
| 80 | + const { author } = msg.value | |
| 81 | + | |
| 82 | + return h('Comment -nested', [ | |
| 83 | + h('div.left'), | |
| 84 | + h('div.right', [ | |
| 85 | + h('section.context', [ | |
| 86 | + h('div.name', api.about.obs.name(author)), | |
| 87 | + api.message.html.timeago(msg) | |
| 88 | + ]), | |
| 89 | + h('section.content', api.message.html.markdown(raw)), | |
| 90 | + ]) | |
| 91 | + ]) | |
| 92 | + | |
| 93 | + api.message.html.markdown(raw) | |
| 94 | + } | |
| 57 | 95 | } |
| 58 | 96 | |
| app/html/comments.mcss | ||
|---|---|---|
| @@ -62,4 +62,20 @@ | ||
| 62 | 62 | } |
| 63 | 63 | } |
| 64 | 64 | } |
| 65 | 65 | |
| 66 | +Comment -nested { | |
| 67 | + padding: 1rem | |
| 68 | + $backgroundPrimaryText | |
| 69 | + $roundTop | |
| 70 | + $roundBottom | |
| 71 | + | |
| 72 | + margin-bottom: 1rem | |
| 73 | + | |
| 74 | + div.left { margin: 0 } | |
| 75 | + div.right { | |
| 76 | + padding: 0 | |
| 77 | + border: 0 | |
| 78 | + margin: 0 | |
| 79 | + } | |
| 80 | +} | |
| 81 | + | |
| app/page/blogShow.js | ||
|---|---|---|
| @@ -38,9 +38,8 @@ | ||
| 38 | 38 | channel: content.channel |
| 39 | 39 | } |
| 40 | 40 | |
| 41 | 41 | const { timeago, channel, markdown, compose } = api.message.html |
| 42 | - const composer = compose({ meta, shrink: true }) | |
| 43 | 42 | |
| 44 | 43 | return h('Page -blogShow', [ |
| 45 | 44 | api.app.html.context({ page: 'discover' }), // HACK to highlight discover |
| 46 | 45 | h('div.content', [ |
| @@ -59,10 +58,11 @@ | ||
| 59 | 58 | ]) |
| 60 | 59 | ]), |
| 61 | 60 | h('div.break', h('hr')), |
| 62 | 61 | h('section.blog', markdown(blog)), |
| 63 | - composer, | |
| 62 | + compose({ meta, shrink: true }), | |
| 64 | 63 | comments, |
| 64 | + compose({ meta, shrink: false }) | |
| 65 | 65 | ]), |
| 66 | 66 | ]) |
| 67 | 67 | } |
| 68 | 68 | } |
| app/page/error.js | ||
|---|---|---|
| @@ -13,9 +13,9 @@ | ||
| 13 | 13 | return nest('app.page.error', error) |
| 14 | 14 | |
| 15 | 15 | function error (location) { |
| 16 | 16 | return h('Page -error', {title: strings.error}, [ |
| 17 | - strings.errorNotFound, | |
| 17 | + h('div.message', strings.errorNotFound), | |
| 18 | 18 | h('pre', [JSON.stringify(location, null, 2)]) |
| 19 | 19 | ]) |
| 20 | 20 | } |
| 21 | 21 | } |
Built with git-ssb-web