client: add list of similar posts to post sidebar

4 files changed, 36 insertions, 1 deletions

diff --git a/client/css/post-main-view.styl b/client/css/post-main-view.styl
index aa4a5fd..cb1f018 100644
--- a/client/css/post-main-view.styl
+++ b/client/css/post-main-view.styl
@@ -124,7 +124,7 @@
             order: 2
             margin-top: 1em
 
-    .relations
+    .relations, .similar
         margin-top: 2em
         h1
             margin-bottom: 0.5em
diff --git a/client/html/post_readonly_sidebar.tpl b/client/html/post_readonly_sidebar.tpl
index be1f95d..b90b516 100644
--- a/client/html/post_readonly_sidebar.tpl
+++ b/client/html/post_readonly_sidebar.tpl
@@ -82,6 +82,11 @@
         </nav>
     <% } %>
 
+    <nav class='similar'>
+        <h1>Similar</h1>
+        <ul></ul>
+    </nav>
+
     <nav class='tags'>
         <h1>Tags (<%- ctx.post.tags.length %>)</h1>
         <% if (ctx.post.tags.length) { %>
diff --git a/client/html/similar_post_item.tpl b/client/html/similar_post_item.tpl
new file mode 100644
index 0000000..7203b1e
--- /dev/null
+++ b/client/html/similar_post_item.tpl
@@ -0,0 +1,5 @@
+<li>
+    <a href='<%= ctx.getPostUrl(ctx.id, ctx.parameters) %>'>
+        <%= ctx.makeThumbnail(ctx.thumbnailUrl) %>
+    </a>
+</li>
diff --git a/client/js/controls/post_readonly_sidebar_control.js b/client/js/controls/post_readonly_sidebar_control.js
index 80fbe29..d66a9b6 100644
--- a/client/js/controls/post_readonly_sidebar_control.js
+++ b/client/js/controls/post_readonly_sidebar_control.js
@@ -10,6 +10,7 @@ const PostMetricListControl = require("./post_metric_list_control.js");
 const template = views.getTemplate("post-readonly-sidebar");
 const scoreTemplate = views.getTemplate("score");
 const favTemplate = views.getTemplate("fav");
+const similarItemTemplate = views.getTemplate("similar-post-item")
 
 class PostReadonlySidebarControl extends events.EventTarget {
     constructor(hostNode, ctx, postContentControl) {
@@ -45,6 +46,7 @@ class PostReadonlySidebarControl extends events.EventTarget {
                 this._metricsListNode, this._post
             );
         }
+        this._loadSimilarPosts();
     }
 
     get _scoreContainerNode() {
@@ -91,6 +93,10 @@ class PostReadonlySidebarControl extends events.EventTarget {
         return this._hostNode.querySelector("ul.compact-post-metrics");
     }
 
+    get _similarListNode() {
+        return this._hostNode.querySelector("nav.similar ul");
+    }
+
     _installFitButtons() {
         this._fitBothButtonNode.addEventListener(
             "click",
@@ -229,6 +235,25 @@ class PostReadonlySidebarControl extends events.EventTarget {
     _evtChangeScore(e) {
         this._installScore();
     }
+
+    _loadSimilarPosts() {
+        return api
+            .get(
+                uri.formatApiLink("post", this._post.id, "similar", {
+                    limit: 10,
+                })
+            )
+            .then((response) => {
+                const listNode = this._similarListNode;
+                for (let post of response.results) {
+                    let poseNode = similarItemTemplate({
+                        id: post.id,
+                        thumbnailUrl: post.thumbnailUrl,
+                    });
+                    listNode.appendChild(poseNode);
+                }
+            });
+    }
 }
 
 module.exports = PostReadonlySidebarControl;