Merge branch 'master' of https://code-repo.d4science.org/gCubeSystem/cdn-experiments

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('<d4s-boot-2> 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 = `
-          <div class="d4s-post-heading">
-            <div class="d4s-post-avatar">
-              <img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
-            </div>
-            <div class="d4s-post-meta">
-              <div class="fullname">${post.full_name}</div>
-              <div class="time">${datetime.toLocaleString()}</div>
-            </div>
+    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 = `
+        <div class="d4s-post-heading">
+          <div class="d4s-post-avatar">
+            <img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
           </div>
-          <div class="d4s-post-body">${post.description}</div>
-          <div class="d4s-post-footer"></div>
-        `
-        ul.appendChild(li)
+          <div class="d4s-post-meta">
+            <div class="fullname">${post.full_name}</div>
+            <div class="time">${datetimestr}</div>
+          </div>
+        </div>
+        <div class="d4s-post-body">${post.description}</div>
+        <div class="d4s-post-footer">
+          <div class="comments-nr">${post.comments_no}</div>
+          <div class="likes-nr">${post.likes_no}</div>
+        </div>
+      `
+      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 = `
+        <div class="d4s-comment-heading">
+          <div class="d4s-comment-avatar">
+            <img src="${thumbnail}" onerror="this.style.display='none'" width="32px" height="32px"></slot>
+          </div>
+          <div class="d4s-comment-meta">
+            <div class="fullname">${comment.full_name}</div>
+            <div class="time">${datetimestr}</div>
+          </div>
+        </div>
+        <div class="d4s-comment-body">${comment.text}</div>
+        <div class="d4s-comment-footer">
+        </div>
+      `
+      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)
   }
 })