fix: Resolve badge search reactivity and SSR issues

This commit fixes several issues with the new badge search functionality. It resolves a 500 Internal Error by moving the Dexie liveQuery into an onMount block to prevent server-side execution. It also fixes a Svelte 5 reactivity issue by using a more explicit subscription pattern for the liveQuery and by correctly accessing state variables in the template. The badge search results are now correctly displayed.
This commit is contained in:
Scott Idem
2025-11-18 17:30:57 -05:00
parent d678f97324
commit 69c34fa4bc
11 changed files with 117 additions and 191 deletions

View File

@@ -50,16 +50,20 @@
let url_test_val = data.url.searchParams.get('test_val');
console.log(`URL test_val = ${url_test_val}`);
let lq__event_obj = $derived(
liveQuery(async () => {
if (log_lvl) {
console.log(`*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`);
}
let results = await db_events.event.get($events_slct?.event_id ?? '');
import { onMount } from 'svelte';
return results;
})
);
let lq__event_obj = $state(null);
onMount(() => {
const observable = liveQuery(() => db_events.event.get($events_slct?.event_id ?? ''));
const subscription = observable.subscribe((value) => {
lq__event_obj = value;
});
return () => {
subscription.unsubscribe();
};
});
let event_badge_id_li: Array<string> = $state([]);
// let dq__where_type_id_val: string = `event_id_random`;
@@ -95,7 +99,7 @@
<svelte:head>
<title>
Badges -
{ae_util.shorten_string({ string: $lq__event_obj?.name ?? '-- not set --', max_length: 12 })}
{ae_util.shorten_string({ string: lq__event_obj?.name ?? '-- not set --', max_length: 12 })}
- OSIT's &AElig; Events
</title>
</svelte:head>
@@ -106,7 +110,6 @@
<Comp_badge_search
event_id={$events_slct?.event_id ?? ''}
bind:use_id_li={$events_sess.badges.use_id_li}
bind:event_badge_id_li
bind:search_status={$events_sess.badges.search_status}
bind:search_complete={$events_sess.badges.search_complete}
bind:qry_str={$events_loc.badges.fulltext_search_qry_str}
@@ -123,8 +126,7 @@
<!-- This is how we reset the Dixie liveQuery when the search parameters change. I wish there was a better way??? -->
{#if $events_sess?.badges?.search_status != 'loading' && $events_sess?.badges?.search_status != 'processing'}
<Comp_badge_obj_li
bind:use_id_li={$events_sess.badges.use_id_li}
{event_badge_id_li}
badge_obj_li={$events_sess.badge_li}
qry_str={$events_loc.badges.fulltext_search_qry_str}
qry_type_code={$events_loc.badges.search_badge_type_code}
log_lvl={1}