diff --git a/astro.config.mjs b/astro.config.mjs index 932e7b8c..05be77eb 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -17,6 +17,8 @@ import compress from 'astro-compress' const locales = languages const defaultLocale = defaultLang +const isDev = import.meta.env.DEV; + // https://astro.build/config export default defineConfig({ output: 'server', diff --git a/src/components/common/cart/CartCard.tsx b/src/components/common/cart/CartCard.tsx index 14808f0b..fa16373e 100644 --- a/src/components/common/cart/CartCard.tsx +++ b/src/components/common/cart/CartCard.tsx @@ -129,9 +129,7 @@ export const CartCard: Component = (props) => { item.image_url.jpegUrl } alt={ - item.image_urls?.split( - "," - )[0] + item.image_urls?.[0] ? "User Image" : "No image" } diff --git a/src/components/common/cart/CartCardMobile.tsx b/src/components/common/cart/CartCardMobile.tsx index 0104d955..40c0d980 100644 --- a/src/components/common/cart/CartCardMobile.tsx +++ b/src/components/common/cart/CartCardMobile.tsx @@ -123,7 +123,7 @@ export const CartCardMobile: Component = (props) => { src={userPlaceHolder.src} data-src={item.image_url.jpegUrl} alt={ - item.image_urls?.split(",")[0] + item.image_urls?.[0] ? "User Image" : "No image" } diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index b44c5ea1..8e2c03e3 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -16,11 +16,6 @@ interface Props { } async function fetchPosts({ - subjectFilters, - gradeFilters, - searchString, - resourceFilters, - secularFilter, lang, draft_status, listing_status, @@ -29,11 +24,6 @@ async function fetchPosts({ const response = await fetch("/api/fetchFilterPosts", { method: "POST", body: JSON.stringify({ - subjectFilters: subjectFilters, - gradeFilters: gradeFilters, - searchString: searchString, - resourceFilters: resourceFilters, - secularFilter: secularFilter, lang: lang, limit: 8, draft_status: draft_status, @@ -43,6 +33,10 @@ async function fetchPosts({ }); const data = await response.json(); + if (response.status !== 200) { + alert(data.message); + } + return data; } @@ -53,11 +47,6 @@ export const Home: Component = (props) => { onMount(async () => { const res = await fetchPosts({ - subjectFilters: [], - gradeFilters: [], - searchString: "", - resourceFilters: [], - secularFilter: false, lang: lang(), listing_status: true, draft_status: false, @@ -75,11 +64,6 @@ export const Home: Component = (props) => { console.log("Pop posts", popularPosts()); const newRes = await fetchPosts({ - subjectFilters: [], - gradeFilters: [], - searchString: "", - resourceFilters: [], - secularFilter: false, lang: lang(), orderAscending: true, listing_status: true, diff --git a/src/components/home/HomeCard.tsx b/src/components/home/HomeCard.tsx index dd196257..3efc2139 100644 --- a/src/components/home/HomeCard.tsx +++ b/src/components/home/HomeCard.tsx @@ -20,7 +20,7 @@ export const HomeCard: Component = (props) => { return (
    - {props.posts.map((post: any) => ( + {props.posts.map((post: Post) => (
  • {/* { post.id } */} {/* {`/${lang}/posts/${post.id}`} */} @@ -48,10 +48,8 @@ export const HomeCard: Component = (props) => { post.image_url.jpegUrl } alt={ - post.image_urls.split( - "," - )[0] - ? `Post Image ${post.image_urls.split(",")[0]}.jpeg` + post.image_urls?.[0] + ? `Post Image ${post.image_urls[0]}.jpeg` : "No Image" } class="h-40 w-40 rounded-lg object-contain" diff --git a/src/components/posts/CreateNewPost.tsx b/src/components/posts/CreateNewPost.tsx index c64d8ca7..760efcd5 100644 --- a/src/components/posts/CreateNewPost.tsx +++ b/src/components/posts/CreateNewPost.tsx @@ -29,6 +29,7 @@ const values = ui[lang] as uiObject; //get the categories from the language files so they translate with changes in the language picker const productCategoryData = values.subjectCategoryInfo; +const subtopicData = values.subjectCategoryInfo.subtopics; const excludeTaxCodes = new Set([ //Website/online dating products @@ -166,13 +167,23 @@ export const CreateNewPost: Component = () => { const [subjects, setSubjects] = createSignal< Array<{ id: number; subject: string }> >([]); - const [subjectPick, setSubjectPick] = createSignal>([]); + const [subtopics, setSubtopics] = createSignal< + Array<{ + id: number; + subtopic: string; + subject_id: number; + ariaLabel: string; + }> + >([]); + const [subjectPick, setSubjectPick] = createSignal>([]); + const [selectedSubjectId, setSelectedSubjectId] = createSignal(); + const [subtopicPick, setSubtopicPick] = createSignal>([]); const [grades, setGrades] = createSignal< Array<{ id: number; grade: string }> >([]); - const [gradePick, setGradePick] = createSignal>([]); + const [gradePick, setGradePick] = createSignal>([]); const [resourceTypesPick, setResourceTypesPick] = createSignal< - Array + Array >([]); const [resourceTypes, setResourceTypes] = createSignal< Array<{ id: number; type: string }> @@ -304,12 +315,26 @@ export const CreateNewPost: Component = () => { console.log("Other error: " + error); } + //Refactor why does this need to be in an effect? productCategoryData.subjects.map((subject) => setSubjects([ ...subjects(), { id: Number(subject.id), subject: subject.name }, ]) ); + + subtopicData.map((subtopic) => + setSubtopics([ + ...subtopics(), + { + id: subtopic.id, + subtopic: subtopic.name, + ariaLabel: subtopic.ariaLabel, + subject_id: subtopic.subject_id, + }, + ]) + ); + try { const { data: gradeData, error } = await supabase .from("grade_level") @@ -420,6 +445,10 @@ export const CreateNewPost: Component = () => { formData.append("subject", JSON.stringify(subjectPick())); } + if (subtopicPick() !== undefined) { + formData.append("subtopics", JSON.stringify(subtopicPick())); + } + if (gradePick() !== undefined) { formData.append("grade", JSON.stringify(gradePick())); } @@ -519,18 +548,15 @@ export const CreateNewPost: Component = () => { } } function setSubjectArray(e: Event) { - if ((e.target as HTMLInputElement).checked) { - setSubjectPick([ - ...subjectPick(), - (e.target as HTMLInputElement).value, - ]); - } else if ((e.target as HTMLInputElement).checked === false) { - if (subjectPick().includes((e.target as HTMLInputElement).value)) { + const target = e.target as HTMLInputElement; + const targetValue = Number(target.value); + if (target.checked === true) { + setSubjectPick([...subjectPick(), targetValue]); + setSelectedSubjectId(targetValue); + } else if (target.checked === false) { + if (subjectPick().includes(targetValue)) { setSubjectPick( - subjectPick().filter( - (value) => - value !== (e.target as HTMLInputElement).value - ) + subjectPick().filter((value) => value !== targetValue) ); } } @@ -548,6 +574,21 @@ export const CreateNewPost: Component = () => { console.log(subjectPick()); } + function setSubtopicArray(e: Event) { + const target = e.target as HTMLInputElement; + const targetValue = Number(target.value); + if (target.checked === true) { + setSubtopicPick([...subtopicPick(), targetValue]); + } else if (target.checked === false) { + if (subtopicPick().includes(targetValue)) { + setSubtopicPick( + subtopicPick().filter((value) => value !== targetValue) + ); + } + } + console.log(subtopicPick()); + } + function formatPrice(resourcePrice: string) { if (resourcePrice.indexOf(".") === -1) { setPrice(resourcePrice + "00"); @@ -559,18 +600,13 @@ export const CreateNewPost: Component = () => { } function setGradeArray(e: Event) { + const targetValue = Number((e.target as HTMLInputElement).value); if ((e.target as HTMLInputElement).checked) { - setGradePick([ - ...gradePick(), - (e.target as HTMLInputElement).value, - ]); + setGradePick([...gradePick(), targetValue]); } else if ((e.target as HTMLInputElement).checked === false) { - if (gradePick().includes((e.target as HTMLInputElement).value)) { + if (gradePick().includes(targetValue)) { setGradePick( - gradePick().filter( - (value) => - value !== (e.target as HTMLInputElement).value - ) + gradePick().filter((value) => value !== targetValue) ); } } @@ -585,22 +621,13 @@ export const CreateNewPost: Component = () => { } function setResourceTypesArray(e: Event) { + const targetValue = Number((e.target as HTMLInputElement).value); if ((e.target as HTMLInputElement).checked) { - setResourceTypesPick([ - ...resourceTypesPick(), - (e.target as HTMLInputElement).value, - ]); + setResourceTypesPick([...resourceTypesPick(), targetValue]); } else if ((e.target as HTMLInputElement).checked === false) { - if ( - resourceTypesPick().includes( - (e.target as HTMLInputElement).value - ) - ) { + if (resourceTypesPick().includes(targetValue)) { setResourceTypesPick( - resourceTypesPick().filter( - (value) => - value !== (e.target as HTMLInputElement).value - ) + resourceTypesPick().filter((value) => value !== targetValue) ); } } @@ -776,9 +803,7 @@ export const CreateNewPost: Component = () => { {subjectPick().map((subject) => subjects() .filter( - (item) => - item.id.toString() === - subject + (item) => item.id === subject ) .map((item) => ( @@ -810,17 +835,56 @@ export const CreateNewPost: Component = () => { > {(subject) => ( - + <> +
    + +
    + + {(subtopic) => + subtopic.subject_id === + subject.id && ( + + ) + } + +
    +
    + )}
@@ -890,10 +954,7 @@ export const CreateNewPost: Component = () => { 0}> {gradePick().map((grade) => grades() - .filter( - (item) => - item.id.toString() === grade - ) + .filter((item) => item.id === grade) .map((item) => ( {item.grade}, @@ -928,7 +989,7 @@ export const CreateNewPost: Component = () => { setGradeArray(e)} /> {grade.grade} @@ -1006,7 +1067,7 @@ export const CreateNewPost: Component = () => { resourceTypes() .filter( (item) => - item.id.toString() === + item.id === resourceType ) .map((item) => ( @@ -1046,7 +1107,7 @@ export const CreateNewPost: Component = () => { setResourceTypesArray(e) } diff --git a/src/components/posts/DeletePostButton.tsx b/src/components/posts/DeletePostButton.tsx index cbfa3c36..9977e22d 100644 --- a/src/components/posts/DeletePostButton.tsx +++ b/src/components/posts/DeletePostButton.tsx @@ -12,7 +12,6 @@ interface Props { // (Id, UserId) id: number; userId: string; - postImage: string | null | undefined; } const { data: User, error: UserError } = await supabase.auth.getSession(); diff --git a/src/components/posts/EditPost.tsx b/src/components/posts/EditPost.tsx index d0a1f64c..9836bc11 100644 --- a/src/components/posts/EditPost.tsx +++ b/src/components/posts/EditPost.tsx @@ -25,6 +25,7 @@ const values = ui[lang] as uiObject; //get the categories from the language files so they translate with changes in the language picker const productCategoryData = values.subjectCategoryInfo; +const subtopicData = values.subjectCategoryInfo.subtopics; let uploadFilesRef: any; @@ -35,7 +36,7 @@ async function updateFormData(formData: FormData) { body: formData, }); const data = await response.json(); - console.log(response, "response"); + console.log("data", data); if (response.status === 200) { alert(data.message); location.reload(); @@ -52,18 +53,27 @@ export const EditPost: Component = (props: Props) => { const [response] = createResource(formData, updateFormData); const [imageUrl, setImageUrl] = createSignal>([]); const [imageLength, setImageLength] = createSignal(0); - const [postImages, setPostImages] = createSignal>([]); //prettier-ignore const [mode, setMode] = createStore({theme: localStorage.getItem("theme"),}); //prettier-ignore const [subjects, setSubjects] = createSignal>([]); + const [subtopics, setSubtopics] = createSignal< + Array<{ + id: number; + subtopic: string; + subject_id: number; + ariaLabel: string; + }> + >([]); //prettier-ignore - const [subjectPick, setSubjectPick] = createSignal>(props.post?.product_subject!); + const [subjectPick, setSubjectPick] = createSignal>(props.post?.subjects!); + const [selectedSubjectId, setSelectedSubjectId] = createSignal(); + const [subtopicPick, setSubtopicPick] = createSignal>([]); //prettier-ignore const [grades, setGrades] = createSignal>([]); - const [gradePick, setGradePick] = createSignal>([]); + const [gradePick, setGradePick] = createSignal>([]); //prettier-ignore - const [resourceTypesPick, setResourceTypesPick] = createSignal>([]); + const [resourceTypesPick, setResourceTypesPick] = createSignal>([]); //prettier-ignore const [resourceTypes, setResourceTypes] = createSignal>([]); const [allRequirementsMet, setAllRequirementsMet] = @@ -94,15 +104,16 @@ export const EditPost: Component = (props: Props) => { } }); - setGradePick(props.post?.post_grade!); - setSubjectPick(props.post.product_subject); - setResourceTypesPick(props.post?.resource_types!); + setGradePick(props.post?.grades); + setSubjectPick(props.post.subjects); + setSubtopicPick(props.post?.subtopics); + setResourceTypesPick(props.post?.resource_types); setSecular(props.post.secular); setDraftStatus(props.post.draft_status); setStartDraftStatus(props.post.draft_status); if (props.post?.image_urls) { - setImageUrl(props.post?.image_urls.split(",")); + setImageUrl(props.post?.image_urls); // console.log(imageUrl()) } //Image_urls is a single string of urls comma separated @@ -160,6 +171,19 @@ export const EditPost: Component = (props: Props) => { { id: Number(subject.id), subject: subject.name }, ]) ); + + subtopicData.map((subtopic) => + setSubtopics([ + ...subtopics(), + { + id: subtopic.id, + subtopic: subtopic.name, + ariaLabel: subtopic.ariaLabel, + subject_id: subtopic.subject_id, + }, + ]) + ); + try { const { data: gradeData, error } = await supabase .from("grade_level") @@ -256,6 +280,10 @@ export const EditPost: Component = (props: Props) => { formData.append("subject", JSON.stringify(subjectPick())); } + if (subtopicPick() !== undefined) { + formData.append("subtopics", JSON.stringify(subtopicPick())); + } + if (gradePick() !== undefined) { formData.append("grade", JSON.stringify(gradePick())); } @@ -356,18 +384,15 @@ export const EditPost: Component = (props: Props) => { } function setSubjectArray(e: Event) { - if ((e.target as HTMLInputElement).checked) { - setSubjectPick([ - ...subjectPick(), - (e.target as HTMLInputElement).value, - ]); - } else if ((e.target as HTMLInputElement).checked === false) { - if (subjectPick().includes((e.target as HTMLInputElement).value)) { + const target = e.target as HTMLInputElement; + const targetValue = Number(target.value); + if (target.checked === true) { + setSubjectPick([...subjectPick(), targetValue]); + setSelectedSubjectId(targetValue); + } else if (target.checked === false) { + if (subjectPick().includes(targetValue)) { setSubjectPick( - subjectPick().filter( - (value) => - value !== (e.target as HTMLInputElement).value - ) + subjectPick().filter((value) => value !== targetValue) ); } } @@ -384,6 +409,21 @@ export const EditPost: Component = (props: Props) => { // } } + function setSubtopicArray(e: Event) { + const target = e.target as HTMLInputElement; + const targetValue = Number(target.value); + if (target.checked === true) { + setSubtopicPick([...subtopicPick(), targetValue]); + } else if (target.checked === false) { + if (subtopicPick().includes(targetValue)) { + setSubtopicPick( + subtopicPick().filter((value) => value !== targetValue) + ); + } + } + console.log(subtopicPick()); + } + function formatPrice(resourcePrice: string) { if (resourcePrice.indexOf(".") === -1) { setPrice(resourcePrice + "00"); @@ -395,18 +435,14 @@ export const EditPost: Component = (props: Props) => { } function setGradeArray(e: Event) { - // console.log(gradePick()); - if ((e.target as HTMLInputElement).checked) { - setGradePick([ - ...gradePick(), - (e.target as HTMLInputElement).value, - ]); - } else if ((e.target as HTMLInputElement).checked === false) { - if (gradePick().includes((e.target as HTMLInputElement).value)) { + const target = e.target as HTMLInputElement; + if (target.checked === true) { + setGradePick([...gradePick(), Number(target.value)]); + } else if (target.checked === false) { + if (gradePick().includes(Number(target.value))) { setGradePick( gradePick().filter( - (value) => - value !== (e.target as HTMLInputElement).value + (value) => value !== Number(target.value) ) ); } @@ -422,21 +458,17 @@ export const EditPost: Component = (props: Props) => { } function setResourceTypesArray(e: Event) { - if ((e.target as HTMLInputElement).checked) { + const target = e.target as HTMLInputElement; + if (target.checked === true) { setResourceTypesPick([ ...resourceTypesPick(), - (e.target as HTMLInputElement).value, + Number(target.value), ]); - } else if ((e.target as HTMLInputElement).checked === false) { - if ( - resourceTypesPick().includes( - (e.target as HTMLInputElement).value - ) - ) { + } else if (target.checked === false) { + if (resourceTypesPick().includes(Number(target.value))) { setResourceTypesPick( resourceTypesPick().filter( - (value) => - value !== (e.target as HTMLInputElement).value + (value) => value !== Number(target.value) ) ); } @@ -619,9 +651,7 @@ export const EditPost: Component = (props: Props) => { {subjectPick().map((subject) => subjects() .filter( - (item) => - item.id.toString() === - subject + (item) => item.id === subject ) .map((item) => ( @@ -659,20 +689,55 @@ export const EditPost: Component = (props: Props) => { subject.subject )} > - + <> + +
+ + {(subtopic) => + subtopic.subject_id === + subject.id && ( + + ) + } + +
+ = (props: Props) => { ) } > - + <> + +
+ + {(subtopic) => + subtopic.subject_id === + subject.id && ( + + ) + } + +
+ )} @@ -757,10 +857,7 @@ export const EditPost: Component = (props: Props) => { 0}> {gradePick().map((grade) => grades() - .filter( - (item) => - item.id.toString() === grade - ) + .filter((item) => item.id === grade) .map((item) => ( {item.grade}, @@ -801,7 +898,7 @@ export const EditPost: Component = (props: Props) => { checked type="checkbox" id={grade.id.toString()} - value={grade.id.toString()} + value={grade.id} onchange={(e) => setGradeArray(e) } @@ -820,7 +917,7 @@ export const EditPost: Component = (props: Props) => { setGradeArray(e) } @@ -895,7 +992,7 @@ export const EditPost: Component = (props: Props) => { resourceTypes() .filter( (item) => - item.id.toString() === + item.id === resourceType ) .map((item) => ( @@ -934,13 +1031,13 @@ export const EditPost: Component = (props: Props) => {