From ec07b5bd3c31a5d1a26f40bb442581cd2411e47b Mon Sep 17 00:00:00 2001
From: amsyarasyiq <82711525+amsyarasyiq@users.noreply.github.com>
Date: Tue, 30 Apr 2024 18:41:43 +0800
Subject: [PATCH] [ui] Refactor Developer page

---
 src/core/ui/settings/hooks/useFS.ts      | 36 ++++++++++++++++++++++
 src/core/ui/settings/pages/Developer.tsx | 39 +++++++-----------------
 2 files changed, 47 insertions(+), 28 deletions(-)
 create mode 100644 src/core/ui/settings/hooks/useFS.ts

diff --git a/src/core/ui/settings/hooks/useFS.ts b/src/core/ui/settings/hooks/useFS.ts
new file mode 100644
index 0000000..3577450
--- /dev/null
+++ b/src/core/ui/settings/hooks/useFS.ts
@@ -0,0 +1,36 @@
+import * as fs from "@lib/api/native/fs";
+import { useEffect, useMemo, useState } from "react";
+
+export enum CheckState {
+    FALSE,
+    TRUE,
+    LOADING,
+    ERROR
+}
+
+export function useFileExists(path: string, prefix?: string): [CheckState, typeof fs] {
+    const [state, setState] = useState<CheckState>(CheckState.LOADING);
+
+    const check = () => fs.fileExists(path, prefix)
+        .then(exists => setState(exists ? CheckState.TRUE : CheckState.FALSE))
+        .catch(() => setState(CheckState.ERROR));
+
+    const customFS = useMemo(() => new Proxy(fs, {
+        get(target, p, receiver) {
+            const val = Reflect.get(target, p, receiver);
+            if (typeof val !== "function") return;
+
+            return (...args: any[]) => {
+                const promise = (check(), val(...args));
+                if (promise?.constructor?.name === "Promise") {
+                    setState(CheckState.LOADING);
+                    promise.finally(check);
+                }
+                return promise;
+            };
+        },
+    }), []);
+
+    useEffect(() => void check(), []);
+    return [state, customFS];
+}
diff --git a/src/core/ui/settings/pages/Developer.tsx b/src/core/ui/settings/pages/Developer.tsx
index bf85adf..0e51aad 100644
--- a/src/core/ui/settings/pages/Developer.tsx
+++ b/src/core/ui/settings/pages/Developer.tsx
@@ -1,7 +1,7 @@
 import { Strings } from "@core/i18n";
+import { CheckState, useFileExists } from "@core/ui/settings/hooks/useFS";
 import AssetBrowser from "@core/ui/settings/pages/AssetBrowser";
 import { getAssetIDByName } from "@lib/api/assets";
-import { fileExists, removeFile, writeFile } from "@lib/api/native/fs";
 import { getReactDevToolsProp, getReactDevToolsVersion, isLoaderConfigSupported, isReactDevToolsPreloaded, isVendettaLoader } from "@lib/api/native/loader";
 import { useProxy } from "@lib/api/storage";
 import { connectToDebugger } from "@lib/debug";
@@ -13,7 +13,6 @@ import { findByProps } from "@metro/filters";
 import { semanticColors } from "@ui/color";
 import { ErrorBoundary } from "@ui/components";
 import { createStyles, TextStyleSheet } from "@ui/styles";
-import { useState } from "react";
 import { ScrollView, StyleSheet } from "react-native";
 
 const { hideActionSheet } = findByProps("openLazy", "hideActionSheet");
@@ -30,15 +29,7 @@ const useStyles = createStyles({
 });
 
 export default function Developer() {
-    const [rdtEmbedded, setRdtEmbedded] = useState(false);
-    const [rdtDownloading, setRdtDownloading] = useState(true);
-
-    React.useEffect(() => {
-        fileExists("preloads/reactDevtools.js").then(exists => {
-            setRdtEmbedded(exists);
-            setRdtDownloading(false);
-        });
-    }, []);
+    const [rdtFileExists, fs] = useFileExists("preloads/reactDevtools.js");
 
     const styles = useStyles();
     const navigation = NavigationNative.useNavigation();
@@ -141,26 +132,18 @@ export default function Developer() {
                             trailing={
                                 <Button
                                     size="sm"
-                                    loading={rdtDownloading}
-                                    disabled={rdtDownloading}
-                                    variant={rdtEmbedded ? "secondary" : "primary"}
-                                    text={rdtEmbedded ? Strings.UNINSTALL : Strings.INSTALL}
+                                    loading={rdtFileExists === CheckState.LOADING}
+                                    disabled={rdtFileExists === CheckState.LOADING}
+                                    variant={rdtFileExists === CheckState.TRUE ? "secondary" : "primary"}
+                                    text={rdtFileExists === CheckState.TRUE ? Strings.UNINSTALL : Strings.INSTALL}
                                     onPress={async () => {
-                                        if (!rdtEmbedded) {
-                                            setRdtDownloading(true);
-                                            const res = await fetch(RDT_EMBED_LINK);
-                                            const bundle = await res.text();
-                                            await writeFile("preloads/reactDevtools.js", bundle);
-                                            setRdtDownloading(false);
-                                            setRdtEmbedded(true);
-                                        } else {
-                                            setRdtDownloading(true);
-                                            await removeFile("preloads/reactDevtools.js");
-                                            setRdtEmbedded(false);
-                                            setRdtDownloading(false);
+                                        if (rdtFileExists === CheckState.FALSE) {
+                                            fs.downloadFile(RDT_EMBED_LINK, "preloads/reactDevtools.js");
+                                        } else if (rdtFileExists === CheckState.TRUE) {
+                                            fs.removeFile("preloads/reactDevtools.js");
                                         }
                                     }}
-                                    icon={getAssetIDByName(rdtEmbedded ? "ic_message_delete" : "DownloadIcon")}
+                                    icon={getAssetIDByName(rdtFileExists === CheckState.TRUE ? "ic_message_delete" : "DownloadIcon")}
                                     style={{ marginLeft: 8 }}
                                 />
                             }