From 8e6bf990069b9c3ae033321b5aeb4d46fa6501e6 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 7 Dec 2022 09:06:10 -0300 Subject: no-fix: move pagestate provider to app component and move some common hooks to web-utils --- packages/web-util/src/hooks/index.ts | 3 + packages/web-util/src/hooks/useLang.ts | 30 ++++++++++ packages/web-util/src/hooks/useLocalStorage.ts | 80 ++++++++++++++++++++++++++ packages/web-util/src/index.browser.ts | 37 +----------- packages/web-util/src/live-reload.ts | 2 +- 5 files changed, 115 insertions(+), 37 deletions(-) create mode 100644 packages/web-util/src/hooks/index.ts create mode 100644 packages/web-util/src/hooks/useLang.ts create mode 100644 packages/web-util/src/hooks/useLocalStorage.ts (limited to 'packages/web-util/src') 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 + */ + +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 + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { StateUpdater, useState } from "preact/hooks"; + +export function useLocalStorage( + key: string, + initialValue?: string, +): [string | undefined, StateUpdater] { + const [storedValue, setStoredValue] = useState( + (): 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, boolean] { + const [storedValue, setStoredValue] = useState((): 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) => { -- cgit v1.2.3