From a725e46ff0216cedf8310f52ab6f7c7c01739da6 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sat, 7 May 2022 03:36:27 +0300
Subject: [PATCH] frontend: add generic `StorageItemStore`

---
 frontend/src/stores.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index e7f8916..ea9b37e 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -45,6 +45,13 @@ class Store {
     }
 }
 
+class StorageItemStore extends Store {
+    constructor(key) {
+        super(getItem(key), `StorageItemStore[key=${key}]`);
+        this.watch(e => setItem(key, e));
+    }
+}
+
 class ChannelsStore extends Store {
     constructor() {
         super(gateway.channels || [], "ChannelsStore");
@@ -309,7 +316,7 @@ export const selectedChannel = new Store({ id: getItem("app:cache:openChannelId"
 export const showSidebar = new Store(false, "showSidebar");
 export const showChannelView = new Store(true, "showChannelView");
 export const smallViewport = new Store(false, "smallViewport");
-export const theme = new Store(getItem("app:visual:theme"), "theme");
+export const theme = new StorageItemStore("app:visual:theme");
 export const channels = new ChannelsStore();
 export const gatewayStatus = new GatewayStatusStore();
 export const messagesStoreProvider = new MessagesStoreProvider();
@@ -332,7 +339,3 @@ export const allStores = {
 selectedChannel.watch((newSelectedChannel) => {
     setItem("app:cache:openChannelId", newSelectedChannel.id);
 });
-
-theme.watch((newTheme) => {
-    setItem("app:visual:theme", newTheme);
-});