From d1654546fa8abd8ab69b3597ac234c78e92b2ea9 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sat, 7 May 2022 04:04:54 +0300
Subject: [PATCH] frontend: housekeeping and clean up Store code

---
 .../components/overlays/CreateAccount.svelte  |  3 +-
 .../components/overlays/CreateChannel.svelte  |  3 +-
 .../components/overlays/EditChannel.svelte    |  1 -
 .../components/overlays/EditMessage.svelte    |  3 +-
 frontend/src/components/overlays/Login.svelte |  3 +-
 frontend/src/components/overlays/Toast.svelte |  3 +-
 frontend/src/stores.js                        | 32 +++++++++++--------
 7 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/overlays/CreateAccount.svelte b/frontend/src/components/overlays/CreateAccount.svelte
index c902a83..67152a7 100644
--- a/frontend/src/components/overlays/CreateAccount.svelte
+++ b/frontend/src/components/overlays/CreateAccount.svelte
@@ -1,10 +1,9 @@
 <script>
-    import { fly } from "svelte/transition";
     import { quintInOut } from "svelte/easing";
     import { overlayStore } from "../../stores";
     import request from "../../request";
     import { apiRoute } from "../../storage";
-import { maybeFly } from "../../animations";
+    import { maybeFly } from "../../animations";
 
     let username = "";
     let password = "";
diff --git a/frontend/src/components/overlays/CreateChannel.svelte b/frontend/src/components/overlays/CreateChannel.svelte
index e20bbd5..aaae8df 100644
--- a/frontend/src/components/overlays/CreateChannel.svelte
+++ b/frontend/src/components/overlays/CreateChannel.svelte
@@ -1,10 +1,9 @@
 <script>
-    import { fade, fly } from "svelte/transition";
     import { quintInOut } from "svelte/easing";
     import { overlayStore } from "../../stores";
     import request from "../../request";
     import { apiRoute } from "../../storage";
-import { maybeFade, maybeFly } from "../../animations";
+    import { maybeFade, maybeFly } from "../../animations";
 
     let channelName = "";
     let createButtonEnabled = true;
diff --git a/frontend/src/components/overlays/EditChannel.svelte b/frontend/src/components/overlays/EditChannel.svelte
index d739cb4..46df536 100644
--- a/frontend/src/components/overlays/EditChannel.svelte
+++ b/frontend/src/components/overlays/EditChannel.svelte
@@ -1,5 +1,4 @@
 <script>
-    import { fade, fly } from "svelte/transition";
     import { maybeFade, maybeFly } from "../../animations";
     import { quintInOut } from "svelte/easing";
     import { overlayStore } from "../../stores";
diff --git a/frontend/src/components/overlays/EditMessage.svelte b/frontend/src/components/overlays/EditMessage.svelte
index 9b24aa4..5e47506 100644
--- a/frontend/src/components/overlays/EditMessage.svelte
+++ b/frontend/src/components/overlays/EditMessage.svelte
@@ -1,10 +1,9 @@
 <script>
-    import { fade, fly } from "svelte/transition";
     import { quintInOut } from "svelte/easing";
     import { overlayStore } from "../../stores";
     import request from "../../request";
     import { apiRoute } from "../../storage";
-import { maybeFade, maybeFly } from "../../animations";
+    import { maybeFade, maybeFly } from "../../animations";
 
     export let message;
 
diff --git a/frontend/src/components/overlays/Login.svelte b/frontend/src/components/overlays/Login.svelte
index 0862bd1..8c3e629 100644
--- a/frontend/src/components/overlays/Login.svelte
+++ b/frontend/src/components/overlays/Login.svelte
@@ -1,11 +1,10 @@
 <script>
-    import { fly } from "svelte/transition";
     import { quintInOut } from "svelte/easing";
     import { overlayStore } from "../../stores";
     import request from "../../request";
     import { apiRoute } from "../../storage";
     import { authWithToken } from "../../auth";
-import { maybeFly } from "../../animations";
+    import { maybeFly } from "../../animations";
 
     let username = "";
     let password = "";
diff --git a/frontend/src/components/overlays/Toast.svelte b/frontend/src/components/overlays/Toast.svelte
index 4efd291..bc7baac 100644
--- a/frontend/src/components/overlays/Toast.svelte
+++ b/frontend/src/components/overlays/Toast.svelte
@@ -1,8 +1,7 @@
 <script>
     import { XIcon } from "svelte-feather-icons";
     import { quintInOut } from "svelte/easing";
-    import { fly } from "svelte/transition";
-import { maybeFly } from "../../animations";
+    import { maybeFly } from "../../animations";
     import { overlayStore } from "../../stores";
 
     export let message;
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index fce55c7..aba5fc4 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -6,26 +6,24 @@ import { apiRoute, getItem, setItem } from "./storage";
 const storeLog = logger("Store");
 
 class Store {
-    constructor(value=null, name="[unnamed]") {
+    constructor(value=null, name="[no name]") {
         this._handlers = [];
         this.value = value;
         this.name = name;
     }
 
-    // like subscribe, but without initially calling it
+    // like subscribe, but without initially calling the handler
     watch(handler) {
-        const newLength = this._handlers.push(handler);
-        const handlerIndex = newLength - 1;
-        storeLog(`(${this.name}) Calling handler (watch/initial)`, this.value);
+        const handlerIndex = this._handlers.push(handler) - 1;
+        storeLog(`(${this.name}) (watch/handler) New handler`, this.value);
         return () => {
             this._handlers.splice(handlerIndex, 1);
         };
     }
 
     subscribe(handler) {
-        const newLength = this._handlers.push(handler);
-        const handlerIndex = newLength - 1;
-        storeLog(`(${this.name}) Calling handler (subscribe/initial)`, this.value);
+        const handlerIndex = this._handlers.push(handler) - 1;
+        storeLog(`(${this.name}) (subscribe/initial) Calling handler`, this.value);
         handler(this.value);
         return () => {
             this._handlers.splice(handlerIndex, 1);
@@ -33,15 +31,18 @@ class Store {
     }
 
     set(value) {
+        if (value === this.value)
+            return;
+
         this.value = value;
         this.updated();
     }
 
     updated() {
-        storeLog(`(${this.name}) Calling all (${this._handlers.length}) handlers (updated)`, this.value);
-        this._handlers.forEach(e => {
-            e(this.value);
-        });
+        storeLog(`(${this.name}) (updated) Calling all (${this._handlers.length}) handlers`, this.value);
+        for (let i = this._handlers.length - 1; i >= 0; i--) {
+            this._handlers[i](this.value);
+        }
     }
 }
 
@@ -307,15 +308,18 @@ class OverlayStore extends Store {
     }
 
     close(name) {
+        if (!this.value[name])
+            return;
+
         this.value[name] = null;
         this.updated();
     }
 }
 
 export const selectedChannel = new Store({ id: getItem("app:cache:openChannelId"), name: "none", creator_id: -1 }, "selectedChannel");
-export const showSidebar = new Store(false, "showSidebar");
-export const showChannelView = new Store(true, "showChannelView");
+export const showSidebar = new Store(true, "showSidebar");
 export const smallViewport = new Store(false, "smallViewport");
+export const showChannelView = new Store(true, "showChannelView");
 export const theme = new StorageItemStore("app:visual:theme");
 export const doAnimations = new StorageItemStore("app:behavior:doAnimations");
 export const channels = new ChannelsStore();