From acff856e25141c80cd55fc4e9111ccfb26b8a98a Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Tue, 28 Jan 2025 18:12:01 -0500 Subject: [PATCH] Trying to optimize the initial fetch calls when loading. --- src/lib/ae_core/ae_core_functions.ts | 8 + src/lib/ae_core/core__api_helpers.ts | 70 +++++++ src/routes/+layout.ts | 293 +++++++++++++++++++++------ 3 files changed, 304 insertions(+), 67 deletions(-) create mode 100644 src/lib/ae_core/core__api_helpers.ts diff --git a/src/lib/ae_core/ae_core_functions.ts b/src/lib/ae_core/ae_core_functions.ts index 954ab2f8..9636572d 100644 --- a/src/lib/ae_core/ae_core_functions.ts +++ b/src/lib/ae_core/ae_core_functions.ts @@ -46,6 +46,12 @@ import { db_update_ae_obj_id__hosted_file } from "$lib/ae_core/core__hosted_files"; +import { + add_url_params, + clean_headers, +} from "$lib/ae_core/core__api_helpers"; + + let ae_promises: key_val = {}; // Promise; @@ -412,6 +418,8 @@ let export_obj = { delete_ae_obj_id__hosted_file: delete_ae_obj_id__hosted_file, db_save_ae_obj_li__hosted_file: db_save_ae_obj_li__hosted_file, db_update_ae_obj_id__hosted_file: db_update_ae_obj_id__hosted_file, + add_url_params: add_url_params, + clean_headers: clean_headers, handle_load_ae_obj_id__site_domain: handle_load_ae_obj_id__site_domain, handle_load_ae_obj_code__data_store: handle_load_ae_obj_code__data_store, load_ae_obj_id__activity_log: load_ae_obj_id__activity_log, diff --git a/src/lib/ae_core/core__api_helpers.ts b/src/lib/ae_core/core__api_helpers.ts new file mode 100644 index 00000000..8a3fd0eb --- /dev/null +++ b/src/lib/ae_core/core__api_helpers.ts @@ -0,0 +1,70 @@ +import type { key_val } from '$lib/ae_stores'; + + +// Updated 2025-01-28 +export function add_url_params( + { + base_url = '', + endpoint, + params, + log_lvl = 0 + }: { + base_url?: string, + endpoint: string, + params: key_val, + log_lvl?: number + } + ) { + if (log_lvl) { + // console.log(`*** add_url_params() ***`); + console.log(`*** add_url_params() *** base_url=${base_url} endpoint=${endpoint}`, params); + } + + const url_obj = new URL(endpoint, base_url); + + Object.keys(params).forEach(key => url_obj.searchParams.append(key, params[key])); + + if (log_lvl) { + console.log('New URL:', url_obj.toString()); + } + + return url_obj.toString(); + // return 'test'; +} + + +// This is used to clean the header property names. Not underscores allowed in the header names. +// Updated 2025-01-28 +export function clean_headers( + { + headers, + log_lvl = 0 + }: { + headers: any, + log_lvl?: number + } + ) { + if (log_lvl) { + console.log(`*** clean_headers() ***`); + } + + let headers_cleaned: key_val = {}; + for (const prop in headers) { + let prop_cleaned = prop.replaceAll('_', '-'); + if (typeof headers[prop] != 'string') { + headers[prop] = JSON.stringify(headers[prop]); + } + headers_cleaned[prop_cleaned] = headers[prop]; + if (log_lvl > 1) { + console.log(`${prop_cleaned}: ${headers_cleaned[prop_cleaned]}`); + } + } + + // Object.keys(headers).forEach(key => { + // if (headers[key]) { + // headers_cleaned[key] = headers[key]; + // } + // }); + + return headers_cleaned; +} diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts index d1a1222e..5f3b0e2d 100644 --- a/src/routes/+layout.ts +++ b/src/routes/+layout.ts @@ -9,6 +9,7 @@ import { core_func } from '$lib/ae_core/ae_core_functions'; import type { key_val } from '$lib/ae_stores'; import { PUBLIC_AE_API_PROTOCOL, PUBLIC_AE_API_SERVER, PUBLIC_AE_API_BAK_SERVER, PUBLIC_AE_API_PORT, PUBLIC_AE_API_PATH, PUBLIC_AE_API_SECRET_KEY, PUBLIC_AE_API_CRUD_SUPER_KEY, PUBLIC_AE_NO_ACCOUNT_ID, PUBLIC_AE_NO_ACCOUNT_ID_TOKEN } from '$env/static/public'; + const api_base_url = `${PUBLIC_AE_API_PROTOCOL}://${PUBLIC_AE_API_SERVER}:${PUBLIC_AE_API_PORT}${PUBLIC_AE_API_PATH}`; const api_base_url_bak = `${PUBLIC_AE_API_PROTOCOL}://${PUBLIC_AE_API_BAK_SERVER}:${PUBLIC_AE_API_PORT}${PUBLIC_AE_API_PATH}`; @@ -56,7 +57,7 @@ let ae_loc_init: key_val = { // properties: params, route, url // functions: fetch, setHeaders, parent, depends, untrack export async function load({ fetch, params, parent, route, url }) { // params, route, url - let log_lvl: number = 1; + let log_lvl: number = 2; // console.log(`Svelte root +layout.ts params:`, params); // console.log(`Svelte root +layout.ts route:`, route); // console.log(`Svelte root +layout.ts url:`, url); @@ -132,89 +133,247 @@ export async function load({ fetch, params, parent, route, url }) { // params, r // ae_loc.site_domain = data.url.origin; // console.log(`ae_loc = `, ae_loc); - account_id = await core_func.handle_load_ae_obj_id__site_domain({ - api_cfg: ae_api_init, - // fqdn: 'idaa.localhost:5173', // url.host, - fqdn: url.host, - try_cache: false, + let fqdn = url.host; + let api_endpoint = `/crud/site/domain/${fqdn}`; + + let api_params: any = { + 'use_alt_table': true, + 'use_alt_base': true, + }; + + // const api_url = new URL(api_endpoint, ae_api_init['base_url']); + // Object.keys(api_params).forEach(key => api_url.searchParams.append(key, api_params[key])); + // let api_url_str = api_url.toString(); + + const api_url_str = core_func.add_url_params({ + base_url: ae_api_init['base_url'], + endpoint: api_endpoint, + params: api_params, + log_lvl: log_lvl + }); + + let headers: any = { + 'x-no-account-id': 'Nothing to See Here', + } + + headers = core_func.clean_headers({ + headers: headers, log_lvl: log_lvl - }) - .then(function (site_domain_results) { - if (site_domain_results) { - // console.log(`ae_ site_domain_results = `, site_domain_results); + }); - data_struct.account_id = site_domain_results.account_id_random; + // Clean the headers + // let headers_cleaned: key_val = {}; + // for (const prop in headers) { + // let prop_cleaned = prop.replaceAll('_', '-'); + // if (typeof headers[prop] != 'string') { + // headers[prop] = JSON.stringify(headers[prop]); + // } + // headers_cleaned[prop_cleaned] = headers[prop]; + // if (log_lvl > 1) { + // console.log(`${prop_cleaned}: ${headers_cleaned[prop_cleaned]}`); + // } + // } + // headers = headers_cleaned; + // if (log_lvl > 1) { + // console.log('All headers cleaned:', headers); + // } - ae_acct.account_id = site_domain_results.account_id_random; + const fetchOptions: RequestInit = { + method: 'GET', + headers: { + ...ae_api_init['headers'], + ...headers + }, + // signal: controller.signal + }; - ae_api_init['account_id'] = site_domain_results.account_id_random; - ae_api_init['headers']['x-account-id'] = site_domain_results.account_id_random; - ae_api_init['headers']['x-no-account-id'] = null; + let result = await fetch(api_url_str, fetchOptions) + .then(async function (response) { + if (response.ok) { + let json_raw = await response.json(); + console.log(`ALERT json_raw = `, json_raw); - ae_loc_init['account_id'] = site_domain_results.account_id_random; - ae_loc_init['account_code'] = site_domain_results.account_code; // Useful for export file naming - ae_loc_init['account_name'] = site_domain_results.account_name; // Generally useful for display + let json_data: any = null; - ae_loc_init['site_id'] = site_domain_results.site_id_random; - ae_loc_init['site_domain_id'] = site_domain_results.site_domain_id_random; - ae_loc_init['site_enable'] = site_domain_results.enable; - ae_loc_init['site_header_image_path'] = site_domain_results.header_image_path; - ae_loc_init['site_style_href'] = site_domain_results.style_href; - ae_loc_init['site_google_tracking_id'] = site_domain_results.google_tracking_id; - ae_loc_init['site_access_code_kv'] = site_domain_results.access_code_kv_json; - ae_loc_init['site_cfg_json'] = site_domain_results.cfg_json; - ae_loc_init['site_access_key'] = site_domain_results.access_key; // This is the general site access key - ae_loc_init['site_domain_access_key'] = site_domain_results.site_domain_access_key; // This is specific to a (sub)domain. + if (json_raw.data) { - if (!ae_loc_init['site_access_key'] && !ae_loc_init['site_domain_access_key']) { - ae_loc_init['key_checked'] = true; // Se to true to allow access without a key. - ae_loc_init['allow_access'] = true; // No access key is required here. - } else { - let access_key = url.searchParams.get('key'); + json_data = json_raw.data; + account_id = json_data.account_id_random; + data_struct.account_id = json_data.account_id_random; + ae_acct.account_id = json_data.account_id_random; - if (access_key) { - if (log_lvl) { - console.log(`root +layout.ts: access_key = ${access_key}`); - } - if (access_key == ae_loc_init['site_access_key']) { - ae_loc_init['key_checked'] = ae_loc_init['site_access_key']; - ae_loc_init['allow_access'] = ae_loc_init['site_access_key']; - } else if (access_key == ae_loc_init['site_domain_access_key']) { - ae_loc_init['key_checked'] = ae_loc_init['site_domain_access_key']; - ae_loc_init['allow_access'] = ae_loc_init['site_domain_access_key']; - } else { - // The key changed and no longer matches the site or domain key. - ae_loc_init['key_checked'] = true; - ae_loc_init['allow_access'] = false; - } + ae_api_init['account_id'] = json_data.account_id_random; + ae_api_init['headers']['x-account-id'] = json_data.account_id_random; + ae_api_init['headers']['x-no-account-id'] = null; + + ae_loc_init['account_id'] = json_data.account_id_random; + ae_loc_init['account_code'] = json_data.account_code; // Useful for export file naming + ae_loc_init['account_name'] = json_data.account_name; // Generally useful for display + + ae_loc_init['site_id'] = json_data.site_id_random; + ae_loc_init['site_domain_id'] = json_data.site_domain_id_random; + ae_loc_init['site_enable'] = json_data.enable; + ae_loc_init['site_header_image_path'] = json_data.header_image_path; + ae_loc_init['site_style_href'] = json_data.style_href; + ae_loc_init['site_google_tracking_id'] = json_data.google_tracking_id; + ae_loc_init['site_access_code_kv'] = json_data.access_code_kv_json; + ae_loc_init['site_cfg_json'] = json_data.cfg_json; + ae_loc_init['site_access_key'] = json_data.access_key; // This is the general site access key + ae_loc_init['site_domain_access_key'] = json_data.site_domain_access_key; // This is specific to a (sub)domain. + + if (!ae_loc_init['site_access_key'] && !ae_loc_init['site_domain_access_key']) { + ae_loc_init['key_checked'] = true; // Se to true to allow access without a key. + ae_loc_init['allow_access'] = true; // No access key is required here. } else { - if (log_lvl > 1) { - console.log(`root +layout.ts: No access key found in URL.`); + let access_key = url.searchParams.get('key'); + + if (access_key) { + if (log_lvl) { + console.log(`root +layout.ts: access_key = ${access_key}`); + } + if (access_key == ae_loc_init['site_access_key']) { + ae_loc_init['key_checked'] = ae_loc_init['site_access_key']; + ae_loc_init['allow_access'] = ae_loc_init['site_access_key']; + } else if (access_key == ae_loc_init['site_domain_access_key']) { + ae_loc_init['key_checked'] = ae_loc_init['site_domain_access_key']; + ae_loc_init['allow_access'] = ae_loc_init['site_domain_access_key']; + } else { + // The key changed and no longer matches the site or domain key. + ae_loc_init['key_checked'] = true; + ae_loc_init['allow_access'] = false; + } + } else { + if (log_lvl > 1) { + console.log(`root +layout.ts: No access key found in URL.`); + } + ae_loc_init['key_checked'] = true; + // Do nothing to change the allow_access here + // ae_loc_init['allow_access'] = false; // An access key is required at this point. } - ae_loc_init['key_checked'] = true; - // Do nothing to change the allow_access here - // ae_loc_init['allow_access'] = false; // An access key is required at this point. } + } else { + console.log('API GET Object *fetch* response was missing the JSON "data" part.'); + error(500, { + message: 'Site lookup failed!' + }); } - - if (log_lvl > 1) { - console.log(`root +layout.ts: Returning account_id = `, site_domain_results.account_id_random); - console.log(`root +layout.ts: ae_loc_init = `, ae_loc_init); - } - - return site_domain_results.account_id_random; + return json_data; // || json_raw; + } else { + console.log('API GET Object *fetch* request was no ok.'); + error(500, { + message: 'Site lookup failed!' + }); } - console.log(`root +layout.ts: Site domain results not found!!! URL = `, url); - return null; // For no results }) .catch(function (error) { - console.log(`root +layout.ts: Site domain lookup error = `, error); - // error(500, { - // message: 'Site lookup failed!' - // }); - return false; // For a likely API or DB connection error + console.log('API GET Object *fetch* request was aborted or failed in an unexpected way.', error); + error(500, { + message: 'Site lookup failed!' + }); }); + console.log(`ALERT response = `, result); + + if (log_lvl > 1) { + console.log(`root +layout.ts: Using account_id = `, account_id); + console.log(`root +layout.ts: ae_loc_init = `, ae_loc_init); + } + + log_lvl = 1; + + // if (response.ok) { + // let json_val = await response.json(); + // console.log(`ALERT json_val = `, json_val); + // let json_data = json_val.data; + // } + + // error(500, { + // message: 'Site lookup failed!' + // }); + + // account_id = await core_func.handle_load_ae_obj_id__site_domain({ + // api_cfg: ae_api_init, + // // fqdn: 'idaa.localhost:5173', // url.host, + // fqdn: url.host, + // try_cache: false, + // log_lvl: log_lvl + // }) + // .then(function (site_domain_results) { + // if (site_domain_results) { + // // console.log(`ae_ site_domain_results = `, site_domain_results); + + // data_struct.account_id = site_domain_results.account_id_random; + + // ae_acct.account_id = site_domain_results.account_id_random; + + // ae_api_init['account_id'] = site_domain_results.account_id_random; + // ae_api_init['headers']['x-account-id'] = site_domain_results.account_id_random; + // ae_api_init['headers']['x-no-account-id'] = null; + + // ae_loc_init['account_id'] = site_domain_results.account_id_random; + // ae_loc_init['account_code'] = site_domain_results.account_code; // Useful for export file naming + // ae_loc_init['account_name'] = site_domain_results.account_name; // Generally useful for display + + // ae_loc_init['site_id'] = site_domain_results.site_id_random; + // ae_loc_init['site_domain_id'] = site_domain_results.site_domain_id_random; + // ae_loc_init['site_enable'] = site_domain_results.enable; + // ae_loc_init['site_header_image_path'] = site_domain_results.header_image_path; + // ae_loc_init['site_style_href'] = site_domain_results.style_href; + // ae_loc_init['site_google_tracking_id'] = site_domain_results.google_tracking_id; + // ae_loc_init['site_access_code_kv'] = site_domain_results.access_code_kv_json; + // ae_loc_init['site_cfg_json'] = site_domain_results.cfg_json; + // ae_loc_init['site_access_key'] = site_domain_results.access_key; // This is the general site access key + // ae_loc_init['site_domain_access_key'] = site_domain_results.site_domain_access_key; // This is specific to a (sub)domain. + + // if (!ae_loc_init['site_access_key'] && !ae_loc_init['site_domain_access_key']) { + // ae_loc_init['key_checked'] = true; // Se to true to allow access without a key. + // ae_loc_init['allow_access'] = true; // No access key is required here. + // } else { + // let access_key = url.searchParams.get('key'); + + // if (access_key) { + // if (log_lvl) { + // console.log(`root +layout.ts: access_key = ${access_key}`); + // } + // if (access_key == ae_loc_init['site_access_key']) { + // ae_loc_init['key_checked'] = ae_loc_init['site_access_key']; + // ae_loc_init['allow_access'] = ae_loc_init['site_access_key']; + // } else if (access_key == ae_loc_init['site_domain_access_key']) { + // ae_loc_init['key_checked'] = ae_loc_init['site_domain_access_key']; + // ae_loc_init['allow_access'] = ae_loc_init['site_domain_access_key']; + // } else { + // // The key changed and no longer matches the site or domain key. + // ae_loc_init['key_checked'] = true; + // ae_loc_init['allow_access'] = false; + // } + // } else { + // if (log_lvl > 1) { + // console.log(`root +layout.ts: No access key found in URL.`); + // } + // ae_loc_init['key_checked'] = true; + // // Do nothing to change the allow_access here + // // ae_loc_init['allow_access'] = false; // An access key is required at this point. + // } + // } + + // if (log_lvl > 1) { + // console.log(`root +layout.ts: Returning account_id = `, site_domain_results.account_id_random); + // console.log(`root +layout.ts: ae_loc_init = `, ae_loc_init); + // } + + // return site_domain_results.account_id_random; + // } + // console.log(`root +layout.ts: Site domain results not found!!! URL = `, url); + // return null; // For no results + + // }) + // .catch(function (error) { + // console.log(`root +layout.ts: Site domain lookup error = `, error); + // // error(500, { + // // message: 'Site lookup failed!' + // // }); + // return false; // For a likely API or DB connection error + // }); if (await account_id === null) {