From 92cb0668d0cdd34c92fe7e385c1593099748270c Mon Sep 17 00:00:00 2001
From: Bastard Operator <bofh@nogafam.es>
Date: Tue, 12 Jan 2021 01:47:08 +0100
Subject: [PATCH] Improved user experience when "Matching" accounts + internal
 improvements

* toasts now support custom time and optional renderHtml
 for cases we need to draw HTML from the intl.text.
 (Make sure no user input is on any intl.text used with renderHtml, as it is not XSS safe)
* Toast needs to be initialized so we made an ugly hack to do so. We push the script to create an empty non-visible Toast on WebApp load
* Now _layout.html loads intl messages needed for fedilove-no-react
* UI improvement: Matching now shows a beautiful "Match <3" circle on top of the other person for 6 seconds
* Stability improved
---
 src/intl/en-US.js                       |  2 +
 src/routes/_components/toast/Toast.html | 15 +++++++-
 src/routes/_components/toast/toast.js   |  3 --
 src/routes/_layout.html                 |  2 +
 src/scss/themes/ozark.scss              | 18 +++++++++
 static/fedilove-no-react.js             | 51 +++++++++++++++++++++----
 6 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index fa62047d..89467de0 100644
--- a/src/intl/en-US.js
+++ b/src/intl/en-US.js
@@ -62,6 +62,8 @@ export default {
   meet: 'Meet!',
   notifications: 'Notifications',
   matches: 'Matches',
+  matchAction: 'MATCH &hearts;',
+  maybeAction: 'Maybe tomorrow!',
   mutedUsers: 'Muted users',
   pinnedStatuses: 'Pinned toots',
   followRequests: 'Follow requests',
diff --git a/src/routes/_components/toast/Toast.html b/src/routes/_components/toast/Toast.html
index fcf31e69..e8368bf6 100644
--- a/src/routes/_components/toast/Toast.html
+++ b/src/routes/_components/toast/Toast.html
@@ -1,6 +1,7 @@
 <div class="toast-modal {shown ? 'shown' : ''}" role="alert" aria-hidden={!shown}>
   <div class="toast-container">
-    {text}
+    <span id="plain-text">{text}</span>
+    <div id="html-text"></div>
   </div>
 </div>
 <style>
@@ -78,7 +79,17 @@
             shown: true
           })
           return new Promise(resolve => {
-            setTimeout(resolve, TIME_TO_SHOW_TOAST)
+            var timeToWait = TIME_TO_SHOW_TOAST;
+            $('#theToast')[0].classList = '';
+            if (window.fediloveData.toastTime !== undefined) {
+                timeToWait = window.fediloveData.toastTime;
+                window.fediloveData.toastTime = undefined;
+            }
+            if (window.fediloveData.toastClass !== undefined) {
+                $('#theToast').addClass(window.fediloveData.toastClass);
+                window.fediloveData.toastClass = undefined;
+            }
+            setTimeout(resolve, timeToWait);
           })
         }).then(() => {
           this.set({
diff --git a/src/routes/_components/toast/toast.js b/src/routes/_components/toast/toast.js
index a6f27ea3..5306e7f9 100644
--- a/src/routes/_components/toast/toast.js
+++ b/src/routes/_components/toast/toast.js
@@ -10,9 +10,6 @@ const lazyToast = {
         toast = new Toast({
           target: document.querySelector('#theToast')
         })
-        if (process.env.NODE_ENV !== 'production') {
-          window.toast = toast // for debugging
-        }
       }
     }
     toast.say(text)
diff --git a/src/routes/_layout.html b/src/routes/_layout.html
index 25ef1e72..ff38ce6b 100644
--- a/src/routes/_layout.html
+++ b/src/routes/_layout.html
@@ -105,6 +105,8 @@
 
       window.__intl = {
         'nothingToShow':	formatIntl('intl.nothingToShow'),
+        'matchAction':		formatIntl('intl.matchAction'),
+        'maybeAction':		formatIntl('intl.maybeAction'),
       };
 
       loadScript('/jquery-3.5.1.min.js');
diff --git a/src/scss/themes/ozark.scss b/src/scss/themes/ozark.scss
index ea0eafc7..559b2624 100644
--- a/src/scss/themes/ozark.scss
+++ b/src/scss/themes/ozark.scss
@@ -327,6 +327,24 @@ body.meet, body.account {
 
 }
 
+div#theToast.notshown {
+  display: none !important;
+}
+
+div#theToast.match {
+  div.toast-modal > div.toast-container {
+    position: fixed;
+    top: 40%;
+    font-weight: bold;
+    background-image: linear-gradient(#b448ff, #ea790080);
+    color: #fff;
+    padding: 3em 1.5em;
+    border-radius: 100%;
+    font-size: 2.2em;
+    text-shadow: 2px 2px 20px #00000070;
+  }
+}
+
 div#chat-party-global {
   display: flex;
   height: 3.6em;
diff --git a/static/fedilove-no-react.js b/static/fedilove-no-react.js
index 9eee8b6c..be37b5b4 100644
--- a/static/fedilove-no-react.js
+++ b/static/fedilove-no-react.js
@@ -269,9 +269,20 @@ var fediloveUI = {
             countMax++;
         }, 100);
     },
