Skip to content

Commit

Permalink
Merge pull request #139 from datagrove/imageOptimization
Browse files Browse the repository at this point in the history 
resize, optimize, and reformat images on upload to supabase, modify a…
  • Loading branch information
@r-southworth
r-southworth authored Aug 23, 2024
2 parents 61e9639 + f0a9c1c commit 22c1d47
Show file tree
Hide file tree
Showing 19 changed files with 1,459 additions and 791 deletions.
351 changes: 203 additions & 148 deletions src/components/common/cart/CartCard.tsx
View file

Large diffs are not rendered by default.

14 changes: 1 addition & 13 deletions src/components/common/cart/CartCardDonate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const CartCardDonate: Component<Props> = (props) => {
<li class=" w-[90%] border-b border-border1 border-opacity-50 py-4 dark:border-border1-DM">
<div class="mb-2 box-content flex w-full flex-col items-center justify-center md:h-full md:flex-row md:items-start md:justify-start">
<div class="flex h-full w-full items-center justify-center rounded-lg bg-background1 dark:bg-background1-DM md:mr-2 md:h-full md:w-48">
{/* Refactor: use picture element and webp images? */}
<img
src={LearnGroveCommunity.src}
// TODO Internationalize
Expand Down Expand Up @@ -87,19 +88,6 @@ export const CartCardDonate: Component<Props> = (props) => {
>
$50
</button>
{/* <div class="inline-block">
<img
src={
"src/assets/LearnGroveLogoBWNoText.svg"
}
// TODO Internationalize
alt="LearnGrove Logo"
class="mr-2 h-8 w-8 rounded-full bg-background1 object-cover dark:bg-icon1-DM"
/>
</div>
<p class="row-span-1 mb-1 inline-block overflow-hidden text-base text-ptext1 dark:text-ptext1-DM">
LearnGrove
</p> */}
</div>
<div class="col-span-4 col-start-1 row-span-2 row-start-3 flex items-center">
<p class=" prose mb-2 line-clamp-3 max-h-[60px] overflow-hidden text-sm text-ptext1 dark:prose-invert dark:text-ptext1-DM">
Expand Down
14 changes: 1 addition & 13 deletions src/components/common/cart/CartCardDonateMobile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const CartCardDonateMobile: Component<Props> = (props) => {
<li class=" mx-4 w-full border-b border-border1 border-opacity-50 py-4 dark:border-border1-DM">
<div class=" box-content flex h-full w-full flex-row items-start justify-start">
<div class="mr-2 flex h-full w-24 items-center justify-center rounded-lg bg-background1 dark:bg-background1-DM">
{/* Refactor: use picture element and webp images? */}
<img
src={LearnGroveCommunity.src}
// TODO Internationalize
Expand Down Expand Up @@ -87,19 +88,6 @@ export const CartCardDonateMobile: Component<Props> = (props) => {
>
$50
</button>
{/* <div class="inline-block">
<img
src={
"src/assets/LearnGroveLogoBWNoText.svg"
}
// TODO Internationalize
alt="LearnGrove Logo"
class="mr-2 h-8 w-8 rounded-full bg-background1 object-cover dark:bg-icon1-DM"
/>
</div>
<p class="inline-block overflow-hidden text-sm text-ptext1 dark:text-ptext1-DM">
LearnGrove
</p> */}
</div>

<div class="col-span-2 col-start-6 row-start-1 flex justify-end pl-2">
Expand Down
155 changes: 104 additions & 51 deletions src/components/common/cart/CartCardMobile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,33 @@ export const CartCardMobile: Component<Props> = (props) => {
createEffect(async () => {
if (props.items) {
const updatedItems = await Promise.all(
props.items.map(async (item: any) => {
item.image_urls
? (item.image_url = await downloadImage(
item.image_urls.split(",")[0]
props.items.map(async (item: Post) => {
const newItem = { ...item };
newItem.image_urls
? (newItem.image_url = await downloadImage(
newItem.image_urls.split(",")[0]
))
: null;
: (newItem.image_url = undefined);

item.seller_img
? (item.seller_img = await downloadSellerImage(
item.seller_img
))
: null;
// Set the default quantity to 1 This should be replaced with the quantity from the quantity counter in the future
// item.quantity = 1;
return item;
const { data: sellerImg, error: sellerImgError } =
await supabase
.from("sellerview")
.select("*")
.eq("seller_id", newItem.seller_id);

if (sellerImgError) {
console.log(sellerImgError);
}

if (sellerImg) {
if (sellerImg[0].image_url) {
newItem.seller_img = await downloadCreatorImage(
sellerImg[0].image_url
);
}
}

return newItem;
})
);

Expand Down Expand Up @@ -88,15 +100,26 @@ export const CartCardMobile: Component<Props> = (props) => {
props.deleteItem();
};

//REFACTOR Helper Functions
const downloadImage = async (path: string) => {
try {
const { data, error } = await supabase.storage
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")
.download(path);
if (error) {
throw error;
.createSignedUrl(`jpeg/${path}.jpeg`, 60 * 60);
if (jpegError) {
throw jpegError;
}
const url = URL.createObjectURL(data);
const jpegUrl = jpegData.signedUrl;

const url = { webpUrl, jpegUrl };
return url;
} catch (error) {
if (error instanceof Error) {
Expand All @@ -105,15 +128,26 @@ export const CartCardMobile: Component<Props> = (props) => {
}
};

const downloadSellerImage = async (path: string) => {
//REFACTOR Helper Functions
const downloadCreatorImage = async (path: string) => {
try {
const { data, error } = await supabase.storage
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")
.download(path);
if (error) {
throw error;
.createSignedUrl(`jpeg/${path}.jpeg`, 60 * 60);
if (jpegError) {
throw jpegError;
}
const url = URL.createObjectURL(data);
const jpegUrl = jpegData.signedUrl;

const url = { webpUrl, jpegUrl };
return url;
} catch (error) {
if (error instanceof Error) {
Expand All @@ -125,20 +159,26 @@ export const CartCardMobile: Component<Props> = (props) => {
return (
<div class="flex w-full justify-center">
<ul class="flex w-full flex-wrap">
{newItems().map((item: any) => (
<li class=" w-full mx-4 border-b border-border1 border-opacity-50 py-4 dark:border-border1-DM">
<div class=" box-content flex w-full h-full flex-row items-start justify-start">
<div class="flex items-center justify-center rounded-lg bg-background1 dark:bg-background1-DM mr-2 h-full w-24">
{newItems().map((item: Post) => (
<li class=" mx-4 w-full border-b border-border1 border-opacity-50 py-4 dark:border-border1-DM">
<div class=" box-content flex h-full w-full flex-row items-start justify-start">
<div class="mr-2 flex h-full w-24 items-center justify-center rounded-lg bg-background1 dark:bg-background1-DM">
{item.image_url ? (
<img
src={item.image_url}
alt={
item.image_urls.split(",")[0]
? "User Image"
: "No image"
}
class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
/>
<picture>
<source
srcset={item.image_url.webpUrl}
type="image/webp"
/>
<img
src={item.image_url.jpegUrl}
alt={
item.image_urls?.split(",")[0]
? "User Image"
: "No image"
}
class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
/>
</picture>
) : (
<svg
viewBox="0 0 512 512"
Expand Down Expand Up @@ -166,11 +206,11 @@ export const CartCardMobile: Component<Props> = (props) => {

<div
id="cardContent"
class="flex justify-between pt-1 text-left h-full w-full"
class="flex h-full w-full justify-between pt-1 text-left"
>
<div class="grid h-full w-full grid-cols-7">
<div class="col-span-5">
<p class="w-full overflow-hidden truncate text-md font-bold text-ptext1 dark:text-ptext1-DM">
<p class="text-md w-full overflow-hidden truncate font-bold text-ptext1 dark:text-ptext1-DM">
<a
href={`/${lang}/posts/${item.id}`}
>
Expand All @@ -180,17 +220,29 @@ export const CartCardMobile: Component<Props> = (props) => {
</div>
<div class="col-span-4 col-start-1 flex items-center">
<div class="inline-block">
{item.seller_image ? (
<img
src={item.seller_image}
alt={
item.seller_image
? // TODO Internationalize
"Seller Image"
: "No image"
}
class="mr-2 h-6 w-6 rounded-full bg-background1 object-cover dark:bg-icon1-DM"
/>
{item.seller_img ? (
<picture>
<source
srcset={
item.seller_img
.webpUrl
}
type="image/webp"
/>
<img
src={
item.seller_img
.jpegUrl
}
alt={
item.seller_img
? // TODO Internationalize
"Seller Image"
: "No image"
}
class="mr-2 h-6 w-6 rounded-full bg-background1 object-cover dark:bg-icon1-DM"
/>
</picture>
) : (
<svg
viewBox="0 0 512 512"
Expand Down Expand Up @@ -218,7 +270,8 @@ export const CartCardMobile: Component<Props> = (props) => {
<div class="col-span-1 col-start-7 row-start-1 flex justify-end pl-2">
{/* Price */}
<Show when={item.price > 0}>
${(
$
{(
item.price * item.quantity
).toFixed(2)}
</Show>
Expand Down
Loading

0 comments on commit 22c1d47

Please sign in to comment.