Added more database sanity checks

src/contexts/AuthContext.js

@@ -19,7 +19,7 @@ try {
 }
 
 export function AuthProvider({ children }) {
-  const { database } = useContext(DatabaseContext);
+  const { database, databaseStatus } = useContext(DatabaseContext);
 
   const [password, setPassword] = useState(storage.getItem("auth") || "");
 
@@ -31,7 +31,7 @@ export function AuthProvider({ children }) {
 
   const [userId, setUserId] = useState();
   useEffect(() => {
-    if (!database) {
+    if (!database || databaseStatus === "loading") {
       return;
     }
     async function loadUserId() {
@@ -46,11 +46,11 @@ export function AuthProvider({ children }) {
     }
 
     loadUserId();
-  }, [database]);
+  }, [database, databaseStatus]);
 
   const [nickname, setNickname] = useState("");
   useEffect(() => {
-    if (!database) {
+    if (!database || databaseStatus === "loading") {
       return;
     }
     async function loadNickname() {
@@ -65,13 +65,17 @@ export function AuthProvider({ children }) {
     }
 
     loadNickname();
-  }, [database]);
+  }, [database, databaseStatus]);
 
   useEffect(() => {
-    if (nickname !== undefined && database !== undefined) {
+    if (
+      nickname !== undefined &&
+      database !== undefined &&
+      databaseStatus !== "loading"
+    ) {
       database.table("user").update("nickname", { value: nickname });
     }
-  }, [nickname, database]);
+  }, [nickname, database, databaseStatus]);
 
   const value = {
     userId,

src/contexts/DatabaseContext.js

@@ -11,11 +11,14 @@ export function DatabaseProvider({ children }) {
   useEffect(() => {
     // Create a test database and open it to see if indexedDB is enabled
     let testDBRequest = window.indexedDB.open("__test");
-    testDBRequest.onsuccess = function () {
+    testDBRequest.onsuccess = async function () {
       testDBRequest.result.close();
-      let db = getDatabase();
+      let db = getDatabase({ autoOpen: false });
       setDatabase(db);
+      db.on("ready", () => {
         setDatabaseStatus("loaded");
+      });
+      await db.open();
       window.indexedDB.deleteDatabase("__test");
     };
     // If indexedb disabled create an in memory database
@@ -23,9 +26,12 @@ export function DatabaseProvider({ children }) {
       console.warn("Database is disabled, no state will be saved");
       const indexedDB = await import("fake-indexeddb");
       const IDBKeyRange = await import("fake-indexeddb/lib/FDBKeyRange");
-      let db = getDatabase({ indexedDB, IDBKeyRange });
+      let db = getDatabase({ indexedDB, IDBKeyRange, autoOpen: false });
       setDatabase(db);
+      db.on("ready", () => {
         setDatabaseStatus("disabled");
+      });
+      await db.open();
       window.indexedDB.deleteDatabase("__test");
     };
   }, []);

src/contexts/MapDataContext.js

@@ -23,14 +23,14 @@ const defaultMapState = {
 };
 
 export function MapDataProvider({ children }) {
-  const { database } = useContext(DatabaseContext);
+  const { database, databaseStatus } = useContext(DatabaseContext);
   const { userId } = useContext(AuthContext);
 
   const [maps, setMaps] = useState([]);
   const [mapStates, setMapStates] = useState([]);
   // Load maps from the database and ensure state is properly setup
   useEffect(() => {
-    if (!userId || !database) {
+    if (!userId || !database || databaseStatus === "loading") {
       return;
     }
     async function getDefaultMaps() {
@@ -71,7 +71,7 @@ export function MapDataProvider({ children }) {
     }
 
     loadMaps();
-  }, [userId, database]);
+  }, [userId, database, databaseStatus]);
 
   /**
    * Adds a map to the database, also adds an assosiated state for that map

src/contexts/TokenDataContext.js

@@ -10,13 +10,13 @@ const TokenDataContext = React.createContext();
 const cachedTokenMax = 100;
 
 export function TokenDataProvider({ children }) {
-  const { database } = useContext(DatabaseContext);
+  const { database, databaseStatus } = useContext(DatabaseContext);
   const { userId } = useContext(AuthContext);
 
   const [tokens, setTokens] = useState([]);
 
   useEffect(() => {
-    if (!userId || !database) {
+    if (!userId || !database || databaseStatus === "loading") {
       return;
     }
     function getDefaultTokes() {
@@ -43,7 +43,7 @@ export function TokenDataProvider({ children }) {
     }
 
     loadTokens();
-  }, [userId, database]);
+  }, [userId, database, databaseStatus]);
 
   async function addToken(token) {
     await database.table("tokens").add(token);

src/routes/Game.js

@@ -85,7 +85,7 @@ function Game() {
   // Join game
   useEffect(() => {
     if (databaseStatus !== "loading") {
-      console.log("join");
+      console.log("join", databaseStatus);
       session.joinParty(gameId, password);
     }
   }, [gameId, password, databaseStatus]);