From 84f2476e76378b8861878ea89058d1d83cea46d1 Mon Sep 17 00:00:00 2001 From: r-southworth Date: Wed, 4 Sep 2024 17:14:20 -0400 Subject: [PATCH] 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) => { const [newItems, setNewItems] = createSignal>([]); const [quantity, setQuantity] = createSignal(0); + console.log(items); + createEffect(async () => { if (props.items) { // const updatedItems = await Promise.all( @@ -133,7 +135,7 @@ export const CartCard: Component = (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) => { 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" /> 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) => { 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" /> 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) => { ? "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([]); 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 = () => { {`${t("postLabels.creatorProfileImage")} 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) => { {`${t("postLabels.CreatorProfileImage")} 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(); const [response] = createResource(formData, postFormData); - const [purchasedItems, setPurchasedItems] = createSignal>([]); const [tabSelected, setTabSelected] = createSignal("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) => { - // const [user, setUser] = createSignal(); - // const [session, setSession] = createSignal(null); - // const [userImage, setUserImage] = createSignal(); - // const [editMode, setEditMode] = createSignal(false); //TODO Set back to false - const [imageUrl, setImageUrl] = createSignal(null); - const [purchasedItems, setPurchasedItems] = createSignal>([]); const [tabSelected, setTabSelected] = createSignal("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) => { 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) => { {/* Price Implementation */} - {/*
+ {/*

{t("formLabels.isResourceFree")}?

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) => { const [postImages, setPostImages] = createSignal< { webpUrl: string; jpegUrl: string }[] >([]); - const [testImages, setTestImages] = createSignal([]); const [quantity, setQuantity] = createSignal(1); const [session, setSession] = createSignal(null); const [editRender, setEditRender] = createSignal(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) => { 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) => { 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) => { 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) => { 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}`} /> @@ -630,7 +505,7 @@ export const ViewFullPost: Component = (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}`} /> 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) => { const [post, setPost] = createSignal(); @@ -62,152 +79,45 @@ export const MobileViewFullPost: Component = (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) => { {`${t("postLabels.image")}`} @@ -682,7 +592,7 @@ export const MobileViewFullPost: Component = (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}`} /> @@ -707,7 +617,7 @@ export const MobileViewFullPost: Component = (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}`} /> 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) => { 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 (
- +
); 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 = () => {
- +
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(null); - const [user, setUser] = createSignal(); const [favoritedItems, setFavoritedItems] = createSignal>([]); const [loading, setLoading] = createSignal(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" } > - +

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(null); - const [user, setUser] = createSignal(); const [purchasedItems, setPurchasedItems] = createSignal< Array >([]); @@ -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 (

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) => { 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) => { 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) => { } }); + 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) => { 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) => { 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) => { 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) => { 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) => { 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) => { const [session, setSession] = createSignal(null); const lang = props.lang; + console.log(lang); const t = useTranslations(lang); if (UserError) { @@ -407,7 +408,7 @@ export const MobileViewCard: Component = (props) => {
- {post.resourceTypes!.join(", ")} + {post.resourceTypes?.join(", ")}
{/*
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>([]); const [searchPost, setSearchPost] = createSignal>([]); - const [currentPosts, setCurrentPosts] = createSignal>([]); const [subjectFilters, setSubjectFilters] = createSignal>([]); const [gradeFilters, setGradeFilters] = createSignal>([]); const [resourceTypesFilters, setResourceTypeFilters] = createSignal< @@ -55,6 +54,7 @@ export const ResourcesView: Component = () => { const [searchString, setSearchString] = createSignal(""); const [noPostsVisible, setNoPostsVisible] = createSignal(false); const [secularFilters, setSecularFilters] = createSignal(false); + const [clearFilters, setClearFilters] = createSignal(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; - const gradeCheckboxes = document.querySelectorAll( - "input[type='checkbox'].grade" - ) as NodeListOf; - const resourceTypesCheckoxes = document.querySelectorAll( - "input[type='checkbox'].resourceType" - ) as NodeListOf; + 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; - - 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; - - 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; - - 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 (
- + {/* */}
@@ -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 = () => {
- +
- +
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) => { const [searchString, setSearchString] = createSignal(""); - 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) => { - const [selectedSecular, setSelectedSecular] = createSignal(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(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 ( -