refactor(search): standardize debounced reactive search across modules
- Standardized the search pattern using Svelte 5 debounced $effects in Recovery Meetings, Badge Search, and Journals to eliminate manual triggers and stuttering. - Fixed a bug in 'ae_idaa_comp__event_obj_li.svelte' where the Results count was inconsistent with the displayed list by implementing a derived 'visible_event_obj_li' state. - Hardened 'ae_idaa_comp__event_obj_li_wrapper.svelte' to filter out 'undefined' entries from database 'bulkGet' calls. - Cleaned up legacy search handling code in 'ae_idaa_comp__event_obj_qry.svelte'. - Updated 'TODO.md' and 'GEMINI.md' to reflect search logic hardening accomplishments.
This commit is contained in:
@@ -68,300 +68,77 @@
|
||||
let event_id_random_li: Array<string> = $state([]);
|
||||
|
||||
// *** Functions and Logic
|
||||
// let lq_new__event_obj_li = $derived(liveQuery(async () => {
|
||||
// let link_to_type: string = 'account';
|
||||
// let link_to_id: string = $ae_lock.account_id;
|
||||
// if (log_lvl > 1) {
|
||||
// console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}; event_id_random_li:`, event_id_random_li);
|
||||
// }
|
||||
|
||||
// // Check if event_id_random_li is an array and not undefined
|
||||
// if (event_id_random_li) {
|
||||
// if (log_lvl) {
|
||||
// console.log(`Trying bulkGet:`, event_id_random_li);
|
||||
// }
|
||||
// let results = await db_events.event
|
||||
// .bulkGet(event_id_random_li);
|
||||
// Debounced Search Logic (Refactored 2026-01-27)
|
||||
let search_debounce_timer: any = null;
|
||||
let last_search_id = 0;
|
||||
|
||||
// return results;
|
||||
// } else if (link_to_type && link_to_id) {
|
||||
// if (log_lvl) {
|
||||
// console.log(`Trying where: ${link_to_type}; equals: ${link_to_id}`);
|
||||
// }
|
||||
// let results: any = null;
|
||||
// if ($idaa_loc.recovery_meetings.qry__order_by == 'name') {
|
||||
// results = await db_events.event
|
||||
// .where(`${link_to_type}_id`)
|
||||
// .equals(link_to_id)
|
||||
// .and((event) => {
|
||||
// return event.hide == false;
|
||||
// })
|
||||
// .and((event) => {
|
||||
// return event.enable == true;
|
||||
// })
|
||||
// .sortBy('name')
|
||||
// } else {
|
||||
// results = await db_events.event
|
||||
// .where(`${link_to_type}_id`)
|
||||
// .equals(link_to_id)
|
||||
// .and((event) => {
|
||||
// return event.hide == false;
|
||||
// })
|
||||
// .and((event) => {
|
||||
// return event.enable == true;
|
||||
// })
|
||||
// .sortBy('updated_on')
|
||||
// }
|
||||
|
||||
// return results;
|
||||
// } else {
|
||||
// if (log_lvl) {
|
||||
// console.log('Trying... Nothing to load');
|
||||
// }
|
||||
// return null;
|
||||
// }
|
||||
// }));
|
||||
|
||||
// let lq__event_obj = $derived(liveQuery(async () => {
|
||||
// let results = await db_events.event
|
||||
// .get($idaa_slct.event_id ?? '');
|
||||
|
||||
// return results;
|
||||
// }));
|
||||
|
||||
// This (event_li trigger for IDAA) is not currently being used.
|
||||
// Updated 2024-11-19
|
||||
// $effect(() => {
|
||||
// if ($idaa_trig.event_li) {
|
||||
// $idaa_trig.event_li = false;
|
||||
|
||||
// if (log_lvl) {
|
||||
// console.log(`Triggered: $idaa_trig.event_li`);
|
||||
// }
|
||||
|
||||
// if ($idaa_loc.recovery_meetings.qry__enabled !== 'all' || $idaa_loc.recovery_meetings.qry__hidden !== 'all') {
|
||||
// console.log(`Deleting disabled or hidden event.`);
|
||||
// let results = db_events.event
|
||||
// .clear();
|
||||
// console.log(`Deleted ${results} disabled event.`);
|
||||
|
||||
// }
|
||||
|
||||
// $idaa_prom.load__event_obj_li = events_func.load_ae_obj_li__event({
|
||||
// api_cfg: $ae_api,
|
||||
// for_obj_type: 'account',
|
||||
// for_obj_id: $ae_loc.account_id,
|
||||
// qry_conference: false,
|
||||
// enabled: $idaa_loc.recovery_meetings.qry__enabled,
|
||||
// hidden: $idaa_loc.recovery_meetings.qry__hidden,
|
||||
// limit: $idaa_loc.recovery_meetings.qry__limit,
|
||||
// order_by_li: $idaa_loc.recovery_meetings.qry__order_by_li,
|
||||
// try_cache: true,
|
||||
// log_lvl: log_lvl,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
// Updated 2024-11-19
|
||||
$effect(() => {
|
||||
if ($idaa_trig.event_li_qry) {
|
||||
$idaa_trig.event_li_qry = false;
|
||||
// Reactive dependencies
|
||||
const qry_str = $idaa_loc.recovery_meetings.qry__fulltext_str;
|
||||
const qry_physical = $idaa_loc.recovery_meetings.qry__physical;
|
||||
const qry_virtual = $idaa_loc.recovery_meetings.qry__virtual;
|
||||
const qry_type = $idaa_loc.recovery_meetings.qry__type;
|
||||
const qry_enabled = $idaa_loc.recovery_meetings.qry__enabled;
|
||||
const qry_hidden = $idaa_loc.recovery_meetings.qry__hidden;
|
||||
const qry_limit = $idaa_loc.recovery_meetings.qry__limit;
|
||||
const qry_order_by_li = $idaa_loc.recovery_meetings.qry__order_by_li;
|
||||
const account_id = $ae_loc.account_id;
|
||||
const s_trigger = $idaa_trig.event_li_qry;
|
||||
|
||||
log_lvl = 2;
|
||||
// Trigger search on parameter change (debounced)
|
||||
if (search_debounce_timer) clearTimeout(search_debounce_timer);
|
||||
search_debounce_timer = setTimeout(() => {
|
||||
handle_search_refresh();
|
||||
}, 350);
|
||||
|
||||
if (log_lvl) {
|
||||
console.log(`Triggered: $idaa_trig.event_li_qry`);
|
||||
}
|
||||
|
||||
// $idaa_sess.recovery_meetings.qry__status = 'loading';
|
||||
|
||||
let and_physical = $idaa_loc.recovery_meetings.qry__physical;
|
||||
let and_virtual = $idaa_loc.recovery_meetings.qry__virtual;
|
||||
let and_type = $idaa_loc.recovery_meetings.qry__type;
|
||||
let fulltext_str = $idaa_loc.recovery_meetings.qry__fulltext_str?.trim() ?? null;
|
||||
let enabled = $idaa_loc.recovery_meetings.qry__enabled;
|
||||
let hidden = $idaa_loc.recovery_meetings.qry__hidden;
|
||||
let limit = $idaa_loc.recovery_meetings.qry__limit;
|
||||
let order_by_li = $idaa_loc.recovery_meetings.qry__order_by_li;
|
||||
let search_delay = 15;
|
||||
let max_tries = 5;
|
||||
|
||||
if (enabled !== 'all' || hidden !== 'all') {
|
||||
console.log(`Deleting disabled or hidden event.`);
|
||||
let results = db_events.event.clear();
|
||||
console.log(`Deleted ${results} disabled event.`);
|
||||
}
|
||||
|
||||
if (
|
||||
$idaa_sess.recovery_meetings?.qry__status != null &&
|
||||
$idaa_sess.recovery_meetings?.qry__status != 'done'
|
||||
) {
|
||||
console.log(
|
||||
'*** TEST SEARCH - $idaa_sess.recovery_meetings.qry__status != done ***'
|
||||
);
|
||||
// WARNING: This is a temporary fix for the search string. It needs to be fixed in the future. Using lk_search_str for now.
|
||||
$idaa_sess.recovery_meetings.status_qry__last_request_str = fulltext_str;
|
||||
|
||||
// We want to delay the initial search request to give the previous search request to finish.
|
||||
let random_delay = Math.floor(Math.random() * 50);
|
||||
search_delay += 50 + random_delay;
|
||||
}
|
||||
|
||||
event_id_random_li = []; // Resetting this seems to help trigger the new results to show correctly??? 2025-07-10
|
||||
|
||||
let count = 0;
|
||||
let request_loop = setInterval(() => {
|
||||
count++;
|
||||
if (log_lvl) {
|
||||
console.log(
|
||||
`*** TEST SEARCH - Search delay: ${search_delay} *** loop count=${count}`
|
||||
);
|
||||
}
|
||||
if (count >= max_tries) {
|
||||
console.log('*** TEST SEARCH - Max tries reached ***');
|
||||
clearInterval(request_loop);
|
||||
}
|
||||
|
||||
if (
|
||||
$idaa_sess.recovery_meetings?.qry__status != null &&
|
||||
$idaa_sess.recovery_meetings?.qry__status != 'done'
|
||||
) {
|
||||
let random_delay = Math.floor(Math.random() * 25);
|
||||
search_delay += 25 + random_delay;
|
||||
console.log(
|
||||
`*** TEST SEARCH - $idaa_sess.recovery_meetings.qry__status == loading wait *** search_delay=${search_delay}`
|
||||
);
|
||||
// $idaa_sess.status_qry__last_request_str = fulltext_str;
|
||||
} else {
|
||||
console.log(
|
||||
'*** TEST SEARCH - $idaa_sess.recovery_meetings.qry__status != loading ***'
|
||||
);
|
||||
|
||||
$idaa_sess.recovery_meetings.qry__status = 'loading';
|
||||
// event_id_random_li = [];
|
||||
|
||||
and_physical ?? null;
|
||||
and_virtual ?? null;
|
||||
and_type ?? null;
|
||||
// if (and_type) and_type = and_type;
|
||||
// if (!and_type) {
|
||||
// and_type = null;
|
||||
// }
|
||||
|
||||
console.log(
|
||||
`TEST - and_physical: ${and_physical}; and_virtual: ${and_virtual}; and_type: ${and_type}; qry__fulltext_str: ${fulltext_str}`
|
||||
);
|
||||
|
||||
$idaa_prom.load__event_obj_qry = events_func
|
||||
.search__event({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_type: 'account',
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
|
||||
qry_conference: false,
|
||||
qry_physical: and_physical,
|
||||
qry_virtual: and_virtual,
|
||||
qry_type: and_type,
|
||||
qry_str: fulltext_str,
|
||||
|
||||
enabled: enabled,
|
||||
hidden: hidden,
|
||||
limit: limit,
|
||||
order_by_li: order_by_li,
|
||||
log_lvl: log_lvl
|
||||
})
|
||||
.then(function (search_results) {
|
||||
// Processing the results from the search.
|
||||
$idaa_sess.recovery_meetings.qry__status = 'processing';
|
||||
$idaa_slct.event_obj_li = search_results;
|
||||
if (log_lvl) {
|
||||
console.log(`Found ${search_results.length} matching events.`);
|
||||
console.log(
|
||||
'TEST SEARCH - Search done. Need to pull out the id_random list for bulk load.'
|
||||
);
|
||||
}
|
||||
event_id_random_li = generate_id_random_li({
|
||||
event_obj_li: search_results
|
||||
});
|
||||
|
||||
// $idaa_sess.recovery_meetings.qry__status = 'done';
|
||||
|
||||
// if (log_lvl) {
|
||||
//
|
||||
// }
|
||||
// console.log(`TEST search: ${$lq_kv__event_obj_li}`);
|
||||
|
||||
// event_id_random_li = [];
|
||||
|
||||
// // We need to loop through the array of objects and get the event_id_random from each object a new list of event_id_randoms. Then we can use this list to get the full objects from the database.
|
||||
// let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
|
||||
// if (search_results && search_results.length) {
|
||||
// for (let i = 0; i < search_results.length; i++) {
|
||||
// tmp_li.push($idaa_slct.event_obj_li[i].event_id_random);
|
||||
// }
|
||||
// }
|
||||
// event_id_random_li = tmp_li;
|
||||
})
|
||||
.finally(() => {
|
||||
// event_id_random_li = $idaa_slct.event_obj_li.map(session_obj => session_obj.event_id_random);
|
||||
|
||||
// Finally done with the search.
|
||||
$idaa_sess.recovery_meetings.qry__status = 'done';
|
||||
|
||||
if (log_lvl > 1) {
|
||||
console.log(
|
||||
`TEST SEARCH - qry__status: ${$idaa_sess.recovery_meetings.qry__status} event_id_random_li:`,
|
||||
event_id_random_li
|
||||
);
|
||||
// console.log(`TEST SEARCH - search live query: ${$lq_kv__event_obj_li}`);
|
||||
}
|
||||
});
|
||||
clearInterval(request_loop);
|
||||
}
|
||||
}, search_delay);
|
||||
}
|
||||
return () => {
|
||||
if (search_debounce_timer) clearTimeout(search_debounce_timer);
|
||||
};
|
||||
});
|
||||
|
||||
// $effect(() => {
|
||||
// if ($idaa_sess.recovery_meetings.qry__status == 'done') {
|
||||
// if (log_lvl) {
|
||||
// console.log(`*** TEST SEARCH - $idaa_sess.recovery_meetings.qry__status == done ***`);
|
||||
// }
|
||||
// // We are done with the search.
|
||||
// $idaa_sess.recovery_meetings.qry__status = null;
|
||||
async function handle_search_refresh() {
|
||||
const current_search_id = ++last_search_id;
|
||||
|
||||
if (log_lvl) console.log(`[Search #${current_search_id}] Refreshing recovery meetings...`);
|
||||
|
||||
$idaa_sess.recovery_meetings.qry__status = 'loading';
|
||||
|
||||
// Clearing logic for hidden/disabled filter changes
|
||||
if ($idaa_loc.recovery_meetings.qry__enabled !== 'all' || $idaa_loc.recovery_meetings.qry__hidden !== 'all') {
|
||||
await db_events.event.clear();
|
||||
}
|
||||
|
||||
// // We need to loop through the array of objects and get the event_id_random from each object a new list of event_id_randoms. Then we can use this list to get the full objects from the database.
|
||||
// let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
|
||||
// if ($idaa_slct.event_obj_li && $idaa_slct.event_obj_li.length) {
|
||||
// event_id_random_li = [];
|
||||
// // console.log(`TEST SEARCH - Get ids:`, $idaa_slct.event_obj_li);
|
||||
// for (let i = 0; i < $idaa_slct.event_obj_li.length; i++) {
|
||||
// tmp_li.push($idaa_slct.event_obj_li[i].event_id_random);
|
||||
// }
|
||||
// }
|
||||
// event_id_random_li = tmp_li;
|
||||
// // console.log(`TEST search: event_id_random_li`, $state.snapshot(event_id_random_li));
|
||||
// }
|
||||
// });
|
||||
try {
|
||||
const results = await events_func.search__event({
|
||||
api_cfg: $ae_api,
|
||||
for_obj_type: 'account',
|
||||
for_obj_id: $ae_loc.account_id,
|
||||
qry_conference: false,
|
||||
qry_physical: $idaa_loc.recovery_meetings.qry__physical,
|
||||
qry_virtual: $idaa_loc.recovery_meetings.qry__virtual,
|
||||
qry_type: $idaa_loc.recovery_meetings.qry__type,
|
||||
qry_str: $idaa_loc.recovery_meetings.qry__fulltext_str?.trim() ?? null,
|
||||
enabled: $idaa_loc.recovery_meetings.qry__enabled,
|
||||
hidden: $idaa_loc.recovery_meetings.qry__hidden,
|
||||
limit: $idaa_loc.recovery_meetings.qry__limit,
|
||||
order_by_li: $idaa_loc.recovery_meetings.qry__order_by_li,
|
||||
log_lvl: 0 // Keep noise low during typing
|
||||
});
|
||||
|
||||
function generate_id_random_li({
|
||||
event_obj_li = $idaa_slct.event_obj_li
|
||||
}: {
|
||||
event_obj_li?: Array<any>;
|
||||
} = {}) {
|
||||
let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
|
||||
|
||||
// We need to loop through the array of objects and get the id_random from each object a new list of id_randoms. Then we can use this list to get the full objects from the database.
|
||||
if (event_obj_li && event_obj_li.length) {
|
||||
for (let i = 0; i < event_obj_li.length; i++) {
|
||||
tmp_li.push(event_obj_li[i].event_id_random);
|
||||
// Race condition check: only update if this is still the latest request
|
||||
if (current_search_id === last_search_id) {
|
||||
$idaa_slct.event_obj_li = results;
|
||||
event_id_random_li = results.map((e: any) => e.event_id_random);
|
||||
$idaa_sess.recovery_meetings.qry__status = 'done';
|
||||
if (log_lvl) console.log(`[Search #${current_search_id}] Done. Found ${results.length} results.`);
|
||||
}
|
||||
} catch (error) {
|
||||
if (current_search_id === last_search_id) {
|
||||
console.error('Search failed:', error);
|
||||
$idaa_sess.recovery_meetings.qry__status = 'error';
|
||||
}
|
||||
}
|
||||
if (log_lvl) {
|
||||
console.log(`generate_id_random_li:`, tmp_li);
|
||||
}
|
||||
|
||||
return tmp_li;
|
||||
}
|
||||
|
||||
if (browser) {
|
||||
@@ -369,15 +146,9 @@
|
||||
|
||||
let message = { event_id: $idaa_slct?.event_id ?? null };
|
||||
window.parent.postMessage(message, '*');
|
||||
|
||||
// add_activity_log(
|
||||
// {
|
||||
// action: 'idaa_meetings_page',
|
||||
// action_with: 'browser',
|
||||
// }
|
||||
// );
|
||||
}
|
||||
|
||||
|
||||
function add_activity_log({
|
||||
action = 'idaa_meetings_page',
|
||||
action_with = 'none'
|
||||
|
||||
Reference in New Issue
Block a user