From 8a4cab211249a24b45c4869e1d6f169bd9cb54c6 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Fri, 3 Jun 2022 02:22:37 +0530
Subject: [PATCH] Bug fixes

-- fixed votes not displayed correctly after voting and refreshing
---
 components.js | 12 ++++++------
 index.html    | 46 +++++++++++++++++++++++++++++-----------------
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/components.js b/components.js
index e1164d6..7053ca9 100644
--- a/components.js
+++ b/components.js
@@ -1154,7 +1154,7 @@ customElements.define('sm-popup', class extends HTMLElement {
 
         this.popupContainer = this.shadowRoot.querySelector('.popup-container');
         this.backdrop = this.shadowRoot.querySelector('.background');
-        this.popup = this.shadowRoot.querySelector('.popup');
+        this.dialogBox = this.shadowRoot.querySelector('.popup');
         this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
         this.popupHeader = this.shadowRoot.querySelector('.popup-top');
 
@@ -1199,7 +1199,7 @@ customElements.define('sm-popup', class extends HTMLElement {
                 easing: 'ease'
             }
             const initialAnimation = (window.innerWidth > 640) ? 'scale(1.1)' : `translateY(${this.offset ? `${this.offset}px` : '100%'})`
-            this.animateTo(this.popup, [
+            this.animateTo(this.dialogBox, [
                 {
                     opacity: this.offset ? 1 : 0,
                     transform: initialAnimation
@@ -1264,7 +1264,7 @@ customElements.define('sm-popup', class extends HTMLElement {
             { opacity: 1 },
             { opacity: 0 }
         ], animOptions)
-        this.animateTo(this.popup, [
+        this.animateTo(this.dialogBox, [
             {
                 opacity: 1,
                 transform: (window.innerWidth > 640) ? 'none' : `translateY(${this.offset ? `${this.offset}px` : '0'})`
@@ -1276,7 +1276,7 @@ customElements.define('sm-popup', class extends HTMLElement {
         ], animOptions).finished
             .finally(() => {
                 this.popupContainer.classList.add('hide');
-                this.popup.style = ''
+                this.dialogBox.style = ''
                 this.removeAttribute('open');
 
                 if (this.forms.length) {
@@ -1316,7 +1316,7 @@ customElements.define('sm-popup', class extends HTMLElement {
         if (this.touchStartY < e.changedTouches[0].clientY) {
             this.offset = e.changedTouches[0].clientY - this.touchStartY;
             this.touchEndAnimation = window.requestAnimationFrame(() => {
-                this.popup.style.transform = `translateY(${this.offset}px)`;
+                this.dialogBox.style.transform = `translateY(${this.offset}px)`;
             });
         }
     }
@@ -1325,7 +1325,7 @@ customElements.define('sm-popup', class extends HTMLElement {
         this.touchEndTime = e.timeStamp;
         cancelAnimationFrame(this.touchEndAnimation);
         this.touchEndY = e.changedTouches[0].clientY;
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3;
+        this.threshold = this.dialogBox.getBoundingClientRect().height * 0.3;
         if (this.touchEndTime - this.touchStartTime > 200) {
             if (this.touchEndY - this.touchStartY > this.threshold) {
                 if (this.pinned) {
diff --git a/index.html b/index.html
index 3c29162..6416e50 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RanchiMall Times</title>
     <meta name="description" content="Read handpicked articles">
-    <script src="components.js" defer></script>
+    <script src="components.js"></script>
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -130,10 +130,8 @@
                 <h4>RanchiMall Times</h4>
             </a>
             <theme-toggle></theme-toggle>
-            <button id="show_sign_in_button" onclick="showPopup('sign_in_popup')" class="button button--primary">Sign
-                In</button>
-            <button id="user_profile_button" class="icon-only hide" onclick="showPopup('user_popup')"
-                aria-label="User profile">
+            <button id="show_sign_in_button" class="button button--primary">Sign In</button>
+            <button id="user_profile_button" class="icon-only hide" aria-label="User profile">
                 <svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px"
                     fill="#000000">
                     <path d="M0 0h24v24H0V0z" fill="none" />
@@ -336,7 +334,7 @@
     </div>
     <sm-popup id="sign_in_popup">
         <header slot="header" class="popup__header">
-            <button class="popup__header__close" onclick="hidePopup()">
+            <button class="popup__header__close">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                     fill="#000000">
                     <path d="M0 0h24v24H0V0z" fill="none" />
@@ -399,7 +397,7 @@
     <sm-popup id="share_popup">
         <header slot="header" class="popup__header">
             <div class="flex align-center">
-                <button class="popup__header__close" onclick="hidePopup()">
+                <button class="popup__header__close">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                         fill="#000000">
                         <path d="M0 0h24v24H0V0z" fill="none" />
@@ -416,7 +414,7 @@
     <sm-popup id="preview_popup">
         <header slot="header" class="popup__header">
             <div class="flex align-center">
-                <button class="popup__header__close" onclick="hidePopup()">
+                <button class="popup__header__close">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                         fill="#000000">
                         <path d="M0 0h24v24H0V0z" fill="none" />
@@ -434,7 +432,7 @@
     <sm-popup id="edit_article_meta_popup">
         <header slot="header" class="popup__header">
             <div class="flex align-center">
-                <button class="popup__header__close" onclick="hidePopup()">
+                <button class="popup__header__close">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                         fill="#000000">
                         <path d="M0 0h24v24H0V0z" fill="none" />
@@ -498,7 +496,7 @@
     <sm-popup id="add_writer_popup">
         <header slot="header" class="popup__header">
             <div class="flex align-center">
-                <button class="popup__header__close" onclick="hidePopup()">
+                <button class="popup__header__close">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                         fill="#000000">
                         <path d="M0 0h24v24H0V0z" fill="none" />
@@ -528,7 +526,7 @@
     <sm-popup id="user_popup">
         <header slot="header" class="grid gap-1">
             <div class="flex align-center">
-                <button class="popup__header__close" onclick="hidePopup()">
+                <button class="popup__header__close">
                     <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
                         fill="#000000">
                         <path d="M0 0h24v24H0V0z" fill="none" />
@@ -561,7 +559,8 @@
                 </div>
                 <sm-button class="danger cta justify-self-start" onclick="signOut()">Sign out</sm-button>
             </div>
-            <a href="#/dashboard" class="button hide admin-option" onclick="hidePopup()">Admin dashboard</a>
+            <a href="#/dashboard" class="button hide admin-option close-popup-on-click">Admin
+                dashboard</a>
         </section>
     </sm-popup>
     <template id="trending_article_template">
@@ -921,6 +920,11 @@
                     createRipple(e, e.target.closest("button, sm-button, .interact"));
                 }
             });
+            document.querySelectorAll('.popup__header__close, .close-popup-on-click').forEach(elem => {
+                elem.addEventListener('click', () => {
+                    hidePopup()
+                })
+            })
         });
         function createRipple(event, target) {
             const circle = document.createElement("span");
@@ -1344,7 +1348,13 @@
                     floCloudAPI.requestGeneralData(`article_${articleID}_votes`, {
                         lowerVectorClock: floGlobals.appObjects.rmTimes.articles[articleID].lastCountedVC + 1,
                         callback: (allVotes, e) => {
+                            console.log(allVotes)
                             if (firstLoad) {
+
+                                const votesAfterLastCount = floDapps.getNextGeneralData(`article_${articleID}_votes`)
+                                for (const vote in votesAfterLastCount) {
+                                    floGlobals.appObjects.rmTimes.articles[articleID].votes += votesAfterLastCount[vote].message.voteCount || 1
+                                }
                                 for (const vote in allVotes) {
                                     floGlobals.appObjects.rmTimes.articles[articleID].votes += allVotes[vote].message.voteCount || 1
                                 }
@@ -2258,10 +2268,11 @@
                 Promise.all([
                     floCloudAPI.updateObjectData('rmTimes'),
                     floCloudAPI.updateObjectData('adminData')
-                ])
-                    .then(() => {
-                        console.log('calculated votes')
-                    })
+                ]).then(() => {
+                    console.log('calculated votes')
+                }).catch(err => {
+                    console.error(err)
+                })
             })
             Promise.all([compactIDB.readData('appObjects', 'articlesContent'), compactIDB.readData('appObjects', 'heroImages')]).then(res => {
                 floGlobals.appObjects.articlesContent = res[0];
@@ -2435,7 +2446,7 @@
     </script>
     <script id="onLoadStartUp">
         function onLoadStartUp() {
-
+            getRef('show_sign_in_button').addEventListener('click', () => showPopup('sign_in_popup'))
             //floDapps.addStartUpFunction('Sample', Promised Function)
             floDapps.setAppObjectStores({ images: {} })
             floDapps.setCustomPrivKeyInput(getSignedIn)
@@ -2443,6 +2454,7 @@
             floDapps.launchStartUp().then(async result => {
                 getRef('show_sign_in_button').classList.add('hide')
                 getRef('user_profile_button').classList.remove('hide')
+                getRef('user_profile_button').addEventListener('click', () => showPopup('user_popup'))
                 getRef('user_flo_id').value = myFloID
                 floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
                 if (floGlobals.isSubAdmin) {