diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js index efa8c84..6726653 100644 --- a/src/contexts/AuthContext.js +++ b/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, diff --git a/src/contexts/DatabaseContext.js b/src/contexts/DatabaseContext.js index 7492682..98ee4d0 100644 --- a/src/contexts/DatabaseContext.js +++ b/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); - setDatabaseStatus("loaded"); + 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); - setDatabaseStatus("disabled"); + db.on("ready", () => { + setDatabaseStatus("disabled"); + }); + await db.open(); window.indexedDB.deleteDatabase("__test"); }; }, []); diff --git a/src/contexts/MapDataContext.js b/src/contexts/MapDataContext.js index 92488de..d2ef3c6 100644 --- a/src/contexts/MapDataContext.js +++ b/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 diff --git a/src/contexts/TokenDataContext.js b/src/contexts/TokenDataContext.js index 286fc1e..ed576de 100644 --- a/src/contexts/TokenDataContext.js +++ b/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); diff --git a/src/routes/Game.js b/src/routes/Game.js index 1e979c1..746d98b 100644 --- a/src/routes/Game.js +++ b/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]);