Use new UI (#8983)

* fixup build

* swap frontends

web/src/hooks/index.jsx

@@ -1,59 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
-
-export function useResizeObserver(...refs) {
-  const [dimensions, setDimensions] = useState(
-    new Array(refs.length).fill({ width: 0, height: 0, x: -Infinity, y: -Infinity })
-  );
-  const resizeObserver = useMemo(
-    () =>
-      new ResizeObserver((entries) => {
-        window.requestAnimationFrame(() => {
-          setDimensions(entries.map((entry) => entry.contentRect));
-        });
-      }),
-    []
-  );
-
-  useEffect(() => {
-    refs.forEach((ref) => {
-      resizeObserver.observe(ref.current);
-    });
-
-    return () => {
-      refs.forEach((ref) => {
-        resizeObserver.unobserve(ref.current);
-      });
-    };
-  }, [refs, resizeObserver]);
-
-  return dimensions;
-}
-
-export function useIntersectionObserver() {
-  const [entry, setEntry] = useState({});
-  const [node, setNode] = useState(null);
-
-  const observer = useRef(null);
-
-  useEffect(() => {
-    if (observer.current) {
-      observer.current.disconnect();
-    }
-
-    observer.current = new IntersectionObserver((entries) => {
-      window.requestAnimationFrame(() => {
-        setEntry(entries[0]);
-      });
-    });
-
-    if (node) {
-      observer.current.observe(node);
-    }
-
-    return () => {
-      observer.current.disconnect();
-    };
-  }, [node]);
-
-  return [entry, setNode];
-}

web/src/hooks/resize-observer.ts

@@ -0,0 +1,39 @@
+import { MutableRefObject, useEffect, useMemo, useState } from "react";
+
+export function useResizeObserver(...refs: MutableRefObject<Element | null>[]) {
+  const [dimensions, setDimensions] = useState(
+    new Array(refs.length).fill({
+      width: 0,
+      height: 0,
+      x: -Infinity,
+      y: -Infinity,
+    })
+  );
+  const resizeObserver = useMemo(
+    () =>
+      new ResizeObserver((entries) => {
+        window.requestAnimationFrame(() => {
+          setDimensions(entries.map((entry) => entry.contentRect));
+        });
+      }),
+    []
+  );
+
+  useEffect(() => {
+    refs.forEach((ref) => {
+      if (ref.current) {
+        resizeObserver.observe(ref.current);
+      }
+    });
+
+    return () => {
+      refs.forEach((ref) => {
+        if (ref.current) {
+          resizeObserver.unobserve(ref.current);
+        }
+      });
+    };
+  }, [refs, resizeObserver]);
+
+  return dimensions;
+}

web/src/hooks/use-persistence.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState, useCallback } from "react";
+import { get as getData, set as setData } from "idb-keyval";
+
+type usePersistenceReturn = [
+  value: any | undefined,
+  setValue: (value: string | boolean) => void,
+  loaded: boolean,
+];
+
+export function usePersistence(
+  key: string,
+  defaultValue: any | undefined = undefined
+): usePersistenceReturn {
+  const [value, setInternalValue] = useState<any | undefined>(defaultValue);
+  const [loaded, setLoaded] = useState<boolean>(false);
+
+  const setValue = useCallback(
+    (value: string | boolean) => {
+      setInternalValue(value);
+      async function update() {
+        await setData(key, value);
+      }
+
+      update();
+    },
+    [key]
+  );
+
+  useEffect(() => {
+    setLoaded(false);
+    setInternalValue(defaultValue);
+
+    async function load() {
+      const value = await getData(key);
+      if (typeof value !== "undefined") {
+        setValue(value);
+      }
+      setLoaded(true);
+    }
+
+    load();
+  }, [key, defaultValue, setValue]);
+
+  return [value, setValue, loaded];
+}

web/src/hooks/useClickOutside.jsx

@@ -1,22 +0,0 @@
-import { useEffect, useRef } from 'preact/hooks';
-
-// https://stackoverflow.com/a/54292872/2693528
-export const useClickOutside = (callback) => {
-  const callbackRef = useRef(); // initialize mutable ref, which stores callback
-  const innerRef = useRef(); // returned to client, who marks "border" element
-
-  // update cb on each render, so second useEffect has access to current value
-  useEffect(() => {
-    callbackRef.current = callback;
-  });
-
-  useEffect(() => {
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-    function handleClick(e) {
-      if (innerRef.current && callbackRef.current && !innerRef.current.contains(e.target)) callbackRef.current(e);
-    }
-  }, []);
-
-  return innerRef; // convenience for client (doesn't need to init ref himself)
-};

web/src/hooks/useSearchString.jsx

@@ -1,26 +0,0 @@
-import { useState, useCallback } from 'preact/hooks';
-
-const defaultSearchString = (limit) => `include_thumbnails=0&limit=${limit}`;
-
-export const useSearchString = (limit, searchParams) => {
-  const { searchParams: initialSearchParams } = new URL(window.location);
-  const _searchParams = searchParams || initialSearchParams.toString();
-
-  const [searchString, changeSearchString] = useState(`${defaultSearchString(limit)}&${_searchParams}`);
-
-  const setSearchString = useCallback(
-    (limit, searchString) => {
-      changeSearchString(`${defaultSearchString(limit)}&${searchString}`);
-    },
-    [changeSearchString]
-  );
-
-  const removeDefaultSearchKeys = useCallback((searchParams) => {
-    searchParams.delete('limit');
-    searchParams.delete('include_thumbnails');
-    // removed deletion of "before" as its used by DatePicker
-    // searchParams.delete('before');
-  }, []);
-
-  return { searchString, setSearchString, removeDefaultSearchKeys };
-};