From 2eb4c0a43da1f51d5ebfcc670e76457198694fcd Mon Sep 17 00:00:00 2001
From: Matthieu Fesselier <matthieu.fesselier@gmail.com>
Date: Mon, 1 Jul 2019 08:24:18 +0200
Subject: [PATCH] update: listen on read events

---
 examples/badge.html                     | 14 +++++++++++++-
 examples/notifications-format-date.html |  4 ++--
 examples/notifications-routing.html     |  4 ++--
 examples/notifications.html             |  4 ++--
 index.html                              |  4 ++--
 sib-badge.js                            | 20 ++++++++++++++++----
 sib-notifications.js                    |  5 +----
 7 files changed, 38 insertions(+), 17 deletions(-)
diff --git a/examples/badge.html b/examples/badge.html
index fa292fc..394655a 100644
--- a/examples/badge.html
+++ b/examples/badge.html
@@ -5,6 +5,18 @@
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
   <title>SIB Badge - Demo</title>
   <script type="module" src="../index.js"></script>
+
+  <script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
+  <sib-auth>
+    <sib-auth-provider
+    class="sib-auth-provider"
+    data-authority="http://127.0.0.1:8000/"
+    data-client_id="268937"
+    data-id="paris"
+    >
+    </sib-auth-provider>
+  </sib-auth>
+
   <script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
   <style>
     :root{
@@ -16,6 +28,6 @@
 <body>
   <h1>SIB Badge - demo</h1>
   <p>Number of notifications related to conversation 7</p>
-  <sib-badge data-src="http://127.0.0.1:8000/conversations/7/"></sib-badge>
+  <sib-badge data-src="http://localhost:8000/conversations/1/"></sib-badge>
 </body>
 </html>
diff --git a/examples/notifications-format-date.html b/examples/notifications-format-date.html
index 0b3971b..3a16881 100644
--- a/examples/notifications-format-date.html
+++ b/examples/notifications-format-date.html
@@ -10,8 +10,8 @@
   <sib-auth>
     <sib-auth-provider
     class="sib-auth-provider"
-    data-authority="http://127.0.0.1:8000/openid/"
-    data-client_id="464079"
+    data-authority="http://127.0.0.1:8000/"
+    data-client_id="268937"
     data-id="paris"
     >
     </sib-auth-provider>
diff --git a/examples/notifications-routing.html b/examples/notifications-routing.html
index 1f4c5a2..9130df1 100644
--- a/examples/notifications-routing.html
+++ b/examples/notifications-routing.html
@@ -10,8 +10,8 @@
   <sib-auth>
     <sib-auth-provider
     class="sib-auth-provider"
-    data-authority="http://127.0.0.1:8000/openid/"
-    data-client_id="464079"
+    data-authority="http://127.0.0.1:8000/"
+    data-client_id="268937"
     data-id="paris"
     >
     </sib-auth-provider>
diff --git a/examples/notifications.html b/examples/notifications.html
index f4526c7..82c220b 100644
--- a/examples/notifications.html
+++ b/examples/notifications.html
@@ -10,8 +10,8 @@
   <sib-auth>
     <sib-auth-provider
     class="sib-auth-provider"
-    data-authority="http://127.0.0.1:8000/openid/"
-    data-client_id="464079"
+    data-authority="http://127.0.0.1:8000/"
+    data-client_id="268937"
     data-id="paris"
     >
     </sib-auth-provider>
diff --git a/index.html b/index.html
index 01f2226..3069d5d 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,8 @@
   <sib-auth>
     <sib-auth-provider
     class="sib-auth-provider"
-    data-authority="http://127.0.0.1:8000/openid/"
-    data-client_id="464079"
+    data-authority="http://127.0.0.1:8000/"
+    data-client_id="268937"
     data-id="paris"
     >
     </sib-auth-provider>
diff --git a/sib-badge.js b/sib-badge.js
index 2b7f7e6..a07d401 100644
--- a/sib-badge.js
+++ b/sib-badge.js
@@ -6,7 +6,20 @@ Helpers.importCSS(`${base_url}/css/badge.css`)
 class SIBBadge extends SIBTemplateElement {
   constructor() {
     super()
-    window.addEventListener('notificationsUpdated', () => this.render());
+
+    // On read events, remove badge
+    window.addEventListener('read', event => {
+      if (event.detail &&
+        event.detail.resource &&
+        event.detail.resource['@id'] &&
+        event.detail.resource['@id'] == this.resourceId) {
+        this.querySelector('.counter').remove();
+      }
+    })
+  }
+
+  get resourceId() {
+    return this.props.dataSrc + (this.props.idSuffix ? this.props.idSuffix + '/' : '')
   }
 
   static get propsDefinition() {
@@ -16,9 +29,8 @@ class SIBBadge extends SIBTemplateElement {
     }
   }
 
-  template({ dataSrc, idSuffix }) {
+  template({dataSrc}) {
     if (dataSrc) {
-      let sourceUrl = dataSrc + (idSuffix ? idSuffix + '/' : '')
       return `
       <sib-display
         bind-user
@@ -26,7 +38,7 @@ class SIBBadge extends SIBTemplateElement {
         data-fields
         search-fields="unread, object"
         search-value-unread="true"
-        search-value-object="${sourceUrl}"
+        search-value-object="${this.resourceId}"
         search-widget-unread="sib-form-hidden"
         search-widget-object="sib-form-hidden"
         counter-template="<div class='counter' data-nb-unread='\${counter}'>\${counter}</div>"
diff --git a/sib-notifications.js b/sib-notifications.js
index 4e18513..5a5bf0d 100644
--- a/sib-notifications.js
+++ b/sib-notifications.js
@@ -83,10 +83,7 @@ class SIBNotifications extends SIBTemplateElement {
       .map((notification) => store.patch(notification['@id'], { unread: false }))
 
     Promise.all(edits)
-      .then(() => {
-        this.render();
-        window.dispatchEvent(new CustomEvent('notificationsUpdated'));
-      })
+      .then(() => this.render())
       .catch((error) => this._printError(error));
   }
 
-- 
2.22.2

