Skip to content

Commit

Permalink
add image helpers, lazy loading, data-src, etc
Browse files Browse the repository at this point in the history
  • Loading branch information
@r-southworth
r-southworth committed Aug 27, 2024
1 parent 3ca1de4 commit 0934db4
Show file tree
Hide file tree
Showing 16 changed files with 315 additions and 767 deletions.
28 changes: 5 additions & 23 deletions src/assets/LearnGroveLogoBWNoText.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/assets/person-svgrepo-com.svg → src/assets/person.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/assets/postPlaceHolder.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 31 additions & 61 deletions src/components/common/cart/CartCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ import supabase from "@lib/supabaseClient";
import { getLangFromUrl, useTranslations } from "@i18n/utils";
import { Quantity } from "@components/common/cart/Quantity";
import { items, setItems } from "@components/common/cart/AddToCartButton";
import {
downloadPostImage,
downloadUserImage,
lazyLoadImage,
} from "@lib/imageHelper";
import userPlaceHolder from "@src/assets/person.svg";

const lang = getLangFromUrl(new URL(window.location.href));
const t = useTranslations(lang);
Expand All @@ -25,7 +31,7 @@ export const CartCard: Component<Props> = (props) => {
props.items.map(async (item: Post) => {
const newItem = { ...item };
newItem.image_urls
? (newItem.image_url = await downloadImage(
? (newItem.image_url = await downloadPostImage(
newItem.image_urls.split(",")[0]
))
: (newItem.image_url = undefined);
Expand All @@ -42,7 +48,7 @@ export const CartCard: Component<Props> = (props) => {

if (sellerImg) {
if (sellerImg[0].image_url) {
newItem.seller_img = await downloadCreatorImage(
newItem.seller_img = await downloadUserImage(
sellerImg[0].image_url
);
}
Expand Down Expand Up @@ -99,62 +105,6 @@ export const CartCard: Component<Props> = (props) => {
props.deleteItem();
};

// REFACTOR: Make this a 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);
}
}
};

//REFACTOR: Make this a helper function
const downloadCreatorImage = async (path: string) => {
try {
const { data: webpData, error: webpError } = await supabase.storage
.from("user.image")
.createSignedUrl(`webp/${path}.webp`, 60 * 60);
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);
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 (
<div class="flex w-full justify-center">
<ul class="md:flex md:w-full md:flex-wrap">
Expand All @@ -166,11 +116,16 @@ export const CartCard: Component<Props> = (props) => {
{item.image_url ? (
<picture>
<source
srcset={item.image_url.webpUrl}
data-srcset={
item.image_url.webpUrl
}
type="image/webp"
/>
<img
src={item.image_url.jpegUrl}
src={userPlaceHolder.src}
data-src={
item.image_url.jpegUrl
}
alt={
item.image_urls?.split(
","
Expand All @@ -179,6 +134,12 @@ export const CartCard: Component<Props> = (props) => {
: "No image"
}
class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
loading="lazy"
onload={(e) => {
lazyLoadImage(
e.currentTarget as HTMLImageElement
);
}}
/>
</picture>
) : (
Expand Down Expand Up @@ -228,14 +189,17 @@ export const CartCard: Component<Props> = (props) => {
{item.seller_img ? (
<picture>
<source
srcset={
data-srcset={
item.seller_img
.webpUrl
}
type="image/webp"
/>
<img
src={
userPlaceHolder.src
}
data-src={
item.seller_img
.jpegUrl
}
Expand All @@ -246,6 +210,12 @@ export const CartCard: Component<Props> = (props) => {
: "No image"
}
class="mr-2 h-8 w-8 rounded-full bg-background1 object-cover dark:bg-icon1-DM"
loading="lazy"
onload={(e) => {
lazyLoadImage(
e.currentTarget as HTMLImageElement
);
}}
/>
</picture>
) : (
Expand Down
Loading

0 comments on commit 0934db4

Please sign in to comment.