From bc1b23498c495d1cbf1618262dbc12cdd3a51d8c Mon Sep 17 00:00:00 2001
From: ColinSalem <colintsalem@gmail.com>
Date: Tue, 4 Feb 2025 14:59:14 -0600
Subject: [PATCH] Hotfix for offline images sometimes not uploading when a
 connection is established.

---
 .../knowyourwell/ClientApp/src/App.js         |  2 +-
 .../ClientApp/src/components/login.js         | 19 ++++++++++++++---
 .../ClientApp/src/setupIndexedDB.js           | 21 ++++++++++++++-----
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/knowyourwell/knowyourwell/ClientApp/src/App.js b/knowyourwell/knowyourwell/ClientApp/src/App.js
index e0917e66f..951cacf19 100644
--- a/knowyourwell/knowyourwell/ClientApp/src/App.js
+++ b/knowyourwell/knowyourwell/ClientApp/src/App.js
@@ -24,7 +24,7 @@ import { useState, useEffect } from "react";
 import { UserProvider } from "./components/usercontext";
 import ViewImage from "./components/viewImage";
 import uploadPhoto from "./components/reusable/photoUpload";
-import { clearObjectStore, getAllFromDB, getFromDB, idbName } from "./setupIndexedDB";
+import { clearObjectStore, getAllFromDB, idbName } from "./setupIndexedDB";
 
 export default function App() {
 
diff --git a/knowyourwell/knowyourwell/ClientApp/src/components/login.js b/knowyourwell/knowyourwell/ClientApp/src/components/login.js
index 7ab0af5b1..0ae54d0e1 100644
--- a/knowyourwell/knowyourwell/ClientApp/src/components/login.js
+++ b/knowyourwell/knowyourwell/ClientApp/src/components/login.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import "./css/login_signup.css";
 import Axios from "axios";
 import { useNavigate } from "react-router-dom";
@@ -9,13 +9,22 @@ import { useUser } from "./usercontext";
 export default function Login() {
   const navigate = useNavigate();
   const { setUser } = useUser();
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     setUser(null);
   })
 
+  useEffect(() => {
+    async function initializeDB() {
+      setLoading(true);
+      await setupIndexedDB();
+      setLoading(false);
+    }
+    initializeDB();
+  }, []);
+
   const initRedirectRequest = async () => {
-    await setupIndexedDB();
     if (
       window.location.href.indexOf("kywtest") > -1 ||
       process.env.NODE_ENV !== "production"
@@ -66,8 +75,12 @@ export default function Login() {
             type="button"
             className="btn btn-primary btn-lg"
             onClick={initRedirectRequest}
+            disabled={loading}
           >
-            Login with School Credentials
+            {loading ?
+              "Loading..." :
+              "Login with School Credentials"
+            }
           </button>
         </div>
       </div>
diff --git a/knowyourwell/knowyourwell/ClientApp/src/setupIndexedDB.js b/knowyourwell/knowyourwell/ClientApp/src/setupIndexedDB.js
index 28e7f7565..c88927958 100644
--- a/knowyourwell/knowyourwell/ClientApp/src/setupIndexedDB.js
+++ b/knowyourwell/knowyourwell/ClientApp/src/setupIndexedDB.js
@@ -19,12 +19,23 @@ export default async function setupIndexedDB() {
 async function createLocalDB() {
   // If you are updating the schema of the database, you need to increment the version number or users with a local instance of the IndexedDB will not have their database restructured.
   await openDB(idbName, 2, {
-    upgrade(db) {
-      db.createObjectStore("tblTooltip", { keyPath: "prompt_id" });
-      db.createObjectStore("tblTooltipImage", { keyPath: "image_id" });
-      db.createObjectStore("tooltip-images");
-      db.createObjectStore("imageUploadQueue", { keyPath: "id", autoIncrement: true });
+    upgrade(db, oldVersion, newVersion) {
+      if (oldVersion < 1) {
+        db.createObjectStore("tblTooltip", { keyPath: "prompt_id" });
+        db.createObjectStore("tblTooltipImage", { keyPath: "image_id" });
+        db.createObjectStore("tooltip-images");
+      }
+      // When you modify the schema of the database, you need to take into account any adjustments that need to be made from version-to-version.
+      if (oldVersion < 2) {
+        db.createObjectStore("imageUploadQueue", { keyPath: "id", autoIncrement: true });
+      }
+      if (oldVersion < newVersion) {
+        window.location.reload();
+      }
     },
+    blocked() {
+      alert("Please close all open tabs to the site for an update to occur.");
+    }
   });
 }