From a03261bfd4065bcca07b1807910da7acf7daea42 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sun, 21 Feb 2021 08:43:36 +0100
Subject: [PATCH] reactive variables - better approach

---
 .../web/src/appobj/ConnectionAppObject.svelte | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/appobj/ConnectionAppObject.svelte b/packages/web/src/appobj/ConnectionAppObject.svelte
index 0cf2c44ef..5a817310e 100644
--- a/packages/web/src/appobj/ConnectionAppObject.svelte
+++ b/packages/web/src/appobj/ConnectionAppObject.svelte
@@ -6,15 +6,22 @@
   export let commonProps;
   export let data;
 
-  function getStatusIcon(opened, data) {
+  let statusIcon = null;
+  let statusTitle = null;
+
+  $: {
     const { _id, status } = data;
-    if (opened.includes(_id)) {
-      if (!status) return 'icon loading';
-      if (status.name == 'pending') return 'icon loading';
-      if (status.name == 'ok') return 'img ok';
-      return 'img error';
+    if ($openedConnections.includes(_id)) {
+      if (!status) statusIcon = 'icon loading';
+      else if (status.name == 'pending') statusIcon = 'icon loading';
+      else if (status.name == 'ok') statusIcon = 'img ok';
+      else statusIcon = 'img error';
+      if (status && status.name == 'error') {
+        statusTitle = status.message;
+      }
     }
   }
+
 </script>
 
 <AppObjectCore
@@ -22,7 +29,7 @@
   title={data.displayName || data.server}
   icon="img server"
   isBold={_.get($currentDatabase, 'connection._id') == data._id}
-  statusIcon={getStatusIcon($openedConnections, data)}
-  statusTitle={data.status && data.status.name == 'error' ? data.status.message : null}
+  statusIcon={statusIcon}
+  statusTitle={statusTitle}
   on:click={() => ($openedConnections = _.uniq([...$openedConnections, data._id]))}
 />