Skip to content

Commit

Permalink
Merge pull request #154 from datagrove/subFilters
Browse files Browse the repository at this point in the history 
Sub filters
  • Loading branch information
@r-southworth
r-southworth authored Sep 18, 2024
2 parents 046296e + cc32854 commit ed0a44e
Show file tree
Hide file tree
Showing 25 changed files with 2,459 additions and 621 deletions.
2 changes: 2 additions & 0 deletions astro.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 1 addition & 3 deletions src/components/common/cart/CartCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,9 +129,7 @@ export const CartCard: Component<Props> = (props) => {
item.image_url.jpegUrl
}
alt={
item.image_urls?.split(
","
)[0]
item.image_urls?.[0]
? "User Image"
: "No image"
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/cart/CartCardMobile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export const CartCardMobile: Component<Props> = (props) => {
src={userPlaceHolder.src}
data-src={item.image_url.jpegUrl}
alt={
item.image_urls?.split(",")[0]
item.image_urls?.[0]
? "User Image"
: "No image"
}
Expand Down
24 changes: 4 additions & 20 deletions src/components/home/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,6 @@ interface Props {
}

async function fetchPosts({
subjectFilters,
gradeFilters,
searchString,
resourceFilters,
secularFilter,
lang,
draft_status,
listing_status,
Expand All @@ -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,
Expand All @@ -43,6 +33,10 @@ async function fetchPosts({
});
const data = await response.json();

if (response.status !== 200) {
alert(data.message);
}

return data;
}

Expand All @@ -53,11 +47,6 @@ export const Home: Component<Props> = (props) => {

onMount(async () => {
const res = await fetchPosts({
subjectFilters: [],
gradeFilters: [],
searchString: "",
resourceFilters: [],
secularFilter: false,
lang: lang(),
listing_status: true,
draft_status: false,
Expand All @@ -75,11 +64,6 @@ export const Home: Component<Props> = (props) => {
console.log("Pop posts", popularPosts());

const newRes = await fetchPosts({
subjectFilters: [],
gradeFilters: [],
searchString: "",
resourceFilters: [],
secularFilter: false,
lang: lang(),
orderAscending: true,
listing_status: true,
Expand Down
8 changes: 3 additions & 5 deletions src/components/home/HomeCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const HomeCard: Component<Props> = (props) => {
return (
<div class="mb-4 flex justify-center">
<ul class="flex flex-wrap justify-center md:flex-nowrap">
{props.posts.map((post: any) => (
{props.posts.map((post: Post) => (
<li>
{/* { post.id } */}
{/* {`/${lang}/posts/${post.id}`} */}
Expand Down Expand Up @@ -48,10 +48,8 @@ export const HomeCard: Component<Props> = (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"
Expand Down
175 changes: 118 additions & 57 deletions src/components/posts/CreateNewPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -166,13 +167,23 @@ export const CreateNewPost: Component = () => {
const [subjects, setSubjects] = createSignal<
Array<{ id: number; subject: string }>
>([]);
const [subjectPick, setSubjectPick] = createSignal<Array<string>>([]);
const [subtopics, setSubtopics] = createSignal<
Array<{
id: number;
subtopic: string;
subject_id: number;
ariaLabel: string;
}>
>([]);
const [subjectPick, setSubjectPick] = createSignal<Array<number>>([]);
const [selectedSubjectId, setSelectedSubjectId] = createSignal<number>();
const [subtopicPick, setSubtopicPick] = createSignal<Array<number>>([]);
const [grades, setGrades] = createSignal<
Array<{ id: number; grade: string }>
>([]);
const [gradePick, setGradePick] = createSignal<Array<string>>([]);
const [gradePick, setGradePick] = createSignal<Array<number>>([]);
const [resourceTypesPick, setResourceTypesPick] = createSignal<
Array<string>
Array<number>
>([]);
const [resourceTypes, setResourceTypes] = createSignal<
Array<{ id: number; type: string }>
Expand Down Expand Up @@ -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")
Expand Down Expand Up @@ -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()));
}
Expand Down Expand Up @@ -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)
);
}
}
Expand All @@ -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");
Expand All @@ -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)
);
}
}
Expand All @@ -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)
);
}
}
Expand Down Expand Up @@ -776,9 +803,7 @@ export const CreateNewPost: Component = () => {
{subjectPick().map((subject) =>
subjects()
.filter(
(item) =>
item.id.toString() ===
subject
(item) => item.id === subject
)
.map((item) => (
<span class="mr-1">
Expand Down Expand Up @@ -810,17 +835,56 @@ export const CreateNewPost: Component = () => {
>
<For each={subjects()}>
{(subject) => (
<label class="ml-2 block">
<input
type="checkbox"
id={subject.id.toString()}
value={subject.id.toString()}
onchange={(e) => setSubjectArray(e)}
/>
<span class="ml-2">
{subject.subject}
</span>
</label>
<>
<div>
<label class="ml-2 block">
<input
type="checkbox"
id={subject.id.toString()}
value={subject.id}
onchange={(e) =>
setSubjectArray(e)
}
/>
<span class="ml-2">
{subject.subject}
</span>
</label>
<div
id="subtopicCheckboxes"
class={`${selectedSubjectId() === subject.id ? "" : "hidden"}`}
>
<For each={subtopics()}>
{(subtopic) =>
subtopic.subject_id ===
subject.id && (
<label class="ml-8 block">
<input
type="checkbox"
id={subtopic.id.toString()}
value={
subtopic.id
}
onchange={(
e
) =>
setSubtopicArray(
e
)
}
/>
<span class="ml-2">
{
subtopic.subtopic
}
</span>
</label>
)
}
</For>
</div>
</div>
</>
)}
</For>
</div>
Expand Down Expand Up @@ -890,10 +954,7 @@ export const CreateNewPost: Component = () => {
<Show when={gradePick().length > 0}>
{gradePick().map((grade) =>
grades()
.filter(
(item) =>
item.id.toString() === grade
)
.filter((item) => item.id === grade)
.map((item) => (
<span class="mr-1">
{item.grade},
Expand Down Expand Up @@ -928,7 +989,7 @@ export const CreateNewPost: Component = () => {
<input
type="checkbox"
id={grade.id.toString()}
value={grade.id.toString()}
value={grade.id}
onchange={(e) => setGradeArray(e)}
/>
<span class="ml-2">{grade.grade}</span>
Expand Down Expand Up @@ -1006,7 +1067,7 @@ export const CreateNewPost: Component = () => {
resourceTypes()
.filter(
(item) =>
item.id.toString() ===
item.id ===
resourceType
)
.map((item) => (
Expand Down Expand Up @@ -1046,7 +1107,7 @@ export const CreateNewPost: Component = () => {
<input
type="checkbox"
id={type.id.toString()}
value={type.id.toString()}
value={type.id}
onchange={(e) =>
setResourceTypesArray(e)
}
Expand Down
Loading

0 comments on commit ed0a44e

Please sign in to comment.