Local database is now deleted on log out.

Also added a debug button to do this.
ashleydavis · Jun 21, 2024 · 359718f · 359718f
1 parent 0bff751
commit 359718f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 20 deletions.
diff --git a/packages/user-interface/src/context/indexeddb-context.tsx b/packages/user-interface/src/context/indexeddb-context.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode, createContext, useContext, useEffect, useRef } from "react";
-import { IIndexeddbDatabaseConfiguration, openDatabase } from "../lib/database/indexeddb/indexeddb";
+import { IIndexeddbDatabaseConfiguration, deleteDatabase as _deleteDatabase, openDatabase } from "../lib/database/indexeddb/indexeddb";
 import { IDatabase } from "../lib/database/database";
 import { IndexeddbDatabase } from "../lib/database/indexeddb/indexeddb-database";
 
@@ -39,6 +39,11 @@ export interface IIndexeddbContext {
     // The application's database.
     //
     database: IDatabase;
+
+    //
+    // Deletes the local copy of the database.
+    //
+    deleteDatabase(): Promise<void>;
 }
 
 const IndexeddbContext = createContext<IIndexeddbContext | undefined>(undefined);
@@ -49,29 +54,47 @@ export interface IProps {
 
 export function IndexeddbContextProvider({ children }: IProps) {
 
-    const database = useRef<IDatabase | undefined>(new IndexeddbDatabase(
+    const database = useRef<IDatabase>(new IndexeddbDatabase(
         async () => {
+            if (indexeddb.current) {
+                // Database connection is already open.
+                return indexeddb.current; 
+            }
+
+            // Opens the database connection.
             indexeddb.current = await openDatabase("photosphere", databaseConfiguration);
             return indexeddb.current;
         }
     ));
     const indexeddb = useRef<IDBDatabase | undefined>(undefined);
 
+    //
+    // Closes the database connection.
+    //
+    function closeDatabase() {
+        if (indexeddb.current) {
+            indexeddb.current.close();
+            indexeddb.current = undefined;
+        }
+    }    
+
     useEffect(() => {
         return () => {
-            if (indexeddb.current) {
-                indexeddb.current.close();
-                indexeddb.current = undefined;
-            }
-
-            if (database.current) {
-                database.current = undefined;
-            }
+            closeDatabase();
         };
     }, []);
 
+    //
+    // Deletes the local copy of the database.
+    //
+    async function deleteDatabase(): Promise<void> {
+        closeDatabase();
+        await _deleteDatabase("photosphere");
+    }
+
     const value: IIndexeddbContext = {
-        database: database.current!,
+        database: database.current,
+        deleteDatabase,
     };
 
     return (

diff --git a/packages/user-interface/src/lib/database/indexeddb/indexeddb-database.ts b/packages/user-interface/src/lib/database/indexeddb/indexeddb-database.ts
@@ -15,11 +15,4 @@ export class IndexeddbDatabase implements IDatabase {
     collection<RecordT extends IRecord>(collectionName: string): IDatabaseCollection<RecordT> {
         return new IndexeddbDatabaseCollection<RecordT>(collectionName, this.openDb);
     }
-
-    //
-    // Unwraps the indexeddb database.
-    //
-    async getIndexedDb(): Promise<IDBDatabase> {
-        return this.openDb();
-    }
 }
diff --git a/packages/user-interface/src/main.tsx b/packages/user-interface/src/main.tsx
@@ -8,6 +8,8 @@ import { isProduction, useAuth } from "./context/auth-context";
 import { useGallery } from "./context/gallery-context";
 import classNames from "classnames";
 import { useApp } from "./context/app-context";
+import { deleteDatabase } from "./lib/database/indexeddb/indexeddb";
+import { useIndexeddb } from "./context/indexeddb-context";
 const FPSStats = require("react-fps-stats").default;
 
 
@@ -48,6 +50,10 @@ export function Main({ computerPage }: IMainProps) {
         setSetId,
     } = useApp();
 
+    const {
+        deleteDatabase
+    } = useIndexeddb();
+
     //
     // Interface to the upload context.
     //
@@ -125,6 +131,12 @@ export function Main({ computerPage }: IMainProps) {
         }
     }
 
+    async function onLogOut() {
+        await logout();
+
+        await deleteDatabase();
+    }
+
     return (
         <>
             <div id="navbar" className={(openSearch ? "search": "")} >
@@ -222,7 +234,7 @@ export function Main({ computerPage }: IMainProps) {
                         {isAuthenticated && (
                             <div className="ml-1 mr-2 sm:mr-4">
                                 <button
-                                    onClick={logout}
+                                    onClick={onLogOut}
                                     >
                                     <i className="w-5 fa-solid fa-right-from-bracket"></i>
                                     <span className="hidden sm:inline ml-1">Log out</span>
@@ -271,7 +283,7 @@ export function Main({ computerPage }: IMainProps) {
 
             </div>
 
-            <div id="sidebar" className={sidebarOpen ? "open" : ""} >
+            <div id="sidebar" className={classNames("flex flex-col", { "open": sidebarOpen})} >            
                 <div className="flex flex-row items-center mt-4 mb-8">
                     <h1 className="text-xl">
                         Photosphere
@@ -356,6 +368,17 @@ export function Main({ computerPage }: IMainProps) {
                         );                    
                     })}
                 </div>
+
+                <div className="flex-grow" />
+
+                {!isProduction && (
+                    <button 
+                        className="flex flex-row items-center p-2 m-2 cursor-pointer"
+                        onClick={deleteDatabase}
+                        >
+                        Delete local database
+                    </button>
+                )}
             </div>
 
             <div id="main">