diff --git a/src/components/common/cart/CartCard.tsx b/src/components/common/cart/CartCard.tsx index f13d86f1..75c41f8b 100644 --- a/src/components/common/cart/CartCard.tsx +++ b/src/components/common/cart/CartCard.tsx @@ -22,21 +22,32 @@ export const CartCard: Component = (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; }) ); @@ -88,15 +99,26 @@ export const CartCard: Component = (props) => { props.deleteItem(); }; + // REFACTOR: Make this a helper function 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) { @@ -105,15 +127,26 @@ export const CartCard: Component = (props) => { } }; - const downloadSellerImage = async (path: string) => { + //REFACTOR: Make this a helper function + 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) { @@ -125,143 +158,165 @@ export const CartCard: Component = (props) => { return (
    - {newItems().map((item: any) => ( + {newItems().map((item: Post) => (
  • -
    -
    - {item.image_url ? ( - { - ) : ( -
    +
    + {item.image_url ? ( + + + { + + ) : ( + - )} -
    + + )} +
    -
    -
    -
    -

    - +

    +
    +
    +
    {item.title} - -

    -
    -
    -
    - {item.seller_image ? ( - { - ) : ( - - )} +
    -

    - - {item.seller_name} - -

    -
    -
    -

    -
    -
    - {/* Quantity */} - -
    -
    - {/* Price */} - 0}> - ${( - item.price * item.quantity - ).toFixed(2)} - - - {t("messages.free")} - -
    -
    - {/* Remove All from Cart */} -
    +
    +

    +
    +
    + {/* Quantity */} + +
    +
    + {/* Price */} + 0}> + $ + {( + item.price * item.quantity + ).toFixed(2)} + + + {t("messages.free")} + +
    +
    + {/* Remove All from Cart */} + + + + + +
    -
    +
    • ))}
diff --git a/src/components/common/cart/CartCardDonate.tsx b/src/components/common/cart/CartCardDonate.tsx index 83626a51..38de6d40 100644 --- a/src/components/common/cart/CartCardDonate.tsx +++ b/src/components/common/cart/CartCardDonate.tsx @@ -31,6 +31,7 @@ export const CartCardDonate: Component = (props) => {
  • + {/* Refactor: use picture element and webp images? */} = (props) => { > $50 - {/*
    - LearnGrove Logo -
    -

    - LearnGrove -

    */}

    diff --git a/src/components/common/cart/CartCardDonateMobile.tsx b/src/components/common/cart/CartCardDonateMobile.tsx index 756f63f0..ba1ae86a 100644 --- a/src/components/common/cart/CartCardDonateMobile.tsx +++ b/src/components/common/cart/CartCardDonateMobile.tsx @@ -31,6 +31,7 @@ export const CartCardDonateMobile: Component = (props) => {

  • + {/* Refactor: use picture element and webp images? */} = (props) => { > $50 - {/*
    - LearnGrove Logo -
    -

    - LearnGrove -

    */}
    diff --git a/src/components/common/cart/CartCardMobile.tsx b/src/components/common/cart/CartCardMobile.tsx index 3c176518..9e29a457 100644 --- a/src/components/common/cart/CartCardMobile.tsx +++ b/src/components/common/cart/CartCardMobile.tsx @@ -22,21 +22,33 @@ export const CartCardMobile: Component = (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; }) ); @@ -88,15 +100,26 @@ export const CartCardMobile: Component = (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) { @@ -105,15 +128,26 @@ export const CartCardMobile: Component = (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) { @@ -125,20 +159,26 @@ export const CartCardMobile: Component = (props) => { return (