-    toast: function(whatToSay) {
-        if (window.__toast !== undefined)
-            window.__toast.say(whatToSay);
+    toast: function(whatToSay, time, className, renderHtml) {
+        if (!fediloveData.toastInitialized) return;
+        if (time !== undefined)
+            window.fediloveData.toastTime = time;
+        if (className !== undefined)
+            window.fediloveData.toastClass = className;
+        if (renderHtml) {
+            $('#theToast #plain-text')[0].style = 'display: none';
+            $('#theToast #html-text').html(whatToSay);
+        } else {
+            $('#theToast #plain-text')[0].style = '';
+            $('#theToast #html-text').html('');
+        }
+        window.__toast.say(whatToSay);
     },
     animateMainContentSwipe: function(animName, cback) {
         $('div.virtual-list')[0].style.animation = `${animName} .25s linear 1`;
@@ -291,9 +302,9 @@ var fediloveUI = {
         if (accObj === undefined) return;
         if (fediloveData.meetRelationships[accObj.id] !== undefined)
             fediloveData.meetRelationships[accObj.id] = { 'id': accObj.id, 'requested': true }
-        fediloveMastodon.API.matchAccount(accObj.id, function() {
-            fediloveUI.animateMainContentSwipe('yepMeet', function() { window.history.back() });
-        });
+
+        fediloveUI.toast(window.__intl.matchAction, 6000, 'match', true);
+        fediloveMastodon.API.matchAccount(accObj.id, function() { });
     },
     onAccountMaybe: function() {
         const accObj = fediloveApi.getMeetAccount();
@@ -306,6 +317,7 @@ var fediloveUI = {
         accounts[accObj.id] = Date.now() + expire;
         window.localStorage.store_maybeAccounts = JSON.stringify(accounts);
 
+        fediloveUI.toast(window.__intl.maybeAction, 2000);
         fediloveUI.animateMainContentSwipe('acceptMeet', function() { window.history.back() });
     }
 };
@@ -398,6 +410,9 @@ var fediloveData = {
     meetRelationshipsFilled: false,
     gotEmojifyTextFunction: false,
     composeTxtKeypressEvent: false,
+    toastTime: undefined,
+    toastClass: undefined,
+    toastInitialized: false,
     pagesLoaded: {}
 };
 var fediloveEvents = {
@@ -481,9 +496,29 @@ function fedilove_customization() {
     if (fediloveData.myAccountId === undefined && window.__store.get().verifyCredentials !== undefined) {
         var aCountMax = 0;
         const _a = setInterval(function() {
+            if (aCountMax > 20)
+                return clearInterval(_a);
             const theData = window.__store.get().verifyCredentials[fediloveApi.getCurrentInstance()];
-            if (aCountMax > 20 || theData !== null)
-                fediloveData.myAccountId = theData !== null ? theData.id : undefined;
+            if (theData) {
+                fediloveData.myAccountId = theData ? theData.id : undefined;
+                return clearInterval(_a);
+            }
+            aCountMax++;
+        }, 500);
+    }
+
+    if (!fediloveData.toastInitialized) {
+        var aCountMax = 0;
+        const _a = setInterval(function() {
+            if (aCountMax > 20)
+                return clearInterval(_a);
+            if (window.__toast) {
+                window.fediloveData.toastClass = 'notshown';
+                window.fediloveData.toastTime = 10;
+                window.__toast.say('...');
+                fediloveData.toastInitialized = true;
+                return clearInterval(_a);
+            }
             aCountMax++;
         }, 500);
     }