From 428ce49b431e6ea14c413358c195de12e9c8ab67 Mon Sep 17 00:00:00 2001
From: r-southworth <rachael.southworth@datagrove.com>
Date: Fri, 30 Aug 2024 17:59:51 -0400
Subject: [PATCH 1/8] convert to sever

---
 src/components/common/MobileProfileBtn.tsx |   1 +
 src/components/common/ProfileBtn.tsx       |   6 +-
 src/components/common/cart/CartCard.tsx    |  65 ++---
 src/components/home/Home.tsx               |   4 +
 src/components/home/HomeCard.tsx           |  45 +---
 src/components/posts/FullPostView.tsx      | 277 ++++++++++++---------
 src/components/posts/ViewCreatorPosts.tsx  |  73 ++----
 src/components/services/ResourcesMain.tsx  |   8 +
 src/components/services/ViewCard.tsx       | 112 ++++-----
 src/lib/imageHelper.tsx                    |  24 +-
 src/lib/types.ts                           |  13 +-
 src/pages/api/fetchFilterPosts.ts          | 164 ++++++++++--
 12 files changed, 447 insertions(+), 345 deletions(-)

diff --git a/src/components/common/MobileProfileBtn.tsx b/src/components/common/MobileProfileBtn.tsx
index f715b00a..c2fc3296 100644
--- a/src/components/common/MobileProfileBtn.tsx
+++ b/src/components/common/MobileProfileBtn.tsx
@@ -15,6 +15,7 @@ const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
 
 const { data: User, error: UserError } = await supabase.auth.getSession();
