[skip ci] Refactor utils

src/utils/react.tsx

@@ -0,0 +1,128 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program 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 General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { React, useEffect, useReducer, useState } from "@webpack/common";
+
+import { makeLazy } from "./lazy";
+import { checkIntersecting } from "./misc";
+
+/**
+ * Check if an element is on screen
+ * @param intersectOnly If `true`, will only update the state when the element comes into view
+ * @returns [refCallback, isIntersecting]
+ */
+export const useIntersection = (intersectOnly = false): [
+    refCallback: React.RefCallback<Element>,
+    isIntersecting: boolean,
+] => {
+    const observerRef = React.useRef<IntersectionObserver | null>(null);
+    const [isIntersecting, setIntersecting] = useState(false);
+
+    const refCallback = (element: Element | null) => {
+        observerRef.current?.disconnect();
+        observerRef.current = null;
+
+        if (!element) return;
+
+        if (checkIntersecting(element)) {
+            setIntersecting(true);
+            if (intersectOnly) return;
+        }
+
+        observerRef.current = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                if (entry.target !== element) continue;
+                if (entry.isIntersecting && intersectOnly) {
+                    setIntersecting(true);
+                    observerRef.current?.disconnect();
+                    observerRef.current = null;
+                } else {
+                    setIntersecting(entry.isIntersecting);
+                }
+            }
+        });
+        observerRef.current.observe(element);
+    };
+
+    return [refCallback, isIntersecting];
+};
+
+type AwaiterRes<T> = [T, any, boolean];
+interface AwaiterOpts<T> {
+    fallbackValue: T;
+    deps?: unknown[];
+    onError?(e: any): void;
+}
+/**
+ * Await a promise
+ * @param factory Factory
+ * @param fallbackValue The fallback value that will be used until the promise resolved
+ * @returns [value, error, isPending]
+ */
+
+export function useAwaiter<T>(factory: () => Promise<T>): AwaiterRes<T | null>;
+export function useAwaiter<T>(factory: () => Promise<T>, providedOpts: AwaiterOpts<T>): AwaiterRes<T>;
+export function useAwaiter<T>(factory: () => Promise<T>, providedOpts?: AwaiterOpts<T | null>): AwaiterRes<T | null> {
+    const opts: Required<AwaiterOpts<T | null>> = Object.assign({
+        fallbackValue: null,
+        deps: [],
+        onError: null,
+    }, providedOpts);
+    const [state, setState] = useState({
+        value: opts.fallbackValue,
+        error: null,
+        pending: true
+    });
+
+    useEffect(() => {
+        let isAlive = true;
+        if (!state.pending) setState({ ...state, pending: true });
+
+        factory()
+            .then(value => isAlive && setState({ value, error: null, pending: false }))
+            .catch(error => isAlive && (setState({ value: null, error, pending: false }), opts.onError?.(error)));
+
+        return () => void (isAlive = false);
+    }, opts.deps);
+
+    return [state.value, state.error, state.pending];
+}
+/**
+ * Returns a function that can be used to force rerender react components
+ */
+
+export function useForceUpdater(): () => void;
+export function useForceUpdater(withDep: true): [unknown, () => void];
+export function useForceUpdater(withDep?: true) {
+    const r = useReducer(x => x + 1, 0);
+    return withDep ? r : r[1];
+}
+/**
+ * A lazy component. The factory method is called on first render. For example useful
+ * for const Component = LazyComponent(() => findByDisplayName("...").default)
+ * @param factory Function returning a Component
+ * @returns Result of factory function
+ */
+
+export function LazyComponent<T extends object = any>(factory: () => React.ComponentType<T>) {
+    const get = makeLazy(factory);
+    return (props: T) => {
+        const Component = get();
+        return <Component {...props} />;
+    };
+}