From df16384f070fddba89f7c9fb994e171cfec824b3 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Wed, 7 Feb 2024 09:22:28 +0200
Subject: [PATCH] seen_at db index, migrations, img crossorigin, errorpage
 clear opfs

---
 packages/app/src/Components/ProxyImg.tsx |  1 +
 packages/app/src/Pages/ErrorPage.tsx     | 40 ++++++++++++++---
 packages/worker-relay/src/migrations.ts  | 55 ++++++++++++------------
 3 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/packages/app/src/Components/ProxyImg.tsx b/packages/app/src/Components/ProxyImg.tsx
index a645d545..796f86ba 100644
--- a/packages/app/src/Components/ProxyImg.tsx
+++ b/packages/app/src/Components/ProxyImg.tsx
@@ -76,6 +76,7 @@ const ProxyImgComponent = forwardRef<HTMLImageElement, ProxyImgProps>(function P
       height={size}
       className={className}
       onError={handleImageError}
+      crossOrigin={props.crossOrigin ?? "anonymous"}
     />
   );
 });
diff --git a/packages/app/src/Pages/ErrorPage.tsx b/packages/app/src/Pages/ErrorPage.tsx
index cfc8c169..65538d3d 100644
--- a/packages/app/src/Pages/ErrorPage.tsx
+++ b/packages/app/src/Pages/ErrorPage.tsx
@@ -3,22 +3,50 @@ import { useRouteError } from "react-router-dom";
 
 import AsyncButton from "@/Components/Button/AsyncButton";
 import { db } from "@/Db";
+import debug from "debug";
+
+const log = debug("ErrorPage");
 
 const ErrorPage = () => {
   const error = useRouteError();
 
   console.error(error);
+
+  const clearOPFSData = async () => {
+    if ("showDirectoryPicker" in window) {
+      try {
+        // Request access to the root directory
+        const rootDirectoryHandle = await window.showDirectoryPicker();
+        // Recursively delete contents
+        for await (const entry of rootDirectoryHandle.values()) {
+          if (entry.kind === "file") {
+            await entry.remove();
+          } else if (entry.kind === "directory") {
+            await entry.removeRecursively();
+          }
+        }
+        log("OPFS data cleared successfully.");
+      } catch (e) {
+        log("Error clearing OPFS data:", e);
+      }
+    } else {
+      log("File System Access API is not supported in this browser.");
+    }
+  };
+
+  const handleClearData = async () => {
+    await db.delete(); // Delete IndexedDB
+    globalThis.localStorage.clear(); // Clear localStorage
+    await clearOPFSData(); // Attempt to clear OPFS data
+    globalThis.location.href = "/"; // Redirect to home
+  };
+
   return (
     <div className="p-2">
       <h4>
         <FormattedMessage defaultMessage="An error has occured!" id="FfYsOb" />
       </h4>
-      <AsyncButton
-        onClick={async () => {
-          await db.delete();
-          globalThis.localStorage.clear();
-          globalThis.location.href = "/";
-        }}>
+      <AsyncButton onClick={handleClearData}>
         <FormattedMessage defaultMessage="Clear cache and reload" id="HWbkEK" />
       </AsyncButton>
       <h5>{error.message}</h5>
diff --git a/packages/worker-relay/src/migrations.ts b/packages/worker-relay/src/migrations.ts
index cfba0662..986eca98 100644
--- a/packages/worker-relay/src/migrations.ts
+++ b/packages/worker-relay/src/migrations.ts
@@ -4,41 +4,31 @@ import debug from "debug";
 
 const log = debug("SqliteRelay:migrations");
 
-/**
- * Do database migration
- */
-function migrate(relay: SqliteRelay) {
+const migrations = [
+  { version: 1, script: migrate_v1 },
+  { version: 2, script: migrate_v2 },
+  { version: 3, script: migrate_v3 },
+  { version: 4, script: migrate_v4 },
+  { version: 5, script: migrate_v5 },
+];
+
+async function migrate(relay: SqliteRelay) {
   if (!relay.db) throw new Error("DB must be open");
 
-  relay.db.exec(
-    'CREATE TABLE IF NOT EXISTS "__migration" (version INTEGER,migrated NUMERIC, CONSTRAINT "__migration_PK" PRIMARY KEY (version))',
-  );
-  const res = relay.db.exec("select max(version) from __migration", {
-    returnValue: "resultRows",
-  });
+  const res = relay.db.exec("SELECT MAX(version) FROM __migration", { returnValue: "resultRows" });
+  let currentVersion = (res[0][0] as number | undefined) ?? 0;
 
-  const version = (res[0][0] as number | undefined) ?? 0;
-  log(`Starting migration from: v${version}`);
-  if (version < 1) {
-    migrate_v1(relay);
-    log("Migrated to v1");
-  }
-  if (version < 2) {
-    migrate_v2(relay);
-    log("Migrated to v2");
-  }
-  if (version < 3) {
-    migrate_v3(relay);
-    log("Migrated to v3");
-  }
-  if (version < 4) {
-    migrate_v4(relay);
-    log("Migrated to v4");
+  for (const { version, script } of migrations) {
+    if (currentVersion < version) {
+      log(`Migrating to v${version}`);
+      await script(relay);
+      currentVersion = version;
+    }
   }
 }
 
 function migrate_v1(relay: SqliteRelay) {
-  relay.db?.transaction(db => {
+  return relay.db?.transaction(db => {
     db.exec(
       "CREATE TABLE events (\
       id TEXT(64) PRIMARY KEY, \
@@ -98,4 +88,13 @@ async function migrate_v4(relay: SqliteRelay) {
   });
 }
 
+async function migrate_v5(relay: SqliteRelay) {
+  relay.db?.transaction(db => {
+    db.exec("CREATE INDEX seen_at_IDX ON events (seen_at)");
+    db.exec("insert into __migration values(5, ?)", {
+      bind: [new Date().getTime() / 1000],
+    });
+  });
+}
+
 export default migrate;