Test LocalForage

Website/package.json

@@ -6,7 +6,11 @@
     "min_sdk": 26,
     "target_sdk": 34,
     "version_name": "1.8.5",
-    "version_code": 185
+    "version_code": 185,
+    "storage": {
+      "name": "MMRLStorage",
+      "version": 1
+    }
   },
   "main": "index.tsx",
   "keywords": [],
@@ -54,6 +58,7 @@
     "googlers-tools": "^1.2.8",
     "highlight.js": "^11.6.0",
     "install": "^0.13.0",
+    "localforage": "^1.10.0",
     "localized-strings": "^0.2.4",
     "markdown-to-jsx": "^7.1.7",
     "marked-react": "^1.1.2",

Website/src/hooks/useLocalForage.ts

@@ -0,0 +1,70 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import localForage from "localforage";
+import pkg from "./../../package.json";
+import { useStateCallback } from "./useStateCallback";
+import { SetValue } from "./useNativeStorage";
+
+type ErrorHandler = (e?: Error) => void;
+
+const defaultErrorHandler: ErrorHandler = (e?: Error) => {
+  console.error(e);
+};
+
+localForage.config({
+  driver: localForage.INDEXEDDB, // Force WebSQL; same as using setDriver()
+  name: pkg.config.storage.name,
+  version: pkg.config.storage.version,
+  description: pkg.description,
+});
+
+export function useLocalForage<D>(key: string, initialValue: D, errorHandler?: ErrorHandler) {
+  const [storedValue, setStoredValue] = useStateCallback<D>(initialValue);
+  const _errorHandler = useRef(typeof errorHandler == undefined || errorHandler == null ? defaultErrorHandler : errorHandler);
+
+  const error = (e?: Error) => {
+    _errorHandler.current(e);
+  };
+
+  useEffect(() => {
+    (async function () {
+      try {
+        const value: D | null = await localForage.getItem(key);
+        setStoredValue(value == null ? initialValue : value);
+      } catch (e) {
+        error(e as any);
+      }
+    })();
+  }, []);
+
+  const setValue: SetValue<D> = useCallback(
+    (value, callback) => {
+      const newValue = value instanceof Function ? value(storedValue) : value;
+      async function set(value: D, callback: ((state: D) => void) | undefined) {
+        try {
+          setStoredValue(value, callback);
+          await localForage.setItem(key, value);
+        } catch (e) {
+          error(e as any);
+        }
+      }
+
+      set(newValue, callback);
+    },
+    [key]
+  );
+
+  const removeValue = useCallback(() => {
+    async function remove() {
+      try {
+        setStoredValue(initialValue);
+        await localForage.removeItem(key);
+      } catch (e) {
+        error(e as any);
+      }
+    }
+
+    remove();
+  }, [key]);
+
+  return [storedValue, setValue, removeValue] as const;
+}

Website/src/hooks/useRepos.tsx

@@ -2,10 +2,12 @@ import React from "react";
 import { SetValue, useNativeStorage } from "./useNativeStorage";
 import axios from "axios";
 import { link } from "googlers-tools";
+import localForage from "localforage";
 import _ from "underscore";
 import { useSettings } from "./useSettings";
 import { os } from "@Native/Os";
 import { useLog } from "./native/useLog";
+import { useLocalForage } from "./useLocalForage";
 
 export interface RepoContextActions {
   addRepo: (data: AddRepoData) => void;
@@ -57,8 +59,20 @@ type SetRepoStateData = {
 };
 
 export const RepoProvider = (props: React.PropsWithChildren) => {
-  const log = useLog("RepoProvider");
-  const [repos, setRepos] = useNativeStorage<StoredRepo[]>("repos", []);
+  const TAG = "RepoProvider";
+  const log = useLog(TAG);
+  const [repos, setRepos, removeRepos] = useLocalForage<StoredRepo[]>("repos", [
+    {
+      name: "Magisk Modules Alt Repo (pre-configured)",
+      website: "",
+      support: "",
+      donate: "",
+      submitModule: "",
+      last_update: 1690995729000,
+      modules: "https://api.mmrl.dergoogler.com/json/mmar.json",
+    },
+  ]);
+
   const { settings, setSettings } = useSettings();
   const [modules, setModules] = React.useState<Module[]>([]);