+
 export const MobileProfileBtn = () => {
     const [isUser, setIsUser] = createSignal<boolean | null>(false);
 
diff --git a/src/components/common/ProfileBtn.tsx b/src/components/common/ProfileBtn.tsx
index 7e896811..4213e52b 100644
--- a/src/components/common/ProfileBtn.tsx
+++ b/src/components/common/ProfileBtn.tsx
@@ -10,11 +10,11 @@ import { CreatorRegistrationRouting } from "../members/CreatorRegistrationRoutin
 import { LanguagePicker } from "./LanguagePicker";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 
-
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
 
 const { data: User, error: UserError } = await supabase.auth.getSession();
+
 export const ProfileBtn = () => {
     const [isUser, setIsUser] = createSignal<boolean | null>(false);
 
@@ -74,11 +74,11 @@ export const ProfileBtn = () => {
         <div class="">
             <button
                 onclick={clickHandler}
-                class="mr-4 flex rounded-lg md:border border-border1 px-3 py-2 dark:border-border1-DM md:mr-0"
+                class="mr-4 flex rounded-lg border-border1 px-3 py-2 dark:border-border1-DM md:mr-0 md:border"
                 aria-label={t("ariaLabels.navigation")}
             >
                 <svg
-                    class="mr-2 h-4 w-4 fill-icon1 dark:fill-icon1-DM hidden md:block"
+                    class="mr-2 hidden h-4 w-4 fill-icon1 dark:fill-icon1-DM md:block"
                     viewBox="0 0 32 32"
                     xmlns="http://www.w3.org/2000/svg"
                 >
diff --git a/src/components/common/cart/CartCard.tsx b/src/components/common/cart/CartCard.tsx
index 8b9b52d8..e8780809 100644
--- a/src/components/common/cart/CartCard.tsx
+++ b/src/components/common/cart/CartCard.tsx
@@ -27,42 +27,43 @@ export const CartCard: Component<Props> = (props) => {
 
     createEffect(async () => {
         if (props.items) {
-            const updatedItems = await Promise.all(
-                props.items.map(async (item: Post) => {
-                    const newItem = { ...item };
-                    newItem.image_urls
-                        ? (newItem.image_url = await downloadPostImage(
-                              newItem.image_urls.split(",")[0]
-                          ))
-                        : (newItem.image_url = undefined);
+            // const updatedItems = await Promise.all(
+            //     props.items.map(async (item: Post) => {
+            //         const newItem = { ...item };
+            //         newItem.image_urls
+            //             ? (newItem.image_url = await downloadPostImage(
+            //                   newItem.image_urls.split(",")[0]
+            //               ))
+            //             : (newItem.image_url = undefined);
 
-                    const { data: sellerImg, error: sellerImgError } =
-                        await supabase
-                            .from("sellerview")
-                            .select("*")
-                            .eq("seller_id", newItem.seller_id);
+            //         const { data: sellerImg, error: sellerImgError } =
+            //             await supabase
+            //                 .from("sellerview")
+            //                 .select("*")
+            //                 .eq("seller_id", newItem.seller_id);
 
-                    if (sellerImgError) {
-                        console.log(sellerImgError);
-                    }
+            //         if (sellerImgError) {
+            //             console.log(sellerImgError);
+            //         }
 
-                    if (sellerImg) {
-                        if (sellerImg[0].image_url) {
-                            newItem.seller_img = await downloadUserImage(
-                                sellerImg[0].image_url
-                            );
-                        }
-                    }
-                    return newItem;
-                })
-            );
+            //         if (sellerImg) {
+            //             if (sellerImg[0].image_url) {
+            //                 newItem.seller_img = await downloadUserImage(
+            //                     sellerImg[0].image_url
+            //                 );
+            //             }
+            //         }
+            //         return newItem;
+            //     })
+            // );
 
-            setNewItems(updatedItems);
+            setNewItems(props.items);
+            console.log("Cart Card Props", newItems());
         }
     });
 
     const updateQuantity = async (quantity: number, product_id?: string) => {
-        console.log("Card Card Update Quantity");
+        console.log("Cart Card Update Quantity");
         setQuantity(quantity);
         if (product_id) {
             const updatedItems: Array<Post> = await Promise.all(
@@ -260,9 +261,11 @@ export const CartCard: Component<Props> = (props) => {
                                             {/* Remove All from Cart */}
                                             <button
                                                 class="rounded font-bold text-alert1 dark:text-alert1-DM"
-                                                onclick={() =>
-                                                    removeItem(item.product_id)
-                                                }
+                                                onclick={(e) => {
+                                                    e.stopPropagation();
+                                                    e.preventDefault();
+                                                    removeItem(item.product_id);
+                                                }}
                                                 aria-label={t(
                                                     "ariaLabels.removeFromCart"
                                                 )}
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index 72c1d6cb..e6d3ce74 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -84,6 +84,8 @@ export const Home: Component = () => {
             resourceFilters: [],
             secularFilter: false,
             lang: lang,
+            listing_status: true,
+            draft_status: false,
         });
 
         if (
@@ -105,6 +107,8 @@ export const Home: Component = () => {
             secularFilter: false,
             lang: lang,
             orderAscending: true,
+            listing_status: true,
+            draft_status: false,
         });
 
         if (
diff --git a/src/components/home/HomeCard.tsx b/src/components/home/HomeCard.tsx
index bab2c79e..dd1335e7 100644
--- a/src/components/home/HomeCard.tsx
+++ b/src/components/home/HomeCard.tsx
@@ -16,10 +16,6 @@ import person from "@src/assets/person.svg";
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
 
-// const values = ui[lang] as uiObject
-const values = ui[lang] as uiObject;
-const productCategories = values.subjectCategoryInfo.subjects;
-
 interface Props {
     // Define the type for the filterPosts prop
     posts: Array<Post>;
@@ -29,49 +25,10 @@ export const HomeCard: Component<Props> = (props) => {
     const [newPosts, setNewPosts] = createSignal<Array<any>>([]);
     const [postImages, setPostImages] = createSignal<string[]>([]);
 
-    createEffect(async () => {
-        if (props.posts) {
-            console.log("props.posts");
-            console.log(props.posts);
-            const updatedPosts = await Promise.all(
-                props.posts.map(async (post: Post) => {
-                    post.image_urls
-                        ? (post.image_url = await downloadPostImage(
-                              post.image_urls.split(",")[0]
-                          ))
-                        : (post.image_url = undefined);
-                    // Set the default quantity to 1
-                    post.quantity = 1;
-
-                    const { data, error } = await supabase
-                        .from("sellerview")
-                        .select("*")
-                        .eq("seller_id", post.seller_id);
-
-                    if (error) {
-                        console.log(error);
-                    }
-
-                    if (data) {
-                        if (data[0].image_url) {
-                            post.seller_img = await downloadUserImage(
-                                data[0].image_url
-                            );
-                        }
-                    }
-
-                    return post;
-                })
-            );
-
-            setNewPosts(updatedPosts);
-        }
-    });
-
     return (
         <div class="mb-4 flex justify-center">
             <ul class="flex flex-wrap justify-center md:flex-nowrap">
-                {newPosts().map((post: any) => (
+                {props.posts.map((post: any) => (
                     <li>
                         {/* { post.id } */}
                         {/* {`/${lang}/posts/${post.id}`} */}
diff --git a/src/components/posts/FullPostView.tsx b/src/components/posts/FullPostView.tsx
index ba9e4905..c953a862 100644
--- a/src/components/posts/FullPostView.tsx
+++ b/src/components/posts/FullPostView.tsx
@@ -13,6 +13,7 @@ import { EditPost } from "./EditPost";
 import { FavoriteButton } from "@components/posts/AddFavorite";
 import type { AuthSession } from "@supabase/supabase-js";
 import { downloadPostImage, downloadUserImage } from "@lib/imageHelper";
+import type { FilterPostsParams } from "@lib/types";
 
 import stripe from "@lib/stripe";
 import { ReportResource } from "./ReportResource";
@@ -29,10 +30,38 @@ interface Props {
     postId: string | undefined;
 }
 
+async function fetchPosts({
+    subjectFilters,
+    gradeFilters,
+    searchString,
+    resourceFilters,
+    secularFilter,
+    listing_status,
+    draft_status,
+}: FilterPostsParams) {
+    const response = await fetch("/api/fetchFilterPosts", {
+        method: "POST",
+        body: JSON.stringify({
+            subjectFilters: subjectFilters,
+            gradeFilters: gradeFilters,
+            searchString: searchString,
+            resourceFilters: resourceFilters,
+            secularFilter: secularFilter,
+            lang: lang,
+            listing_status: listing_status,
+            draft_status: draft_status,
+        }),
+    });
+    const data = await response.json();
+
+    return data;
+}
+
 const { data: User, error: UserError } = await supabase.auth.getSession();
+
 export const ViewFullPost: Component<Props> = (props) => {
     const [post, setPost] = createSignal<Post>();
-    const [postData, setPostData] = createSignal<Array<Post>>([]);
+    // const [postData, setPostData] = createSignal<Array<Post>>([]);
     const [postImages, setPostImages] = createSignal<
         { webpUrl: string; jpegUrl: string }[]
     >([]);
@@ -69,120 +98,120 @@ export const ViewFullPost: Component<Props> = (props) => {
 
     const fetchPost = async (id: number) => {
         try {
-            const { data: notDraftData, error } = await supabase
-                .from("sellerposts")
-                .select("*")
-                .eq("id", id)
-                .eq("listing_status", true)
-                .eq("draft_status", false);
-            if (error) {
-                console.log(error);
-            } else if (notDraftData[0] === undefined && User.session) {
-                const { data: userData, error } = await supabase
-                    .from("sellerposts")
-                    .select("*")
-                    .eq("id", id)
-                    .eq("listing_status", true)
-                    .eq("user_id", User.session?.user.id);
-
-                if (error) {
-                    console.log(error);
-                } else if (userData[0] === undefined) {
+            const res = await fetchPosts({
+                lang: lang,
+                listing_status: true,
+                draft_status: false,
+                post_id: id,
+            });
+
+            if (res.body.length < 1 && User.session) {
+                const userRes = await fetchPosts({
+                    lang: lang,
+                    listing_status: true,
+                    draft_status: false,
+                    post_id: id,
+                    user_id: User.session?.user.id,
+                });
+
+                if (userRes.body.length < 1) {
                     alert(t("messages.noPost"));
                     location.href = `/${lang}/resources`;
                 } else {
-                    setPostData(userData);
-                    console.log(postData());
+                    setPost(userRes.body[0]);
+                    setPostImages(userRes.body[0].image_signedUrls);
+                    console.log(post());
                 }
-            } else if (notDraftData[0] === undefined && User.session === null) {
+            } else if (res.body.length < 1 && User.session === null) {
                 alert(t("messages.noPost"));
                 location.href = `/${lang}/resources`;
             } else {
-                setPostData(notDraftData);
-                console.log(postData());
+                setPost(res.body[0]);
+                setPostImages(res.body[0].image_signedUrls);
+                console.log(post());
             }
 
-            const newItem: Post[] = await Promise.all(
-                postData()?.map(async (item) => {
-                    item.subject = [];
-                    productCategories.forEach((productCategories) => {
-                        item.product_subject.map((productSubject: string) => {
-                            if (productSubject === productCategories.id) {
-                                item.subject?.push(productCategories.name);
-                            }
-                        });
-                    });
-
-                    const { data: sellerImg, error: sellerImgError } =
-                        await supabase
-                            .from("sellerview")
-                            .select("*")
-                            .eq("seller_id", item.seller_id);
-
-                    if (sellerImgError) {
-                        console.log(sellerImgError);
-                    }
-
-                    if (sellerImg) {
-                        if (sellerImg[0].image_url) {
-                            item.seller_img = await downloadUserImage(
-                                sellerImg[0].image_url
-                            );
-                        }
-                    }
-
-                    const { data: gradeData, error: gradeError } =
-                        await supabase.from("grade_level").select("*");
-
-                    if (gradeError) {
-                        console.log("supabase error: " + gradeError.message);
-                    } else {
-                        item.grade = [];
-                        gradeData.forEach((databaseGrade) => {
-                            item.post_grade.map((itemGrade: string) => {
-                                if (itemGrade === databaseGrade.id.toString()) {
-                                    item.grade?.push(databaseGrade.grade);
-                                }
-                            });
-                        });
-                    }
-
-                    const { data: resourceTypeData, error } = await supabase
-                        .from("resource_types")
-                        .select("*");
-
-                    if (error) {
-                        console.log("supabase error: " + error.message);
-                    } else {
-                        sortResourceTypes(resourceTypeData);
-                        item.resourceTypes = [];
-                        resourceTypeData.forEach((databaseResourceTypes) => {
-                            item.resource_types.map(
-                                (itemResourceType: string) => {
-                                    if (
-                                        itemResourceType ===
-                                        databaseResourceTypes.id.toString()
-                                    ) {
-                                        item.resourceTypes!.push(
-                                            databaseResourceTypes.type
-                                        );
-                                    }
-                                }
-                            );
-                        });
-                    }
-
-                    if (item.price_id !== null) {
-                        const priceData = await stripe.prices.retrieve(
-                            item.price_id
-                        );
-                        item.price = priceData.unit_amount! / 100;
-                    }
-
-                    return item;
-                })
-            );
-            setPost(newItem[0]);
+            // const newItem: Post[] = await Promise.all(
+            //     postData()?.map(async (item) => {
+            //         item.subject = [];
+            //         productCategories.forEach((productCategories) => {
+            //             item.product_subject.map((productSubject: string) => {
+            //                 if (productSubject === productCategories.id) {
+            //                     item.subject?.push(productCategories.name);
+            //                 }
+            //             });
+            //         });
+
+            //         const { data: sellerImg, error: sellerImgError } =
+            //             await supabase
+            //                 .from("sellerview")
+            //                 .select("*")
+            //                 .eq("seller_id", item.seller_id);
+
+            //         if (sellerImgError) {
+            //             console.log(sellerImgError);
+            //         }
+
+            //         if (sellerImg) {
+            //             if (sellerImg[0].image_url) {
+            //                 item.seller_img = await downloadUserImage(
+            //                     sellerImg[0].image_url
+            //                 );
+            //             }
+            //         }
+
+            //         const { data: gradeData, error: gradeError } =
+            //             await supabase.from("grade_level").select("*");
+
+            //         if (gradeError) {
+            //             console.log("supabase error: " + gradeError.message);
+            //         } else {
+            //             item.grade = [];
+            //             gradeData.forEach((databaseGrade) => {
+            //                 item.post_grade.map((itemGrade: string) => {
+            //                     if (itemGrade === databaseGrade.id.toString()) {
+            //                         item.grade?.push(databaseGrade.grade);
+            //                     }
+            //                 });
+            //             });
+            //         }
+
+            //         const { data: resourceTypeData, error } = await supabase
+            //             .from("resource_types")
+            //             .select("*");
+
+            //         if (error) {
+            //             console.log("supabase error: " + error.message);
+            //         } else {
+            //             sortResourceTypes(resourceTypeData);
+            //             item.resourceTypes = [];
+            //             resourceTypeData.forEach((databaseResourceTypes) => {
+            //                 item.resource_types.map(
+            //                     (itemResourceType: string) => {
+            //                         if (
+            //                             itemResourceType ===
+            //                             databaseResourceTypes.id.toString()
+            //                         ) {
+            //                             item.resourceTypes!.push(
+            //                                 databaseResourceTypes.type
+            //                             );
+            //                         }
+            //                     }
+            //                 );
+            //             });
+            //         }
+
+            //         if (item.price_id !== null) {
+            //             const priceData = await stripe.prices.retrieve(
+            //                 item.price_id
+            //             );
+            //             item.price = priceData.unit_amount! / 100;
+            //         }
+
+            //         return item;
+            //     })
+            // );
+            // setPost(newItem[0]);
             // console.log(post()?.product_subject)
             // } else {
             //     alert(t("messages.noPost"));
@@ -193,23 +222,23 @@ export const ViewFullPost: Component<Props> = (props) => {
         }
     };
 
-    createEffect(async () => {
-        if (post() !== undefined) {
-            if (
-                post()?.image_urls === undefined ||
-                post()?.image_urls === null
-            ) {
-            } else {
-                const imageUrls = post()?.image_urls?.split(",");
-                imageUrls?.forEach(async (imageUrl: string) => {
-                    const url = await downloadPostImage(imageUrl);
-                    if (url) {
-                        setPostImages([...postImages(), url]);
-                    }
-                });
-            }
-        }
-    });
+    // createEffect(async () => {
+    //     if (post() !== undefined) {
+    //         if (
+    //             post()?.image_urls === undefined ||
+    //             post()?.image_urls === null
+    //         ) {
+    //         } else {
+    //             const imageUrls = post()?.image_urls?.split(",");
+    //             imageUrls?.forEach(async (imageUrl: string) => {
+    //                 const url = await downloadPostImage(imageUrl);
+    //                 if (url) {
+    //                     setPostImages([...postImages(), url]);
+    //                 }
+    //             });
+    //         }
+    //     }
+    // });
 
     const updateQuantity = (quantity: number) => {
         setQuantity(quantity);
@@ -487,7 +516,7 @@ export const ViewFullPost: Component<Props> = (props) => {
                             id="images-div"
                             class="col-span-3 mr-1 flex w-[300px] flex-col items-center justify-center lg:h-[400px] lg:w-[400px]"
                         >
-                            <Show when={postImages().length > 0}>
+                            <Show when={() => postImages().length > 0}>
                                 <Show when={postImages().length === 1}>
                                     <div class="relative flex h-[300px] w-[300px] items-center justify-center rounded">
                                         <picture>
diff --git a/src/components/posts/ViewCreatorPosts.tsx b/src/components/posts/ViewCreatorPosts.tsx
index 2ca5838b..227b268c 100644
--- a/src/components/posts/ViewCreatorPosts.tsx
+++ b/src/components/posts/ViewCreatorPosts.tsx
@@ -11,16 +11,27 @@ import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 import stripe from "@lib/stripe";
 import { useStore } from "@nanostores/solid";
 import { windowSize } from "@components/common/WindowSizeStore";
+import type { FilterPostsParams } from "@lib/types";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 
-//get the categories from the language files so they translate with changes in the language picker
-const values = ui[lang] as uiObject;
-const productCategories = values.subjectCategoryInfo.subjects;
-
 // Get the user session
 const { data: User, error: UserError } = await supabase.auth.getSession();
 
+async function fetchPosts({ lang }: FilterPostsParams) {
+    const response = await fetch("/api/fetchFilterPosts", {
+        method: "POST",
+        body: JSON.stringify({
+            lang: lang,
+            listing_status: true,
+            user_id: User.session?.user.id,
+        }),
+    });
+    const data = await response.json();
+
+    return data;
+}
+
 export const ViewCreatorPosts: Component = () => {
     // initialize posts and session
     const [posts, setPosts] = createSignal<Array<Post>>([]);
@@ -36,58 +47,12 @@ export const ViewCreatorPosts: Component = () => {
     // get posts from supabase that match with the user id and set them to posts. After that render them through ViewCard.
     // if there is a modification to the posts table, the page will refresh and the posts will be updated.
     createEffect(async () => {
-        const { data, error } = await supabase
-            .from("sellerposts")
-            .select("*")
-            .order("id", { ascending: false })
-            .eq("user_id", session()!.user.id)
-            .eq("listing_status", true);
-        if (!data) {
+        let res = await fetchPosts({ lang: lang });
+
+        if (!posts) {
             alert("No posts available.");
-        }
-        if (error) {
-            console.log("supabase error: " + error.message);
         } else {
-            const newItems = await Promise.all(
-                data?.map(async (item) => {
-                    item.subject = [];
-                    productCategories.forEach((productCategories) => {
-                        item.product_subject.map((productSubject: string) => {
-                            if (productSubject === productCategories.id) {
-                                item.subject.push(productCategories.name);
-                                console.log(productCategories.name);
-                            }
-                        });
-                    });
-                    delete item.product_subject;
-
-                    const { data: gradeData, error: gradeError } =
-                        await supabase.from("grade_level").select("*");
-
-                    if (gradeError) {
-                        console.log("supabase error: " + gradeError.message);
-                    } else {
-                        item.grade = [];
-                        gradeData.forEach((databaseGrade) => {
-                            item.post_grade.map((itemGrade: string) => {
-                                if (itemGrade === databaseGrade.id.toString()) {
-                                    item.grade.push(databaseGrade.grade);
-                                }
-                            });
-                        });
-                    }
-
-                    if (item.price_id !== null) {
-                        const priceData = await stripe.prices.retrieve(
-                            item.price_id
-                        );
-                        item.price = priceData.unit_amount! / 100;
-                    }
-                    return item;
-                })
-            );
-            console.log(newItems.map((item) => item.price));
-            setPosts(newItems);
+            setPosts(res.body);
         }
     });
     return (
diff --git a/src/components/services/ResourcesMain.tsx b/src/components/services/ResourcesMain.tsx
index 67f82e2e..2333dc99 100644
--- a/src/components/services/ResourcesMain.tsx
+++ b/src/components/services/ResourcesMain.tsx
@@ -21,6 +21,8 @@ async function fetchPosts({
     searchString,
     resourceFilters,
     secularFilter,
+    listing_status,
+    draft_status,
 }: FilterPostsParams) {
     const response = await fetch("/api/fetchFilterPosts", {
         method: "POST",
@@ -31,6 +33,8 @@ async function fetchPosts({
             resourceFilters: resourceFilters,
             secularFilter: secularFilter,
             lang: lang,
+            listing_status: listing_status,
+            draft_status: draft_status,
         }),
     });
     const data = await response.json();
@@ -136,6 +140,8 @@ export const ResourcesView: Component = () => {
             resourceFilters: resourceTypesFilters(),
             secularFilter: secularFilters(),
             lang: lang,
+            listing_status: true,
+            draft_status: false,
         });
 
         console.log(res);
@@ -168,6 +174,8 @@ export const ResourcesView: Component = () => {
                 resourceFilters: [],
                 secularFilter: false,
                 lang: lang,
+                listing_status: true,
+                draft_status: false,
             });
 
             setPosts(allPosts);
diff --git a/src/components/services/ViewCard.tsx b/src/components/services/ViewCard.tsx
index e831e917..f5770f66 100644
--- a/src/components/services/ViewCard.tsx
+++ b/src/components/services/ViewCard.tsx
@@ -41,68 +41,68 @@ export const ViewCard: Component<Props> = (props) => {
         }
     }
 
-    createEffect(async () => {
-        if (props.posts) {
-            const updatedPosts = await Promise.all(
-                props.posts.map(async (post: Post) => {
-                    post.image_urls
-                        ? (post.image_url = await downloadPostImage(
-                              post.image_urls.split(",")[0]
-                          ))
-                        : (post.image_url = undefined);
+    // createEffect(async () => {
+    //     if (props.posts) {
+    //         const updatedPosts = await Promise.all(
+    //             props.posts.map(async (post: Post) => {
+    //                 post.image_urls
+    //                     ? (post.image_url = await downloadPostImage(
+    //                           post.image_urls.split(",")[0]
+    //                       ))
+    //                     : (post.image_url = undefined);
 
-                    // Set the default quantity to 1
-                    post.quantity = 1;
+    //                 // Set the default quantity to 1
+    //                 post.quantity = 1;
 
-                    const { data: sellerImg, error: sellerImgError } =
-                        await supabase
-                            .from("sellerview")
-                            .select("*")
-                            .eq("seller_id", post.seller_id);
+    //                 const { data: sellerImg, error: sellerImgError } =
+    //                     await supabase
+    //                         .from("sellerview")
+    //                         .select("*")
+    //                         .eq("seller_id", post.seller_id);
 
-                    if (sellerImgError) {
-                        console.log(sellerImgError);
-                    }
+    //                 if (sellerImgError) {
+    //                     console.log(sellerImgError);
+    //                 }
 
-                    if (sellerImg) {
-                        if (sellerImg[0].image_url) {
-                            post.seller_img = await downloadUserImage(
-                                sellerImg[0].image_url
-                            );
-                        }
-                    }
+    //                 if (sellerImg) {
+    //                     if (sellerImg[0].image_url) {
+    //                         post.seller_img = await downloadUserImage(
+    //                             sellerImg[0].image_url
+    //                         );
+    //                     }
+    //                 }
 
-                    const { data: resourceTypeData, error } = await supabase
-                        .from("resource_types")
-                        .select("*");
+    // const { data: resourceTypeData, error } = await supabase
+    //     .from("resource_types")
+    //     .select("*");
 
-                    if (error) {
-                        console.log("supabase error: " + error.message);
-                    } else {
-                        sortResourceTypes(resourceTypeData);
-                        post.resourceTypes = [];
-                        resourceTypeData.forEach((databaseResourceTypes) => {
-                            post.resource_types.map(
-                                (itemResourceType: string) => {
-                                    if (
-                                        itemResourceType ===
-                                        databaseResourceTypes.id.toString()
-                                    ) {
-                                        post.resourceTypes!.push(
-                                            databaseResourceTypes.type
-                                        );
-                                    }
-                                }
-                            );
-                        });
-                    }
-                    return post;
-                })
-            );
+    // if (error) {
+    //     console.log("supabase error: " + error.message);
+    // } else {
+    //     sortResourceTypes(resourceTypeData);
+    //     post.resourceTypes = [];
+    //     resourceTypeData.forEach((databaseResourceTypes) => {
+    //         post.resource_types.map(
+    //             (itemResourceType: string) => {
+    //                 if (
+    //                     itemResourceType ===
+    //                     databaseResourceTypes.id.toString()
+    //                 ) {
+    //                     post.resourceTypes!.push(
+    //                         databaseResourceTypes.type
+    //                     );
+    //                 }
+    //             }
+    //         );
+    //     });
+    // }
+    //                 return post;
+    //             })
+    //         );
 
-            setNewPosts(updatedPosts);
-        }
-    });
+    //         setNewPosts(updatedPosts);
+    //     }
+    // });
 
     const updateQuantity = (quantity: number) => {
         setQuantity(quantity);
@@ -115,7 +115,7 @@ export const ViewCard: Component<Props> = (props) => {
     return (
         <div class="flex w-full justify-center">
             <ul class="flex w-full flex-wrap justify-center">
-                {newPosts().map((post: Post) => (
+                {props.posts.map((post: Post) => (
                     <li class="mb-3 w-[99%]">
                         <a href={`/${lang}/posts/${post.id}`}>
                             <div class="mb-2 box-content flex h-full w-full flex-grow flex-row items-start justify-start rounded-lg border border-border1 border-opacity-25 shadow-md shadow-shadow-LM dark:border-border1-DM dark:border-opacity-25 dark:shadow-shadow-DM">
diff --git a/src/lib/imageHelper.tsx b/src/lib/imageHelper.tsx
index ad9907f7..f07e49ae 100644
--- a/src/lib/imageHelper.tsx
+++ b/src/lib/imageHelper.tsx
@@ -67,16 +67,16 @@ export const downloadUserImage = async (path: string) => {
 };
 
 export const lazyLoadImage = (img: HTMLImageElement) => {
-    console.log("Lazy loading image:", img);
+    // console.log("Lazy loading image:", img);
     const dataSrc = img.dataset.src;
-    console.log("Data set:", img.dataset);
+    // 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);
+        // 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);
+        // console.log("Updated src:", img.src);
     }
 
     // Get all source elements within the parent <picture> element
@@ -87,25 +87,25 @@ export const lazyLoadImage = (img: HTMLImageElement) => {
             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);
+                // 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);
+                // console.log("Updated srcset:", sourceElement.srcset);
             }
         });
     }
 };
 
 export const lazyLoadAllImages = () => {
-    console.log("Lazy loading all images...");
+    // console.log("Lazy loading all images...");
     const images = document.querySelectorAll("img[data-src]");
-    console.log("Images:", images);
-    console.log("Images length:", images.length);
+    // console.log("Images:", images);
+    // console.log("Images length:", images.length);
 
     images.forEach((img) => {
         const imageElement = img as HTMLImageElement;
-        console.log("Image:", imageElement);
+        // console.log("Image:", imageElement);
 
         // Check if the image has already loaded (in case of caching)
         if (imageElement.complete) {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 1fc16f01..8f126061 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -27,6 +27,7 @@ export interface Post {
     resourceTypes: Array<string> | null; //Array of resourceTypes names
     image_url: {webpUrl: string, jpegUrl: string} | undefined; //Actual images for the post DOES NOT COME FROM DATABASE
     seller_img: {webpUrl: string, jpegUrl: string} | undefined; //Profile Image of the seller
+    image_signedUrls: {webpUrl: string, jpegUrl: string}[];
     price: number; //Price of the post
     quantity: number; //Quantity to add to cart from post
 }
@@ -60,14 +61,16 @@ export interface Creator {
 }
 
 export interface FilterPostsParams {
-    subjectFilters: string[]; 
-    gradeFilters: string[];   
-    searchString: string;
-    resourceFilters: string[]; 
-    secularFilter: boolean;
+    subjectFilters?: string[]; 
+    gradeFilters?: string[];   
+    searchString?: string;
+    resourceFilters?: string[]; 
+    secularFilter?: boolean;
     lang: "en" | "es" | "fr";   
     limit?: number;
     draft_status?: boolean;
     listing_status?: boolean;
     orderAscending?: boolean;
+    user_id?: string;
+    post_id?: number;
 }
\ No newline at end of file
diff --git a/src/pages/api/fetchFilterPosts.ts b/src/pages/api/fetchFilterPosts.ts
index a433374d..4448fabf 100644
--- a/src/pages/api/fetchFilterPosts.ts
+++ b/src/pages/api/fetchFilterPosts.ts
@@ -18,7 +18,9 @@ export const POST: APIRoute = async ({ request, redirect }) => {
         limit,
         draft_status,
         listing_status,
-        orderAscending
+        orderAscending,
+        user_id,
+        post_id,
     }: FilterPostsParams = await request.json();
 
     const values = ui[lang] as uiObject;
@@ -28,9 +30,9 @@ export const POST: APIRoute = async ({ request, redirect }) => {
         let query = supabase
             .from("sellerposts")
             .select("*")
-            .order("id", { ascending: orderAscending ? orderAscending : false })
-            .eq("listing_status", listing_status? listing_status : true)
-            .eq("draft_status", draft_status? draft_status : false);
+            .order("id", {
+                ascending: orderAscending ? orderAscending : false,
+            });
 
         if (Array.isArray(subjectFilters) && subjectFilters.length !== 0) {
             query = query.overlaps("product_subject", subjectFilters);
@@ -47,11 +49,24 @@ export const POST: APIRoute = async ({ request, redirect }) => {
         if (Array.isArray(resourceFilters) && resourceFilters.length !== 0) {
             query = query.overlaps("resource_types", resourceFilters);
         }
-        if (limit){
-            query = query.limit(limit)
+        if (limit) {
+            query = query.limit(limit);
+        }
+        if (user_id) {
+            query = query.eq("user_id", user_id);
+        }
+        if (draft_status) {
+            query = query.eq("draft_status", draft_status);
+        }
+        if (listing_status) {
+            query = query.eq("listing_status", listing_status);
+        }
+        if (post_id) {
+            query = query.eq("id", post_id);
         }
 
         const { data: posts, error } = await query;
+
         if (error) {
             return new Response(
                 JSON.stringify({
@@ -111,6 +126,7 @@ export const POST: APIRoute = async ({ request, redirect }) => {
                     });
 
                     sortResourceTypes(resourceTypesData);
+
                     post.resourceTypes = [];
                     resourceTypesData.forEach((databaseResourceTypes) => {
                         post.resource_types.map((postResourceTypes: string) => {
@@ -118,8 +134,8 @@ export const POST: APIRoute = async ({ request, redirect }) => {
                                 postResourceTypes ===
                                 databaseResourceTypes.id.toString()
                             ) {
-                                post.resource_types.push(
-                                    databaseResourceTypes.resource_types
+                                post.resourceTypes?.push(
+                                    databaseResourceTypes.type
                                 );
                             }
                         });
@@ -132,6 +148,55 @@ export const POST: APIRoute = async ({ request, redirect }) => {
                         post.price = priceData.unit_amount! / 100;
                     }
 
+                    if (post.image_urls) {
+                        const imageUrls = post.image_urls.split(",");
+                        post.image_signedUrls = [];
+
+                         const urls = await Promise.all(
+                            imageUrls.map(async (imageUrl: string) => {
+                            const url = await downloadPostImage(imageUrl);
+                            if (url) {
+                                post.image_signedUrls = [
+                                    ...post.image_signedUrls,
+                                    url,
+                                ];
+                                return url;
+                            }
+                        }));
+
+                        if(post.image_signedUrls.length > 0){
+                            post.image_url = post.image_signedUrls[0]
+                        }
+
+
+                    } else {
+                        post.image_signedUrls = [];
+                        post.image_url = undefined;
+                    }
+
+                    // (post.image_url = await downloadPostImage(
+                    //       post.image_urls.split(",")[0]
+                    //   ))
+                    // : (post.image_url = undefined);
+
+                    const { data: sellerImg, error: sellerImgError } =
+                        await supabase
+                            .from("sellerview")
+                            .select("*")
+                            .eq("seller_id", post.seller_id);
+
+                    if (sellerImgError) {
+                        console.log(sellerImgError);
+                    }
+
+                    if (sellerImg) {
+                        if (sellerImg[0].image_url) {
+                            post.seller_img = await downloadUserImage(
+                                sellerImg[0].image_url
+                            );
+                        }
+                    }
+
                     return post;
                 })
             );
@@ -146,18 +211,85 @@ export const POST: APIRoute = async ({ request, redirect }) => {
     } catch (e) {
         console.error(e);
         if (e instanceof Error) {
-        return new Response(
-            JSON.stringify({
-                message: e.message,
-            }),
-            { status: 500 }
-        )} else {
+            return new Response(
+                JSON.stringify({
+                    message: e.message,
+                }),
+                { status: 500 }
+            );
+        } else {
             return new Response(
                 JSON.stringify({
                     message: "Something went wrong",
                 }),
                 { status: 500 }
-            )
-        };
+            );
+        }
+    }
+};
+
+const urlCache = new Map<string, { webpUrl: string; jpegUrl: string }>();
+
+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);
+        }
+    }
+};
+
+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);
+        }
     }
 };

From 893ef1f0e36237c8299c9f612a00722dd8c7954c Mon Sep 17 00:00:00 2001
From: r-southworth <rachael.southworth@datagrove.com>
Date: Sat, 31 Aug 2024 11:54:26 -0400
Subject: [PATCH 2/8] fix various accessibility issues, internationalization,
 etc.

---
 src/components/common/Header.tsx              | 13 +++--
 src/components/common/HeaderSearchBar.tsx     |  4 +-
 src/components/common/cart/CartCard.tsx       |  1 -
 src/components/common/cart/CartCardMobile.tsx | 54 +++++++++----------
 src/components/home/Home.tsx                  | 29 +---------
 src/components/home/HomeCard.tsx              | 13 +----
 src/components/home/HomeGradeCarousel.tsx     | 20 +++----
 src/components/home/HomeStickyFilters.tsx     | 47 ++++++++--------
 src/components/services/FiltersMobile.tsx     | 21 ++++++++
 src/components/services/MobileViewCard.tsx    | 37 +++++++++----
 src/components/services/ViewCard.tsx          |  9 +++-
 src/i18n/UI/English.ts                        |  1 +
 src/i18n/UI/French.ts                         |  1 +
 src/i18n/UI/Spanish.ts                        |  1 +
 src/i18n/uiType.ts                            |  1 +
 15 files changed, 134 insertions(+), 118 deletions(-)

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 44bf2666..026cfbfe 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -16,7 +16,6 @@ const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
 
 export const Header: Component = () => {
-
     const screenSize = useStore(windowSize);
 
     return (
@@ -27,7 +26,11 @@ export const Header: Component = () => {
                 </div>
                 <div class="navLines flex items-center" id="navLines">
                     <div class="all-logo">
-                        <a id="logo" href={`/${lang}`} aria-label={t("ariaLabels.todo")}>
+                        <a
+                            id="logo"
+                            href={`/${lang}`}
+                            aria-label={t("ariaLabels.todo")}
+                        >
                             <svg
                                 width="180"
                                 height="180"
@@ -70,13 +73,13 @@ export const Header: Component = () => {
                     </div>
 
                     <div>
-                        <h1 class="pl-2 text-3xl text-ptext1 dark:text-ptext1-DM md:text-5xl">
+                        <h1 class="min-h-[44px] min-w-[44px] pl-2 pt-1 text-3xl text-ptext1 dark:text-ptext1-DM md:text-5xl">
                             <a href={`/${lang}`}>{SITE.title}</a>
                         </h1>
                     </div>
                 </div>
                 <Show when={screenSize() !== "sm"}>
-                <SearchBar />
+                    <SearchBar />
                 </Show>
 
                 <div class="flex items-center md:w-[50%] md:justify-end lg:w-[40%] xl:w-[35%]">
@@ -95,7 +98,7 @@ export const Header: Component = () => {
             </div>
             <Show when={screenSize() === "sm"}>
                 <div class="flex w-full px-4 pb-1">
-                <SearchBar />
+                    <SearchBar />
                 </div>
             </Show>
         </header>
diff --git a/src/components/common/HeaderSearchBar.tsx b/src/components/common/HeaderSearchBar.tsx
index 83aa6746..68f598f0 100644
--- a/src/components/common/HeaderSearchBar.tsx
+++ b/src/components/common/HeaderSearchBar.tsx
@@ -67,13 +67,11 @@ export const SearchBar: Component = () => {
     return (
         <div class="search-form mx-4 mt-2 flex h-full w-full items-center justify-center">
             <div class="form flex h-full w-full items-center justify-between rounded-full border border-border1 px-1 text-ptext1  focus:border-2 focus:border-highlight1 focus:outline-none dark:border-border1-DM dark:focus:border-highlight1-DM">
-                <label class="sr-only" for="headerSearch">
-                    {t("formLabels.search")}
-                </label>
                 <input
                     type="text"
                     name="query"
                     id="headerSearch"
+                    aria-label={t("formLabels.search")}
                     class="ml-2 h-full w-full rounded-full bg-background1 py-3 dark:bg-background1-DM"
                     value={searchString() ? searchString() : ""}
                     oninput={(e) => setSearchString(e.target.value)}
diff --git a/src/components/common/cart/CartCard.tsx b/src/components/common/cart/CartCard.tsx
index e8780809..a48dc4fa 100644
--- a/src/components/common/cart/CartCard.tsx
+++ b/src/components/common/cart/CartCard.tsx
@@ -58,7 +58,6 @@ export const CartCard: Component<Props> = (props) => {
             // );
 
             setNewItems(props.items);
-            console.log("Cart Card Props", newItems());
         }
     });
 
diff --git a/src/components/common/cart/CartCardMobile.tsx b/src/components/common/cart/CartCardMobile.tsx
index 5c825770..bd5587d9 100644
--- a/src/components/common/cart/CartCardMobile.tsx
+++ b/src/components/common/cart/CartCardMobile.tsx
@@ -27,38 +27,38 @@ export const CartCardMobile: Component<Props> = (props) => {
 
     createEffect(async () => {
         if (props.items) {
-            const updatedItems = await Promise.all(
-                props.items.map(async (item: Post) => {
-                    const newItem = { ...item };
-                    newItem.image_urls
-                        ? (newItem.image_url = await downloadPostImage(
-                              newItem.image_urls.split(",")[0]
-                          ))
-                        : (newItem.image_url = undefined);
+            // const updatedItems = await Promise.all(
+            //     props.items.map(async (item: Post) => {
+            //         const newItem = { ...item };
+            //         newItem.image_urls
+            //             ? (newItem.image_url = await downloadPostImage(
+            //                   newItem.image_urls.split(",")[0]
+            //               ))
+            //             : (newItem.image_url = undefined);
 
-                    const { data: sellerImg, error: sellerImgError } =
-                        await supabase
-                            .from("sellerview")
-                            .select("*")
-                            .eq("seller_id", newItem.seller_id);
+            //         const { data: sellerImg, error: sellerImgError } =
+            //             await supabase
+            //                 .from("sellerview")
+            //                 .select("*")
+            //                 .eq("seller_id", newItem.seller_id);
 
-                    if (sellerImgError) {
-                        console.log(sellerImgError);
-                    }
+            //         if (sellerImgError) {
+            //             console.log(sellerImgError);
+            //         }
 
-                    if (sellerImg) {
-                        if (sellerImg[0].image_url) {
-                            newItem.seller_img = await downloadUserImage(
-                                sellerImg[0].image_url
-                            );
-                        }
-                    }
+            //         if (sellerImg) {
+            //             if (sellerImg[0].image_url) {
+            //                 newItem.seller_img = await downloadUserImage(
+            //                     sellerImg[0].image_url
+            //                 );
+            //             }
+            //         }
 
-                    return newItem;
-                })
-            );
+            //         return newItem;
+            //     })
+            // );
 
-            setNewItems(updatedItems);
+            setNewItems(props.items);
         }
     });
 
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index e6d3ce74..d109969c 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -7,22 +7,10 @@ import { HomeStickyFilters } from "./HomeStickyFilters";
 import { HomeCard } from "@components/home/HomeCard";
 import { HomeSubjectCarousel } from "@components/home/HomeSubjectCarousel";
 import { HomeGradeCarousel } from "./HomeGradeCarousel";
-import supabase from "../../lib/supabaseClient";
-import { ui } from "../../i18n/ui";
-import type { uiObject } from "../../i18n/uiType";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
-import stripe from "@lib/stripe";
-import * as allFilters from "../posts/fetchPosts";
-import { IconH1 } from "@tabler/icons-solidjs";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
-const values = ui[lang] as uiObject;
-const productSubjects = values.subjectCategoryInfo.subjects;
-
-interface Props {
-    id: string | undefined;
-}
 
 function redirectToResourcesPage() {
     window.location.href = `/${lang}/resources`;
@@ -60,21 +48,8 @@ async function fetchPosts({
 }
 
 export const Home: Component = () => {
-    const [posts, setPosts] = createSignal<Array<Post>>([]);
-    const [currentPosts, setCurrentPosts] = createSignal<Array<Post>>([]);
     const [popularPosts, setPopularPosts] = createSignal<Array<Post>>([]);
     const [newPosts, setNewPosts] = createSignal<Array<Post>>([]);
-    const [subjectFilters, setSubjectFilters] = createSignal<Array<string>>([]);
-    const [gradeFilters, setGradeFilters] = createSignal<Array<string>>([]);
-    const [resourceTypeFilters, setResourceTypeFilters] = createSignal<
-        Array<string>
-    >([]);
-    const [fileTypeFilters, setFileTypeFilters] = createSignal<Array<string>>(
-        []
-    );
-    const [standardsFilters, setStandardsFilters] = createSignal<string>("");
-
-    let test: any;
 
     onMount(async () => {
         const res = await fetchPosts({
@@ -154,7 +129,7 @@ export const Home: Component = () => {
                             <h1 class="text-ptext1 dark:text-ptext1 md:text-2xl">
                                 {t("homePageText.becomeCreator")}
                             </h1>
-                            <p class="text-sm italic text-ptext2 dark:text-ptext1 md:text-lg">
+                            <p class="text-center text-sm italic text-ptext2 dark:text-ptext1 md:text-lg">
                                 {t("homePageText.clickToBecomeCreator")}
                             </p>
                         </div>
@@ -163,7 +138,7 @@ export const Home: Component = () => {
 
                 <div class="flex justify-center md:hidden">
                     <button
-                        class="mb-4 mt-6 rounded-full bg-btn2 px-16 py-1 shadow dark:bg-btn2-DM"
+                        class="btn-primary mb-2 mt-3 min-h-[44px] min-w-[44px] px-16 py-1"
                         onClick={redirectToResourcesPage}
                     >
                         {t("buttons.browseCatalog")}
diff --git a/src/components/home/HomeCard.tsx b/src/components/home/HomeCard.tsx
index dd1335e7..437b9484 100644
--- a/src/components/home/HomeCard.tsx
+++ b/src/components/home/HomeCard.tsx
@@ -1,15 +1,8 @@
 import type { Component } from "solid-js";
 import type { Post } from "@lib/types";
 import { createSignal, createEffect, Show, onMount } from "solid-js";
-import supabase from "../../lib/supabaseClient";
-import { ui } from "../../i18n/ui";
-import type { uiObject } from "../../i18n/uiType";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
-import {
-    downloadPostImage,
-    downloadUserImage,
-    lazyLoadImage,
-} from "@lib/imageHelper";
+import { lazyLoadImage } from "@lib/imageHelper";
 import postPlaceHolder from "@src/assets/postPlaceHolder.svg";
 import person from "@src/assets/person.svg";
 
@@ -22,9 +15,6 @@ interface Props {
 }
 
 export const HomeCard: Component<Props> = (props) => {
-    const [newPosts, setNewPosts] = createSignal<Array<any>>([]);
-    const [postImages, setPostImages] = createSignal<string[]>([]);
-
     return (
         <div class="mb-4 flex justify-center">
             <ul class="flex flex-wrap justify-center md:flex-nowrap">
@@ -37,6 +27,7 @@ export const HomeCard: Component<Props> = (props) => {
                                 <a
                                     href={`/${lang}/posts/${post.id}`}
                                     class="h-full w-full"
+                                    aria-label={`${t("ariaLabels.readMoreAbout")}${post.title}`}
                                 >
                                     <div
                                         id="homeCard-img"
diff --git a/src/components/home/HomeGradeCarousel.tsx b/src/components/home/HomeGradeCarousel.tsx
index 930933d3..01125010 100644
--- a/src/components/home/HomeGradeCarousel.tsx
+++ b/src/components/home/HomeGradeCarousel.tsx
@@ -1,17 +1,13 @@
 import type { Component } from "solid-js";
 import { createSignal, onMount } from "solid-js";
 import supabase from "../../lib/supabaseClient";
-import { ui } from "../../i18n/ui";
-import type { uiObject } from "../../i18n/uiType";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 
 const lang = getLangFromUrl(new URL(window.location.href));
-const values = ui[lang] as uiObject;
-const productCategoryData = values.subjectCategoryInfo;
 
 function selectGradeCarousel(gradeBtn: any) {
     localStorage.setItem("selectedGrades", JSON.stringify([gradeBtn.id]));
-    console.log(JSON.stringify([gradeBtn.id]))
+    console.log(JSON.stringify([gradeBtn.id]));
     window.location.href = `/${lang}/resources`;
 }
 
@@ -40,13 +36,13 @@ export const HomeGradeCarousel: Component = () => {
             <div class="flex w-fit">
                 {grades().map((grade) => (
                     <button
-                    id={grade.id.toString()}
-                    aria-label= {grade.grade}
-                    class="gradeHomeSelectBtn"
-                    onclick={(e) => selectGradeCarousel(e.target)}
-                >
-                    <h1 class="text-2xl md:text-3xl">{grade.grade}</h1>
-                </button>
+                        id={grade.id.toString()}
+                        aria-label={grade.grade}
+                        class="gradeHomeSelectBtn"
+                        onclick={(e) => selectGradeCarousel(e.target)}
+                    >
+                        <h1 class="text-2xl md:text-3xl">{grade.grade}</h1>
+                    </button>
                 ))}
                 {/* <button
                     id="PK"
diff --git a/src/components/home/HomeStickyFilters.tsx b/src/components/home/HomeStickyFilters.tsx
index d65a8bfe..53fc2672 100644
--- a/src/components/home/HomeStickyFilters.tsx
+++ b/src/components/home/HomeStickyFilters.tsx
@@ -1,15 +1,10 @@
 import type { Component } from "solid-js";
 import { createSignal, For, onMount } from "solid-js";
 import supabase from "../../lib/supabaseClient";
-import { ui } from "../../i18n/ui";
-import type { uiObject } from "../../i18n/uiType";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
-import * as allFilters from "../posts/fetchPosts";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
-const values = ui[lang] as uiObject;
-const productCategories = values.subjectCategoryInfo.subjects;
 
 //all subjects in the database
 let subjects_array: Array<{ product_subject: string; id: number }> = [];
@@ -224,41 +219,47 @@ export const HomeStickyFilters: Component = () => {
                 <div>
                     <h3
                         onclick={showGradeFilters}
-                        class="relative mx-5 text-ptext2 dark:text-ptext2-DM"
+                        class="relative mx-5 mt-3 min-h-[44px] min-w-[44px] text-xl text-ptext2 dark:text-ptext2-DM md:my-2 md:min-h-px md:min-w-px"
                     >
                         {t("formLabels.grades")}
                     </h3>
                     <div
                         onmouseleave={hideGradeFilters}
                         id="gradeDiv"
-                        class="absolute top-8 z-40 hidden h-fit w-48 rounded border-2 border-border1 bg-background1 dark:border-border1-DM dark:bg-background1-DM"
+                        class="absolute top-16 z-40 hidden max-h-[50svh] overflow-y-auto rounded border-2 border-border1 bg-background1 dark:border-border1-DM dark:bg-background1-DM"
                     >
                         <div class="flex h-5/6 flex-wrap">
                             <For each={grades()}>
                                 {(grade) => (
                                     <div class="flex w-1/2 pl-1 pr-4">
-                                        <div>
+                                        <div class="flex items-center">
                                             <input
-                                                aria-label="replace"
+                                                aria-label={`"replace"`}
                                                 type="checkbox"
+                                                id={`gradeCheckbox ${grade.id.toString()}`}
                                                 onClick={() =>
                                                     selectGrades(
                                                         grade.id.toString()
                                                     )
                                                 }
-                                                class="subjectCheckbox"
+                                                class="gradeCheckbox h-[24px] w-[24px]"
                                             />
                                         </div>
 
-                                        <div class="pl-1">{grade.grade}</div>
+                                        <label
+                                            for={`gradeCheckbox ${grade.id.toString()}`}
+                                            class="flex min-h-[44px] min-w-[44px] items-center pb-1 pl-1 pt-1 align-text-top text-xl md:min-h-px md:min-w-px"
+                                        >
+                                            {grade.grade}
+                                        </label>
                                     </div>
                                 )}
                             </For>
                         </div>
 
-                        <div class="flex flex-col items-center justify-center">
+                        <div class="flex flex-col items-center justify-center ">
                             <a href={`/${lang}/resources`}>
-                                <button class="mx-2 my-2 rounded-full bg-btn2 px-4 py-1 dark:bg-btn2-DM">
+                                <button class="btn-primary mx-2 my-2 min-h-[59px] min-w-[59px] rounded-full  px-4 py-1 md:min-h-px md:min-w-px">
                                     {t("buttons.findResources")}
                                 </button>
                             </a>
@@ -266,38 +267,42 @@ export const HomeStickyFilters: Component = () => {
                     </div>
                 </div>
 
-                <div>
+                <div class="flex">
                     <h3
                         onclick={showSubjectFilters}
-                        class="relative mx-5 text-ptext2 dark:text-ptext2-DM"
+                        class="relative mx-5 mt-3 min-h-[44px] min-w-[44px] text-xl text-ptext2 dark:text-ptext2-DM md:my-2 md:min-h-px md:min-w-px"
                     >
                         {t("formLabels.subjects")}
                     </h3>
                     <div
                         onmouseleave={hideSubjectFilters}
                         id="subjectDiv"
-                        class="absolute top-8 z-40 hidden rounded border-2 border-border1 bg-background1 dark:border-border1-DM dark:bg-background1-DM"
+                        class="absolute top-16 z-40 hidden max-h-[50svh] overflow-y-auto rounded border-2 border-border1 bg-background1 dark:border-border1-DM dark:bg-background1-DM"
                     >
                         {/* <p class="px-2">Add Subjects here</p> */}
                         <For each={subjects()}>
                             {(subject) => (
-                                <div class="flex pl-1 pr-4">
+                                <div class="flex items-center pl-1 pr-4">
                                     <div>
                                         <input
                                             aria-label="replace"
                                             type="checkbox"
+                                            id={`subjectCheckbox ${subject.id.toString()}`}
                                             onClick={() =>
                                                 addSelectedSubject(
                                                     subject.id.toString()
                                                 )
                                             }
-                                            class="subjectCheckbox"
+                                            class="subjectCheckbox h-[24px] w-[24px]"
                                         />
                                     </div>
 
-                                    <div class="pl-1">
+                                    <label
+                                        for={`subjectCheckbox ${subject.id.toString()}`}
+                                        class="flex min-h-[59px] min-w-[59px] items-center pb-1 pl-1 align-text-top text-xl md:min-h-px md:min-w-px"
+                                    >
                                         {subject.product_subject}
-                                    </div>
+                                    </label>
                                 </div>
                             )}
                         </For>
@@ -311,7 +316,7 @@ export const HomeStickyFilters: Component = () => {
                             </div>
 
                             <button
-                                class="mx-2 my-2 rounded-full bg-btn2 px-4 py-1 dark:bg-btn2-DM"
+                                class="btn-primary mx-2  my-2 min-h-[59px] min-w-[59px] px-4 py-1 md:min-h-px md:min-w-px"
                                 onclick={fetchFilteredResources}
                             >
                                 {t("buttons.findResources")}
diff --git a/src/components/services/FiltersMobile.tsx b/src/components/services/FiltersMobile.tsx
index 32e1342c..05a91886 100644
--- a/src/components/services/FiltersMobile.tsx
+++ b/src/components/services/FiltersMobile.tsx
@@ -374,6 +374,7 @@ export const FiltersMobile: Component<Props> = (props) => {
             <Show when={screenSize() === "sm"}>
                 <button
                     class="w-full"
+                    aria-label={t("buttons.filters")}
                     onClick={() => {
                         if (
                             showGrades() === true ||
@@ -426,6 +427,11 @@ export const FiltersMobile: Component<Props> = (props) => {
                     <div class="main-pop-out relative h-96 w-full rounded-b border border-border1 bg-background1 shadow-2xl dark:border-border1-DM dark:bg-background1-DM dark:shadow-gray-600 md:shadow-none">
                         <button
                             class="w-full"
+                            aria-label={
+                                t("formLabels.grades") +
+                                " " +
+                                t("buttons.filters")
+                            }
                             onClick={() => {
                                 setShowFilters(false);
 
@@ -475,6 +481,11 @@ export const FiltersMobile: Component<Props> = (props) => {
 
                         <button
                             class="w-full"
+                            aria-label={
+                                t("formLabels.resourceTypes") +
+                                " " +
+                                t("buttons.filters")
+                            }
                             onClick={() => {
                                 setShowFilters(false);
 
@@ -522,6 +533,11 @@ export const FiltersMobile: Component<Props> = (props) => {
 
                         <button
                             class="w-full"
+                            aria-label={
+                                t("formLabels.subjects") +
+                                " " +
+                                t("buttons.filters")
+                            }
                             onClick={() => {
                                 setShowFilters(false);
 
@@ -569,6 +585,11 @@ export const FiltersMobile: Component<Props> = (props) => {
 
                         <button
                             class="w-full"
+                            aria-label={
+                                t("formLabels.secular") +
+                                " " +
+                                t("buttons.filters")
+                            }
                             onClick={() => {
                                 setShowFilters(false);
                                 setShowSecular(!showSecular());
diff --git a/src/components/services/MobileViewCard.tsx b/src/components/services/MobileViewCard.tsx
index f92278fc..0b61f97e 100644
--- a/src/components/services/MobileViewCard.tsx
+++ b/src/components/services/MobileViewCard.tsx
@@ -153,7 +153,10 @@ export const MobileViewCard: Component<Props> = (props) => {
         <div class="w-full">
             {newPosts().map((post: Post) => (
                 <div class="mb-4 rounded-lg border border-border1 dark:border-border1-DM">
-                    <a href={`/${lang}/posts/${post.id}`}>
+                    <a
+                        href={`/${lang}/posts/${post.id}`}
+                        aria-label={t("ariaLabels.readMoreAbout") + post.title}
+                    >
                         <div class="photo-price flex h-48 w-full justify-between rounded-lg bg-background1 dark:bg-background1-DM">
                             <div class="relative flex h-48 w-48 shrink-0 items-center justify-center rounded-lg bg-background1 dark:bg-background1-DM">
                                 {post.image_url ? (
@@ -169,7 +172,7 @@ export const MobileViewCard: Component<Props> = (props) => {
                                                     post.image_urls!.split(
                                                         ","
                                                     )[0]
-                                                        ? "User Image"
+                                                        ? `User Image for Post ${post.title}`
                                                         : "No image"
                                                 }
                                                 class="h-48 w-48 rounded-lg bg-background1 object-contain dark:bg-background1-DM"
@@ -236,9 +239,9 @@ export const MobileViewCard: Component<Props> = (props) => {
                                 </div>
 
                                 <div class="flex flex-col items-end justify-end py-1">
-                                    <h6 class="text-[12px] font-bold">
+                                    <div class="text-[12px] font-bold">
                                         {t("formLabels.subjects")}
-                                    </h6>
+                                    </div>
                                     {post
                                         .subject!.slice(0, 3)
                                         .map((subject: string) => {
@@ -256,9 +259,9 @@ export const MobileViewCard: Component<Props> = (props) => {
                                 </div>
 
                                 <div class="flex flex-col items-end justify-end py-1">
-                                    <h6 class="text-[12px] font-bold">
+                                    <div class="text-[12px] font-bold">
                                         {t("formLabels.grades")}
-                                    </h6>
+                                    </div>
                                     {post
                                         .grade!.slice(0, 3)
                                         .map((grade: string) => {
@@ -280,12 +283,23 @@ export const MobileViewCard: Component<Props> = (props) => {
 
                     <div class="title-creator mb-1 ml-1 flex flex-row justify-between">
                         <div class="w-full">
-                            <a href={`/${lang}/posts/${post.id}`}>
+                            <a
+                                href={`/${lang}/posts/${post.id}`}
+                                aria-label={
+                                    t("ariaLabels.readMoreAbout") + post.title
+                                }
+                            >
                                 <div class="mr-1 line-clamp-2 py-0.5 pt-4 text-start text-lg font-bold text-ptext1 dark:text-ptext1-DM">
                                     {post.title}
                                 </div>
                             </a>
-                            <a href={`/${lang}/creator/${post?.seller_id}`}>
+                            <a
+                                href={`/${lang}/creator/${post?.seller_id}`}
+                                aria-label={
+                                    t("ariaLabels.readMoreAbout") +
+                                    post.seller_name
+                                }
+                            >
                                 <div class="flex w-fit items-center py-1 pr-4">
                                     {post.seller_img ? (
                                         <picture>
@@ -380,7 +394,12 @@ export const MobileViewCard: Component<Props> = (props) => {
                             </svg>
                         </button>
 
-                        <a href={`/${lang}/posts/${post.id}`}>
+                        <a
+                            href={`/${lang}/posts/${post.id}`}
+                            aria-label={
+                                t("ariaLabels.readMoreAbout") + post.title
+                            }
+                        >
                             <div
                                 id={`${post.id}content`}
                                 class="hidden w-full flex-col justify-start"
diff --git a/src/components/services/ViewCard.tsx b/src/components/services/ViewCard.tsx
index f5770f66..f8340b04 100644
--- a/src/components/services/ViewCard.tsx
+++ b/src/components/services/ViewCard.tsx
@@ -117,7 +117,12 @@ export const ViewCard: Component<Props> = (props) => {
             <ul class="flex w-full flex-wrap justify-center">
                 {props.posts.map((post: Post) => (
                     <li class="mb-3 w-[99%]">
-                        <a href={`/${lang}/posts/${post.id}`}>
+                        <a
+                            href={`/${lang}/posts/${post.id}`}
+                            aria-label={
+                                t("ariaLabels.readMoreAbout") + post.title
+                            }
+                        >
                             <div class="mb-2 box-content flex h-full w-full flex-grow flex-row items-start justify-start rounded-lg border border-border1 border-opacity-25 shadow-md shadow-shadow-LM dark:border-border1-DM dark:border-opacity-25 dark:shadow-shadow-DM">
                                 <div class="relative mr-2 flex h-48 w-48 shrink-0 items-center justify-center rounded-lg bg-background1 dark:bg-background1-DM">
                                     {post.image_url ? (
@@ -138,7 +143,7 @@ export const ViewCard: Component<Props> = (props) => {
                                                         post.image_urls?.split(
                                                             ","
                                                         )[0]
-                                                            ? "User Image"
+                                                            ? `User Image for Post ${post.title}`
                                                             : "No image"
                                                     }
                                                     class="h-48 w-48 rounded-lg bg-background1 object-contain dark:bg-background1-DM"
diff --git a/src/i18n/UI/English.ts b/src/i18n/UI/English.ts
index 90d74574..54e6330b 100644
--- a/src/i18n/UI/English.ts
+++ b/src/i18n/UI/English.ts
@@ -407,6 +407,7 @@ export const English = {
     increaseQuantity: "Increase Quantity",
     decreaseQuantity: "Decrease Quantity",
     checkboxGrade: "Checkbox for selecting grade level",
+    readMoreAbout: "Read more about ",
   },
 
   headerData: {
diff --git a/src/i18n/UI/French.ts b/src/i18n/UI/French.ts
index 86ff13f1..d0a1809e 100644
--- a/src/i18n/UI/French.ts
+++ b/src/i18n/UI/French.ts
@@ -412,6 +412,7 @@ export const French = {
     increaseQuantity: "Augmenter la quantité",
     decreaseQuantity: "Diminuer la quantité",
     checkboxGrade: "Case à cocher pour sélectionner le niveau scolaire",
+    readMoreAbout: "En savoir plus sur",
   },
 
   headerData: {
diff --git a/src/i18n/UI/Spanish.ts b/src/i18n/UI/Spanish.ts
index 48a7f8f0..fc8e1ad8 100644
--- a/src/i18n/UI/Spanish.ts
+++ b/src/i18n/UI/Spanish.ts
@@ -414,6 +414,7 @@ export const Spanish = {
     decreaseQuantity: "Disminuir cantidad",
     checkboxGrade:
       "Casilla de verificación para seleccionar el nivel de grado",
+      readMoreAbout: "Leer más sobre",
   },
 
   headerData: {
diff --git a/src/i18n/uiType.ts b/src/i18n/uiType.ts
index 8826a90f..a7997fe7 100644
--- a/src/i18n/uiType.ts
+++ b/src/i18n/uiType.ts
@@ -361,6 +361,7 @@ export interface uiObject {
     increaseQuantity: string;
     decreaseQuantity: string;
     checkboxGrade: string;
+    readMoreAbout: string;
   };
 
   headerData: {

From bbee1fce3f2a566a05cd56eeec511b293af19628 Mon Sep 17 00:00:00 2001
From: r-southworth <rachael.southworth@datagrove.com>
Date: Sat, 31 Aug 2024 17:10:49 -0400
Subject: [PATCH 3/8] rewrite Home to render on server

---
 src/components/home/Home.tsx                |  43 +--
 src/components/home/HomeCard.tsx            |  18 +-
 src/components/home/HomeGradeCarousel.tsx   |  19 +-
 src/components/home/HomeStickyFilters.tsx   | 287 ++++++++++----------
 src/components/home/HomeSubjectCarousel.tsx | 161 ++++++-----
 src/components/services/FiltersMobile.tsx   |  12 +-
 src/i18n/UI/English.ts                      |   1 +
 src/i18n/UI/French.ts                       |   1 +
 src/i18n/UI/Spanish.ts                      |   3 +-
 src/i18n/uiType.ts                          |   1 +
 src/lib/supabaseClient.tsx                  |   2 +-
 src/pages/index.astro                       |  21 +-
 12 files changed, 314 insertions(+), 255 deletions(-)

diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index d109969c..f0818d3c 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -1,19 +1,20 @@
-import type { Component } from "solid-js";
+import type { Component, JSXElement } from "solid-js";
 import type { FilterPostsParams, Post } from "@lib/types";
-import { createEffect, createSignal, Show, onMount } from "solid-js";
+import { createSignal, Show, onMount } from "solid-js";
 import { useStore } from "@nanostores/solid";
 import { windowSize } from "@components/common/WindowSizeStore";
 import { HomeStickyFilters } from "./HomeStickyFilters";
 import { HomeCard } from "@components/home/HomeCard";
 import { HomeSubjectCarousel } from "@components/home/HomeSubjectCarousel";
 import { HomeGradeCarousel } from "./HomeGradeCarousel";
-import { getLangFromUrl, useTranslations } from "../../i18n/utils";
+import { useTranslations } from "../../i18n/utils";
 
-const lang = getLangFromUrl(new URL(window.location.href));
-const t = useTranslations(lang);
+// const lang = getLangFromUrl(new URL(window.location.href));
 
-function redirectToResourcesPage() {
-    window.location.href = `/${lang}/resources`;
+interface Props {
+    lang: "en" | "es" | "fr";
+    stickyFilters: JSXElement;
+    subjectCarousel: JSXElement;
 }
 
 async function fetchPosts({
@@ -47,7 +48,8 @@ async function fetchPosts({
     return data;
 }
 
-export const Home: Component = () => {
+export const Home: Component<Props> = (props) => {
+    const [lang, setLang] = createSignal<"en" | "es" | "fr">(props.lang);
     const [popularPosts, setPopularPosts] = createSignal<Array<Post>>([]);
     const [newPosts, setNewPosts] = createSignal<Array<Post>>([]);
 
@@ -58,7 +60,7 @@ export const Home: Component = () => {
             searchString: "",
             resourceFilters: [],
             secularFilter: false,
-            lang: lang,
+            lang: lang(),
             listing_status: true,
             draft_status: false,
         });
@@ -80,7 +82,7 @@ export const Home: Component = () => {
             searchString: "",
             resourceFilters: [],
             secularFilter: false,
-            lang: lang,
+            lang: lang(),
             orderAscending: true,
             listing_status: true,
             draft_status: false,
@@ -100,12 +102,19 @@ export const Home: Component = () => {
 
     const screenSize = useStore(windowSize);
 
+    const t = useTranslations(props.lang);
+    function redirectToResourcesPage() {
+        window.location.href = `/${language}/resources`;
+    }
+
+    const language = lang();
+
     return (
         <div class="">
-            <HomeStickyFilters />
+            {props.stickyFilters}
 
             <div id="home-scrolling" class="scroll">
-                <a href={`/${lang}/creator/createaccount`}>
+                <a href={`/${language}/creator/createaccount`}>
                     <div
                         id="header-image"
                         class="flex h-24 items-center justify-center rounded-md bg-gradient-to-r from-highlight1 dark:from-[#3E8E3E] dark:via-highlight1-DM dark:to-[#3E8E3E]"
@@ -150,7 +159,7 @@ export const Home: Component = () => {
                         {t("pageTitles.popularResources")}
                     </h3>
                     <div class="md:max-w-auto flex h-[515px] max-w-full justify-start overflow-scroll md:h-auto md:overflow-scroll">
-                        <HomeCard posts={popularPosts()} />
+                        <HomeCard posts={popularPosts()} lang={lang()} />
                     </div>
                 </div>
 
@@ -158,10 +167,10 @@ export const Home: Component = () => {
                     <h3 class="py-1 text-center text-lg md:my-4 md:text-2xl">
                         {t("pageTitles.shopBySubject")}
                     </h3>
-                    <HomeSubjectCarousel />
+                    {props.subjectCarousel}
                 </div>
 
-                <a href={`/${lang}/about`}>
+                <a href={`/${language}/about`}>
                     <div
                         id="home-image-1"
                         class="my-8 flex h-36 flex-col items-center justify-center rounded-md bg-gradient-to-r from-inputBorder1 dark:from-inputBorder1-DM dark:via-black dark:to-inputBorder1-DM"
@@ -180,7 +189,7 @@ export const Home: Component = () => {
                         {t("pageTitles.newResources")}
                     </h3>
                     <div class="md:max-w-auto flex h-[515px] max-w-full justify-start overflow-scroll md:h-auto md:overflow-scroll">
-                        <HomeCard posts={newPosts()} />
+                        <HomeCard posts={newPosts()} lang={lang()} />
                     </div>
                 </div>
 
@@ -188,7 +197,7 @@ export const Home: Component = () => {
                     <h3 class="py-1 text-center text-lg md:my-4 md:text-2xl">
                         {t("pageTitles.shopByGrade")}
                     </h3>
-                    <HomeGradeCarousel />
+                    <HomeGradeCarousel lang={lang()} />
                 </div>
 
                 <a href="https://forms.gle/e1snHR7pnAFRTa1MA" target="_blank">
diff --git a/src/components/home/HomeCard.tsx b/src/components/home/HomeCard.tsx
index 437b9484..dd196257 100644
--- a/src/components/home/HomeCard.tsx
+++ b/src/components/home/HomeCard.tsx
@@ -1,20 +1,22 @@
 import type { Component } from "solid-js";
 import type { Post } from "@lib/types";
-import { createSignal, createEffect, Show, onMount } from "solid-js";
-import { getLangFromUrl, useTranslations } from "../../i18n/utils";
+import { Show, createSignal } from "solid-js";
+import { useTranslations } from "../../i18n/utils";
 import { lazyLoadImage } from "@lib/imageHelper";
 import postPlaceHolder from "@src/assets/postPlaceHolder.svg";
 import person from "@src/assets/person.svg";
 
-const lang = getLangFromUrl(new URL(window.location.href));
-const t = useTranslations(lang);
-
 interface Props {
     // Define the type for the filterPosts prop
     posts: Array<Post>;
+    lang: "en" | "es" | "fr";
 }
 
 export const HomeCard: Component<Props> = (props) => {
+    const [lang, setLang] = createSignal<"en" | "es" | "fr">(props.lang);
+
+    const t = useTranslations(lang());
+
     return (
         <div class="mb-4 flex justify-center">
             <ul class="flex flex-wrap justify-center md:flex-nowrap">
@@ -25,7 +27,7 @@ export const HomeCard: Component<Props> = (props) => {
                         <div class="mx-2 mb-4 grid h-[275px] w-40 grid-cols-1 grid-rows-9 justify-between rounded border-2 border-border1 px-1 dark:border-border1-DM md:mx-1 md:mb-0 2xl:h-[324px]">
                             <div class="home-card-img-div row-span-6 flex w-full items-center justify-center pb-1 pt-1">
                                 <a
-                                    href={`/${lang}/posts/${post.id}`}
+                                    href={`/${lang()}/posts/${post.id}`}
                                     class="h-full w-full"
                                     aria-label={`${t("ariaLabels.readMoreAbout")}${post.title}`}
                                 >
@@ -97,7 +99,7 @@ export const HomeCard: Component<Props> = (props) => {
                                         onclick={(e) => {
                                             e.preventDefault();
                                             e.stopPropagation();
-                                            window.location.href = `/${lang}/posts/${post.id}`;
+                                            window.location.href = `/${lang()}/posts/${post.id}`;
                                         }}
                                     >
                                         <p class="line-clamp-2 pt-1 text-start text-sm font-bold">
@@ -110,7 +112,7 @@ export const HomeCard: Component<Props> = (props) => {
                                     onclick={(e) => {
                                         e.preventDefault();
                                         e.stopPropagation();
-                                        window.location.href = `/${lang}/creator/${post.seller_id}`;
+                                        window.location.href = `/${lang()}/creator/${post.seller_id}`;
                                     }}
                                 >
                                     <div class="my-1 flex items-center">
diff --git a/src/components/home/HomeGradeCarousel.tsx b/src/components/home/HomeGradeCarousel.tsx
index 01125010..90917cae 100644
--- a/src/components/home/HomeGradeCarousel.tsx
+++ b/src/components/home/HomeGradeCarousel.tsx
@@ -1,17 +1,16 @@
 import type { Component } from "solid-js";
 import { createSignal, onMount } from "solid-js";
-import supabase from "../../lib/supabaseClient";
+import supabase from "../../lib/supabaseClientServer";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 
-const lang = getLangFromUrl(new URL(window.location.href));
+// const lang = getLangFromUrl(new URL(window.location.href));
 
-function selectGradeCarousel(gradeBtn: any) {
-    localStorage.setItem("selectedGrades", JSON.stringify([gradeBtn.id]));
-    console.log(JSON.stringify([gradeBtn.id]));
-    window.location.href = `/${lang}/resources`;
+interface Props {
+    lang: "en" | "es" | "fr";
 }
 
-export const HomeGradeCarousel: Component = () => {
+export const HomeGradeCarousel: Component<Props> = (props) => {
+    const [lang, setLang] = createSignal<"en" | "es" | "fr">(props.lang);
     const [grades, setGrades] = createSignal<
         Array<{ grade: string; id: number }>
     >([]);
@@ -28,6 +27,12 @@ export const HomeGradeCarousel: Component = () => {
         }
     });
 
+    function selectGradeCarousel(gradeBtn: any) {
+        localStorage.setItem("selectedGrades", JSON.stringify([gradeBtn.id]));
+        console.log(JSON.stringify([gradeBtn.id]));
+        window.location.href = `/${lang()}/resources`;
+    }
+
     return (
         <div class="w-full overflow-x-scroll">
             {/* <svg width="80px" height="80px" viewBox="0 0 256 256" id="Flat" class="fill-icon1 dark:fill-icon1-DM">
diff --git a/src/components/home/HomeStickyFilters.tsx b/src/components/home/HomeStickyFilters.tsx
index 53fc2672..e7d4afc0 100644
--- a/src/components/home/HomeStickyFilters.tsx
+++ b/src/components/home/HomeStickyFilters.tsx
@@ -1,178 +1,185 @@
 import type { Component } from "solid-js";
 import { createSignal, For, onMount } from "solid-js";
-import supabase from "../../lib/supabaseClient";
-import { getLangFromUrl, useTranslations } from "../../i18n/utils";
-
-const lang = getLangFromUrl(new URL(window.location.href));
-const t = useTranslations(lang);
-
-//all subjects in the database
-let subjects_array: Array<{ product_subject: string; id: number }> = [];
-//selected subjects
-let selected_subjects_array: Array<string> = [];
-
-const { data: subject, error: subject_error } = await supabase
-    .from("post_subject")
-    .select("subject, id")
-    .order("subject", { ascending: true });
-
-if (subject_error) {
-    console.error("supabase error: " + subject_error.message);
-} else {
-    subject.forEach((subject) => {
-        subjects_array.push({
-            product_subject: subject.subject,
-            id: subject.id,
-        });
-    });
-    subjects_array.sort((a, b) =>
-        a.product_subject > b.product_subject ? 0 : -1
-    );
-}
+import supabase from "@lib/supabaseClientServer";
+import { useTranslations } from "../../i18n/utils";
 
-function hideFilterDivs() {
-    hideGradeFilters();
-    hideSubjectFilters();
-    hideResourceTypeFilters();
+interface Props {
+    lang: "en" | "es" | "fr";
 }
 
-function showGradeFilters() {
-    let gradeDiv = document.getElementById("gradeDiv");
+export const HomeStickyFilters: Component<Props> = (props) => {
+    const [lang, setLang] = createSignal<"en" | "es" | "fr">(props.lang);
+    const [subjects, setSubjects] =
+        createSignal<Array<{ product_subject: string; id: number }>>();
+    const [grades, setGrades] = createSignal<
+        Array<{ grade: string; id: number }>
+    >([]);
+    const [selectedGrades, setSelectedGrades] = createSignal<Array<string>>([]);
 
-    if (gradeDiv?.classList.contains("hidden")) {
-        gradeDiv.classList.remove("hidden");
-        gradeDiv.classList.add("inline");
+    const language = lang();
 
-        hideSubjectFilters();
-        hideResourceTypeFilters();
-    } else if (gradeDiv?.classList.contains("inline")) {
-        gradeDiv?.classList.remove("inline");
-        gradeDiv?.classList.add("hidden");
-    }
-}
+    onMount(async () => {
+        const { data: gradeData, error: grade_error } = await supabase
+            .from("grade_level")
+            .select("grade, id");
 
-function hideGradeFilters() {
-    let gradeDiv = document.getElementById("gradeDiv");
+        if (grade_error) {
+            console.log("supabase error: " + grade_error.message);
+        } else {
+            setGrades(gradeData);
+        }
 
-    if (gradeDiv?.classList.contains("inline")) {
-        gradeDiv.classList.remove("inline");
-        gradeDiv.classList.add("hidden");
-    }
-}
+        //all subjects in the database
+        let subjects_array: Array<{ product_subject: string; id: number }> = [];
 
-function showSubjectFilters() {
-    let subjectDiv = document.getElementById("subjectDiv");
+        const { data: subject, error: subject_error } = await supabase
+            .from("post_subject")
+            .select("subject, id")
+            .order("subject", { ascending: true });
+
+        if (subject_error) {
+            console.error("supabase error: " + subject_error.message);
+        } else {
+            subject.forEach((subject) => {
+                subjects_array.push({
+                    product_subject: subject.subject,
+                    id: subject.id,
+                });
+            });
+            subjects_array.sort((a, b) =>
+                a.product_subject > b.product_subject ? 0 : -1
+            );
+            setSubjects(subjects_array);
+        }
+    });
 
-    if (subjectDiv?.classList.contains("hidden")) {
-        subjectDiv.classList.remove("hidden");
-        subjectDiv.classList.add("inline");
+    const t = useTranslations(lang());
+    //selected subjects
+    let selected_subjects_array: Array<string> = [];
 
+    function hideFilterDivs() {
         hideGradeFilters();
+        hideSubjectFilters();
         hideResourceTypeFilters();
-    } else {
-        subjectDiv?.classList.remove("inline");
-        subjectDiv?.classList.add("hidden");
     }
-}
 
-function hideSubjectFilters() {
-    let subjectDiv = document.getElementById("subjectDiv");
+    function showGradeFilters() {
+        let gradeDiv = document.getElementById("gradeDiv");
+
+        if (gradeDiv?.classList.contains("hidden")) {
+            gradeDiv.classList.remove("hidden");
+            gradeDiv.classList.add("inline");
 
-    if (subjectDiv?.classList.contains("inline")) {
-        subjectDiv.classList.remove("inline");
-        subjectDiv.classList.add("hidden");
+            hideSubjectFilters();
+            hideResourceTypeFilters();
+        } else if (gradeDiv?.classList.contains("inline")) {
+            gradeDiv?.classList.remove("inline");
+            gradeDiv?.classList.add("hidden");
+        }
     }
-}
 
-function showResourceTypeFilters() {
-    let resourceTypeFilterDiv = document.getElementById("resourceTypeDiv");
+    function hideGradeFilters() {
+        let gradeDiv = document.getElementById("gradeDiv");
 
-    if (resourceTypeFilterDiv?.classList.contains("hidden")) {
-        resourceTypeFilterDiv.classList.remove("hidden");
-        resourceTypeFilterDiv.classList.add("inline");
+        if (gradeDiv?.classList.contains("inline")) {
+            gradeDiv.classList.remove("inline");
+            gradeDiv.classList.add("hidden");
+        }
+    }
 
-        hideSubjectFilters();
-        hideGradeFilters();
-    } else if (resourceTypeFilterDiv?.classList.contains("inline")) {
-        resourceTypeFilterDiv?.classList.remove("inline");
-        resourceTypeFilterDiv?.classList.add("hidden");
+    function showSubjectFilters() {
+        let subjectDiv = document.getElementById("subjectDiv");
+
+        if (subjectDiv?.classList.contains("hidden")) {
+            subjectDiv.classList.remove("hidden");
+            subjectDiv.classList.add("inline");
+
+            hideGradeFilters();
+            hideResourceTypeFilters();
+        } else {
+            subjectDiv?.classList.remove("inline");
+            subjectDiv?.classList.add("hidden");
+        }
     }
-}
 
-function hideResourceTypeFilters() {
-    let resourceTypeFilterDiv = document.getElementById("resourceTypeDiv");
+    function hideSubjectFilters() {
+        let subjectDiv = document.getElementById("subjectDiv");
 
-    if (resourceTypeFilterDiv?.classList.contains("inline")) {
-        resourceTypeFilterDiv.classList.remove("inline");
-        resourceTypeFilterDiv.classList.add("hidden");
+        if (subjectDiv?.classList.contains("inline")) {
+            subjectDiv.classList.remove("inline");
+            subjectDiv.classList.add("hidden");
+        }
     }
-}
 
-function addSelectedSubject(id: string) {
-    let subjectErrorMessage = document.getElementById("selectSubjectMessage");
+    function showResourceTypeFilters() {
+        let resourceTypeFilterDiv = document.getElementById("resourceTypeDiv");
 
-    subjectErrorMessage?.classList.remove("inline");
-    subjectErrorMessage?.classList.add("hidden");
+        if (resourceTypeFilterDiv?.classList.contains("hidden")) {
+            resourceTypeFilterDiv.classList.remove("hidden");
+            resourceTypeFilterDiv.classList.add("inline");
 
-    if (selected_subjects_array.includes(id)) {
-        let currentSubjectFilters = selected_subjects_array.filter(
-            (el) => el !== id
-        );
-        selected_subjects_array = currentSubjectFilters;
-    } else {
-        selected_subjects_array.push(id);
+            hideSubjectFilters();
+            hideGradeFilters();
+        } else if (resourceTypeFilterDiv?.classList.contains("inline")) {
+            resourceTypeFilterDiv?.classList.remove("inline");
+            resourceTypeFilterDiv?.classList.add("hidden");
+        }
     }
-    console.log(selected_subjects_array);
-}
-
-function fetchFilteredResources() {
-    if (selected_subjects_array.length < 1) {
-        let errorMessage = document.getElementById("selectSubjectMessage");
-        let subjectCheckboxes =
-            document.getElementsByClassName("subjectCheckbox");
 
-        errorMessage?.classList.remove("hidden");
-        errorMessage?.classList.add("inline");
+    function hideResourceTypeFilters() {
+        let resourceTypeFilterDiv = document.getElementById("resourceTypeDiv");
 
-        let check = setInterval(function () {
-            for (let i = 0; i < subjectCheckboxes.length; i++) {
-                subjectCheckboxes[i].addEventListener("change", () => {
-                    clearInterval(check);
-                });
-            }
-            errorMessage?.classList.remove("inline");
-            errorMessage?.classList.add("hidden");
-        }, 5000);
-    } else {
-        localStorage.setItem(
-            "selectedSubjects",
-            JSON.stringify(selected_subjects_array)
-        );
-        window.location.href = `/${lang}/resources`;
+        if (resourceTypeFilterDiv?.classList.contains("inline")) {
+            resourceTypeFilterDiv.classList.remove("inline");
+            resourceTypeFilterDiv.classList.add("hidden");
+        }
     }
-}
 
-export const HomeStickyFilters: Component = () => {
-    const [subjects, setSubjects] =
-        createSignal<Array<{ product_subject: string; id: number }>>(
-            subjects_array
+    function addSelectedSubject(id: string) {
+        let subjectErrorMessage = document.getElementById(
+            "selectSubjectMessage"
         );
-    const [grades, setGrades] = createSignal<
-        Array<{ grade: string; id: number }>
-    >([]);
-    const [selectedGrades, setSelectedGrades] = createSignal<Array<string>>([]);
 
-    onMount(async () => {
-        const { data: gradeData, error: grade_error } = await supabase
-            .from("grade_level")
-            .select("grade, id");
+        subjectErrorMessage?.classList.remove("inline");
+        subjectErrorMessage?.classList.add("hidden");
 
-        if (grade_error) {
-            console.log("supabase error: " + grade_error.message);
+        if (selected_subjects_array.includes(id)) {
+            let currentSubjectFilters = selected_subjects_array.filter(
+                (el) => el !== id
+            );
+            selected_subjects_array = currentSubjectFilters;
         } else {
-            setGrades(gradeData);
+            selected_subjects_array.push(id);
         }
-    });
+        console.log(selected_subjects_array);
+    }
+
+    function fetchFilteredResources() {
+        if (selected_subjects_array.length < 1) {
+            let errorMessage = document.getElementById("selectSubjectMessage");
+            let subjectCheckboxes =
+                document.getElementsByClassName("subjectCheckbox");
+
+            errorMessage?.classList.remove("hidden");
+            errorMessage?.classList.add("inline");
+
+            let check = setInterval(function () {
+                for (let i = 0; i < subjectCheckboxes.length; i++) {
+                    subjectCheckboxes[i].addEventListener("change", () => {
+                        clearInterval(check);
+                    });
+                }
+                errorMessage?.classList.remove("inline");
+                errorMessage?.classList.add("hidden");
+            }, 5000);
+        } else {
+            localStorage.setItem(
+                "selectedSubjects",
+                JSON.stringify(selected_subjects_array)
+            );
+            window.location.href = `/${language}/resources`;
+        }
+    }
 
     function selectGrades(id: string) {
         if (selectedGrades().includes(id)) {
@@ -210,8 +217,8 @@ export const HomeStickyFilters: Component = () => {
                 id="top-sticky-filter"
                 class="sticky top-0 flex w-full items-center justify-center bg-background2 py-1 dark:bg-background2-DM"
             >
-                <a onmouseover={hideFilterDivs} href={`/${lang}/resources`}>
-                    <h3 class="mx-5 hidden text-ptext2 dark:text-ptext2-DM md:inline">
+                <a onmouseover={hideFilterDivs} href={`/${language}/resources`}>
+                    <h3 class="mx-5 hidden text-xl text-ptext2 dark:text-ptext2-DM md:inline">
                         {t("buttons.browseCatalog")}
                     </h3>
                 </a>
@@ -258,7 +265,7 @@ export const HomeStickyFilters: Component = () => {
                         </div>
 
                         <div class="flex flex-col items-center justify-center ">
-                            <a href={`/${lang}/resources`}>
+                            <a href={`/${language}/resources`}>
                                 <button class="btn-primary mx-2 my-2 min-h-[59px] min-w-[59px] rounded-full  px-4 py-1 md:min-h-px md:min-w-px">
                                     {t("buttons.findResources")}
                                 </button>
diff --git a/src/components/home/HomeSubjectCarousel.tsx b/src/components/home/HomeSubjectCarousel.tsx
index 630e95c0..5cbd642c 100644
--- a/src/components/home/HomeSubjectCarousel.tsx
+++ b/src/components/home/HomeSubjectCarousel.tsx
@@ -1,15 +1,7 @@
-import type { Component } from "solid-js";
-import supabase from "../../lib/supabaseClient";
+import { createSignal, onMount, type Component } from "solid-js";
+import supabase from "../../lib/supabaseClientServer";
 import { ui } from "../../i18n/ui";
 import type { uiObject } from "../../i18n/uiType";
-import { getLangFromUrl, useTranslations } from "../../i18n/utils";
-
-const lang = getLangFromUrl(new URL(window.location.href));
-const values = ui[lang] as uiObject;
-const productCategoryData = values.subjectCategoryInfo;
-
-import rightArrow from "../../assets/categoryIcons/circled-right-arrow.svg";
-import leftArrow from "../../assets/categoryIcons/circled-left-arrow.svg";
 import history from "../../assets/categoryIcons/history.svg";
 import art from "../../assets/categoryIcons/art.svg";
 import geography from "../../assets/categoryIcons/geography.svg";
@@ -20,59 +12,8 @@ import holiday from "../../assets/categoryIcons/holiday.svg";
 import social from "../../assets/categoryIcons/social.svg";
 import ela from "../../assets/categoryIcons/open-book.svg";
 
-let categories: Array<any> = [];
-
-const { data, error } = await supabase
-    .from("post_subject")
-    .select("*")
-    .order("subject", { ascending: true });
-
-if (error) {
-    console.log("supabase error: " + error.message);
-} else {
-    data.forEach((category) => {
-        categories.push({ category: category.category, id: category.id });
-    });
-}
-
-categories.map((category) => {
-    if (category.id === 1) {
-        category.icon = geography;
-    } else if (category.id === 2) {
-        category.icon = history;
-    } else if (category.id === 3) {
-        category.icon = art;
-    } else if (category.id === 4) {
-        category.icon = holiday;
-    } else if (category.id === 5) {
-        category.icon = math;
-    } else if (category.id === 6) {
-        category.icon = science;
-    } else if (category.id === 7) {
-        category.icon = social;
-    } else if (category.id === 8) {
-        category.icon = specialty;
-    } else if (category.id === 9) {
-        category.icon = ela;
-    }
-});
-
-const categoriesData = productCategoryData.subjects;
-
-let allCategoryInfo: any[] = [];
-
-for (let i = 0; i < categoriesData.length; i++) {
-    allCategoryInfo.push({
-        ...categoriesData[i],
-        ...categories.find(
-            (itmInner) => itmInner.id.toString() === categoriesData[i].id
-        ),
-    });
-}
-
 interface Props {
-    // Define the type for the filterPosts prop
-    filterPosts: (currentCategory: number) => void;
+    lang: "en" | "es" | "fr";
 }
 
 // let dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -80,14 +21,102 @@ interface Props {
 //     "(prefers-color-scheme: light)" || "(prefers-color-scheme: no-preference"
 // ).matches;
 
-export const HomeSubjectCarousel: Component = () => {
+export const HomeSubjectCarousel: Component<Props> = (props) => {
+    const [lang, setLang] = createSignal<"en" | "es" | "fr">(props.lang);
+    const [SubjectData, setSubjectData] = createSignal<
+        Array<{
+            category?: string | undefined;
+            id: number | string;
+            icon?: ImageMetadata;
+            name: string;
+            description: string;
+            ariaLabel: string;
+        }>
+    >([]);
+
+    const language = lang();
+    const values = ui[language] as uiObject;
+    const productCategoryData = values.subjectCategoryInfo;
+
+    console.log(productCategoryData);
+
+    let categories: Array<{
+        category: string;
+        id: number;
+        icon?: ImageMetadata;
+    }> = [];
+    let allCategoryInfo: {
+        category?: string | undefined;
+        id: number | string;
+        icon?: ImageMetadata;
+        name: string;
+        description: string;
+        ariaLabel: string;
+    }[] = [];
+
+    onMount(async () => {
+        const { data, error } = await supabase
+            .from("post_subject")
+            .select("*")
+            .order("subject", { ascending: true });
+
+        if (error) {
+            console.log("supabase error: " + error.message);
+        } else {
+            data.forEach((category) => {
+                categories.push({
+                    category: category.category,
+                    id: category.id,
+                });
+            });
+            console.log(data);
+        }
+
+        categories.map((category) => {
+            if (category.id === 1) {
+                category.icon = geography;
+            } else if (category.id === 2) {
+                category.icon = history;
+            } else if (category.id === 3) {
+                category.icon = art;
+            } else if (category.id === 4) {
+                category.icon = holiday;
+            } else if (category.id === 5) {
+                category.icon = math;
+            } else if (category.id === 6) {
+                category.icon = science;
+            } else if (category.id === 7) {
+                category.icon = social;
+            } else if (category.id === 8) {
+                category.icon = specialty;
+            } else if (category.id === 9) {
+                category.icon = ela;
+            }
+        });
+
+        const categoriesData = productCategoryData.subjects;
+
+        for (let i = 0; i < categoriesData.length; i++) {
+            allCategoryInfo.push({
+                ...categoriesData[i],
+                ...categories.find(
+                    (itmInner) =>
+                        itmInner.id.toString() === categoriesData[i].id
+                ),
+            });
+        }
+
+        setSubjectData(allCategoryInfo);
+        console.log(allCategoryInfo);
+    });
+
     return (
         <div class="my-2 rounded-lg p-1">
             <div class="flex-start flex justify-between overflow-x-auto drop-shadow-md scrollbar-thin scrollbar-track-background1  scrollbar-thumb-shadow-LM scrollbar-track-rounded-full scrollbar-thumb-rounded-full dark:drop-shadow-[0_4px_3px_rgba(97,97,97,1)] dark:scrollbar-track-background1-DM dark:scrollbar-thumb-shadow-DM">
                 <div class="flex h-[8rem] w-full items-start justify-between pt-2">
-                    {allCategoryInfo?.map((item) => (
+                    {SubjectData()?.map((item) => (
                         <button
-                            id={item.id}
+                            id={item.id.toString()}
                             class="catBtn flex h-28 w-20 flex-none flex-col items-center justify-start"
                             onClick={(e) => {
                                 let currBtn = e.target;
@@ -102,7 +131,7 @@ export const HomeSubjectCarousel: Component = () => {
                                     "selectedSubjects",
                                     JSON.stringify([currBtn.id])
                                 );
-                                window.location.href = `/${lang}/resources`;
+                                window.location.href = `/${language}/resources`;
                             }}
                         >
                             <div class="rounded-full bg-iconbg1 dark:bg-iconbg1-DM">
diff --git a/src/components/services/FiltersMobile.tsx b/src/components/services/FiltersMobile.tsx
index 05a91886..3d9aedd9 100644
--- a/src/components/services/FiltersMobile.tsx
+++ b/src/components/services/FiltersMobile.tsx
@@ -159,11 +159,6 @@ export const FiltersMobile: Component<Props> = (props) => {
             ]);
             setResourceTypesFilterCount(resourceTypesFilters().length);
             checkResourceTypesBoxes();
-        } else {
-            setGradeFilters([]);
-            grade().forEach((grade) => {
-                grade.checked = false;
-            });
         }
 
         if (screenSize() !== "sm") {
@@ -699,9 +694,8 @@ export const FiltersMobile: Component<Props> = (props) => {
                                         <div class="flex items-center">
                                             <input
                                                 aria-label={
-                                                    t(
-                                                        "ariaLabels.checkboxGrade"
-                                                    ) + item.type
+                                                    item.type +
+                                                    t("ariaLabels.checkbox")
                                                 }
                                                 type="checkbox"
                                                 id={item.id.toString()}
@@ -773,7 +767,7 @@ export const FiltersMobile: Component<Props> = (props) => {
 
                         <div class="ml-8 flex flex-wrap">
                             <For each={grade()}>
-                                {(item, index) => (
+                                {(item) => (
                                     <div class="flex w-1/2 flex-row flex-wrap py-1">
                                         <div class="flex items-center">
                                             {/* TODO - capture selected checkboxes in a signal, if included pre-check them */}
diff --git a/src/i18n/UI/English.ts b/src/i18n/UI/English.ts
index 54e6330b..7be92ce3 100644
--- a/src/i18n/UI/English.ts
+++ b/src/i18n/UI/English.ts
@@ -407,6 +407,7 @@ export const English = {
     increaseQuantity: "Increase Quantity",
     decreaseQuantity: "Decrease Quantity",
     checkboxGrade: "Checkbox for selecting grade level",
+    checkbox: "Checkbox",
     readMoreAbout: "Read more about ",
   },
 
diff --git a/src/i18n/UI/French.ts b/src/i18n/UI/French.ts
index d0a1809e..ef572217 100644
--- a/src/i18n/UI/French.ts
+++ b/src/i18n/UI/French.ts
@@ -412,6 +412,7 @@ export const French = {
     increaseQuantity: "Augmenter la quantité",
     decreaseQuantity: "Diminuer la quantité",
     checkboxGrade: "Case à cocher pour sélectionner le niveau scolaire",
+    checkbox: "Case à cocher",
     readMoreAbout: "En savoir plus sur",
   },
 
diff --git a/src/i18n/UI/Spanish.ts b/src/i18n/UI/Spanish.ts
index fc8e1ad8..94b07270 100644
--- a/src/i18n/UI/Spanish.ts
+++ b/src/i18n/UI/Spanish.ts
@@ -414,7 +414,8 @@ export const Spanish = {
     decreaseQuantity: "Disminuir cantidad",
     checkboxGrade:
       "Casilla de verificación para seleccionar el nivel de grado",
-      readMoreAbout: "Leer más sobre",
+    checkbox: "Caja",
+    readMoreAbout: "Leer más sobre",
   },
 
   headerData: {
diff --git a/src/i18n/uiType.ts b/src/i18n/uiType.ts
index a7997fe7..5ddaf8fc 100644
--- a/src/i18n/uiType.ts
+++ b/src/i18n/uiType.ts
@@ -361,6 +361,7 @@ export interface uiObject {
     increaseQuantity: string;
     decreaseQuantity: string;
     checkboxGrade: string;
+    checkbox: string;
     readMoreAbout: string;
   };
 
diff --git a/src/lib/supabaseClient.tsx b/src/lib/supabaseClient.tsx
index 4da642d0..626cbd23 100644
--- a/src/lib/supabaseClient.tsx
+++ b/src/lib/supabaseClient.tsx
@@ -9,7 +9,7 @@ const supabase = Supabase.createClient(supabaseUrl, supabaseAnonKey, {
         fetch: (...args) => fetch(...args),
     },
     auth: {
-        storage: localStorage,
+        storage: typeof window !== "undefined" ? localStorage : undefined,
         autoRefreshToken: true,
         persistSession: true,
         detectSessionInUrl: true,
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 79d0b286..68180435 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,12 +1,9 @@
 ---
 import Layout from "@layouts/PageLayout.astro";
-import { AuthMode } from "@components/common/AuthMode";
-import { SignUpBtn } from "@components/common/SignUpButton";
 import { Home } from "@components/home/Home";
 import { getLangFromUrl, useTranslations } from "@i18n/utils";
-import services from "@assets/services.png";
-import servicesDM from "@assets/servicesDM.png";
-import { postcss } from "tailwindcss";
+import { HomeStickyFilters } from "@components/home/HomeStickyFilters";
+import { HomeSubjectCarousel } from "@components/home/HomeSubjectCarousel";
 
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
@@ -17,6 +14,18 @@ const t = useTranslations(lang);
     pageDescription={t("pageDescriptions.home")}
 >
     <div class="w-full">
-        <Home client:only="solid-js" />
+        <!-- @ts-ignore -->
+        <Home client:visible lang={lang}>
+            <HomeStickyFilters
+                lang={lang}
+                client:only="solid-js"
+                slot="stickyFilters"
+            />
+            <HomeSubjectCarousel
+                lang={lang}
+                client:only="solid-js"
+                slot={"subjectCarousel"}
+            />
+        </Home>
     </div>
 </Layout>

From 02f58dbf4bf35bb6474c23861237c522773b3eac Mon Sep 17 00:00:00 2001
From: r-southworth <rachael.southworth@datagrove.com>
Date: Sun, 1 Sep 2024 12:38:04 -0400
Subject: [PATCH 4/8] faster loading for first 5 images on viewCard

---
 src/components/home/Home.tsx              |   2 -
 src/components/services/ResourcesMain.tsx |  40 +++-----
 src/components/services/ViewCard.tsx      | 110 +++++++---------------
 src/pages/resources.astro                 |   1 +
 4 files changed, 50 insertions(+), 103 deletions(-)

diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
index f0818d3c..6cdfba0d 100644
--- a/src/components/home/Home.tsx
+++ b/src/components/home/Home.tsx
@@ -3,9 +3,7 @@ import type { FilterPostsParams, Post } from "@lib/types";
 import { createSignal, Show, onMount } from "solid-js";
 import { useStore } from "@nanostores/solid";
 import { windowSize } from "@components/common/WindowSizeStore";
-import { HomeStickyFilters } from "./HomeStickyFilters";
 import { HomeCard } from "@components/home/HomeCard";
-import { HomeSubjectCarousel } from "@components/home/HomeSubjectCarousel";
 import { HomeGradeCarousel } from "./HomeGradeCarousel";
 import { useTranslations } from "../../i18n/utils";
 
diff --git a/src/components/services/ResourcesMain.tsx b/src/components/services/ResourcesMain.tsx
index 2333dc99..9d7b5223 100644
--- a/src/components/services/ResourcesMain.tsx
+++ b/src/components/services/ResourcesMain.tsx
@@ -5,8 +5,6 @@ import { ViewCard } from "./ViewCard";
 import { MobileViewCard } from "./MobileViewCard";
 import { FiltersMobile } from "./FiltersMobile";
 import { SearchBar } from "./SearchBar";
-import { ui } from "../../i18n/ui";
-import type { uiObject } from "../../i18n/uiType";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 import { useStore } from "@nanostores/solid";
 import { windowSize } from "@components/common/WindowSizeStore";
@@ -61,39 +59,29 @@ export const ResourcesView: Component = () => {
     const screenSize = useStore(windowSize);
 
     onMount(async () => {
-        if (
-            localStorage.getItem("selectedSubjects") !== null &&
-            localStorage.getItem("selectedSubjects")
-        ) {
+        const localSubjects = localStorage.getItem("selectedSubjects");
+        const localGrades = localStorage.getItem("selectedGrades");
+        const localSearch = localStorage.getItem("searchString");
+        const localResourceTypes = localStorage.getItem(
+            "selectedResourceTypes"
+        );
+        if (localSubjects !== null && localSubjects) {
             setSubjectFilters([
                 ...subjectFilters(),
-                ...JSON.parse(localStorage.getItem("selectedSubjects")!),
+                ...JSON.parse(localSubjects),
             ]);
         }
-        if (
-            localStorage.getItem("selectedGrades") !== null &&
-            localStorage.getItem("selectedGrades")
-        ) {
-            setGradeFilters([
-                ...gradeFilters(),
-                ...JSON.parse(localStorage.getItem("selectedGrades")!),
-            ]);
+        if (localGrades !== null && localGrades) {
+            setGradeFilters([...gradeFilters(), ...JSON.parse(localGrades)]);
         }
-        if (
-            localStorage.getItem("searchString") !== null &&
-            localStorage.getItem("searchString") !== undefined
-        ) {
-            const searchStringValue =
-                localStorage.getItem("searchString") || "";
+        if (localSearch !== null && localSearch !== undefined) {
+            const searchStringValue = localSearch || "";
             setSearchString(searchStringValue);
         }
-        if (
-            localStorage.getItem("selectedResourceTypes") !== null &&
-            localStorage.getItem("selectedResourceTypes")
-        ) {
+        if (localResourceTypes !== null && localResourceTypes) {
             setResourceFilters([
                 ...resourceFilters(),
-                ...JSON.parse(localStorage.getItem("selectedResourceTypes")!),
+                ...JSON.parse(localResourceTypes),
             ]);
         }
         await filterPosts();
diff --git a/src/components/services/ViewCard.tsx b/src/components/services/ViewCard.tsx
index f8340b04..d3a61be1 100644
--- a/src/components/services/ViewCard.tsx
+++ b/src/components/services/ViewCard.tsx
@@ -7,12 +7,7 @@ import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 import { AddToCart } from "../common/cart/AddToCartButton";
 import type { AuthSession } from "@supabase/supabase-js";
 import { FavoriteButton } from "@components/posts/AddFavorite";
-import { sortResourceTypes } from "@lib/utils/resourceSort";
-import {
-    downloadPostImage,
-    downloadUserImage,
-    lazyLoadImage,
-} from "@lib/imageHelper";
+import { lazyLoadImage } from "@lib/imageHelper";
 import postPlaceHolder from "@src/assets/postPlaceHolder.svg";
 
 const lang = getLangFromUrl(new URL(window.location.href));
@@ -41,73 +36,6 @@ export const ViewCard: Component<Props> = (props) => {
         }
     }
 
-    // createEffect(async () => {
-    //     if (props.posts) {
-    //         const updatedPosts = await Promise.all(
-    //             props.posts.map(async (post: Post) => {
-    //                 post.image_urls
-    //                     ? (post.image_url = await downloadPostImage(
-    //                           post.image_urls.split(",")[0]
-    //                       ))
-    //                     : (post.image_url = undefined);
-
-    //                 // Set the default quantity to 1
-    //                 post.quantity = 1;
-
-    //                 const { data: sellerImg, error: sellerImgError } =
-    //                     await supabase
-    //                         .from("sellerview")
-    //                         .select("*")
-    //                         .eq("seller_id", post.seller_id);
-
-    //                 if (sellerImgError) {
-    //                     console.log(sellerImgError);
-    //                 }
-
-    //                 if (sellerImg) {
-    //                     if (sellerImg[0].image_url) {
-    //                         post.seller_img = await downloadUserImage(
-    //                             sellerImg[0].image_url
-    //                         );
-    //                     }
-    //                 }
-
-    // const { data: resourceTypeData, error } = await supabase
-    //     .from("resource_types")
-    //     .select("*");
-
-    // if (error) {
-    //     console.log("supabase error: " + error.message);
-    // } else {
-    //     sortResourceTypes(resourceTypeData);
-    //     post.resourceTypes = [];
-    //     resourceTypeData.forEach((databaseResourceTypes) => {
-    //         post.resource_types.map(
-    //             (itemResourceType: string) => {
-    //                 if (
-    //                     itemResourceType ===
-    //                     databaseResourceTypes.id.toString()
-    //                 ) {
-    //                     post.resourceTypes!.push(
-    //                         databaseResourceTypes.type
-    //                     );
-    //                 }
-    //             }
-    //         );
-    //     });
-    // }
-    //                 return post;
-    //             })
-    //         );
-
-    //         setNewPosts(updatedPosts);
-    //     }
-    // });
-
-    const updateQuantity = (quantity: number) => {
-        setQuantity(quantity);
-    };
-
     const resetQuantity = () => {
         setQuantity(1);
     };
@@ -115,7 +43,7 @@ export const ViewCard: Component<Props> = (props) => {
     return (
         <div class="flex w-full justify-center">
             <ul class="flex w-full flex-wrap justify-center">
-                {props.posts.map((post: Post) => (
+                {props.posts.map((post: Post, index) => (
                     <li class="mb-3 w-[99%]">
                         <a
                             href={`/${lang}/posts/${post.id}`}
@@ -125,7 +53,39 @@ export const ViewCard: Component<Props> = (props) => {
                         >
                             <div class="mb-2 box-content flex h-full w-full flex-grow flex-row items-start justify-start rounded-lg border border-border1 border-opacity-25 shadow-md shadow-shadow-LM dark:border-border1-DM dark:border-opacity-25 dark:shadow-shadow-DM">
                                 <div class="relative mr-2 flex h-48 w-48 shrink-0 items-center justify-center rounded-lg bg-background1 dark:bg-background1-DM">
-                                    {post.image_url ? (
+                                    {post.image_url && index <= 4 ? (
+                                        <div class="absolute top-0">
+                                            <picture>
+                                                <source
+                                                    type="image/webp"
+                                                    srcset={
+                                                        post.image_url.webpUrl
+                                                    }
+                                                />
+                                                <img
+                                                    src={post.image_url.jpegUrl}
+                                                    alt={
+                                                        post.image_urls?.split(
+                                                            ","
+                                                        )[0]
+                                                            ? `User Image for Post ${post.title}`
+                                                            : "No image"
+                                                    }
+                                                    class="h-48 w-48 rounded-lg bg-background1 object-contain dark:bg-background1-DM"
+                                                    fetchpriority="high"
+                                                    loading="eager"
+                                                />
+                                            </picture>
+
+                                            <div class="absolute right-2 top-2 col-span-1 flex justify-end">
+                                                <div class="inline-block">
+                                                    <FavoriteButton
+                                                        id={post.id}
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ) : post.image_url && index > 4 ? (
                                         <div class="absolute top-0">
                                             <picture>
                                                 <source
diff --git a/src/pages/resources.astro b/src/pages/resources.astro
index 73080e3b..78da35df 100644
--- a/src/pages/resources.astro
+++ b/src/pages/resources.astro
@@ -10,6 +10,7 @@ const t = useTranslations(lang);
 <PageLayout
     pageTitle={t("pageTitles.services")}
     pageDescription={t("pageDescriptions.services")}
+    stylesheets={`<link rel="preconnect" href=${import.meta.env.PUBLIC_VITE_SUPABASE_URL}`}
 >
     <div class="text-center mb-8 bg-background1 dark:bg-background1-DM w-full">
         <div class="text-center">

From 093298ed8f70c8c008e926887b2b457bc98c3948 Mon Sep 17 00:00:00 2001
From: r-southworth <rachael.southworth@datagrove.com>
Date: Sun, 1 Sep 2024 12:51:56 -0400
Subject: [PATCH 5/8] get extra code out of mobile view Card

---
 src/components/services/MobileViewCard.tsx | 70 +---------------------
 src/pages/api/fetchFilterPosts.ts          |  1 -
 2 files changed, 1 insertion(+), 70 deletions(-)

diff --git a/src/components/services/MobileViewCard.tsx b/src/components/services/MobileViewCard.tsx
index 0b61f97e..e8fc58c7 100644
--- a/src/components/services/MobileViewCard.tsx
+++ b/src/components/services/MobileViewCard.tsx
@@ -25,7 +25,6 @@ interface Props {
 const { data: User, error: UserError } = await supabase.auth.getSession();
 
 export const MobileViewCard: Component<Props> = (props) => {
-    const [newPosts, setNewPosts] = createSignal<Array<any>>([]);
     const [quantity, setQuantity] = createSignal<number>(1);
     const [session, setSession] = createSignal<AuthSession | null>(null);
 
@@ -35,73 +34,6 @@ export const MobileViewCard: Component<Props> = (props) => {
         setSession(User.session);
     }
 
-    createEffect(async () => {
-        if (props.posts) {
-            const updatedPosts = await Promise.all(
-                props.posts.map(async (post: any) => {
-                    post.image_urls
-                        ? (post.image_url = await downloadPostImage(
-                              post.image_urls.split(",")[0]
-                          ))
-                        : (post.image_url = null);
-
-                    const { data: sellerImg, error: sellerImgError } =
-                        await supabase
-                            .from("sellerview")
-                            .select("*")
-                            .eq("seller_id", post.seller_id);
-
-                    if (sellerImgError) {
-                        console.log(sellerImgError);
-                    }
-
-                    if (sellerImg) {
-                        if (sellerImg[0].image_url) {
-                            post.seller_img = await downloadUserImage(
-                                sellerImg[0].image_url
-                            );
-                        }
-                    }
-                    // Set the default quantity to 1
-                    post.quantity = 1;
-
-                    const { data: resourceTypeData, error } = await supabase
-                        .from("resource_types")
-                        .select("*");
-
-                    if (error) {
-                        console.log("supabase error: " + error.message);
-                    } else {
-                        sortResourceTypes(resourceTypeData);
-                        post.resourceTypes = [];
-                        resourceTypeData.forEach((databaseResourceTypes) => {
-                            post.resource_types.map(
-                                (itemResourceType: string) => {
-                                    if (
-                                        itemResourceType ===
-                                        databaseResourceTypes.id.toString()
-                                    ) {
-                                        post.resourceTypes!.push(
-                                            databaseResourceTypes.type
-                                        );
-                                    }
-                                }
-                            );
-                        });
-                    }
-
-                    return post;
-                })
-            );
-
-            setNewPosts(updatedPosts);
-        }
-    });
-
-    const updateQuantity = (quantity: number) => {
-        setQuantity(quantity);
-    };
-
     const resetQuantity = () => {
         setQuantity(1);
     };
@@ -151,7 +83,7 @@ export const MobileViewCard: Component<Props> = (props) => {
 
     return (
         <div class="w-full">
-            {newPosts().map((post: Post) => (
+            {props.posts.map((post: Post) => (
                 <div class="mb-4 rounded-lg border border-border1 dark:border-border1-DM">
                     <a
                         href={`/${lang}/posts/${post.id}`}
diff --git a/src/pages/api/fetchFilterPosts.ts b/src/pages/api/fetchFilterPosts.ts
index 4448fabf..f93a12ba 100644
--- a/src/pages/api/fetchFilterPosts.ts
+++ b/src/pages/api/fetchFilterPosts.ts
@@ -1,6 +1,5 @@
 import supabase from "@lib/supabaseClientServer";
 import type { APIRoute } from "astro";
-import { useTranslations } from "@i18n/utils";
 import type { FilterPostsParams, Post } from "@lib/types";
 import { ui } from "../../i18n/ui";
 import type { uiObject } from "../../i18n/uiType";

From 58666fbb97ee18a9a8e3b3b8bbdfc524086dc607 Mon Sep 17 00:00:00 2001
From: r-southworth <rachael.southworth@datagrove.com>
Date: Sun, 1 Sep 2024 12:57:28 -0400
Subject: [PATCH 6/8] tiny changes to mobile view card

---
 src/components/services/MobileViewCard.tsx | 7 ++++---
 src/components/services/ResourcesMain.tsx  | 5 ++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/services/MobileViewCard.tsx b/src/components/services/MobileViewCard.tsx
index e8fc58c7..09a63d6f 100644
--- a/src/components/services/MobileViewCard.tsx
+++ b/src/components/services/MobileViewCard.tsx
@@ -14,12 +14,10 @@ import type { AuthSession } from "@supabase/supabase-js";
 import { sortResourceTypes } from "@lib/utils/resourceSort";
 import { downloadPostImage, downloadUserImage } from "@lib/imageHelper";
 
-const lang = getLangFromUrl(new URL(window.location.href));
-const t = useTranslations(lang);
-
 interface Props {
     // Define the type for the filterPosts prop
     posts: Array<Post>;
+    lang: "en" | "es" | "fr";
 }
 
 const { data: User, error: UserError } = await supabase.auth.getSession();
@@ -28,6 +26,9 @@ export const MobileViewCard: Component<Props> = (props) => {
     const [quantity, setQuantity] = createSignal<number>(1);
     const [session, setSession] = createSignal<AuthSession | null>(null);
 
+    const lang = props.lang;
+    const t = useTranslations(lang);
+
     if (UserError) {
         console.log("User Error: " + UserError.message);
     } else {
diff --git a/src/components/services/ResourcesMain.tsx b/src/components/services/ResourcesMain.tsx
index 9d7b5223..0e774fdb 100644
--- a/src/components/services/ResourcesMain.tsx
+++ b/src/components/services/ResourcesMain.tsx
@@ -396,7 +396,10 @@ export const ResourcesView: Component = () => {
                     </Show>
                     <Show when={screenSize() === "sm"}>
                         <div class="flex justify-center">
-                            <MobileViewCard posts={currentPosts()} />
+                            <MobileViewCard
+                                lang={lang}
+                                posts={currentPosts()}
+                            />
                         </div>
                     </Show>
                 </div>

From a113c893a5f990c20efe849c45c6ce43131219b3 Mon Sep 17 00:00:00 2001
From: r-southworth <rachael.southworth@datagrove.com>
Date: Sun, 1 Sep 2024 13:09:17 -0400
Subject: [PATCH 7/8] lazy load images on mobileCard below the fold

---
 src/components/services/MobileViewCard.tsx | 54 ++++++++++++++++++----
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/components/services/MobileViewCard.tsx b/src/components/services/MobileViewCard.tsx
index 09a63d6f..c9ec550e 100644
--- a/src/components/services/MobileViewCard.tsx
+++ b/src/components/services/MobileViewCard.tsx
@@ -4,15 +4,11 @@ import { createSignal, createEffect, Show } from "solid-js";
 import { DeletePostButton } from "../posts/DeletePostButton";
 import supabase from "../../lib/supabaseClient";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
-import { SocialMediaShares } from "../posts/SocialMediaShares";
-import SocialModal from "../posts/SocialModal";
 import { AddToCart } from "../common/cart/AddToCartButton";
-import { Quantity } from "@components/common/cart/Quantity";
 import { FavoriteButton } from "@components/posts/AddFavorite";
-import { doc } from "prettier";
 import type { AuthSession } from "@supabase/supabase-js";
-import { sortResourceTypes } from "@lib/utils/resourceSort";
-import { downloadPostImage, downloadUserImage } from "@lib/imageHelper";
+import { lazyLoadImage } from "@lib/imageHelper";
+import postPlaceHolder from "@src/assets/postPlaceHolder.svg";
 
 interface Props {
     // Define the type for the filterPosts prop
@@ -84,7 +80,7 @@ export const MobileViewCard: Component<Props> = (props) => {
 
     return (
         <div class="w-full">
-            {props.posts.map((post: Post) => (
+            {props.posts.map((post: Post, index) => (
                 <div class="mb-4 rounded-lg border border-border1 dark:border-border1-DM">
                     <a
                         href={`/${lang}/posts/${post.id}`}
@@ -92,23 +88,61 @@ export const MobileViewCard: Component<Props> = (props) => {
                     >
                         <div class="photo-price flex h-48 w-full justify-between rounded-lg bg-background1 dark:bg-background1-DM">
                             <div class="relative flex h-48 w-48 shrink-0 items-center justify-center rounded-lg bg-background1 dark:bg-background1-DM">
-                                {post.image_url ? (
+                                {post.image_url && index <= 1 ? (
                                     <div class="absolute top-0">
                                         <picture>
                                             <source
-                                                srcset={post.image_url.webpUrl}
                                                 type="image/webp"
+                                                srcset={post.image_url.webpUrl}
                                             />
                                             <img
                                                 src={post.image_url.jpegUrl}
                                                 alt={
-                                                    post.image_urls!.split(
+                                                    post.image_urls?.split(
+                                                        ","
+                                                    )[0]
+                                                        ? `User Image for Post ${post.title}`
+                                                        : "No image"
+                                                }
+                                                class="h-48 w-48 rounded-lg bg-background1 object-contain dark:bg-background1-DM"
+                                                fetchpriority="high"
+                                                loading="eager"
+                                            />
+                                        </picture>
+                                        <div class="absolute right-2 top-2 col-span-1 flex justify-end">
+                                            <div class="inline-block">
+                                                <FavoriteButton id={post.id} />
+                                            </div>
+                                        </div>
+                                    </div>
+                                ) : post.image_url && index > 1 ? (
+                                    <div class="absolute top-0">
+                                        <picture>
+                                            <source
+                                                type="image/webp"
+                                                data-srcset={
+                                                    post.image_url.webpUrl
+                                                }
+                                            />
+                                            <img
+                                                src={postPlaceHolder.src}
+                                                data-src={
+                                                    post.image_url.jpegUrl
+                                                }
+                                                alt={
+                                                    post.image_urls?.split(
                                                         ","
                                                     )[0]
                                                         ? `User Image for Post ${post.title}`
                                                         : "No image"
                                                 }
                                                 class="h-48 w-48 rounded-lg bg-background1 object-contain dark:bg-background1-DM"
+                                                loading="lazy"
+                                                onload={(e) => {
+                                                    lazyLoadImage(
+                                                        e.currentTarget as HTMLImageElement
+                                                    );
+                                                }}
                                             />
                                         </picture>
                                         <div class="absolute right-2 top-2 col-span-1 flex justify-end">

From 84f2476e76378b8861878ea89058d1d83cea46d1 Mon Sep 17 00:00:00 2001
From: r-southworth <rachael.southworth@datagrove.com>
Date: Wed, 4 Sep 2024 17:14:20 -0400
Subject: [PATCH 8/8] fixed image sizes and massive bug overhaul

---
 src/components/common/HeaderSearchBar.tsx     |   1 +
 src/components/common/cart/CartCard.tsx       |   4 +-
 src/components/common/cart/CartCardDonate.tsx |   2 +-
 .../common/cart/CartCardDonateMobile.tsx      |   2 +-
 src/components/common/cart/CartCardMobile.tsx |   2 +-
 src/components/common/cart/ViewCart.tsx       |   2 -
 src/components/members/CreatorProfileView.tsx |   7 +-
 src/components/members/UserCreatorView.tsx    |   2 +-
 src/components/members/UserProfileView.tsx    |  10 -
 .../members/UserProfileViewMobile.tsx         |  36 ---
 src/components/members/user/DownloadBtn.tsx   |   4 +-
 src/components/posts/EditPost.tsx             |   2 +-
 src/components/posts/FullPostView.tsx         | 141 +-------
 src/components/posts/MobileFullPostView.tsx   | 188 +++--------
 src/components/posts/UserViewCreatorPosts.tsx |  80 ++---
 src/components/posts/ViewCreatorPosts.tsx     |   4 +-
 src/components/posts/ViewUserFavorites.tsx    | 136 ++------
 src/components/posts/ViewUserPurchases.tsx    |  25 +-
 .../posts/{fetchPosts.ts => fetchPosts.txt}   |   0
 src/components/services/FiltersMobile.tsx     | 201 ++++++++----
 src/components/services/MobileViewCard.tsx    |   3 +-
 src/components/services/ResourcesMain.tsx     | 109 +------
 src/components/services/SearchBar.tsx         |  29 +-
 src/components/services/SecularFilter.tsx     |  87 +++--
 src/components/services/ViewCard.tsx          |   8 +-
 src/components/services/ViewPurchaseCard.tsx  |   1 +
 src/layouts/PageLayout.astro                  |   4 +-
 src/lib/types.ts                              |   3 +-
 src/pages/api/creatorUpdatePost.ts            | 300 +++++++++---------
 src/pages/api/fetchFilterPosts.ts             |   6 +-
 supabase/seed.sql                             |  10 +-
 31 files changed, 494 insertions(+), 915 deletions(-)
 rename src/components/posts/{fetchPosts.ts => fetchPosts.txt} (100%)

diff --git a/src/components/common/HeaderSearchBar.tsx b/src/components/common/HeaderSearchBar.tsx
index 68f598f0..7138aee8 100644
--- a/src/components/common/HeaderSearchBar.tsx
+++ b/src/components/common/HeaderSearchBar.tsx
@@ -32,6 +32,7 @@ export const SearchBar: Component = () => {
             searchString() !== "null"
         ) {
             localStorage.setItem("searchString", searchString());
+            console.log("Set Search to Local Storage", searchString());
         }
 
         // console.log(window.location.href)
diff --git a/src/components/common/cart/CartCard.tsx b/src/components/common/cart/CartCard.tsx
index a48dc4fa..14808f0b 100644
--- a/src/components/common/cart/CartCard.tsx
+++ b/src/components/common/cart/CartCard.tsx
@@ -25,6 +25,8 @@ export const CartCard: Component<Props> = (props) => {
     const [newItems, setNewItems] = createSignal<Array<Post>>([]);
     const [quantity, setQuantity] = createSignal<number>(0);
 
+    console.log(items);
+
     createEffect(async () => {
         if (props.items) {
             // const updatedItems = await Promise.all(
@@ -133,7 +135,7 @@ export const CartCard: Component<Props> = (props) => {
                                                         ? "User Image"
                                                         : "No image"
                                                 }
-                                                class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
+                                                class="h-48 w-48 rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
                                                 loading="lazy"
                                                 onload={(e) => {
                                                     lazyLoadImage(
diff --git a/src/components/common/cart/CartCardDonate.tsx b/src/components/common/cart/CartCardDonate.tsx
index 38de6d40..76fa940b 100644
--- a/src/components/common/cart/CartCardDonate.tsx
+++ b/src/components/common/cart/CartCardDonate.tsx
@@ -36,7 +36,7 @@ export const CartCardDonate: Component<Props> = (props) => {
                                         src={LearnGroveCommunity.src}
                                         // TODO Internationalize
                                         alt="Build Your LearnGrove"
-                                        class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
+                                        class="h-44 w-44 rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
                                     />
                                 </div>
 
diff --git a/src/components/common/cart/CartCardDonateMobile.tsx b/src/components/common/cart/CartCardDonateMobile.tsx
index ba1ae86a..960475ca 100644
--- a/src/components/common/cart/CartCardDonateMobile.tsx
+++ b/src/components/common/cart/CartCardDonateMobile.tsx
@@ -36,7 +36,7 @@ export const CartCardDonateMobile: Component<Props> = (props) => {
                                         src={LearnGroveCommunity.src}
                                         // TODO Internationalize
                                         alt="Build Your LearnGrove"
-                                        class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
+                                        class="h-22 w-22 rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
                                     />
                                 </div>
 
diff --git a/src/components/common/cart/CartCardMobile.tsx b/src/components/common/cart/CartCardMobile.tsx
index bd5587d9..0104d955 100644
--- a/src/components/common/cart/CartCardMobile.tsx
+++ b/src/components/common/cart/CartCardMobile.tsx
@@ -127,7 +127,7 @@ export const CartCardMobile: Component<Props> = (props) => {
                                                     ? "User Image"
                                                     : "No image"
                                             }
-                                            class="h-full w-full rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
+                                            class="h-22 w-22 rounded-lg bg-background1 object-cover dark:bg-icon1-DM"
                                             loading="lazy"
                                             onload={(e) => {
                                                 lazyLoadImage(
diff --git a/src/components/common/cart/ViewCart.tsx b/src/components/common/cart/ViewCart.tsx
index a7d72454..c33ed4ce 100644
--- a/src/components/common/cart/ViewCart.tsx
+++ b/src/components/common/cart/ViewCart.tsx
@@ -26,7 +26,6 @@ const t = useTranslations(lang);
 
 export const CartView = () => {
     const [totalItems, setTotalItems] = createSignal(0);
-    const [itemsDetails, setItemsDetails] = createSignal<Post[]>([]);
     const [cartTotal, setCartTotal] = createSignal(0);
     const [donation, setDonation] = createSignal(0);
     const screenSize = useStore(windowSize);
@@ -75,7 +74,6 @@ export const CartView = () => {
             let total = 0;
             {
                 console.log("items in cart: " + items.length);
-                console.log("Item Details: " + itemsDetails());
             }
             items.forEach((item: Post) => {
                 if (item.price) {
diff --git a/src/components/members/CreatorProfileView.tsx b/src/components/members/CreatorProfileView.tsx
index fdaa252f..f16fcd50 100644
--- a/src/components/members/CreatorProfileView.tsx
+++ b/src/components/members/CreatorProfileView.tsx
@@ -19,7 +19,6 @@ import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 import { createStore } from "solid-js/store";
 import { StripeButton } from "@components/members/creator/StripeButton";
 import { PayoutButton } from "@components/members/creator/PayoutButton";
-import { MobileViewCard } from "@components/services/MobileViewCard";
 import type { Creator } from "@lib/types";
 import { TinyComp } from "@components/posts/TinyComp";
 import {
@@ -85,10 +84,6 @@ export const CreatorProfileView: Component = () => {
         }
     });
 
-    createEffect(() => {
-        console.log("creatorImage value:", creatorImage());
-    });
-
     const resetPassword = () => {
         window.location.href = `/${lang}/password/reset`;
     };
@@ -330,7 +325,7 @@ export const CreatorProfileView: Component = () => {
                                     <img
                                         src={person.src}
                                         data-src={creatorImage().jpegUrl}
-                                        class="absolute left-1/2 top-1/2 block h-56 -translate-x-1/2 -translate-y-1/2 justify-center object-contain md:h-96"
+                                        class="absolute left-1/2 top-1/2 block h-[142px] w-[142px] -translate-x-1/2 -translate-y-1/2 justify-center object-contain"
                                         alt={`${t("postLabels.creatorProfileImage")} 1`}
                                         loading="lazy"
                                     />
diff --git a/src/components/members/UserCreatorView.tsx b/src/components/members/UserCreatorView.tsx
index da030bae..8fe7b949 100644
--- a/src/components/members/UserCreatorView.tsx
+++ b/src/components/members/UserCreatorView.tsx
@@ -268,7 +268,7 @@ export const UserCreatorView: Component<Props> = (props) => {
                             <img
                                 src={creatorImage().jpegUrl}
                                 alt={`${t("postLabels.CreatorProfileImage")} 1`}
-                                class="absolute left-12 top-6 flex h-36 w-36 items-center justify-center rounded-full border-2 border-gray-400 bg-background2 object-contain dark:bg-background2-DM"
+                                class="absolute left-12 top-6 flex h-[142px] w-[142px] items-center justify-center rounded-full border-2 border-gray-400 bg-background2 object-contain dark:bg-background2-DM"
                             />
                         </picture>
                     </div>
diff --git a/src/components/members/UserProfileView.tsx b/src/components/members/UserProfileView.tsx
index 53cbb6c5..d7aab968 100644
--- a/src/components/members/UserProfileView.tsx
+++ b/src/components/members/UserProfileView.tsx
@@ -10,15 +10,10 @@ import {
 } from "solid-js";
 import supabase from "../../lib/supabaseClient";
 import type { AuthSession } from "@supabase/supabase-js";
-import UserImage from "./UserImage";
-import { ui } from "../../i18n/ui";
-import type { uiObject } from "../../i18n/uiType";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 import type { User } from "@lib/types";
 import type { Post } from "@lib/types";
-import { ViewCard } from "@components/services/ViewCard";
 import { ViewUserPurchases } from "@components/posts/ViewUserPurchases";
-import stripe from "@lib/stripe";
 import { UserProfileViewMobile } from "@components/members/UserProfileViewMobile";
 import { useStore } from "@nanostores/solid";
 import { windowSize } from "@components/common/WindowSizeStore";
@@ -27,10 +22,6 @@ import { ViewUserFavorites } from "@components/posts/ViewUserFavorites";
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
 
-//get the categories from the language files so they translate with changes in the language picker
-const values = ui[lang] as uiObject;
-const productCategories = values.subjectCategoryInfo.subjects;
-
 async function postFormData(formData: FormData) {
     const response = await fetch("/api/userProfileEdit", {
         method: "POST",
@@ -60,7 +51,6 @@ export const UserProfileView: Component = () => {
     const screenSize = useStore(windowSize);
     const [formData, setFormData] = createSignal<FormData>();
     const [response] = createResource(formData, postFormData);
-    const [purchasedItems, setPurchasedItems] = createSignal<Array<Post>>([]);
     const [tabSelected, setTabSelected] = createSignal<string>("purchases");
 
     onMount(async () => {
diff --git a/src/components/members/UserProfileViewMobile.tsx b/src/components/members/UserProfileViewMobile.tsx
index 30ee98b5..f3b66ff3 100644
--- a/src/components/members/UserProfileViewMobile.tsx
+++ b/src/components/members/UserProfileViewMobile.tsx
@@ -9,45 +9,15 @@ import {
     Suspense,
 } from "solid-js";
 import supabase from "../../lib/supabaseClient";
-import type { AuthSession } from "@supabase/supabase-js";
-import UserImage from "./UserImage";
-import { ui } from "../../i18n/ui";
-import type { uiObject } from "../../i18n/uiType";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 import type { User } from "@lib/types";
 import type { Post } from "@lib/types";
-import { ViewCard } from "@components/services/ViewCard";
-import stripe from "@lib/stripe";
 import { ViewUserPurchases } from "@components/posts/ViewUserPurchases";
 import { ViewUserFavorites } from "@components/posts/ViewUserFavorites";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
 
-//get the categories from the language files so they translate with changes in the language picker
-const values = ui[lang] as uiObject;
-const productCategories = values.subjectCategoryInfo.subjects;
-
-async function postFormData(formData: FormData) {
-    const response = await fetch("/api/userProfileEdit", {
-        method: "POST",
-        body: formData,
-    });
-    const data = await response.json();
-    //Checks the API response for the redirect and sends them to the redirect page if there is one
-    if (data.redirect) {
-        alert(data.message);
-        window.location.href = `/${lang}` + data.redirect;
-    }
-    return data;
-}
-
-const { data: User, error: UserError } = await supabase.auth.getSession();
-
-if (UserError) {
-    console.log("UserError: ", UserError.code + " " + UserError.message);
-}
-
 interface Props {
     user: User | null;
     userImage: string | undefined;
@@ -56,12 +26,6 @@ interface Props {
 }
 
 export const UserProfileViewMobile: Component<Props> = (props: Props) => {
-    // const [user, setUser] = createSignal<User>();
-    // const [session, setSession] = createSignal<AuthSession | null>(null);
-    // const [userImage, setUserImage] = createSignal<string>();
-    // const [editMode, setEditMode] = createSignal<boolean>(false); //TODO Set back to false
-    const [imageUrl, setImageUrl] = createSignal<string | null>(null);
-    const [purchasedItems, setPurchasedItems] = createSignal<Array<Post>>([]);
     const [tabSelected, setTabSelected] = createSignal<string>("purchases");
 
     const resetPassword = () => {
diff --git a/src/components/members/user/DownloadBtn.tsx b/src/components/members/user/DownloadBtn.tsx
index bb325305..cd24b9ab 100644
--- a/src/components/members/user/DownloadBtn.tsx
+++ b/src/components/members/user/DownloadBtn.tsx
@@ -130,8 +130,8 @@ export const DownloadBtn: Component<Props> = (props: Props) => {
                 return;
             }
             setPurchasedItems(productsInfo);
-            // console.log("Purchased Items");
-            // console.log(purchasedItems());
+            console.log("Purchased Items");
+            console.log(purchasedItems());
 
             // console.log("Checking purchased items");
 
diff --git a/src/components/posts/EditPost.tsx b/src/components/posts/EditPost.tsx
index 5a5c858d..d0a1f64c 100644
--- a/src/components/posts/EditPost.tsx
+++ b/src/components/posts/EditPost.tsx
@@ -1059,7 +1059,7 @@ export const EditPost: Component<Props> = (props: Props) => {
                 </div>
 
                 {/* Price Implementation */}
-                {/* <div class="justfify-evenly mt-6 flex flex-col ">
+                {/* <div class="justify-evenly mt-6 flex flex-col ">
                     <div class="mt-2 flex justify-between">
                         <p>{t("formLabels.isResourceFree")}?</p>
                         <div>
diff --git a/src/components/posts/FullPostView.tsx b/src/components/posts/FullPostView.tsx
index c953a862..2cfb030c 100644
--- a/src/components/posts/FullPostView.tsx
+++ b/src/components/posts/FullPostView.tsx
@@ -2,9 +2,6 @@ import type { Component } from "solid-js";
 import type { Post } from "@lib/types";
 import { createSignal, createEffect, Show } from "solid-js";
 import supabase from "../../lib/supabaseClient";
-import { DeletePostButton } from "../posts/DeletePostButton";
-import { ui } from "../../i18n/ui";
-import type { uiObject } from "../../i18n/uiType";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 import SocialModal from "./SocialModal";
 import { AddToCart } from "@components/common/cart/AddToCartButton";
@@ -12,44 +9,32 @@ import { Quantity } from "@components/common/cart/Quantity";
 import { EditPost } from "./EditPost";
 import { FavoriteButton } from "@components/posts/AddFavorite";
 import type { AuthSession } from "@supabase/supabase-js";
-import { downloadPostImage, downloadUserImage } from "@lib/imageHelper";
 import type { FilterPostsParams } from "@lib/types";
-
-import stripe from "@lib/stripe";
 import { ReportResource } from "./ReportResource";
-import { sortResourceTypes } from "@lib/utils/resourceSort";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
 
 //get the categories from the language files so they translate with changes in the language picker
-const values = ui[lang] as uiObject;
-const productCategories = values.subjectCategoryInfo.subjects;
 
 interface Props {
     postId: string | undefined;
 }
 
 async function fetchPosts({
-    subjectFilters,
-    gradeFilters,
-    searchString,
-    resourceFilters,
-    secularFilter,
     listing_status,
     draft_status,
+    post_id,
+    user_id,
 }: FilterPostsParams) {
     const response = await fetch("/api/fetchFilterPosts", {
         method: "POST",
         body: JSON.stringify({
-            subjectFilters: subjectFilters,
-            gradeFilters: gradeFilters,
-            searchString: searchString,
-            resourceFilters: resourceFilters,
-            secularFilter: secularFilter,
             lang: lang,
             listing_status: listing_status,
             draft_status: draft_status,
+            post_id: post_id,
+            user_id: user_id,
         }),
     });
     const data = await response.json();
@@ -65,16 +50,11 @@ export const ViewFullPost: Component<Props> = (props) => {
     const [postImages, setPostImages] = createSignal<
         { webpUrl: string; jpegUrl: string }[]
     >([]);
-    const [testImages, setTestImages] = createSignal<string[]>([]);
     const [quantity, setQuantity] = createSignal<number>(1);
 
     const [session, setSession] = createSignal<AuthSession | null>(null);
 
     const [editRender, setEditRender] = createSignal<boolean>(false);
-    const [sellerImage, setSellerImage] = createSignal<{
-        webpUrl: string;
-        jpegUrl: string;
-    }>({ webpUrl: "", jpegUrl: "" });
 
     if (UserError) {
         console.log("User Error: " + UserError.message);
@@ -102,7 +82,7 @@ export const ViewFullPost: Component<Props> = (props) => {
                 lang: lang,
                 listing_status: true,
                 draft_status: false,
-                post_id: id,
+                post_id: [id],
             });
 
             if (res.body.length < 1 && User.session) {
@@ -110,7 +90,7 @@ export const ViewFullPost: Component<Props> = (props) => {
                     lang: lang,
                     listing_status: true,
                     draft_status: false,
-                    post_id: id,
+                    post_id: [id],
                     user_id: User.session?.user.id,
                 });
 
@@ -130,116 +110,11 @@ export const ViewFullPost: Component<Props> = (props) => {
                 setPostImages(res.body[0].image_signedUrls);
                 console.log(post());
             }
-
-            // const newItem: Post[] = await Promise.all(
-            //     postData()?.map(async (item) => {
-            //         item.subject = [];
-            //         productCategories.forEach((productCategories) => {
-            //             item.product_subject.map((productSubject: string) => {
-            //                 if (productSubject === productCategories.id) {
-            //                     item.subject?.push(productCategories.name);
-            //                 }
-            //             });
-            //         });
-
-            //         const { data: sellerImg, error: sellerImgError } =
-            //             await supabase
-            //                 .from("sellerview")
-            //                 .select("*")
-            //                 .eq("seller_id", item.seller_id);
-
-            //         if (sellerImgError) {
-            //             console.log(sellerImgError);
-            //         }
-
-            //         if (sellerImg) {
-            //             if (sellerImg[0].image_url) {
-            //                 item.seller_img = await downloadUserImage(
-            //                     sellerImg[0].image_url
-            //                 );
-            //             }
-            //         }
-
-            //         const { data: gradeData, error: gradeError } =
-            //             await supabase.from("grade_level").select("*");
-
-            //         if (gradeError) {
-            //             console.log("supabase error: " + gradeError.message);
-            //         } else {
-            //             item.grade = [];
-            //             gradeData.forEach((databaseGrade) => {
-            //                 item.post_grade.map((itemGrade: string) => {
-            //                     if (itemGrade === databaseGrade.id.toString()) {
-            //                         item.grade?.push(databaseGrade.grade);
-            //                     }
-            //                 });
-            //             });
-            //         }
-
-            //         const { data: resourceTypeData, error } = await supabase
-            //             .from("resource_types")
-            //             .select("*");
-
-            //         if (error) {
-            //             console.log("supabase error: " + error.message);
-            //         } else {
-            //             sortResourceTypes(resourceTypeData);
-            //             item.resourceTypes = [];
-            //             resourceTypeData.forEach((databaseResourceTypes) => {
-            //                 item.resource_types.map(
-            //                     (itemResourceType: string) => {
-            //                         if (
-            //                             itemResourceType ===
-            //                             databaseResourceTypes.id.toString()
-            //                         ) {
-            //                             item.resourceTypes!.push(
-            //                                 databaseResourceTypes.type
-            //                             );
-            //                         }
-            //                     }
-            //                 );
-            //             });
-            //         }
-
-            //         if (item.price_id !== null) {
-            //             const priceData = await stripe.prices.retrieve(
-            //                 item.price_id
-            //             );
-            //             item.price = priceData.unit_amount! / 100;
-            //         }
-
-            //         return item;
-            //     })
-            // );
-            // setPost(newItem[0]);
-            // console.log(post()?.product_subject)
-            // } else {
-            //     alert(t("messages.noPost"));
-            //     location.href = `/${lang}/resources`;
-            // }
         } catch (error) {
             console.log(error);
         }
     };
 
-    // createEffect(async () => {
-    //     if (post() !== undefined) {
-    //         if (
-    //             post()?.image_urls === undefined ||
-    //             post()?.image_urls === null
-    //         ) {
-    //         } else {
-    //             const imageUrls = post()?.image_urls?.split(",");
-    //             imageUrls?.forEach(async (imageUrl: string) => {
-    //                 const url = await downloadPostImage(imageUrl);
-    //                 if (url) {
-    //                     setPostImages([...postImages(), url]);
-    //                 }
-    //             });
-    //         }
-    //     }
-    // });
-
     const updateQuantity = (quantity: number) => {
         setQuantity(quantity);
     };
@@ -605,7 +480,7 @@ export const ViewFullPost: Component<Props> = (props) => {
                                                                         src={
                                                                             image.jpegUrl
                                                                         }
-                                                                        class="mb-2 h-full w-full rounded object-cover"
+                                                                        class="mb-2 h-12 w-12 rounded object-cover"
                                                                         alt={`${t("postLabels.image")} ${index + 2}`}
                                                                     />
                                                                 </picture>
@@ -630,7 +505,7 @@ export const ViewFullPost: Component<Props> = (props) => {
                                                                         src={
                                                                             image.jpegUrl
                                                                         }
-                                                                        class="mb-2 h-full w-full rounded object-cover"
+                                                                        class="mb-2 h-12 w-12 rounded object-cover"
                                                                         alt={`${t("postLabels.image")} ${index + 2}`}
                                                                     />
                                                                 </picture>
diff --git a/src/components/posts/MobileFullPostView.tsx b/src/components/posts/MobileFullPostView.tsx
index b9e3aa63..b378428a 100644
--- a/src/components/posts/MobileFullPostView.tsx
+++ b/src/components/posts/MobileFullPostView.tsx
@@ -1,5 +1,5 @@
 import type { Component } from "solid-js";
-import type { Post } from "@lib/types";
+import type { FilterPostsParams, Post } from "@lib/types";
 import { createSignal, createEffect, Show, For, onMount } from "solid-js";
 import supabase from "../../lib/supabaseClient";
 import { DeletePostButton } from "../posts/DeletePostButton";
@@ -19,14 +19,31 @@ import { downloadPostImage, downloadUserImage } from "@lib/imageHelper";
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
 
-//get the categories from the language files so they translate with changes in the language picker
-const values = ui[lang] as uiObject;
-const postSubjects = values.subjectCategoryInfo.subjects;
-
 interface Props {
     postId: string | undefined;
 }
 
+async function fetchPosts({
+    listing_status,
+    draft_status,
+    post_id,
+    user_id,
+}: FilterPostsParams) {
+    const response = await fetch("/api/fetchFilterPosts", {
+        method: "POST",
+        body: JSON.stringify({
+            lang: lang,
+            listing_status: listing_status,
+            draft_status: draft_status,
+            post_id: post_id,
+            user_id: user_id,
+        }),
+    });
+    const data = await response.json();
+
+    return data;
+}
+
 const { data: User, error: UserError } = await supabase.auth.getSession();
 export const MobileViewFullPost: Component<Props> = (props) => {
     const [post, setPost] = createSignal<Post>();
@@ -62,152 +79,45 @@ export const MobileViewFullPost: Component<Props> = (props) => {
         }
     });
 
-    //REFACTOR into a helper function for both Full post views
     const fetchPost = async (id: number) => {
         try {
-            const { data: notDraftData, error } = await supabase
-                .from("sellerposts")
-                .select("*")
-                .eq("id", id)
-                .eq("listing_status", true)
-                .eq("draft_status", false);
-            if (error) {
-                console.log(error);
-            } else if (notDraftData[0] === undefined && User.session) {
-                const { data: userData, error } = await supabase
-                    .from("sellerposts")
-                    .select("*")
-                    .eq("id", id)
-                    .eq("listing_status", true)
-                    .eq("user_id", User.session?.user.id);
-
-                if (error) {
-                    console.log(error);
-                } else if (userData[0] === undefined) {
+            const res = await fetchPosts({
+                lang: lang,
+                listing_status: true,
+                draft_status: false,
+                post_id: [id],
+            });
+
+            if (res.body.length < 1 && User.session) {
+                const userRes = await fetchPosts({
+                    lang: lang,
+                    listing_status: true,
+                    draft_status: false,
+                    post_id: [id],
+                    user_id: User.session?.user.id,
+                });
+
+                if (userRes.body.length < 1) {
                     alert(t("messages.noPost"));
                     location.href = `/${lang}/resources`;
                 } else {
-                    setPostData(userData);
-                    console.log(postData());
+                    setPost(userRes.body[0]);
+                    setPostImages(userRes.body[0].image_signedUrls);
+                    console.log(post());
                 }
-            } else if (notDraftData[0] === undefined && User.session === null) {
+            } else if (res.body.length < 1 && User.session === null) {
                 alert(t("messages.noPost"));
                 location.href = `/${lang}/resources`;
             } else {
-                setPostData(notDraftData);
-                console.log(postData());
+                setPost(res.body[0]);
+                setPostImages(res.body[0].image_signedUrls);
+                console.log(post());
             }
-
-            const newItem: Post[] = await Promise.all(
-                postData()?.map(async (item) => {
-                    item.subject = [];
-                    postSubjects.forEach((postSubject) => {
-                        item.product_subject.map((productSubject: string) => {
-                            if (productSubject === postSubject.id) {
-                                item.subject?.push(postSubject.name);
-                                console.log(postSubject.name);
-                            }
-                        });
-                    });
-
-                    const { data: sellerImg, error: sellerImgError } =
-                        await supabase
-                            .from("sellerview")
-                            .select("*")
-                            .eq("seller_id", item.seller_id);
-
-                    if (sellerImgError) {
-                        console.log(sellerImgError);
-                    }
-
-                    if (sellerImg) {
-                        if (sellerImg[0].image_url) {
-                            item.seller_img = await downloadUserImage(
-                                sellerImg[0].image_url
-                            );
-                        }
-                    }
-
-                    const { data: gradeData, error: gradeError } =
-                        await supabase.from("grade_level").select("*");
-
-                    if (gradeError) {
-                        console.log("supabase error: " + gradeError.message);
-                    } else {
-                        item.grade = [];
-                        gradeData.forEach((databaseGrade) => {
-                            item.post_grade.map((itemGrade: string) => {
-                                if (itemGrade === databaseGrade.id.toString()) {
-                                    item.grade?.push(databaseGrade.grade);
-                                }
-                            });
-                        });
-                    }
-
-                    const { data: resourceTypeData, error } = await supabase
-                        .from("resource_types")
-                        .select("*");
-
-                    if (error) {
-                        console.log("supabase error: " + error.message);
-                    } else {
-                        sortResourceTypes(resourceTypeData);
-                        item.resourceTypes = [];
-                        resourceTypeData.forEach((databaseResourceTypes) => {
-                            item.resource_types.map(
-                                (itemResourceType: string) => {
-                                    if (
-                                        itemResourceType ===
-                                        databaseResourceTypes.id.toString()
-                                    ) {
-                                        item.resourceTypes!.push(
-                                            databaseResourceTypes.type
-                                        );
-                                    }
-                                }
-                            );
-                        });
-                    }
-
-                    if (item.price_id !== null) {
-                        const priceData = await stripe.prices.retrieve(
-                            item.price_id
-                        );
-                        item.price = priceData.unit_amount! / 100;
-                    }
-
-                    return item;
-                })
-            );
-            setPost(newItem[0]);
-            // console.log(post()?.product_subject)
-            // } else {
-            //     alert(t("messages.noPost"));
-            //     location.href = `/${lang}/resources`;
-            // }
         } catch (error) {
             console.log(error);
         }
     };
 
-    createEffect(async () => {
-        if (post() !== undefined) {
-            if (
-                post()?.image_urls === undefined ||
-                post()?.image_urls === null
-            ) {
-            } else {
-                const imageUrls = post()?.image_urls?.split(",");
-                imageUrls?.forEach(async (imageUrl: string) => {
-                    const url = await downloadPostImage(imageUrl);
-                    if (url) {
-                        setPostImages([...postImages(), url]);
-                    }
-                });
-            }
-        }
-    });
-
     const updateQuantity = (quantity: number) => {
         setQuantity(quantity);
     };
@@ -639,7 +549,7 @@ export const MobileViewFullPost: Component<Props> = (props) => {
                                         <img
                                             src={postImages()[0].jpegUrl}
                                             id="mobile-main-image"
-                                            class="max-h-[370px] max-w-full rounded dark:bg-background1"
+                                            class="h-[370px] max-w-[370px] rounded dark:bg-background1"
                                             alt={`${t("postLabels.image")}`}
                                         />
                                     </picture>
@@ -682,7 +592,7 @@ export const MobileViewFullPost: Component<Props> = (props) => {
                                                                 src={
                                                                     image.jpegUrl
                                                                 }
-                                                                class="mb-2 h-full w-full rounded object-cover"
+                                                                class="mb-2 h-16 w-16 rounded object-cover"
                                                                 alt={`${t("postLabels.image")} ${index + 2}`}
                                                             />
                                                         </picture>
@@ -707,7 +617,7 @@ export const MobileViewFullPost: Component<Props> = (props) => {
                                                                 src={
                                                                     image.jpegUrl
                                                                 }
-                                                                class="mb-2 h-full w-full rounded object-cover dark:bg-background1"
+                                                                class="mb-2 h-16 w-16 rounded object-cover dark:bg-background1"
                                                                 alt={`${t("postLabels.image")} ${index + 2}`}
                                                             />
                                                         </picture>
diff --git a/src/components/posts/UserViewCreatorPosts.tsx b/src/components/posts/UserViewCreatorPosts.tsx
index 7b60224b..d9448398 100644
--- a/src/components/posts/UserViewCreatorPosts.tsx
+++ b/src/components/posts/UserViewCreatorPosts.tsx
@@ -1,5 +1,5 @@
 import type { Component } from "solid-js";
-import type { Post } from "@lib/types";
+import type { FilterPostsParams, Post } from "@lib/types";
 import { createEffect, createSignal, Show } from "solid-js";
 import { ViewCard } from "../services/ViewCard";
 import supabase from "../../lib/supabaseClient";
@@ -13,10 +13,6 @@ import { MobileViewCard } from "@components/services/MobileViewCard";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 
-//get the categories from the language files so they translate with changes in the language picker
-const values = ui[lang] as uiObject;
-const productCategories = values.subjectCategoryInfo.subjects;
-
 interface Props {
     id: string | undefined;
 }
@@ -26,69 +22,37 @@ export const UserViewCreatorPosts: Component<Props> = (props) => {
     const screenSize = useStore(windowSize);
 
     createEffect(async () => {
-        const { data, error } = await supabase
-            .from("sellerposts")
-            .select("*")
-            .order("id", { ascending: false })
-            .eq("seller_id", props.id)
-            .eq("listing_status", true)
-            .eq("draft_status", false);
-        if (!data) {
+        let res = await fetchPosts();
+
+        if (res.body.length < 1) {
             alert("No posts available.");
-        }
-        if (error) {
-            console.log("supabase error: " + error.message);
         } else {
-            const newItems = await Promise.all(
-                data?.map(async (item) => {
-                    item.subject = [];
-                    productCategories.forEach((productCategories) => {
-                        item.product_subject.map((productSubject: string) => {
-                            if (productSubject === productCategories.id) {
-                                item.subject.push(productCategories.name);
-                                console.log(productCategories.name);
-                            }
-                        });
-                    });
-                    delete item.product_subject;
-
-                    const { data: gradeData, error: gradeError } =
-                        await supabase.from("grade_level").select("*");
-
-                    if (gradeError) {
-                        console.log("supabase error: " + gradeError.message);
-                    } else {
-                        item.grade = [];
-                        gradeData.forEach((databaseGrade) => {
-                            item.post_grade.map((itemGrade: string) => {
-                                if (itemGrade === databaseGrade.id.toString()) {
-                                    item.grade.push(databaseGrade.grade);
-                                }
-                            });
-                        });
-                    }
-
-                    if (item.price_id !== null) {
-                        const priceData = await stripe.prices.retrieve(
-                            item.price_id
-                        );
-                        item.price = priceData.unit_amount! / 100;
-                    }
-                    return item;
-                })
-            );
-            setPosts(data);
-            console.log("Posts");
-            console.log(posts());
+            setPosts(res.body);
         }
     });
+
+    async function fetchPosts() {
+        const response = await fetch("/api/fetchFilterPosts", {
+            method: "POST",
+            body: JSON.stringify({
+                lang: lang,
+                listing_status: true,
+                draft_status: false,
+                seller_id: props.id,
+            }),
+        });
+        const data = await response.json();
+
+        return data;
+    }
+
     return (
         <div class="">
             <Show when={screenSize() !== "sm"}>
                 <ViewCard posts={posts()} />
             </Show>
             <Show when={screenSize() === "sm"}>
-                <MobileViewCard posts={posts()} />
+                <MobileViewCard lang={lang} posts={posts()} />
             </Show>
         </div>
     );
diff --git a/src/components/posts/ViewCreatorPosts.tsx b/src/components/posts/ViewCreatorPosts.tsx
index 227b268c..7cf23103 100644
--- a/src/components/posts/ViewCreatorPosts.tsx
+++ b/src/components/posts/ViewCreatorPosts.tsx
@@ -49,7 +49,7 @@ export const ViewCreatorPosts: Component = () => {
     createEffect(async () => {
         let res = await fetchPosts({ lang: lang });
 
-        if (!posts) {
+        if (res.body.length < 1) {
             alert("No posts available.");
         } else {
             setPosts(res.body);
@@ -65,7 +65,7 @@ export const ViewCreatorPosts: Component = () => {
 
             <Show when={screenSize() === "sm"}>
                 <div class="">
-                    <MobileViewCard posts={posts()} />
+                    <MobileViewCard lang={lang} posts={posts()} />
                 </div>
             </Show>
         </div>
diff --git a/src/components/posts/ViewUserFavorites.tsx b/src/components/posts/ViewUserFavorites.tsx
index 721345c6..2745c339 100644
--- a/src/components/posts/ViewUserFavorites.tsx
+++ b/src/components/posts/ViewUserFavorites.tsx
@@ -1,5 +1,5 @@
 import type { Component } from "solid-js";
-import type { User } from "@lib/types";
+import type { FilterPostsParams, User } from "@lib/types";
 import stripe from "@lib/stripe";
 import { createSignal, createEffect, Show, onMount } from "solid-js";
 import supabase from "../../lib/supabaseClient.tsx";
@@ -13,6 +13,7 @@ import { MobileViewCard } from "@components/services/MobileViewCard.tsx";
 
 import { useStore } from "@nanostores/solid";
 import { windowSize } from "@components/common/WindowSizeStore";
+import { downloadPostImage, downloadUserImage } from "@lib/imageHelper.tsx";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
@@ -24,7 +25,6 @@ const { data: User, error: UserError } = await supabase.auth.getSession();
 
 export const ViewUserFavorites: Component = () => {
     const [session, setSession] = createSignal<AuthSession | null>(null);
-    const [user, setUser] = createSignal<User>();
     const [favoritedItems, setFavoritedItems] = createSignal<Array<any>>([]);
     const [loading, setLoading] = createSignal<boolean>(true);
 
@@ -38,10 +38,24 @@ export const ViewUserFavorites: Component = () => {
 
     onMount(async () => {
         setSession(User?.session);
-        await fetchUser(User?.session?.user.id!);
         await getFavorites();
     });
 
+    async function fetchPosts({ post_id, lang }: FilterPostsParams) {
+        const response = await fetch("/api/fetchFilterPosts", {
+            method: "POST",
+            body: JSON.stringify({
+                lang: lang,
+                listing_status: true,
+                draft_status: false,
+                post_id: post_id,
+            }),
+        });
+        const data = await response.json();
+
+        return data;
+    }
+
     const getFavorites = async () => {
         setLoading(true);
         const { data: favorites, error } = await supabase
@@ -73,117 +87,9 @@ export const ViewUserFavorites: Component = () => {
 
         const products = favoritesProducts?.map((item) => item.product_id);
         if (products !== undefined) {
-            const { data: productsInfo, error: productsInfoError } =
-                await supabase
-                    .from("seller_post")
-                    .select("*")
-                    .order("id", { ascending: false })
-                    .in("id", products);
-            if (productsInfoError) {
-                console.log(
-                    "Products Info Error: " +
-                        productsInfoError.code +
-                        " " +
-                        productsInfoError.message
-                );
-                return;
-            } else {
-                // console.log(productsInfo);
-                const newItems = await Promise.all(
-                    productsInfo?.map(async (item) => {
-                        item.subject = [];
-                        productCategories.forEach((productCategories) => {
-                            item.product_subject.map(
-                                (productSubject: string) => {
-                                    if (
-                                        productSubject === productCategories.id
-                                    ) {
-                                        item.subject.push(
-                                            productCategories.name
-                                        );
-                                        console.log(productCategories.name);
-                                    }
-                                }
-                            );
-                        });
-                        delete item.product_subject;
-
-                        const { data: gradeData, error: gradeError } =
-                            await supabase.from("grade_level").select("*");
-
-                        if (gradeError) {
-                            console.log(
-                                "supabase error: " + gradeError.message
-                            );
-                        } else {
-                            item.grade = [];
-                            gradeData.forEach((databaseGrade) => {
-                                item.post_grade.map((itemGrade: string) => {
-                                    if (
-                                        itemGrade ===
-                                        databaseGrade.id.toString()
-                                    ) {
-                                        item.grade.push(databaseGrade.grade);
-                                    }
-                                });
-                            });
-                        }
-
-                        if (item.stripe_price_id !== null) {
-                            const priceData = await stripe.prices.retrieve(
-                                item.stripe_price_id
-                            );
-                            item.price = priceData.unit_amount! / 100;
-                        }
-                        // console.log(item);
-                        return item;
-                    })
-                );
-
-                setFavoritedItems(newItems);
-                setLoading(false);
-                // console.log(favoritedItems());
-
-                // This creates a list of each favorite list with all the products in that favorite list
-                // Use this when we go to implement multiple lists
-                const favoriteLists = favorites?.map((item) => {
-                    console.log(item);
-                    item.products = [];
-                    favoritesProducts?.map((product) => {
-                        if (product.list_number === item.list_number) {
-                            const productInfo = newItems.find(
-                                (products) => product.product_id === products.id
-                            );
-                            if (productInfo) {
-                                item.products.push(productInfo);
-                            }
-                        }
-                    });
-                    return item;
-                });
-            }
-        }
-    };
-
-    const fetchUser = async (user_id: string) => {
-        try {
-            const { data, error } = await supabase
-                .from("user_view")
-                .select("*")
-                .eq("user_id", user_id);
-
-            if (error) {
-                console.log(error);
-            } else if (data[0] === undefined) {
-                alert(t("messages.noUser")); //TODO: Change alert message
-                location.href = `/${lang}`;
-            } else {
-                console.log(data);
-                setUser(data[0]);
-                console.log(user());
-            }
-        } catch (error) {
-            console.log(error);
+            const res = await fetchPosts({ post_id: products, lang: lang });
+            setFavoritedItems(res.body);
+            setLoading(false);
         }
     };
 
@@ -208,7 +114,7 @@ export const ViewUserFavorites: Component = () => {
                             favoritedItems().length > 0 && screenSize() === "sm"
                         }
                     >
-                        <MobileViewCard posts={favoritedItems()} />
+                        <MobileViewCard lang={lang} posts={favoritedItems()} />
                     </Show>
                     <Show when={favoritedItems().length === 0}>
                         <p class="mb-6 italic">
diff --git a/src/components/posts/ViewUserPurchases.tsx b/src/components/posts/ViewUserPurchases.tsx
index 43b4753b..e372646a 100644
--- a/src/components/posts/ViewUserPurchases.tsx
+++ b/src/components/posts/ViewUserPurchases.tsx
@@ -20,7 +20,6 @@ const { data: User, error: UserError } = await supabase.auth.getSession();
 
 export const ViewUserPurchases: Component = () => {
     const [session, setSession] = createSignal<AuthSession | null>(null);
-    const [user, setUser] = createSignal<User>();
     const [purchasedItems, setPurchasedItems] = createSignal<
         Array<PurchasedPost>
     >([]);
@@ -34,7 +33,6 @@ export const ViewUserPurchases: Component = () => {
 
     onMount(async () => {
         setSession(User?.session);
-        await fetchUser(User?.session?.user.id!);
         await getPurchasedItems();
     });
 
@@ -86,6 +84,7 @@ export const ViewUserPurchases: Component = () => {
 
         const products = orderDetails?.map((item) => item.product_id);
         if (products !== undefined) {
+            //Refactor: Consider making an API call for all the calls to seller_post
             const { data: productsInfo, error: productsInfoError } =
                 await supabase
                     .from("seller_post")
@@ -182,28 +181,6 @@ export const ViewUserPurchases: Component = () => {
         }
     };
 
-    const fetchUser = async (user_id: string) => {
-        try {
-            const { data, error } = await supabase
-                .from("user_view")
-                .select("*")
-                .eq("user_id", user_id);
-
-            if (error) {
-                console.log(error);
-            } else if (data[0] === undefined) {
-                alert(t("messages.noUser")); //TODO: Change alert message
-                location.href = `/${lang}`;
-            } else {
-                console.log(data);
-                setUser(data[0]);
-                console.log(user());
-            }
-        } catch (error) {
-            console.log(error);
-        }
-    };
-
     return (
         <div>
             <div id="Cards">
diff --git a/src/components/posts/fetchPosts.ts b/src/components/posts/fetchPosts.txt
similarity index 100%
rename from src/components/posts/fetchPosts.ts
rename to src/components/posts/fetchPosts.txt
diff --git a/src/components/services/FiltersMobile.tsx b/src/components/services/FiltersMobile.tsx
index 3d9aedd9..f0c438d8 100644
--- a/src/components/services/FiltersMobile.tsx
+++ b/src/components/services/FiltersMobile.tsx
@@ -1,4 +1,4 @@
-import type { Component } from "solid-js";
+import type { Accessor, Component, Setter } from "solid-js";
 import { createEffect, createSignal, For, Show, onMount } from "solid-js";
 import { useStore } from "@nanostores/solid";
 import { windowSize } from "@components/common/WindowSizeStore";
@@ -9,6 +9,7 @@ import type { uiObject } from "../../i18n/uiType";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 import { SecularFilter } from "./SecularFilter";
 import { sortResourceTypes } from "@lib/utils/resourceSort";
+import type { FilterPostsParams, Post } from "@lib/types";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
@@ -89,6 +90,33 @@ for (let i = 0; i < subjectData.length; i++) {
     });
 }
 
+async function fetchPosts({
+    subjectFilters,
+    gradeFilters,
+    searchString,
+    resourceFilters,
+    secularFilter,
+    listing_status,
+    draft_status,
+}: FilterPostsParams) {
+    const response = await fetch("/api/fetchFilterPosts", {
+        method: "POST",
+        body: JSON.stringify({
+            subjectFilters: subjectFilters,
+            gradeFilters: gradeFilters,
+            searchString: searchString,
+            resourceFilters: resourceFilters,
+            secularFilter: secularFilter,
+            lang: lang,
+            listing_status: listing_status,
+            draft_status: draft_status,
+        }),
+    });
+    const data = await response.json();
+
+    return data;
+}
+
 interface Props {
     filterPostsByGrade: (grade: string) => void;
     filterPostsBySubject: (currentSubject: string) => void;
@@ -97,6 +125,7 @@ interface Props {
     clearGrade: () => void;
     clearResourceTypes: () => void;
     clearAllFilters: () => void;
+    clearFilters: boolean;
     secularFilter: (secular: boolean) => void;
     clearSecular: () => void;
 }
@@ -134,10 +163,13 @@ export const FiltersMobile: Component<Props> = (props) => {
     const screenSize = useStore(windowSize);
 
     onMount(() => {
-        if (localStorage.getItem("selectedSubjects")) {
-            setSelectedSubjects([
-                ...JSON.parse(localStorage.getItem("selectedSubjects")!),
-            ]);
+        const localSubjects = localStorage.getItem("selectedSubjects");
+        const localGrades = localStorage.getItem("selectedGrades");
+        const localResourceTypes = localStorage.getItem(
+            "selectedResourceTypes"
+        );
+        if (localSubjects !== null && localSubjects) {
+            setSelectedSubjects([...JSON.parse(localSubjects)]);
             setSubjectFilterCount(selectedSubjects().length);
             checkSubjectBoxes();
         } else {
@@ -146,17 +178,14 @@ export const FiltersMobile: Component<Props> = (props) => {
                 subject.checked = false;
             });
         }
-        if (localStorage.getItem("selectedGrades")) {
-            setGradeFilters([
-                ...JSON.parse(localStorage.getItem("selectedGrades")!),
-            ]);
+        if (localGrades !== null && localGrades) {
+            setGradeFilters([...JSON.parse(localGrades)]);
             setGradeFilterCount(gradeFilters().length);
             checkGradeBoxes();
         }
-        if (localStorage.getItem("selectedResoruceType")) {
-            setResourceTypesFilters([
-                ...JSON.parse(localStorage.getItem("selectedResoruceType")!),
-            ]);
+
+        if (localResourceTypes !== null && localResourceTypes) {
+            setResourceTypesFilters([...JSON.parse(localResourceTypes)]);
             setResourceTypesFilterCount(resourceTypesFilters().length);
             checkResourceTypesBoxes();
         }
@@ -179,33 +208,48 @@ export const FiltersMobile: Component<Props> = (props) => {
         }
     });
 
+    createEffect(() => {
+        if (props.clearFilters) {
+            clearAllFiltersMobile();
+        }
+    });
+
     function checkSubjectBoxes() {
         selectedSubjects().map((item) => {
-            subject().map((subject) => {
-                if (subject.id.toString() === item) {
-                    subject.checked = true;
-                }
-            });
+            setSubject((prevSubject) =>
+                prevSubject.map((subject) => {
+                    if (subject.id.toString() === item) {
+                        return { ...subject, checked: true };
+                    }
+                    return subject;
+                })
+            );
         });
     }
 
     function checkGradeBoxes() {
         gradeFilters().map((item) => {
-            grade().map((grade) => {
-                if (grade.id.toString() === item) {
-                    grade.checked = true;
-                }
-            });
+            setGrade((prevGrade) =>
+                prevGrade.map((grade) => {
+                    if (grade.id.toString() === item) {
+                        return { ...grade, checked: true };
+                    }
+                    return grade;
+                })
+            );
         });
     }
 
     function checkResourceTypesBoxes() {
         resourceTypesFilters().map((item) => {
-            resourceType().map((type) => {
-                if (type.id.toString() === item) {
-                    type.checked = true;
-                }
-            });
+            setResourceType((prevResourceType) =>
+                prevResourceType.map((type) => {
+                    if (type.id.toString() === item) {
+                        return { ...type, checked: true };
+                    }
+                    return type;
+                })
+            );
         });
     }
 
@@ -218,17 +262,21 @@ export const FiltersMobile: Component<Props> = (props) => {
             setGradeFilters([...gradeFilters(), id]);
             setGradeFilterCount(gradeFilters().length);
         }
+        //Refactor send the full list just let filters track the contents and send the whole thing to main
         props.filterPostsByGrade(id);
 
-        grade().forEach((grade) => {
-            if (grade.id.toString() === id) {
-                if (grade.checked) {
-                    grade.checked = false;
-                } else {
-                    grade.checked = true;
+        setGrade((prevGrade) =>
+            prevGrade.map((grade) => {
+                if (grade.id.toString() === id) {
+                    if (grade.checked) {
+                        return { ...grade, checked: false };
+                    } else {
+                        return { ...grade, checked: true };
+                    }
                 }
-            }
-        });
+                return grade;
+            })
+        );
     };
 
     const setResourceTypesFilter = (id: string) => {
@@ -242,30 +290,34 @@ export const FiltersMobile: Component<Props> = (props) => {
             setResourceTypesFilters([...resourceTypesFilters(), id]);
             setResourceTypesFilterCount(resourceTypesFilters().length);
         }
+        //Refactor send the full list just let filters track the contents and send the whole thing to main
         props.filterPostsByResourceTypes(id);
 
-        resourceType().forEach((type) => {
-            if (type.id.toString() === id) {
-                if (type.checked) {
-                    type.checked = false;
-                } else {
-                    type.checked = true;
+        setResourceType((prevResourceType) =>
+            prevResourceType.map((type) => {
+                if (type.id.toString() === id) {
+                    if (type.checked) {
+                        return { ...type, checked: false };
+                    } else {
+                        return { ...type, checked: true };
+                    }
                 }
-            }
-        });
+                return type;
+            })
+        );
     };
 
     const clearAllFiltersMobile = () => {
         props.clearAllFilters();
-        grade().forEach((grade) => {
-            grade.checked = false;
-        });
-        subject().forEach((subject) => {
-            subject.checked = false;
-        });
-        resourceType().forEach((type) => {
-            type.checked = false;
-        });
+        setGrade((prevGrades) =>
+            prevGrades.map((grade) => ({ ...grade, checked: false }))
+        );
+        setResourceType((prevTypes) =>
+            prevTypes.map((type) => ({ ...type, checked: false }))
+        );
+        setSubject((prevSubjects) =>
+            prevSubjects.map((subject) => ({ ...subject, checked: false }))
+        );
         setGradeFilters([]);
         setSelectedSubjects([]);
         setResourceTypesFilters([]);
@@ -274,15 +326,19 @@ export const FiltersMobile: Component<Props> = (props) => {
         setResourceTypesFilterCount(0);
         setShowFilterNumber(false);
         setSelectedSecular(false);
+        localStorage.removeItem("selectedGrades");
+        localStorage.removeItem("selectedSubjects");
+        localStorage.removeItem("selectedResourceTypes");
     };
 
     const clearSubjectFiltersMobile = () => {
         props.clearSubjects();
-        subject().forEach((subject) => {
-            subject.checked = false;
-        });
+        setSubject((prevSubjects) =>
+            prevSubjects.map((subject) => ({ ...subject, checked: false }))
+        );
         setSelectedSubjects([]);
         setSubjectFilterCount(0);
+        localStorage.removeItem("selectedSubjects");
     };
 
     const clearSecularFilterMobile = () => {
@@ -293,18 +349,19 @@ export const FiltersMobile: Component<Props> = (props) => {
 
     const clearGradeFiltersMobile = () => {
         props.clearGrade();
-        grade().forEach((grade) => {
-            grade.checked = false;
-        });
+        setGrade((prevGrades) =>
+            prevGrades.map((grade) => ({ ...grade, checked: false }))
+        );
         setGradeFilterCount(0);
         setGradeFilters([]);
+        localStorage.removeItem("selectedGrades");
     };
 
     const clearResourceTypesFiltersMobile = () => {
         props.clearResourceTypes();
-        resourceType().forEach((type) => {
-            type.checked = false;
-        });
+        setResourceType((prevResourceTypes) =>
+            prevResourceTypes.map((type) => ({ ...type, checked: false }))
+        );
         setResourceTypesFilterCount(0);
         setResourceTypesFilters([]);
     };
@@ -351,17 +408,21 @@ export const FiltersMobile: Component<Props> = (props) => {
             setSelectedSubjects([...selectedSubjects(), id]);
             setSubjectFilterCount(selectedSubjects().length);
         }
+        //Refactor send the full list just let filters track the contents and send the whole thing to main
         props.filterPostsBySubject(id);
 
-        subject().forEach((subject) => {
-            if (subject.id.toString() === id) {
-                if (subject.checked) {
-                    subject.checked = false;
-                } else {
-                    subject.checked = true;
+        setSubject((prevSubject) =>
+            prevSubject.map((subject) => {
+                if (subject.id.toString() === id) {
+                    if (subject.checked) {
+                        return { ...subject, checked: false };
+                    } else {
+                        return { ...subject, checked: true };
+                    }
                 }
-            }
-        });
+                return subject;
+            })
+        );
     }
 
     return (
diff --git a/src/components/services/MobileViewCard.tsx b/src/components/services/MobileViewCard.tsx
index c9ec550e..06f2c443 100644
--- a/src/components/services/MobileViewCard.tsx
+++ b/src/components/services/MobileViewCard.tsx
@@ -23,6 +23,7 @@ export const MobileViewCard: Component<Props> = (props) => {
     const [session, setSession] = createSignal<AuthSession | null>(null);
 
     const lang = props.lang;
+    console.log(lang);
     const t = useTranslations(lang);
 
     if (UserError) {
@@ -407,7 +408,7 @@ export const MobileViewCard: Component<Props> = (props) => {
                                     </div>
                                     <div class="prose col-span-3 flex flex-wrap text-start text-[10px] text-ptext1 dark:prose-invert dark:text-ptext1-DM">
                                         <div class="flex-wrap">
-                                            {post.resourceTypes!.join(", ")}
+                                            {post.resourceTypes?.join(", ")}
                                         </div>
                                     </div>
                                     {/* <h6 class="text-start text-[10px] font-bold">
diff --git a/src/components/services/ResourcesMain.tsx b/src/components/services/ResourcesMain.tsx
index 0e774fdb..fd675239 100644
--- a/src/components/services/ResourcesMain.tsx
+++ b/src/components/services/ResourcesMain.tsx
@@ -43,7 +43,6 @@ async function fetchPosts({
 export const ResourcesView: Component = () => {
     const [posts, setPosts] = createSignal<Array<Post>>([]);
     const [searchPost, setSearchPost] = createSignal<Array<Post>>([]);
-    const [currentPosts, setCurrentPosts] = createSignal<Array<Post>>([]);
     const [subjectFilters, setSubjectFilters] = createSignal<Array<string>>([]);
     const [gradeFilters, setGradeFilters] = createSignal<Array<string>>([]);
     const [resourceTypesFilters, setResourceTypeFilters] = createSignal<
@@ -55,6 +54,7 @@ export const ResourcesView: Component = () => {
     const [searchString, setSearchString] = createSignal<string>("");
     const [noPostsVisible, setNoPostsVisible] = createSignal<boolean>(false);
     const [secularFilters, setSecularFilters] = createSignal<boolean>(false);
+    const [clearFilters, setClearFilters] = createSignal<boolean>(false);
 
     const screenSize = useStore(windowSize);
 
@@ -94,11 +94,10 @@ export const ResourcesView: Component = () => {
         localStorage.removeItem("selectedResourceTypes");
     });
 
-    const searchPosts = async () => {
-        if (localStorage.getItem("searchString") !== null) {
-            setSearchString(localStorage.getItem("searchString") as string);
+    const searchPosts = async (searchString: string) => {
+        if (searchString !== null) {
+            setSearchString(searchString);
         }
-
         filterPosts();
     };
 
@@ -111,7 +110,6 @@ export const ResourcesView: Component = () => {
         } else {
             setSubjectFilters([...subjectFilters(), currentCategory]);
         }
-
         filterPosts();
     };
 
@@ -145,7 +143,6 @@ export const ResourcesView: Component = () => {
             }, 3000);
 
             setPosts([]);
-            setCurrentPosts([]);
             console.error();
 
             timeouts.push(
@@ -167,7 +164,6 @@ export const ResourcesView: Component = () => {
             });
 
             setPosts(allPosts);
-            setCurrentPosts(allPosts);
             console.log(allPosts);
         } else {
             for (let i = 0; i < timeouts.length; i++) {
@@ -177,7 +173,6 @@ export const ResourcesView: Component = () => {
             timeouts = [];
 
             setPosts(res.body);
-            setCurrentPosts(res.body);
         }
     };
 
@@ -213,118 +208,43 @@ export const ResourcesView: Component = () => {
     };
 
     const clearAllFilters = () => {
-        let searchInput = document.getElementById("search") as HTMLInputElement;
-        const subjectCheckboxes = document.querySelectorAll(
-            "input[type='checkbox'].subject"
-        ) as NodeListOf<HTMLInputElement>;
-        const gradeCheckboxes = document.querySelectorAll(
-            "input[type='checkbox'].grade"
-        ) as NodeListOf<HTMLInputElement>;
-        const resourceTypesCheckoxes = document.querySelectorAll(
-            "input[type='checkbox'].resourceType"
-        ) as NodeListOf<HTMLInputElement>;
+        let searchInput = document.getElementById(
+            "headerSearch"
+        ) as HTMLInputElement;
 
         if (searchInput !== null && searchInput.value !== null) {
             searchInput.value = "";
         }
 
-        gradeCheckboxes.forEach((checkbox) => {
-            if (checkbox && checkbox.checked) {
-                checkbox.checked = false;
-            }
-        });
-
-        subjectCheckboxes.forEach((checkbox) => {
-            if (checkbox && checkbox.checked) {
-                checkbox.checked = false;
-            }
-        });
-
-        resourceTypesCheckoxes.forEach((checkbox) => {
-            if (checkbox && checkbox.checked) {
-                checkbox.checked = false;
-            }
-        });
-
-        localStorage.removeItem("selectedGrades");
-        localStorage.removeItem("selectedSubjects");
-        localStorage.removeItem("searchString");
-        localStorage.removeItem("selectedResourceTypes");
+        setClearFilters(true);
 
         setSearchPost([]);
         setSearchString("");
-        // localStorage.setItem("searchString", "");
         setSubjectFilters([]);
         setGradeFilters([]);
         setResourceTypeFilters([]);
         setSecularFilters(false);
 
         filterPosts();
+        setClearFilters(false);
     };
 
     const clearSubjects = () => {
-        const subjectCheckboxes = document.querySelectorAll(
-            "input[type='checkbox'].subject"
-        ) as NodeListOf<HTMLInputElement>;
-
-        subjectCheckboxes.forEach((checkbox) => {
-            if (checkbox && checkbox.checked) {
-                checkbox.checked = false;
-            }
-        });
-
-        localStorage.removeItem("selectedSubjects");
         setSubjectFilters([]);
         filterPosts();
     };
 
     const clearGrade = () => {
-        const gradeCheckboxes = document.querySelectorAll(
-            "input[type='checkbox'].grade"
-        ) as NodeListOf<HTMLInputElement>;
-
-        console.log(gradeCheckboxes);
-
-        gradeCheckboxes.forEach((checkbox) => {
-            if (checkbox && checkbox.checked) {
-                checkbox.checked = false;
-            }
-        });
-
-        localStorage.removeItem("selectedGrades");
         setGradeFilters([]);
         filterPosts();
     };
 
     const clearResourceTypes = () => {
-        const resourceTypesCheckoxes = document.querySelectorAll(
-            "input[type='checkbox'].resourceType"
-        ) as NodeListOf<HTMLInputElement>;
-
-        console.log(resourceTypesCheckoxes);
-
-        resourceTypesCheckoxes.forEach((checkbox) => {
-            if (checkbox && checkbox.checked) {
-                checkbox.checked = false;
-            }
-        });
-
-        // localStorage.removeItem("selectedGrades");
         setResourceTypeFilters([]);
         filterPosts();
     };
 
     const clearSecular = () => {
-        const secularCheckbox = document.getElementById(
-            "secularCheck"
-        ) as HTMLInputElement;
-
-        console.log(secularCheckbox);
-
-        if (secularCheckbox && secularCheckbox.checked) {
-            secularCheckbox.checked = false;
-        }
-
         setSecularFilters(false);
         filterPosts();
     };
@@ -332,7 +252,7 @@ export const ResourcesView: Component = () => {
     return (
         <div class="">
             <div>
-                <SearchBar search={searchPosts} />
+                <SearchBar search={searchPosts} clearFilters={clearFilters()} />
                 {/* <SearchBar search={ searchString } /> */}
             </div>
 
@@ -341,6 +261,7 @@ export const ResourcesView: Component = () => {
                     clearSubjects={clearSubjects}
                     clearGrade={clearGrade}
                     clearAllFilters={clearAllFilters}
+                    clearFilters={clearFilters()}
                     filterPostsByGrade={filterPostsByGrade}
                     filterPostsBySubject={setCategoryFilter}
                     secularFilter={filterPostsBySecular}
@@ -364,6 +285,7 @@ export const ResourcesView: Component = () => {
                         clearSubjects={clearSubjects}
                         clearGrade={clearGrade}
                         clearAllFilters={clearAllFilters}
+                        clearFilters={clearFilters()}
                         filterPostsByGrade={filterPostsByGrade}
                         filterPostsBySubject={setCategoryFilter}
                         secularFilter={filterPostsBySecular}
@@ -391,15 +313,12 @@ export const ResourcesView: Component = () => {
                     </Show>
                     <Show when={screenSize() !== "sm"}>
                         <div class="inline">
-                            <ViewCard posts={currentPosts()} />
+                            <ViewCard posts={posts()} />
                         </div>
                     </Show>
                     <Show when={screenSize() === "sm"}>
                         <div class="flex justify-center">
-                            <MobileViewCard
-                                lang={lang}
-                                posts={currentPosts()}
-                            />
+                            <MobileViewCard lang={lang} posts={posts()} />
                         </div>
                     </Show>
                 </div>
diff --git a/src/components/services/SearchBar.tsx b/src/components/services/SearchBar.tsx
index 7e02a30c..8463237e 100644
--- a/src/components/services/SearchBar.tsx
+++ b/src/components/services/SearchBar.tsx
@@ -11,26 +11,37 @@ const t = useTranslations(lang);
 interface Props {
     // Define the type for the filterPosts prop
     search: (searchString: string) => void;
+    clearFilters: boolean;
 }
 
 export const SearchBar: Component<Props> = (props) => {
     const [searchString, setSearchString] = createSignal<string>("");
 
-    onMount(() => {
-        if (localStorage.getItem("searchString")) {
-            setSearchString(localStorage.getItem("searchString")!);
-        }
-        // window.addEventListener("storage", onStorageChange);
-        // window.addEventListener("storage", logEvent);
-    });
+    // onMount(() => {
+    //     if (localStorage.getItem("searchString")) {
+    //         setSearchString(localStorage.getItem("searchString")!);
+    //         console.log("Set SearchBar to Local Storage", searchString());
+    //     }
+    //     // window.addEventListener("storage", onStorageChange);
+    //     // window.addEventListener("storage", logEvent);
+    // });
 
     const clickSearch = () => {
-        if (searchString() !== null && searchString() !== "") {
-            localStorage.setItem("searchString", searchString());
+        const searchInput = localStorage.getItem("searchString");
+        if (searchInput !== null) {
+            setSearchString(searchInput);
+            console.log("Sending Search to Resources Main", searchString());
             props.search(searchString());
         }
     };
 
+    createEffect(() => {
+        if (props.clearFilters) {
+            setSearchString("");
+            localStorage.removeItem("searchString");
+        }
+    });
+
     // function onStorageChange(event: StorageEvent) {
     //     if (event.key === "searchString") {
     //         setSearchString(event.newValue ? event.newValue : "");
diff --git a/src/components/services/SecularFilter.tsx b/src/components/services/SecularFilter.tsx
index fdd5c301..eb52e803 100644
--- a/src/components/services/SecularFilter.tsx
+++ b/src/components/services/SecularFilter.tsx
@@ -1,61 +1,54 @@
-
-import { fetchFilteredPosts } from "@components/posts/fetchPosts";
 import { getLangFromUrl, useTranslations } from "@i18n/utils";
 import { createSignal, onMount, type Component } from "solid-js";
 
 const lang = getLangFromUrl(new URL(window.location.href));
 const t = useTranslations(lang);
 
-
 interface Props {
-  // Define the type for the filterPosts prop
-  filterPostsBySecular: (secular: boolean) => void;
+    // Define the type for the filterPosts prop
+    filterPostsBySecular: (secular: boolean) => void;
 }
 export const SecularFilter: Component<Props> = (props) => {
-  const [selectedSecular, setSelectedSecular] = createSignal<boolean>(false)
-
-
-  function initializeSecular(e: Event) {
-
-    if ((e.target as HTMLInputElement)?.checked !== null) {
-
-      setSelectedSecular((e.target as HTMLInputElement)?.checked)
-      props.filterPostsBySecular(selectedSecular())
-    }
+    const [selectedSecular, setSelectedSecular] = createSignal<boolean>(false);
 
-  }
-
-  onMount(() => {
-    if (localStorage.getItem("selectedSecular")) {
-      setSelectedSecular(JSON.parse(localStorage.getItem("selectedSecular")!));
+    function initializeSecular(e: Event) {
+        if ((e.target as HTMLInputElement)?.checked !== null) {
+            setSelectedSecular((e.target as HTMLInputElement)?.checked);
+            props.filterPostsBySecular(selectedSecular());
+        }
     }
-  });
-
 
-  return (
-    <div class="hidden bg-background1 dark:bg-background1-DM md:mt-2 md:block w-full md:rounded-lg md:border-2 md:border-border2 dark:md:border-border2-DM">
-      <div class="md:flex-column flex-wrap h-full pb-2 md:rounded md:border-b-2 md:border-border2 md:text-left dark:md:border-border2-DM">
-
-        <div>
-          <div class="flex flex-row pl-2">
-            <div class="flex flex-wrap justify-between">
-              <div class="w-4/5 px-2 ">{t("formLabels.secular")}</div>
-            </div>
-            <div>
-              <input
-                type="checkbox"
-                class={`secularCheck mr-2 leading-tight`}
-                checked={selectedSecular()}
-                onClick={(e) => {
-                  initializeSecular(e)
-                }}
-              />
+    onMount(() => {
+        if (localStorage.getItem("selectedSecular")) {
+            setSelectedSecular(
+                JSON.parse(localStorage.getItem("selectedSecular")!)
+            );
+        }
+    });
+
+    return (
+        <div class="hidden w-full bg-background1 dark:bg-background1-DM md:mt-2 md:block md:rounded-lg md:border-2 md:border-border2 dark:md:border-border2-DM">
+            <div class="md:flex-column h-full flex-wrap pb-2 md:rounded md:border-b-2 md:border-border2 md:text-left dark:md:border-border2-DM">
+                <div>
+                    <div class="flex flex-row pl-2">
+                        <div class="flex flex-wrap justify-between">
+                            <div class="w-4/5 px-2 ">
+                                {t("formLabels.secular")}
+                            </div>
+                        </div>
+                        <div>
+                            <input
+                                type="checkbox"
+                                class={`secularCheck mr-2 leading-tight`}
+                                checked={selectedSecular()}
+                                onClick={(e) => {
+                                    initializeSecular(e);
+                                }}
+                            />
+                        </div>
+                    </div>
+                </div>
             </div>
-
-          </div>
-
         </div>
-      </div>
-    </div>
-  )
-}
+    );
+};
diff --git a/src/components/services/ViewCard.tsx b/src/components/services/ViewCard.tsx
index d3a61be1..1100a600 100644
--- a/src/components/services/ViewCard.tsx
+++ b/src/components/services/ViewCard.tsx
@@ -1,6 +1,6 @@
 import type { Component } from "solid-js";
 import type { Post } from "@lib/types";
-import { createSignal, createEffect, Show } from "solid-js";
+import { createSignal, createEffect, Show, onMount } from "solid-js";
 import { DeletePostButton } from "../posts/DeletePostButton";
 import supabase from "../../lib/supabaseClient";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
@@ -25,6 +25,10 @@ export const ViewCard: Component<Props> = (props) => {
     const [quantity, setQuantity] = createSignal<number>(1);
     const [session, setSession] = createSignal<AuthSession | null>(null);
 
+    onMount(() => {
+        console.log(props.posts);
+    });
+
     if (UserError) {
         console.log("User Error: " + UserError.message);
     } else {
@@ -257,7 +261,7 @@ export const ViewCard: Component<Props> = (props) => {
                                                 </div>
                                                 <div class="prose col-span-3 flex-wrap align-middle text-[10px] text-ptext1 dark:prose-invert dark:text-ptext1-DM">
                                                     <div class="flex-wrap">
-                                                        {post.resourceTypes!.join(
+                                                        {post.resourceTypes?.join(
                                                             ", "
                                                         )}
                                                     </div>
diff --git a/src/components/services/ViewPurchaseCard.tsx b/src/components/services/ViewPurchaseCard.tsx
index ef70dfdc..4ce729ee 100644
--- a/src/components/services/ViewPurchaseCard.tsx
+++ b/src/components/services/ViewPurchaseCard.tsx
@@ -39,6 +39,7 @@ export const ViewPurchaseCard: Component<Props> = (props) => {
             );
 
             setPurchasedItems(updatedPosts);
+            console.log(updatedPosts);
         }
     });
 
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 2bf29920..87ff5e5f 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -34,14 +34,14 @@ const { pageTitle, pageDescription, stickyFooter = true } = Astro.props;
         linkLocation="https://example.com"
         linkLabel="Go to example.com"
         startDate="2024-01-17"
-        endDate="2024-07-24"
+        endDate="2024-08-01"
         client:only="solid-js"
     />
     <div class="flex flex-col min-h-screen md:mx-4">
         <div class="header pt-4">
             <Header client:only="solid-js" />
         </div>
-        <main class="flex-grow">
+        <main class="flex-1 w-full">
             <div class="flex justify-center mx-2">
                 <WindowSize client:only="solid-js" />
                 <slot />
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 8f126061..27caff6a 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -72,5 +72,6 @@ export interface FilterPostsParams {
     listing_status?: boolean;
     orderAscending?: boolean;
     user_id?: string;
-    post_id?: number;
+    post_id?: number[];
+    seller_id?: string;
 }
\ No newline at end of file
diff --git a/src/pages/api/creatorUpdatePost.ts b/src/pages/api/creatorUpdatePost.ts
index 972c6ef2..12bd2b75 100644
--- a/src/pages/api/creatorUpdatePost.ts
+++ b/src/pages/api/creatorUpdatePost.ts
@@ -5,166 +5,168 @@ import { useTranslations } from "@i18n/utils";
 import stripe from "../../lib/stripe";
 
 export const POST: APIRoute = async ({ request, redirect }) => {
-  const formData = await request.formData();
+    const formData = await request.formData();
 
-  for (let pair of formData.entries()) {
-    console.log(pair[0] + ", " + pair[1]);
-  }
+    for (let pair of formData.entries()) {
+        console.log(pair[0] + ", " + pair[1]);
+    }
 
-  //Set internationalization values
-  const lang = formData.get("lang");
-  //@ts-ignore
-  const t = useTranslations(lang);
-
-  const access_token = formData.get("access_token");
-  const refresh_token = formData.get("refresh_token");
-  const title = formData.get("Title");
-  const subject = formData.get("subject");
-  const content = formData.get("Content");
-  const product_id = formData.get("product_id");
-  const description = formData.get("description");
-  const price = formData.get("Price");
-  const gradeLevel = formData.get("grade");
-  const idSupabase = formData.get("idSupabase");
-  const imageUrl = formData.get("image_url")
-    ? formData.get("image_url")
-    : null;
-  // const resourceUrl = formData.get("resource_url");
-  const resourceType = formData.get("resource_types");
-  const secular = formData.get("secular")
-  const resourceLinks = formData.get("resource_links");
-  const draft_status = formData.get("draft_status");
-
-  // Validate the formData - you'll probably want to do more than this
-  if (
-    !title ||
-    !subject ||
-    !content ||
-    !gradeLevel
-    // !resourceUrl ||
-    // !tax_code
-  ) {
-    return new Response(
-      JSON.stringify({
-        message: t("apiErrors.missingFields"),
-      }),
-      { status: 400 }
-    );
-  }
+    //Set internationalization values
+    const lang = formData.get("lang");
+    //@ts-ignore
+    const t = useTranslations(lang);
+
+    const access_token = formData.get("access_token");
+    const refresh_token = formData.get("refresh_token");
+    const title = formData.get("Title");
+    const subject = formData.get("subject");
+    const content = formData.get("Content");
+    const product_id = formData.get("product_id");
+    const description = formData.get("description");
+    const price = formData.get("Price");
+    const gradeLevel = formData.get("grade");
+    const idSupabase = formData.get("idSupabase");
+    const imageUrl = formData.get("image_url")
+        ? formData.get("image_url")
+        : null;
+    // const resourceUrl = formData.get("resource_url");
+    const resourceType = formData.get("resource_types");
+    const secular = formData.get("secular");
+    const resourceLinks = formData.get("resource_links");
+    const draft_status = formData.get("draft_status");
+
+    // Validate the formData - you'll probably want to do more than this
+    if (
+        !title ||
+        !subject ||
+        !content ||
+        !gradeLevel
+        // !resourceUrl ||
+        // !tax_code
+    ) {
+        return new Response(
+            JSON.stringify({
+                message: t("apiErrors.missingFields"),
+            }),
+            { status: 400 }
+        );
+    }
+
+    const { data: sessionData, error: sessionError } =
+        await supabase.auth.setSession({
+            refresh_token: refresh_token!.toString(),
+            access_token: access_token!.toString(),
+        });
+    if (sessionError) {
+        return new Response(
+            JSON.stringify({
+                message: t("apiErrors.noSession"),
+            }),
+            { status: 500 }
+        );
+    }
 
-  const { data: sessionData, error: sessionError } =
-    await supabase.auth.setSession({
-      refresh_token: refresh_token!.toString(),
-      access_token: access_token!.toString(),
+    // console.log(sessionData)
+
+    if (!sessionData?.session) {
+        return new Response(
+            JSON.stringify({
+                message: t("apiErrors.noSession"),
+            }),
+            { status: 500 }
+        );
+    }
+
+    const user = sessionData?.session.user;
+
+    if (!user) {
+        return new Response(
+            JSON.stringify({
+                message: t("apiErrors.noUser"),
+            }),
+            { status: 500 }
+        );
+    }
+
+    const prices = await stripe.prices.list({
+        product: String(product_id),
+        active: true,
     });
-  if (sessionError) {
-    return new Response(
-      JSON.stringify({
-        message: t("apiErrors.noSession"),
-      }),
-      { status: 500 }
-    );
-  }
 
-  // console.log(sessionData)
+    const price_info = await stripe.prices.create({
+        unit_amount: Number(price),
+        currency: "usd",
+        tax_behavior: "exclusive",
+        product: String(product_id),
+    });
 
-  if (!sessionData?.session) {
-    return new Response(
-      JSON.stringify({
-        message: t("apiErrors.noSession"),
-      }),
-      { status: 500 }
-    );
-  }
+    const default_price = price_info.id;
 
-  const user = sessionData?.session.user;
+    const stripe_update = await stripe.products.update(String(product_id), {
+        name: String(title),
+        description: String(description),
+        default_price: default_price,
+    });
 
-  if (!user) {
-    return new Response(
-      JSON.stringify({
-        message: t("apiErrors.noUser"),
-      }),
-      { status: 500 }
-    );
+    if (price) {
+      const pricesToArchive = prices.data.map((item) => {
+          return item.id;
+      });
+
+      pricesToArchive.forEach(async (item) => {
+          await stripe.prices.update(String(item), {
+              active: false,
+          });
+      });
   }
 
-  const prices = await stripe.prices.list({
-    product: String(product_id),
-    active: true,
-  });
-
-  const pricesToArchive = prices.data.map((item) => {
-    return item.id;
-  })
-
-  const price_info = await stripe.prices.create({
-    unit_amount: Number(price),
-    currency: "usd",
-    tax_behavior: "exclusive",
-    product: String(product_id),
-  });
-
-  const default_price = price_info.id;
-
-  const stripe_update = await stripe.products.update(String(product_id), {
-    name: String(title),
-    description: String(description),
-    default_price: default_price,
-  });
-
-  pricesToArchive.forEach(async (item) => {
-    await stripe.prices.update(String(item), {
-      active: false,
-    });
-  })
-
-  const resourceLinksList = resourceLinks?.toString().split(",");
-
-  if (stripe_update.active) {
-    let postSubmission = {
-      title: title,
-      content: content,
-      product_subject: JSON.parse(subject as string),
-      post_grade: JSON.parse(gradeLevel as string),
-      image_urls: imageUrl,
-      user_id: user.id,
-      stripe_price_id: default_price,
-      resource_types: JSON.parse(resourceType as string),
-      secular: secular?.valueOf(),
-      resource_links: resourceLinksList,
-      draft_status: draft_status?.valueOf(),
-    };
-    const { error, data } = await supabase
-      .from("seller_post")
-      .update([postSubmission])
-      .eq("id", idSupabase);
-    console.log(postSubmission);
-
-    if (error) {
-      console.log(error);
-      return new Response(
-        JSON.stringify({
-          message: t("apiErrors.postError"),
-        }),
-        { status: 500 }
-      );
+    const resourceLinksList = resourceLinks?.toString().split(",");
+
+    if (stripe_update.active) {
+        let postSubmission = {
+            title: title,
+            content: content,
+            product_subject: JSON.parse(subject as string),
+            post_grade: JSON.parse(gradeLevel as string),
+            image_urls: imageUrl,
+            user_id: user.id,
+            stripe_price_id: default_price,
+            resource_types: JSON.parse(resourceType as string),
+            secular: secular?.valueOf(),
+            resource_links: resourceLinksList,
+            draft_status: draft_status?.valueOf(),
+        };
+        const { error, data } = await supabase
+            .from("seller_post")
+            .update([postSubmission])
+            .eq("id", idSupabase);
+        console.log(postSubmission);
+
+        if (error) {
+            console.log(error);
+            return new Response(
+                JSON.stringify({
+                    message: t("apiErrors.postError"),
+                }),
+                { status: 500 }
+            );
+        } else {
+            console.log("Post Data: " + JSON.stringify(data));
+        }
     } else {
-      console.log("Post Data: " + JSON.stringify(data));
+        return new Response(
+            JSON.stringify({
+                message: "Stripe Product not active",
+            }),
+            { status: 500 }
+        );
     }
-  } else {
+    // Do something with the formData, then return a success response
     return new Response(
-      JSON.stringify({
-        message: "Stripe Product not active",
-      }),
-      { status: 500 }
-    )
-  }
-  // Do something with the formData, then return a success response
-  return new Response(
-    JSON.stringify({
-      message: t("apiErrors.success"),
-      id: idSupabase,
-    }),
-    { status: 200 }
-  );
+        JSON.stringify({
+            message: t("apiErrors.success"),
+            id: idSupabase,
+        }),
+        { status: 200 }
+    );
 };
diff --git a/src/pages/api/fetchFilterPosts.ts b/src/pages/api/fetchFilterPosts.ts
index f93a12ba..99682578 100644
--- a/src/pages/api/fetchFilterPosts.ts
+++ b/src/pages/api/fetchFilterPosts.ts
@@ -20,6 +20,7 @@ export const POST: APIRoute = async ({ request, redirect }) => {
         orderAscending,
         user_id,
         post_id,
+        seller_id
     }: FilterPostsParams = await request.json();
 
     const values = ui[lang] as uiObject;
@@ -61,7 +62,10 @@ export const POST: APIRoute = async ({ request, redirect }) => {
             query = query.eq("listing_status", listing_status);
         }
         if (post_id) {
-            query = query.eq("id", post_id);
+            query = query.in("id", post_id);
+        }
+        if (seller_id) {
+            query = query.eq("seller_id", seller_id);
         }
 
         const { data: posts, error } = await query;
diff --git a/supabase/seed.sql b/supabase/seed.sql
index 513487a8..3ddae1fd 100644
--- a/supabase/seed.sql
+++ b/supabase/seed.sql
@@ -147,15 +147,15 @@ INSERT INTO "public"."profiles" ("created_at", "first_name", "last_name", "user_
 
 INSERT INTO "public"."seller_post" ("id", "created_at", "title", "content", "user_id", "image_urls", "stripe_price_id", "stripe_product_id", "product_subject", "post_grade", "resource_urls", "resource_types","secular") VALUES
 	(1, '2024-03-05 15:38:02.509065+00', 'Test Post 1', '<p>This post is for testing provider images in the cart and also longer post content so here is some more content to see if the cards properly cut off after three lines like we expect? Is this working? Test Test Test TESt testing Test</p>', '84a298b6-9caf-4305-9bfe-3ea325df9188', NULL, 'price_1OtG6cBRZLMDvS4Ri22IpzGq', 'prod_PihVI0liGFkala', '{1,2,3}', '{1,2,3}', NULL, '{1,2,3}',TRUE),
-	(5, '2024-03-05 21:53:47.560102+00', 'Geography course', '<p>test</p>', '84a298b6-9caf-4305-9bfe-3ea325df9188', NULL, 'price_1OtFqrBRZLMDvS4RK5Ajf7na', 'prod_PihF0aDvvT4PeU', '{2,6,7}', '{1}', NULL, '{1,2,3}',FALSE),
-	(3, '2024-03-05 21:52:06.919336+00', 'Math course', '<p>test</p>', '84a298b6-9caf-4305-9bfe-3ea325df9188', NULL, 'price_1OtFmkBRZLMDvS4RJ8TNXGrH', 'prod_PihB8lq2HWY15J', '{3}', '{1}', NULL, '{1,2,3}',TRUE),
-	(2, '2024-03-05 15:40:05.243892+00', 'Test Post 2', '<p>test</p>', '84a298b6-9caf-4305-9bfe-3ea325df9188', NULL, 'price_1OtFjpBRZLMDvS4RPoOg78AS', 'prod_Pih8Qrjfpr0Zmo', '{1}', '{1}', NULL, '{1,2,3}',FALSE),
+	(5, '2024-03-05 21:53:47.560102+00', 'Geography course', '<p>test</p>', '84a298b6-9caf-4305-9bfe-3ea325df9188', NULL, 'price_1OtFqrBRZLMDvS4RK5Ajf7na', 'prod_PihF0aDvvT4PeU', '{2,6,7}', '{1}', NULL, '{4}',FALSE),
+	(3, '2024-03-05 21:52:06.919336+00', 'Math course', '<p>test</p>', '84a298b6-9caf-4305-9bfe-3ea325df9188', NULL, 'price_1OtFmkBRZLMDvS4RJ8TNXGrH', 'prod_PihB8lq2HWY15J', '{3}', '{1}', NULL, '{5}',TRUE),
+	(2, '2024-03-05 15:40:05.243892+00', 'Test Post 2', '<p>test</p>', '84a298b6-9caf-4305-9bfe-3ea325df9188', NULL, 'price_1OtFjpBRZLMDvS4RPoOg78AS', 'prod_Pih8Qrjfpr0Zmo', '{1}', '{1}', NULL, '{3,5,9,12}',FALSE),
 	(6, '2024-03-05 21:54:44.695358+00', 'programming course ', '<p>test learn programming</p>', 'a23376db-215d-49c4-9d9d-791c26579543', NULL, 'price_1OtFmFBRZLMDvS4RsYXD3Q3C', 'prod_PihAqPK24WxqZp', '{3,4,5}', '{1,4,6}', NULL, '{1,2,3}',FALSE),
 	(7, '2024-03-27 14:25:37.137856+00', 'Test', '<p>This post is for testing provider images in the cart and also longer post content so here is some more content to see if the cards properly cut off after three lines like we expect? Is this working? Test Test Test TESt testing Test</p>', 'b78eab21-c34e-41ef-9a72-64ee49f4cbc0', NULL, 'price_1OyxQ5BRZLMDvS4RJ1oWeAIj', 'prod_PoabbRuN1tqxj0', '{7}', '{1}', NULL, '{1,2,3}',FALSE),
-	(10, '2024-03-27 15:49:08.243995+00', 'Testing testing', '<p>test</p>', 'b00f3d62-4eb1-40ba-b73e-e3dc78eff08a', NULL, 'price_1OyyiuBRZLMDvS4Rpb0hhUK3', 'prod_PobwysGlI4L0OK', '{5}', '{1}', NULL,'{1,2,3}',TRUE),
+	(10, '2024-03-27 15:49:08.243995+00', 'Testing testing', '<p>test</p>', 'b00f3d62-4eb1-40ba-b73e-e3dc78eff08a', NULL, 'price_1OyyiuBRZLMDvS4Rpb0hhUK3', 'prod_PobwysGlI4L0OK', '{5}', '{1}', NULL,'{7, 9, 12}',TRUE),
 	(11, '2024-03-27 15:50:36.102267+00', 'New Test', '<p>Test</p>', 'b00f3d62-4eb1-40ba-b73e-e3dc78eff08a', NULL, 'price_1OyykKBRZLMDvS4RC4SRSDLb', 'prod_PobyNSYyDLZArR', '{6}', '{1}', NULL, '{1,2,3}',TRUE),
 	(12, '2024-03-27 15:53:32.292584+00', 'Another test', '<p>test</p>', 'b00f3d62-4eb1-40ba-b73e-e3dc78eff08a', NULL, 'price_1OyynABRZLMDvS4RMi5Z83UK', 'prod_Poc1Kl6ObNXQ89', '{4}', '{1}', NULL, '{1,2,3}',TRUE),
-	(13, '2024-05-17 16:10:12.692569+00', 'Free Post Test', '<p>Test free post</p>', 'a23376db-215d-49c4-9d9d-791c26579543', NULL, 'price_1PMZvBBRZLMDvS4RcPyxuTRL', 'prod_QCzvzVmGr9GP84', '{3}', '{3}', NULL, '{1,2,3}',TRUE);
+	(13, '2024-05-17 16:10:12.692569+00', 'Free Post Test', '<p>Test free post</p>', 'a23376db-215d-49c4-9d9d-791c26579543', NULL, 'price_1PMZvBBRZLMDvS4RcPyxuTRL', 'prod_QCzvzVmGr9GP84', '{3}', '{3}', NULL, '{10,11,12}',TRUE);
 
 --
 -- Data for Name: sellers; Type: TABLE DATA; Schema: public; Owner: postgres