inbox unread count view 😁

Author: namila007

background/main.js

@@ -3,7 +3,7 @@
 var token
 
 const INBOX_READ =
-`https://api.stackexchange.com/2.2/me/inbox?page=1&pagesize=3&key=${KEY}&site=stackoverflow&filter=!LURAJLCc5nUZDmmWGEXuwH`
+`https://api.stackexchange.com/2.2/me/inbox?page=1&pagesize=5&key=${KEY}&site=stackoverflow&filter=!LURAJLCc5n-3UL-M6AmXYq`
 
 //error log function
 function logError(error) {
@@ -23,6 +23,7 @@ function recivemessage (message,sender,sendResponse){
     }).then(()=>{
       browser.notifications.create({
         "type": "basic",
+        "iconUrl": browser.extension.getURL("icons/addon.png"),
         "title": "Token Created",
         "message": "Token is created"
       })
@@ -31,10 +32,13 @@ function recivemessage (message,sender,sendResponse){
   }
     if(message.command == "inbox") {
       var url = INBOX_READ+`&access_token=${message.token}`
-      var msg = get(url, (msg1)=>{
-        console.log(msg1)
+      get(url, (msg1)=>{
+        //console.log(msg1)
+        
         sendResponse({response: msg1})
       })
+        
+      }
 
 
       return true
@@ -43,9 +47,6 @@ function recivemessage (message,sender,sendResponse){
 
     function get(url, callback){
       var xmlHttp =  new XMLHttpRequest();
-      // xmlHttp.open( "GET", url, false ); // false for synchronous request
-      // xmlHttp.send( null );
-      // return xmlHttp.responseText;
       xmlHttp.onreadystatechange = function() { 
         if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
             callback(xmlHttp.responseText);
@@ -56,9 +57,6 @@ function recivemessage (message,sender,sendResponse){
 
     // return true
 
-  
-  
-}
 
 
 

popup/css/main.css

@@ -0,0 +1,13 @@
+html, body {
+    width: 600px;
+    height: 600px;
+    
+}
+.button {
+    margin: 3% auto;
+    padding: 4px;
+    text-align: center;
+    font-size: 1.5em;
+    cursor: pointer;
+  }
+  

popup/index.html

@@ -17,13 +17,17 @@
     </div>
   </div>
 
-  <div class="row" id="main_inbox" hidden>
-    <button type="button" class="btn btn-primary" id="showinbox">
-        Inbox <span class="badge badge-light" id="inboxcount"></span>
-        <span class="sr-only">messages</span>
+  <div class="row" id="main_inbox" >
+    <div class="col-12">
+      <button type="button" class="btn btn-primary" id="showinboxbtn">
+          Inbox <span class="badge badge-light" id="unreadinboxcount"></span>
+          <span class="sr-only">Unread Messages</span>
       </button>
-
-    <ul id="inbox" hidden></ul>
+    </div>
+    <div class="col-12">
+        <ul id="inbox" style="visibility: hidden;"></ul>
+    </div>
+   
   </div>
 
 </div>

popup/stackpopup.js

@@ -30,9 +30,19 @@ document.getElementById('tokenbtn').addEventListener("click", async function get
     command: "tokenurl" , 
     data: tokenurl })
     token.then(handleResponse,handleError)
+   
 
 })
 
+document.getElementById('showinboxbtn').addEventListener("click",()=>{
+    console.log("clicked")
+    var inbox = document.getElementById("inbox")
+    if(inbox.style.visibility == 'hidden') {
+        inbox.style.visibility = 'visible'
+    }else {
+        inbox.style.visibility = 'hidden'
+    }
+})
 
 function handleinbox(message) {
     console.log("Inbox")
@@ -41,13 +51,23 @@ function handleinbox(message) {
 
 
     var inbox = document.getElementById("inbox")
-
+    
+    var unreadcount = 0
     for (var i=0; i<msg.items.length; i++){
-       var item = document.createElement('li')
+        if(msg.items[i].is_unread === true) unreadcount++
+        var item = document.createElement('li')
         item.innerHTML =
         '<a href="'+ msg.items[i].link +'">' + msg.items[i].title + '</a>'
         inbox.appendChild(item)
     }
+    var unread = document.getElementById("unreadinboxcount")
+    unread.innerHTML = unreadcount
+    browser.notifications.create({
+        "type": "basic",
+        "iconUrl": browser.extension.getURL("icons/addon.png"),          
+        "title": "Inbox",
+        "message": "You have "+unreadcount+" unread messages"
+      })
 
 
 }