[Storage] Rework everything (#10)

* [storage] rework everything

* [storage] expose createProxy

* [storage] add useProxy hook

* [storage] fix settings.ts

* [Storage] Implement wrapSync, fix UI

* [storage] fix storage

* [plugins] re-add plugin loading

* [storage] fix fix storage

* [storage] make wrapSync more magical

* [storage] save deletes

* [ui] hack around plugin removal... again

* [plugins] make plugin storage work

* [storage] expose api

---------

Co-authored-by: Beef <beefers@riseup.net>

src/ui/settings/pages/Developer.tsx

@@ -1,8 +1,9 @@
 import { ReactNative as RN, navigation } from "@metro/common";
 import { Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
-import { showToast } from "@/ui/toasts";
+import { showToast } from "@ui/toasts";
 import { connectToDebugger } from "@lib/debug";
+import { useProxy } from "@lib/storage";
 import settings from "@lib/settings";
 import logger from "@lib/logger";
 import Subpage from "@ui/settings/components/Subpage";
@@ -11,33 +12,32 @@ import AssetBrowser from "@ui/settings/pages/AssetBrowser";
 const { FormSection, FormRow, FormInput, FormDivider } = Forms;
 
 export default function Developer() {
-    const [debuggerUrl, setDebuggerUrl] = React.useState(settings.debuggerUrl || "");
+    useProxy(settings);
 
     return (
         <RN.View style={{ flex: 1 }}>
             <FormSection title="Debug">
                 <FormInput 
-                    value={debuggerUrl}
+                    value={settings.debuggerUrl}
                     onChange={(v: string) => {
                         settings.debuggerUrl = v;
-                        setDebuggerUrl(v);
                     }}
                     title="DEBUGGER URL"
                 />
                 <FormDivider />
                 <FormRow
                     label="Connect to debug websocket"
-                    leading={() => <FormRow.Icon source={getAssetIDByName("copy")} />}
-                    onPress={() => connectToDebugger(debuggerUrl)}
+                    leading={<FormRow.Icon source={getAssetIDByName("copy")} />}
+                    onPress={() => connectToDebugger(settings.debuggerUrl)}
                 />
                 <FormDivider />
                 {window.__vendetta_rdc && <FormRow
                     label="Connect to React DevTools"
-                    leading={() => <FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
+                    leading={<FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
                     onPress={() => {
                         try {
                             window.__vendetta_rdc?.connectToDevTools({
-                                host: debuggerUrl.split(":")[0],
+                                host: settings.debuggerUrl.split(":")?.[0],
                                 resolveRNStyle: RN.StyleSheet.flatten,
                             });
                         } catch(e) {
@@ -50,7 +50,7 @@ export default function Developer() {
             <FormSection title="Other">
                 <FormRow
                     label="Asset Browser"
-                    leading={() => <FormRow.Icon source={getAssetIDByName("ic_media_upload")} />}
+                    leading={<FormRow.Icon source={getAssetIDByName("ic_media_upload")} />}
                     trailing={FormRow.Arrow}
                     onPress={() => navigation.push(Subpage, {
                         name: "Asset Browser",

src/ui/settings/pages/General.tsx

@@ -3,14 +3,15 @@ import { DISCORD_SERVER, GITHUB } from "@lib/constants";
 import { getAssetIDByName } from "@ui/assets";
 import { Forms } from "@ui/components";
 import { getDebugInfo } from "@lib/debug";
-import Version from "@ui/settings/components/Version";
+import { useProxy } from "@lib/storage";
 import settings from "@lib/settings";
+import Version from "@ui/settings/components/Version";
 
 const { FormRow, FormSwitchRow, FormSection, FormDivider } = Forms;
 const debugInfo = getDebugInfo();
 
 export default function General() {
-    const [devSettings, setDevSettings] = React.useState(settings.developerSettings || false);
+    useProxy(settings);
 
     const versions = [
         {
@@ -116,10 +117,9 @@ export default function General() {
                 <FormSwitchRow
                     label="Developer Settings"
                     leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
-                    value={devSettings}
+                    value={settings.developerSettings}
                     onValueChange={(v: boolean) => {
                         settings.developerSettings = v;
-                        setDevSettings(v);
                     }}
                 />
             </FormSection>

src/ui/settings/pages/Plugins.tsx

@@ -2,14 +2,15 @@ import { ReactNative as RN } from "@metro/common";
 import { Forms } from "@ui/components";
 import { showToast } from "@ui/toasts";
 import { getAssetIDByName } from "@ui/assets";
-import { fetchPlugin, plugins } from "@lib/plugins";
+import { useProxy } from "@lib/storage";
+import { plugins, fetchPlugin } from "@lib/plugins";
 import PluginCard from "@ui/settings/components/PluginCard";
 
 const { FormInput, FormRow } = Forms;
 
 export default function Plugins() {
+    useProxy(plugins);
     const [pluginUrl, setPluginUrl] = React.useState("");
-    const [pluginList, setPluginList] = React.useState(plugins);
 
     return (
         <RN.View style={{ flex: 1 }}>
@@ -24,7 +25,6 @@ export default function Plugins() {
                 onPress={() => {
                         fetchPlugin(pluginUrl).then(() => {
                             setPluginUrl("");
-                            setPluginList(plugins);
                         }).catch((e: Error) => {
                             showToast(e.message, getAssetIDByName("Small"));
                         });
@@ -33,7 +33,7 @@ export default function Plugins() {
             />
             <RN.FlatList
                 style={{ marginTop: 10 }}
-                data={Object.values(pluginList)}
+                data={Object.values(plugins)}
                 renderItem={({ item }) => <PluginCard plugin={item} />}
                 keyExtractor={item => item.id}
             />