no-fix: move pagestate provider to app component and move some common hooks to web-utils

5 files changed, 115 insertions, 37 deletions

diff --git a/packages/web-util/src/hooks/index.ts b/packages/web-util/src/hooks/index.ts
new file mode 100644
index 000000000..f18d61b9c
--- /dev/null
+++ b/packages/web-util/src/hooks/index.ts
@@ -0,0 +1,3 @@
+
+export { useLang } from "./useLang.js";
+export { useLocalStorage, useNotNullLocalStorage } from "./useLocalStorage.js"
\ No newline at end of file
diff --git a/packages/web-util/src/hooks/useLang.ts b/packages/web-util/src/hooks/useLang.ts
new file mode 100644
index 000000000..5b02c5255
--- /dev/null
+++ b/packages/web-util/src/hooks/useLang.ts
@@ -0,0 +1,30 @@
+/*
+ This file is part of GNU Anastasis
+ (C) 2021-2022 Anastasis SARL
+
+ GNU Anastasis is free software; you can redistribute it and/or modify it under the
+ terms of the GNU Affero General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Anastasis is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License along with
+ GNU Anastasis; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { useNotNullLocalStorage } from "./useLocalStorage.js";
+
+function getBrowserLang(): string | undefined {
+  if (window.navigator.languages) return window.navigator.languages[0];
+  if (window.navigator.language) return window.navigator.language;
+  return undefined;
+}
+
+export function useLang(
+  initial?: string,
+): [string, (s: string) => void, boolean] {
+  const defaultLang = (getBrowserLang() || initial || "en").substring(0, 2);
+  return useNotNullLocalStorage("lang-preference", defaultLang);
+}
diff --git a/packages/web-util/src/hooks/useLocalStorage.ts b/packages/web-util/src/hooks/useLocalStorage.ts
new file mode 100644
index 000000000..ed5b491f2
--- /dev/null
+++ b/packages/web-util/src/hooks/useLocalStorage.ts
@@ -0,0 +1,80 @@
+/*
+ This file is part of GNU Anastasis
+ (C) 2021-2022 Anastasis SARL
+
+ GNU Anastasis is free software; you can redistribute it and/or modify it under the
+ terms of the GNU Affero General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Anastasis is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License along with
+ GNU Anastasis; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { StateUpdater, useState } from "preact/hooks";
+
+export function useLocalStorage(
+  key: string,
+  initialValue?: string,
+): [string | undefined, StateUpdater<string | undefined>] {
+  const [storedValue, setStoredValue] = useState<string | undefined>(
+    (): string | undefined => {
+      return typeof window !== "undefined"
+        ? window.localStorage.getItem(key) || initialValue
+        : initialValue;
+    },
+  );
+
+  const setValue = (
+    value?: string | ((val?: string) => string | undefined),
+  ): void => {
+    setStoredValue((p) => {
+      const toStore = value instanceof Function ? value(p) : value;
+      if (typeof window !== "undefined") {
+        if (!toStore) {
+          window.localStorage.removeItem(key);
+        } else {
+          window.localStorage.setItem(key, toStore);
+        }
+      }
+      return toStore;
+    });
+  };
+
+  return [storedValue, setValue];
+}
+
+//TODO: merge with the above function
+export function useNotNullLocalStorage(
+  key: string,
+  initialValue: string,
+): [string, StateUpdater<string>, boolean] {
+  const [storedValue, setStoredValue] = useState<string>((): string => {
+    return typeof window !== "undefined"
+      ? window.localStorage.getItem(key) || initialValue
+      : initialValue;
+  });
+
+  const setValue = (value: string | ((val: string) => string)): void => {
+    const valueToStore = value instanceof Function ? value(storedValue) : value;
+    setStoredValue(valueToStore);
+    if (typeof window !== "undefined") {
+      if (!valueToStore) {
+        window.localStorage.removeItem(key);
+      } else {
+        window.localStorage.setItem(key, valueToStore);
+      }
+    }
+  };
+
+  const isSaved = window.localStorage.getItem(key) !== null;
+  return [storedValue, setValue, isSaved];
+}
diff --git a/packages/web-util/src/index.browser.ts b/packages/web-util/src/index.browser.ts
index 3b3ab9293..57c97e605 100644
--- a/packages/web-util/src/index.browser.ts
+++ b/packages/web-util/src/index.browser.ts
@@ -1,37 +1,2 @@
-//`ws://localhost:8003/socket`
-export function setupLiveReload(wsURL: string | undefined) {
-  if (!wsURL) return;
-  const ws = new WebSocket(wsURL);
-  ws.addEventListener("message", (message) => {
-    const event = JSON.parse(message.data);
-    if (event.type === "LOG") {
-      console.log(event.message);
-    }
-    if (event.type === "RELOAD") {
-      window.location.reload();
-    }
-    if (event.type === "UPDATE") {
-      const c = document.getElementById("container");
-      if (c) {
-        document.body.removeChild(c);
-      }
-      const d = document.createElement("div");
-      d.setAttribute("id", "container");
-      d.setAttribute("class", "app-container");
-      document.body.appendChild(d);
-      const s = document.createElement("script");
-      s.setAttribute("id", "code");
-      s.setAttribute("type", "application/javascript");
-      s.textContent = atob(event.content);
-      document.body.appendChild(s);
-    }
-  });
-  ws.onerror = (error) => {
-    console.error(error);
-  };
-  ws.onclose = (e) => {
-    setTimeout(setupLiveReload, 500);
-  };
-}
-
+export * as hooks from "./hooks/index.js";
 export { renderStories, parseGroupImport } from "./stories.js";
diff --git a/packages/web-util/src/live-reload.ts b/packages/web-util/src/live-reload.ts
index ef4c6f2d6..60c7cb565 100644
--- a/packages/web-util/src/live-reload.ts
+++ b/packages/web-util/src/live-reload.ts
@@ -17,7 +17,7 @@ function setupLiveReload(): void {
     } catch (e) {
       return;
     }
-    console.log("unsupported", event);
+    console.log("unsupported", message);
   });
 
   ws.addEventListener("error", (error) => {