refactor code

This commit is contained in:
MuslemRahimi 2024-08-16 00:19:25 +02:00
parent 5ab5338b06
commit f7e900864a
4 changed files with 20 additions and 53 deletions

View File

@ -12,9 +12,7 @@
let rawData = data?.getHedgeFunds;
let slicedRawData = [];
let displayList = [];
let images = {};
let filterQuery = '';
let isLoaded = false;
@ -188,7 +186,7 @@ async function handleInput(event) {
<div class="flex flex-col justify-center items-center rounded-2xl ">
<div class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative hedge-fund-striped bg-[#20202E] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="rounded-full w-16" src={item?.image} loading="lazy"/>
<img style="clip-path: circle(50%);" class="rounded-full w-16" src={`${cloudFrontUrl}/assets/hedge_funds/default-avatar.png`} loading="lazy"/>
</div>
<span class="text-white text-md font-semibold mt-2 mb-2 w-64 text-center">
{item?.name}

View File

@ -1,25 +1,4 @@
import { getCache, setCache } from '$lib/store';
import defaultAvatar from '$lib/images/hedge_funds/default-avatar.png';
let images = {};
// Function to load images only when they are viewed
async function loadImages() {
const imageFiles = import.meta.glob('$lib/images/hedge_funds/*.png');
const imagesPromises = [];
for (const [path, resolver] of Object?.entries(imageFiles)) {
const imageNameMatch = path.match(/\/([^/]+)\.png$/);
if (imageNameMatch && imageNameMatch[1] !== 'default-avatar') {
imagesPromises?.push(resolver()?.then(module => {
images[imageNameMatch[1]] = module.default;
}));
}
}
await Promise.all(imagesPromises);
}
@ -35,11 +14,6 @@ export const load = async () => {
output = (await import('$lib/hedge-funds/all-hedge-funds.json'))?.default;
await loadImages();
output?.forEach(item => {
item.image = images[item?.cik] || defaultAvatar;
});
// Cache the data for this specific tickerID with a specific name 'getHedgeFunds'
setCache('getHedgeFunds', output, 'getHedgeFunds');
}

View File

@ -2,7 +2,6 @@
import { goto } from '$app/navigation';
import { screenWidth, numberOfUnreadNotification, displayCompanyName } from '$lib/store';
import cardBackground from "$lib/images/bg-hedge-funds.png";
import defaultAvatar from "$lib/images/hedge_funds/default-avatar.png";
import { abbreviateNumber, formatString } from '$lib/utils';
import { Chart } from 'svelte-echarts'
@ -16,6 +15,8 @@ use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
import { onMount } from 'svelte';
export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let isLoaded = false;
let rawData = data?.getHedgeFundsData;
@ -142,23 +143,6 @@ function formatToFY(dateString) {
}
// Function to load images only when they are viewed
async function loadImages() {
const imageFiles = import.meta.glob('$lib/images/hedge_funds/*.png');
const imagesPromises = [];
for (const [path, resolver] of Object?.entries(imageFiles)) {
const imageNameMatch = path.match(/\/([^/]+)\.png$/);
if (imageNameMatch && imageNameMatch[1] !== 'default-avatar') {
imagesPromises?.push(resolver()?.then(module => {
images[imageNameMatch[1]] = module.default;
}));
}
}
await Promise?.all(imagesPromises);
}
function normalizer(value) {
if (Math?.abs(value) >= 1e12) {
@ -251,7 +235,6 @@ function formatToFY(dateString) {
}
onMount(async () => {
await loadImages();
optionsData = await getPlotOptions();
isLoaded = true;
});
@ -353,7 +336,7 @@ onMount(async () => {
<div class="flex flex-col justify-center items-center rounded-lg ">
<div class="mt-10 rounded-full border border-slate-600 w-24 h-24 relative hedge-fund-striped bg-[#20202E] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="rounded-full w-20" src={images[rawData?.cik] ?? defaultAvatar} loading="lazy"/>
<img style="clip-path: circle(50%);" class="rounded-full w-20" src={`${cloudFrontUrl}/assets/hedge_funds/default-avatar.png`} loading="lazy"/>
</div>
<span class="text-white text-md font-semibold mt-2 mb-2 w-64 text-center">
{formatString($displayCompanyName)}

View File

@ -1,9 +1,19 @@
import { displayCompanyName, getCache, setCache } from '$lib/store';
export const load = async ({ parent, params }) => {
const getCIKNumber = async () => {
return params.slug;
};
const getHedgeFundsData = async () => {
const cachedData = getCache(params.slug, 'getHedgeFundsData');
if (cachedData) return cachedData;
if (cachedData) {
displayCompanyName.update(() => cachedData?.name ?? params.slug);
return cachedData;
}
const { apiURL, apiKey } = await parent();
const response = await fetch(apiURL+'/cik-data', {
@ -20,13 +30,15 @@ export const load = async ({ parent, params }) => {
if (output?.holdings) {
output.holdings = output?.holdings?.filter(item => item?.sharesNumber && item?.symbol);
}
displayCompanyName.update(() => output?.name ?? params.slug);
setCache(params.slug, output, 'getHedgeFundsData');
displayCompanyName.update(() => output?.name ?? params.slug);
return output;
};
return {
getHedgeFundsData: await getHedgeFundsData()
getHedgeFundsData: await getHedgeFundsData(),
getCIKNumber: await getCIKNumber(),
};
};
};