diff --git a/src/assets/LearnGroveLogoBWNoText.svg b/src/assets/LearnGroveLogoBWNoText.svg index 5b12519c..9270a096 100644 --- a/src/assets/LearnGroveLogoBWNoText.svg +++ b/src/assets/LearnGroveLogoBWNoText.svg @@ -13,51 +13,33 @@ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> - + + style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:1.00012;stroke-dasharray:none;stroke-opacity:1" /> diff --git a/src/assets/person-svgrepo-com.svg b/src/assets/person.svg similarity index 82% rename from src/assets/person-svgrepo-com.svg rename to src/assets/person.svg index 5dc03b8d..d5b51055 100644 --- a/src/assets/person-svgrepo-com.svg +++ b/src/assets/person.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/postPlaceHolder.svg b/src/assets/postPlaceHolder.svg new file mode 100644 index 00000000..039e89d2 --- /dev/null +++ b/src/assets/postPlaceHolder.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/common/HeaderSearchBar.tsx b/src/components/common/HeaderSearchBar.tsx index fed92882..83aa6746 100644 --- a/src/components/common/HeaderSearchBar.tsx +++ b/src/components/common/HeaderSearchBar.tsx @@ -67,7 +67,7 @@ export const SearchBar: Component = () => { return (
-
@@ -386,124 +319,10 @@ export const ViewCard: Component = (props) => { {t("messages.free")}

-
- {/* - - - - - -

- 4.9 (30.3K) -

*/} -
+
-
- {/*
- - - - - - - - -

- File Type 1 -

-
*/} - - {/*
- - - - - - - - -

- Short -

-
*/} - - {/*
- - - - - - - - -

- Longer File Type -

-
*/} -
+
= (props) => { const updatedPosts = await Promise.all( props.posts.map(async (post: PurchasedPost) => { post.image_urls - ? (post.image_url = await downloadImage( + ? (post.image_url = await downloadPostImage( post.image_urls.split(",")[0] )) : (post.image_url = undefined); @@ -54,34 +55,6 @@ export const ViewPurchaseCard: Component = (props) => { alert(t("messages.comingSoon")); }; - //REFACTOR: Helper Function - const downloadImage = async (path: string) => { - try { - const { data: webpData, error: webpError } = await supabase.storage - .from("post.image") - .createSignedUrl(`webp/${path}.webp`, 60 * 60); - if (webpError) { - throw webpError; - } - const webpUrl = webpData.signedUrl; - - const { data: jpegData, error: jpegError } = await supabase.storage - .from("post.image") - .createSignedUrl(`jpeg/${path}.jpeg`, 60 * 60); - if (jpegError) { - throw jpegError; - } - const jpegUrl = jpegData.signedUrl; - - const url = { webpUrl, jpegUrl }; - return url; - } catch (error) { - if (error instanceof Error) { - console.log("Error downloading image: ", error.message); - } - } - }; - return (
{purchasedItems().map((post) => ( diff --git a/src/lib/imageHelper.tsx b/src/lib/imageHelper.tsx new file mode 100644 index 00000000..ad9907f7 --- /dev/null +++ b/src/lib/imageHelper.tsx @@ -0,0 +1,117 @@ +import supabase from "@lib/supabaseClient"; + +const urlCache = new Map(); + +export const downloadPostImage = async (path: string) => { + if (urlCache.has(path)) { + return urlCache.get(path); + } + + try { + const { data: webpData, error: webpError } = await supabase.storage + .from("post.image") + .createSignedUrl(`webp/${path}.webp`, 60 * 60 * 24 * 30); + if (webpError) { + throw webpError; + } + const webpUrl = webpData.signedUrl; + + const { data: jpegData, error: jpegError } = await supabase.storage + .from("post.image") + .createSignedUrl(`jpeg/${path}.jpeg`, 60 * 60 * 24 * 30); + if (jpegError) { + throw jpegError; + } + const jpegUrl = jpegData.signedUrl; + + const url = { webpUrl, jpegUrl }; + urlCache.set(path, url); // Cache the URL + return url; + } catch (error) { + if (error instanceof Error) { + console.log("Error downloading image: ", error.message); + } + } +}; + +export const downloadUserImage = async (path: string) => { + if (urlCache.has(path)) { + return urlCache.get(path); + } + + try { + const { data: webpData, error: webpError } = await supabase.storage + .from("user.image") + .createSignedUrl(`webp/${path}.webp`, 60 * 60 * 24 * 30); + if (webpError) { + throw webpError; + } + const webpUrl = webpData.signedUrl; + + const { data: jpegData, error: jpegError } = await supabase.storage + .from("user.image") + .createSignedUrl(`jpeg/${path}.jpeg`, 60 * 60 * 24 * 30); + if (jpegError) { + throw jpegError; + } + const jpegUrl = jpegData.signedUrl; + + const url = { webpUrl, jpegUrl }; + urlCache.set(path, url); // Cache the URL + return url; + } catch (error) { + if (error instanceof Error) { + console.log("Error downloading image: ", error.message); + } + } +}; + +export const lazyLoadImage = (img: HTMLImageElement) => { + console.log("Lazy loading image:", img); + const dataSrc = img.dataset.src; + console.log("Data set:", img.dataset); + // Check if the image src is already set to data-src + if (dataSrc && img.src !== dataSrc) { + console.log("Original src:", img.src); + console.log("Data src:", dataSrc); + // Update the img src with the value of data-src + img.src = dataSrc; + console.log("Updated src:", img.src); + } + + // Get all source elements within the parent element + const sources = img.parentElement?.querySelectorAll("source"); + if (sources) { + sources.forEach((source) => { + const sourceElement = source as HTMLSourceElement; + const dataSrcSet = sourceElement.dataset.srcset; + // Check if the source srcset is already set to data-srcset + if (dataSrcSet && sourceElement.srcset !== dataSrcSet) { + console.log("Original srcset:", sourceElement.srcset); + console.log("Data srcset:", dataSrcSet); + // Update the source srcset with the value of data-srcset + sourceElement.srcset = dataSrcSet; + console.log("Updated srcset:", sourceElement.srcset); + } + }); + } +}; + +export const lazyLoadAllImages = () => { + console.log("Lazy loading all images..."); + const images = document.querySelectorAll("img[data-src]"); + console.log("Images:", images); + console.log("Images length:", images.length); + + images.forEach((img) => { + const imageElement = img as HTMLImageElement; + console.log("Image:", imageElement); + + // Check if the image has already loaded (in case of caching) + if (imageElement.complete) { + lazyLoadImage(imageElement); + } else { + imageElement.onload = () => lazyLoadImage(imageElement); + } + }); +};