From fb937290eb83dac2d0cba379f649fbc1f94d8def Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 18 Apr 2025 13:38:47 -0400
Subject: [PATCH] Making a better version check and refresh/reload

---
 src/lib/ae_stores.ts               |  18 +--
 src/lib/element_sign_in_out.svelte |   6 +-
 src/routes/+layout.svelte          | 250 ++++++++++++++++++++++++-----
 src/routes/+layout.ts              |   2 +-
 4 files changed, 221 insertions(+), 55 deletions(-)

diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index 5a74997c..38449e2c 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -47,14 +47,14 @@ export let ae_snip = string_snippets;
 //     };
 
 // Set the version for the app data. Changing this should force a notification and ask the user to clear and reload the page.
-let ver = '2024-08-21_1736';
-let ver_idb = '2024-10-16_1540';
+let ver = '2025-04-18_1335';
+let ver_idb = '2025-04-18_1100'; // Not used
 
 // *** BEGIN *** Longer-term app data. This should be stored to local storage.
 export let ae_app_local_data_struct: key_val = {
     last_idb_reload: null,
-    ver: '2024-10-16_1540',
-    ver_idb: '2024-10-16_1540', // Clear if date IndexedDB version
+    ver: ver, // '2025-04-18_1100',
+    ver_idb: ver_idb, // '2025-04-18_1100',
     name: 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)',
     theme: 'light',
     theme_mode: 'light',
@@ -116,6 +116,8 @@ export let ae_app_local_data_struct: key_val = {
         // affiliations: null,
         primary_email: null, // The primary email of the logged-in person/user
         user_id: null, // The user ID of the logged-in user
+
+        show_content__person_page_help: false,
     },
 
     // Added 2025-04-04
@@ -239,10 +241,6 @@ export let ae_app_local_data_struct: key_val = {
         'testing': {},
     },
 
-    'person': {
-        show_content__person_page_help: false,
-    },
-
     test: true,
 }
 // console.log(`AE Stores - App Local Storage Data:`, ae_app_local_data_struct);
