From ec9eceba80d9fbfec01204d5367a918bcdfc2dc6 Mon Sep 17 00:00:00 2001 From: Vincenzo Cestone Date: Wed, 26 Oct 2022 16:32:36 +0200 Subject: [PATCH] d4s-social-post webcomponent updated: expoited the new get posts by range, added comments fetch --- social/d4s-social.js | 154 +++++++++++++++++++++++++++++++++---------- 1 file changed, 121 insertions(+), 33 deletions(-) diff --git a/social/d4s-social.js b/social/d4s-social.js index b0a45d1..f7ec374 100644 --- a/social/d4s-social.js +++ b/social/d4s-social.js @@ -1,15 +1,20 @@ /** - * Prints VRE d4s-social-posts (limiting to @quantity number) + * Prints VRE d4s-social-posts (from @from to @quantity number) */ window.customElements.define('d4s-social-posts', class extends HTMLElement { #basepath = 'https://api.d4science.org/rest' //#basepath = 'https://api.dev.d4science.org/rest' - #quantity = 20 - #boot = null; - #data = null; - #shadowRoot = null; - + #from = 1 + #quantity = 10 + #boot = null + #data = null + #shadowRoot = null + + //const url = this.#basepath + '/2/posts/get-posts-vre' // old get, gets all posts unfiltered + #restRecentPosts = '/2/posts/get-recent-posts-vre-by-range' + #restComments = '/2/comments/get-comments-by-post-id' + constructor() { super() this.#boot = document.querySelector("d4s-boot-2") @@ -17,52 +22,123 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement { } connectedCallback() { - this.fetchPosts() + if (this.#boot) { + this.fetchPosts() + } else { + console.error(' webcomponent not found in this page') + } } fetchPosts() { - const url = this.#basepath + '/2/posts/get-posts-vre' + const url = new URL(this.#basepath + this.#restRecentPosts) + var params = {from: this.#from, quantity: this.#quantity} + url.search = new URLSearchParams(params).toString() + this.#boot.secureFetch(url).then(reply => { - if(reply.status !== 200) throw "Unable to fetch posts"; + if(reply.status !== 200) throw "status=" + reply.status return reply.json() }).then(data => { + //console.log(data) this.#data = data this.renderPosts() + //this.rawRenderPosts() - }).catch(err => console.error("Unable to fetch posts " + err)) + }).catch(err => console.error("Unable to fetch posts. " + err)) } - + renderPosts() { var ul = document.createElement('ul') - this.#data.result.reverse().forEach(post => { - if (this.#quantity-- > 0) { - var li = document.createElement('li') - li.setAttribute('class', 'd4s-social-post') - const datetime = new Date(0) - datetime.setUTCMilliseconds(post.time) - const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + post.thumbnail_url : post.thumbnail_url - li.innerHTML = ` -
-
- -
-
-
${post.full_name}
-
${datetime.toLocaleString()}
-
+ this.#data.result.posts.forEach(post => { + var li = document.createElement('li') + li.id = post.key + li.classList.add('d4s-social-post') + const thumbnail = (!post.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + post.thumbnail_url : post.thumbnail_url + const datetime = new Date(0) + datetime.setUTCMilliseconds(post.time) + const datetimestr = datetime.toLocaleString() + li.innerHTML = ` +
+
+
-
${post.description}
-
- ` - ul.appendChild(li) +
+
${post.full_name}
+
${datetimestr}
+
+
+
${post.description}
+
+
${post.comments_no}
+ +
+ ` + ul.appendChild(li) + + if (post.comments_no > 0) { + this.fetchComments(post.key) } }) this.#shadowRoot.appendChild(ul) } + rawRenderPosts() { + var pre = document.createElement('pre') + console.log(this.#data) + pre.innerText = JSON.stringify(this.#data, null, " ") + this.#shadowRoot.appendChild(pre) + } + + fetchComments(postid) { + const url = new URL(this.#basepath + this.#restComments) + var params = {key: postid} + url.search = new URLSearchParams(params).toString() + + this.#boot.secureFetch(url).then(reply => { + if(reply.status !== 200) throw "status=" + reply.status + return reply.json() + + }).then(data => { + this.renderComments(postid, data) + + }).catch(err => console.error(`Unable to fetch comments for post ${postid}. ` + err)) + } + + renderComments(postid, comments) { + console.log(comments) + var li = this.#shadowRoot.getElementById(postid) + console.log(li) + var cul = document.createElement('ul') + cul.classList.add('d4s-post-comments') + comments.result.forEach(comment => { + var cli = document.createElement('li') + cli.id = comment.feedid + cli.classList.add('d4s-comment') + const thumbnail = (!comment.thumbnail_url.startsWith('http')) ? 'https://' + this.#boot.clientId + comment.thumbnail_url : comment.thumbnail_url + const datetime = new Date(0) + datetime.setUTCMilliseconds(comment.time) + const datetimestr = datetime.toLocaleString() + cli.innerHTML = ` +
+
+ +
+
+
${comment.full_name}
+
${datetimestr}
+
+
+
${comment.text}
+
+
+ ` + cul.appendChild(cli) + }) + li.appendChild(cul) + } + static get observedAttributes() { - return ["url", "quantity"]; + return ["url", "from", "quantity"]; } attributeChangedCallback(name, oldValue, newValue) { @@ -71,6 +147,9 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement { case "url": this.#basepath = newValue break + case "from": + this.#from = newValue + break case "quantity": this.#quantity = newValue break @@ -87,13 +166,22 @@ window.customElements.define('d4s-social-posts', class extends HTMLElement { this.setAttribute("url", url) } + get from() { + return this.#from + } + + set from(from) { + this.#from = from + this.setAttribute("from", from) + } + get quantity() { return this.#quantity } set quantity(quantity) { this.#quantity = quantity - this.setAttribute("quantity", quantity) + this.setAttribute("quantity", quantity) } })