@@ -257,8 +255,8 @@ export let ae_loc: Writable<key_val> = localStorageStore('ae_loc', ae_app_local_
 
 // *** BEGIN *** Temporary app data. This should be stored to session storage.
 export let ae_app_session_data_struct: key_val = {
-    'ver': '2024-10-16_1540',
-    // ver_idb: ver_idb,
+    ver: ver, // '2025-04-18_1100',
+    ver_idb: ver_idb,
     log_lvl: 0,
 
     // 'name': 'Aether App Template',
diff --git a/src/lib/element_sign_in_out.svelte b/src/lib/element_sign_in_out.svelte
index fa7051ed..fd680801 100644
--- a/src/lib/element_sign_in_out.svelte
+++ b/src/lib/element_sign_in_out.svelte
@@ -276,7 +276,7 @@ async function handle_change_password() {
                 Hide Sign-In Options
             {:else}
                 <User class="mx-1 inline-block text-gray-500" />
-                {$ae_loc?.person.full_name ?? '-- not set --'}
+                {$ae_loc?.person?.full_name ?? '-- not set --'}
             {/if}
         {:else}
 
@@ -308,7 +308,7 @@ async function handle_change_password() {
                         $ae_sess.show__sign_in_out__fields = !$ae_sess.show__sign_in_out__fields; // Toggle the visibility of the sign-in form
                     }}
                     > -->
-                    {$ae_loc?.person.full_name ?? '-- not set --'}
+                    {$ae_loc?.person?.full_name ?? '-- not set --'}
                     <!-- <span class="text-sm text-gray-500">
                     {$ae_loc?.user.username ?? '-- not set --'}
                     </span> -->
@@ -607,7 +607,7 @@ async function handle_change_password() {
 
     <div class="flex flex-col gap-1 items-end justify-center">
         <span class="text-sm text-gray-500">
-            {$ae_loc?.user.username ?? '-- not set --'}
+            {$ae_loc?.user?.username ?? '-- not set --'}
         </span>
 
         <!-- Display change password option if the user is signed in and in Edit Mode -->
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 183c50f9..6901ffd8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 /** @type {import('./$types').LayoutData} */
+// /** @type {import('./$types').LayoutProps} */
+
 let log_lvl: number = 0;
 
 // *** Import Svelte specific
+// import { tick } from 'svelte';
+import { goto } from '$app/navigation';
 import '../app.postcss';
 
 // *** Import other supporting libraries
@@ -71,10 +75,6 @@ if (log_lvl > 1) {
     console.log(`ae_root +layout.svelte data:`, data);
 }
 
-if (!$ae_loc?.app_cfg?.show_element__menu_btn) {
-    $ae_loc.app_cfg.show_element__menu = false;
-    $ae_loc.app_cfg.show_element__menu_btn = true;
-}
 
 // let account_id = localStorage.getItem('ae_account_id');
 // console.log(`account_id = `, account_id);
@@ -110,20 +110,68 @@ if (log_lvl > 1) {
     console.log(`$slct = `, $slct);
 }
 
-// This should only be temporary.
-if (!$ae_loc.app_cfg) {
-    $ae_loc.app_cfg = {};
-}
+// // This should only be temporary.  || !$ae_loc?.person || !$ae_loc?.user
+// if (!$ae_loc) {
+//     console.log('No ae_loc. Reloading page...');
+//     window.location.reload();
+// } else if ($ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver)) {
+//     console.log('New version of the ae_loc (core local storage) available!!!');
+//     console.log(`$ae_loc.ver: ${$ae_loc.ver} != $ae_sess.ver: ${$ae_sess.ver}`);
+
+//     // alert('New version available!!!');
+
+//     // $ae_loc.ver = $ae_sess.ver;
+
+//     // This does not seem to work fast enough or something?
+//     // goto('/', {replaceState: true, invalidateAll: true});
+
+//     console.log('Clearing localStorage...');
+//     // $ae_loc = null;
+//     // localStorage.removeItem('ae_loc');
+//     // localStorage.removeItem('ae_idaa_loc');
+//     // localStorage.removeItem('ae_journals_loc');
+//     // localStorage.removeItem('ae_events_loc');
+//     localStorage.clear();
+
+//     // sessionStorage.removeItem('ae_sess');
+//     // sessionStorage.removeItem('events_sess');
+//     // console.log('Clearing sessionStorage...');
+//     // sessionStorage.clear();
+//     console.log('Reloading page...');
+//     location.reload();
+// } else if (!$ae_loc?.app_cfg) {
+//     console.log('No ae_loc.app_cfg. Reloading page...?');
+
+//     // $ae_loc = {};
+//     // localStorage.removeItem('ae_loc');
+//     // localStorage.removeItem('ae_idaa_loc');
+//     // localStorage.removeItem('ae_journals_loc');
+//     // localStorage.removeItem('ae_events_loc');
+//     // localStorage.clear();
+
+//     // sessionStorage.removeItem('ae_sess');
+//     // sessionStorage.removeItem('events_sess');
+//     // sessionStorage.clear();
+
+//     // window.location.reload();
+//     // location.reload();
+//     // tick();
+//     // $ae_loc.app_cfg = {};
+// } else if ($ae_loc?.app_cfg && !$ae_loc?.app_cfg?.show_element__menu_btn) {
+//     console.log('No ae_loc.app_cfg.show_element__menu_btn. Forcing show.');
+//     $ae_loc.app_cfg.show_element__menu_btn = true;
+//     $ae_loc.app_cfg.show_element__menu = false;
+// }
 
 // IDB caches - Check if the last reload timestamp for $ae_loc.last_idb_reload is no more than 15 minutes ago.
 let default_idb_reload_time = 120 * 60 * 1000; // 15 minutes?
 let trusted_idb_reload_time = 4 * 60 * 60 * 1000; // 4 hours or 120 minutes?
 
 // There should almost always be an event_id set.
-if ($ae_loc?.site_cfg_json.slct__event_id) {
+if ($ae_loc?.site_cfg_json?.slct__event_id) {
     $events_slct.event_id = $ae_loc.site_cfg_json.slct__event_id;
     $events_loc.event_id = $ae_loc.site_cfg_json.slct__event_id;
-} else if ($events_slct.event_id) {
+} else if ($events_slct?.event_id) {
     // console.log(`Event ID already set:`, $events_slct.event_id);
     $events_loc.event_id = $events_slct.event_id;
 } else {
@@ -133,10 +181,19 @@ if ($ae_loc?.site_cfg_json.slct__event_id) {
 }
 
 // This is mainly for Precon CHOW
-if ($ae_loc.site_cfg_json.slct__sponsorship_cfg_id) {
+if ($ae_loc?.site_cfg_json?.slct__sponsorship_cfg_id) {
     $slct.sponsorship_cfg_id = $ae_loc.site_cfg_json.slct__sponsorship_cfg_id;
-    $ae_loc.mod.sponsorships.cfg_id = $ae_loc.site_cfg_json.slct__sponsorship_cfg_id;
-} else if ($ae_loc.sponsorship_cfg_id) {
+    if ($ae_loc?.mod?.sponsorships) {
+        $ae_loc.mod.sponsorships.cfg_id = $ae_loc.site_cfg_json.slct__sponsorship_cfg_id;
+    } else {
+        $ae_loc.mod = {
+            ...$ae_loc.mod,
+            sponsorships: {
+                cfg_id: $ae_loc.site_cfg_json.slct__sponsorship_cfg_id
+            }
+        };
+    }
+} else if ($ae_loc?.sponsorship_cfg_id) {
     $slct.sponsorship_cfg_id = $ae_loc.sponsorship_cfg_id;
     $ae_loc.mod.sponsorships.cfg_id = $ae_loc.sponsorship_cfg_id;
 } else {
@@ -179,6 +236,89 @@ if ($ae_loc.site_access_key || $ae_loc.site_domain_access_key) {
 
 
 if (browser) {
+    if (!$ae_loc) {
+        console.log('No ae_loc. Reloading page...');
+        // window.location.reload();
+    } else if ($ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver)) {
+        console.log('New version of the ae_loc (core local storage) available!!!');
+        console.log(`$ae_loc.ver: ${$ae_loc.ver} != $ae_sess.ver: ${$ae_sess.ver}`);
+
+        // alert('New version available!!!');
+
+        // $ae_loc.ver = $ae_sess.ver;
+
+        // console.log('Clearing localStorage...');
+        // $ae_loc = null;
+        // $ae_loc = {};
+        // localStorage.removeItem('ae_loc');
+        // localStorage.removeItem('ae_idaa_loc');
+        // localStorage.removeItem('ae_journals_loc');
+        // localStorage.removeItem('ae_events_loc');
+        // localStorage.clear();
+
+        // sessionStorage.removeItem('ae_sess');
+        // sessionStorage.removeItem('events_sess');
+        // console.log('Clearing sessionStorage...');
+        // sessionStorage.clear();
+
+        // Go to root if not already there. Do this in case things have significantly changed, including routes. We need them to manually click the Reload and Clear Cache button.
+        console.log('Going to root page...');
+        if (data.route.id !== '/') {
+            goto('/', {replaceState: true, invalidateAll: true});
+        }
+    } else if (!$ae_loc?.app_cfg) {
+        console.log('No ae_loc.app_cfg. Reloading page...?');
+
+        // $ae_loc = {};
+        // localStorage.removeItem('ae_loc');
+        // localStorage.removeItem('ae_idaa_loc');
+        // localStorage.removeItem('ae_journals_loc');
+        // localStorage.removeItem('ae_events_loc');
+        // localStorage.clear();
+
+        // sessionStorage.removeItem('ae_sess');
+        // sessionStorage.removeItem('events_sess');
+        // sessionStorage.clear();
+
+        // window.location.reload();
+        // location.reload();
+        // tick();
+        // $ae_loc.app_cfg = {};
+    } else if ($ae_loc?.app_cfg && !$ae_loc?.app_cfg?.show_element__menu_btn) {
+        console.log('No ae_loc.app_cfg.show_element__menu_btn. Forcing show.');
+        $ae_loc.app_cfg.show_element__menu_btn = true;
+        $ae_loc.app_cfg.show_element__menu = false;
+    }
+
+    // if ($ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver)) {
+    //     console.log('New version of the ae_loc (core local storage) available!!!');
+    //     console.log(`$ae_loc.ver: ${$ae_loc.ver} != $ae_sess.ver: ${$ae_sess.ver}`);
+
+    //     // alert('New version available!!!');
+
+    //     $ae_loc.ver = $ae_sess.ver;
+
+    //     // This does not seem to work fast enough or something?
+    //     // goto('/', {replaceState: true, invalidateAll: true});
+
+    //     console.log('Clearing localStorage...');
+    //     $ae_loc = null;
+    //     // localStorage.removeItem('ae_loc');
+    //     // localStorage.removeItem('ae_idaa_loc');
+    //     // localStorage.removeItem('ae_journals_loc');
+    //     // localStorage.removeItem('ae_events_loc');
+    //     // localStorage.clear();
+
+    //     // sessionStorage.removeItem('ae_sess');
+    //     // sessionStorage.removeItem('events_sess');
+    //     // console.log('Clearing sessionStorage...');
+    //     // sessionStorage.clear();
+    //     // tick();
+
+    //     // window.location.reload();
+    //     location.reload();
+    // }
+
     if (!$ae_loc.last_idb_reload) {
         if (log_lvl) {
             console.log(`Last reload not found. Need to set!`);
@@ -190,6 +330,7 @@ if (browser) {
         indexedDB.deleteDatabase('ae_archives_db');
         indexedDB.deleteDatabase('ae_core_db');
         indexedDB.deleteDatabase('ae_events_db');
+        indexedDB.deleteDatabase('ae_journals_db');
         indexedDB.deleteDatabase('ae_notes_db');
         indexedDB.deleteDatabase('ae_posts_db');
     } else if ($ae_loc.last_idb_reload && $ae_loc.trusted_access && (Date.now() - $ae_loc.last_idb_reload) > trusted_idb_reload_time) {
@@ -203,6 +344,7 @@ if (browser) {
         indexedDB.deleteDatabase('ae_archives_db');
         indexedDB.deleteDatabase('ae_core_db');
         indexedDB.deleteDatabase('ae_events_db');
+        indexedDB.deleteDatabase('ae_journals_db');
         indexedDB.deleteDatabase('ae_notes_db');
         indexedDB.deleteDatabase('ae_posts_db');
 
@@ -221,6 +363,7 @@ if (browser) {
         indexedDB.deleteDatabase('ae_archives_db');
         indexedDB.deleteDatabase('ae_core_db');
         indexedDB.deleteDatabase('ae_events_db');
+        indexedDB.deleteDatabase('ae_journals_db');
         indexedDB.deleteDatabase('ae_notes_db');
         indexedDB.deleteDatabase('ae_posts_db');
 
@@ -234,6 +377,7 @@ if (browser) {
         }
     }
 
+
     // Waiting until the browser exists.
     // if ($ae_loc && $ae_sess && $ae_loc.ver_idb != $ae_sess.ver_idb) {
     //     console.log('New version of the IDB available!!!');
@@ -251,29 +395,6 @@ if (browser) {
     //     window.location.reload();
     // }
 
-    if ($ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver)) {
-        console.log('New version of the data store available!!!');
-        console.log(`$ae_loc.ver: ${$ae_loc.ver} != $ae_sess.ver: ${$ae_sess.ver}`);
-
-        // alert('New version available!!!');
-
-        $ae_loc.ver = $ae_sess.ver;
-
-        // This does not seem to work fast enough or something?
-        // goto('/', {replaceState: true, invalidateAll: true});
-
-        // $ae_loc = {};
-        localStorage.removeItem('ae_loc');
-        localStorage.removeItem('events_loc');
-        localStorage.clear();
-
-        // sessionStorage.removeItem('ae_sess');
-        // sessionStorage.removeItem('events_sess');
-        sessionStorage.clear();
-
-        window.location.reload();
-    }
-
 
     // save_ds_to_local(ae_acct.ds);
     let ae_ds = ae_acct.ds;
@@ -421,8 +542,53 @@ $effect(() => {
 
 <!-- regionFooter="flex justify-end space-x-2" -->
 
-{#if
-    $ae_loc?.allow_access}
+{#if (browser && $ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver))}
+    <div class="flex flex-col items-center justify-center h-full max-w-lg mx-auto space-y-4">
+        <h1 class="text-4xl font-bold text-red-500">New Version Available</h1>
+        <p class="text-lg text-center text-gray-500">A new version of the site is available. Please reload the page.</p>
+        <button
+            type="button"
+            onclick={() => {
+                // Clear the IndexedDB
+                indexedDB.deleteDatabase('ae_core_db');
+                indexedDB.deleteDatabase('ae_archives_db');
+                indexedDB.deleteDatabase('ae_events_db');
+                indexedDB.deleteDatabase('ae_journals_db');
+                indexedDB.deleteDatabase('ae_posts_db');
+
+                // Clear localStorage and sessionStorage
+                localStorage.clear();
+                sessionStorage.clear();
+
+                window.location.reload();
+            }}
+            ondblclick={() => {
+                // Double click to clear all databases and reload the page.
+                indexedDB.deleteDatabase('ae_core_db');
+                indexedDB.deleteDatabase('ae_archives_db');
+                indexedDB.deleteDatabase('ae_events_db');
+                indexedDB.deleteDatabase('ae_journals_db');
+                indexedDB.deleteDatabase('ae_posts_db');
+
+                // Clear localStorage and sessionStorage
+                localStorage.clear();
+                sessionStorage.clear();
+
+                alert('Local and Session Storage cleared. The page should now refresh on its own.');
+                // window.location.reload({forceGet: true});
+                // window.location.reload(true);
+                window.location.reload();
+            }}
+            class="btn btn-lg m-1 variant-filled-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all"
+            title="Reload and clear the page cache"
+            >
+            <span class="fas fa-sync mx-1"></span>
+            Reload and Clear Cache
+        </button>
+    </div>
+
+{:else if $ae_loc?.allow_access}
+    <!-- Should we check for "browser" here as well? This may hide some status information as a page is loading. -->
 
     <!-- The children will contain top level (directly under body tag) div tag(s) or similar. Modal and AppShell should also be set there. The AppShell gives access to a header, footer, AppBar (usually under header),  -->
     {@render children?.()}
@@ -434,7 +600,8 @@ $effect(() => {
         class="flex flex-col items-center justify-center h-full max-w-lg mx-auto space-y-4"
         >
         <h1 class="text-4xl font-bold text-red-500">Access Denied</h1>
-        <p class="text-lg text-center text-gray-500">You do not have access to this site. You may need a passcode and or URL site key.</p>
+        <p class="text-lg text-center text-gray-500">You do not have access to this site. You may need a <strong>passcode</strong>, <strong>sign in link</strong>, and or <strong>URL site key</strong>.</p>
+        <!-- xx {JSON.stringify(data.route)} xx -->
         <button
             type="button"
             onclick={() => {
@@ -444,6 +611,7 @@ $effect(() => {
                 indexedDB.deleteDatabase('ae_events_db');
                 indexedDB.deleteDatabase('ae_journals_db');
                 indexedDB.deleteDatabase('ae_posts_db');
+
                 window.location.reload();
             }}
             ondblclick={() => {
@@ -504,10 +672,10 @@ max-w-max -->
 
     <span class="hidden">
         <User class="mx-1 inline-block text-gray-500" />
-        {$ae_loc?.person.full_name ?? '-- not set --'}<br />
+        {$ae_loc?.person?.full_name ?? '-- not set --'}<br />
         <!-- <ShieldUser /> -->
         <ShieldUser class="mx-1 inline-block text-gray-500" />
-        {$ae_loc?.user.username ?? '-- not set --'}<br />
+        {$ae_loc?.user?.username ?? '-- not set --'}<br />
     </span>
 
     {#if $ae_loc.edit_mode}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 02761b52..759e4874 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -111,7 +111,7 @@ export async function load({ fetch, params, parent, route, url }) { // params, r
         ae_root_layout_ts: true,
 
         params: params,
-
+        route: route,
         url: url,
 
          // Not really used yet