Skip to content

Commit 3a26029

Browse files
shikhar-sahayshikhar-sahay
committed
feat:restored deleted filters
1 parent f8ea419 commit 3a26029

File tree

1 file changed

+164
-51
lines changed

1 file changed

+164
-51
lines changed

‎src/components/SideBar.tsx

Lines changed: 164 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client";
22

3-
import React, { useEffect, useState } from "react";
4-
import { fetchSubjects } from "./Searchbar/searchbar";
3+
import React from "react";
54
import { Filter } from "lucide-react";
65
import { type Filters, type IPaper } from "@/interface";
76
import {
@@ -12,7 +11,6 @@ import {
1211
} from "@/components/ui/accordion";
1312

1413
function SideBar({
15-
filtersNotPulled,
1614
loading,
1715
selectedExams,
1816
selectedSlots,
@@ -23,7 +21,6 @@ function SideBar({
2321
filterOptions,
2422
handleApplyFilters,
2523
}: {
26-
filtersNotPulled: () => void;
2724
loading: boolean;
2825
selectedExams: string[];
2926
selectedSlots: string[];
@@ -35,46 +32,40 @@ function SideBar({
3532
closeFilters: () => void;
3633
subject: string | null;
3734
filterOptions: Filters | undefined;
35+
selectedPapers: IPaper[];
3836
handleApplyFilters: (
3937
exams: string[],
4038
slots: string[],
4139
years: string[],
4240
campus: string[],
4341
semester: string[],
44-
anskey: boolean,
42+
anskey: boolean
4543
) => void;
4644
}) {
47-
const exams = filterOptions?.uniqueExams.map((exam) => ({
48-
label: exam,
49-
value: exam,
50-
}));
51-
const slots = filterOptions?.uniqueSlots.map((slot) => ({
52-
label: slot,
53-
value: slot,
54-
}));
55-
const years = filterOptions?.uniqueYears.map((year) => ({
56-
label: year,
57-
value: year,
58-
}));
59-
const semesters = filterOptions?.uniqueSemesters.map((semester) => ({
60-
label: semester,
61-
value: semester,
62-
}));
63-
const [subjects, setSubjects] = useState<string[]>([]);
64-
65-
useEffect(() => {
66-
async function fetchSubjectsSidebar() {
67-
if (loading) return;
68-
const fetchedSubjects = await fetchSubjects();
69-
setSubjects(fetchedSubjects);
70-
}
71-
void fetchSubjectsSidebar();
72-
}, [loading]);
45+
const exams =
46+
filterOptions?.uniqueExams.map((exam) => ({
47+
label: exam,
48+
value: exam,
49+
})) ?? [];
50+
const slots =
51+
filterOptions?.uniqueSlots.map((slot) => ({
52+
label: slot,
53+
value: slot,
54+
})) ?? [];
55+
const years =
56+
filterOptions?.uniqueYears.map((year) => ({
57+
label: year,
58+
value: year,
59+
})) ?? [];
60+
const semesters =
61+
filterOptions?.uniqueSemesters.map((semester) => ({
62+
label: semester,
63+
value: semester,
64+
})) ?? [];
7365

7466
return (
75-
<div className="no-scrollbar mb-0 h-[100vh] min-w-fit flex-col items-baseline overflow-y-scroll border-r-2 border-[#36266d] bg-[#f3f5ff] py-[20px] dark:bg-[#070114] md:flex">
76-
{/* FILTER HEADER */}
77-
<div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-3">
67+
<div className="no-scrollbar mb-0 h-[100vh] min-w-fit flex-col items-baseline overflow-y-scroll border-r-2 border-[#36266d] bg-[#f3f5ff] pt-[10px] dark:bg-[#070114] md:flex">
68+
<div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-4">
7869
<div className="flex items-center gap-1">
7970
<Filter size={24} />
8071
<div className="font-play text-xl font-bold">Filters</div>
@@ -91,8 +82,7 @@ function SideBar({
9182
</div>
9283
</div>
9384

94-
{/* ANSWER KEY TOGGLE */}
95-
<div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-3">
85+
<div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-4">
9686
<div
9787
onClick={() => {
9888
handleApplyFilters(
@@ -101,40 +91,48 @@ function SideBar({
10191
selectedYears,
10292
selectedCampuses,
10393
selectedSemesters,
104-
!selectedAnswerKeyIncluded,
94+
!selectedAnswerKeyIncluded
10595
);
10696
}}
107-
className={`font-play flex cursor-pointer rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white ${selectedAnswerKeyIncluded ? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]" : "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"}`}
97+
className={`font-play flex cursor-pointer rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white ${
98+
selectedAnswerKeyIncluded
99+
? "border-[#B2B8FF] bg-[#B2B8FF] hover:border-black hover:bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba] dark:hover:border-[white] dark:hover:bg-[#434dba]"
100+
: "bg-none hover:bg-[#B2B8FF] dark:border-white dark:hover:border-[#434dba]"
101+
}`}
108102
>
109103
Answer Key Available
110104
</div>
111105
</div>
112106

113-
{/* ACCORDIONS */}
114-
<div className="flex w-full flex-col items-baseline justify-between px-[10px]">
107+
<div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
115108
<Accordion className="w-full" type="single" collapsible defaultValue="item-1">
116109
<AccordionItem className="border-none no-underline" value="item-1">
117110
<AccordionTrigger className="w-full no-underline">
118111
<div className="font-play text-sm no-underline">Exams</div>
119112
</AccordionTrigger>
120113
<AccordionContent>
121114
<div className="my-2 flex w-full flex-wrap items-center">
122-
{exams?.map((exam) => (
115+
{exams.map((exam) => (
123116
<div
124117
key={exam.value}
125-
onClick={() =>
118+
onClick={() => {
119+
const newExams = selectedExams.includes(exam.value)
120+
? selectedExams.filter((e) => e !== exam.value)
121+
: [...selectedExams, exam.value];
126122
handleApplyFilters(
127-
selectedExams.includes(exam.value)
128-
? selectedExams.filter((e) => e !== exam.value)
129-
: [...selectedExams, exam.value],
123+
newExams,
130124
selectedSlots,
131125
selectedYears,
132126
selectedCampuses,
133127
selectedSemesters,
134-
selectedAnswerKeyIncluded,
135-
)
136-
}
137-
className={`font-play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white dark:hover:bg-slate-900 ${selectedExams.includes(exam.value) ? "border-[#B2B8FF] bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba]" : "bg-none dark:border-white"}`}
128+
selectedAnswerKeyIncluded
129+
);
130+
}}
131+
className={`font-play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white ${
132+
selectedExams.includes(exam.value)
133+
? "border-[#B2B8FF] bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba]"
134+
: "bg-none dark:border-white"
135+
}`}
138136
>
139137
{exam.label}
140138
</div>
@@ -143,11 +141,126 @@ function SideBar({
143141
</AccordionContent>
144142
</AccordionItem>
145143
</Accordion>
144+
</div>
146145

147-
{/* Add slots/years/semesters below as needed, same as above */}
146+
<div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
147+
<Accordion className="w-full" type="single" collapsible>
148+
<AccordionItem className="border-none no-underline" value="item-1">
149+
<AccordionTrigger className="w-full no-underline">
150+
<div className="font-play text-sm no-underline">Slots</div>
151+
</AccordionTrigger>
152+
<AccordionContent>
153+
<div className="my-2 flex w-full flex-wrap items-center">
154+
{slots.map((slot) => (
155+
<div
156+
key={slot.value}
157+
onClick={() => {
158+
const newSlots = selectedSlots.includes(slot.value)
159+
? selectedSlots.filter((s) => s !== slot.value)
160+
: [...selectedSlots, slot.value];
161+
handleApplyFilters(
162+
selectedExams,
163+
newSlots,
164+
selectedYears,
165+
selectedCampuses,
166+
selectedSemesters,
167+
selectedAnswerKeyIncluded
168+
);
169+
}}
170+
className={`font-play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white ${
171+
selectedSlots.includes(slot.value)
172+
? "border-[#B2B8FF] bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba]"
173+
: "bg-none dark:border-white"
174+
}`}
175+
>
176+
{slot.label}
177+
</div>
178+
))}
179+
</div>
180+
</AccordionContent>
181+
</AccordionItem>
182+
</Accordion>
183+
</div>
184+
185+
<div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
186+
<Accordion className="w-full" type="single" collapsible>
187+
<AccordionItem className="border-none no-underline" value="item-1">
188+
<AccordionTrigger className="w-full no-underline">
189+
<div className="font-play text-sm no-underline">Years</div>
190+
</AccordionTrigger>
191+
<AccordionContent>
192+
<div className="my-2 flex w-full flex-wrap items-center">
193+
{years.map((year) => (
194+
<div
195+
key={year.value}
196+
onClick={() => {
197+
const newYears = selectedYears.includes(year.value)
198+
? selectedYears.filter((y) => y !== year.value)
199+
: [...selectedYears, year.value];
200+
handleApplyFilters(
201+
selectedExams,
202+
selectedSlots,
203+
newYears,
204+
selectedCampuses,
205+
selectedSemesters,
206+
selectedAnswerKeyIncluded
207+
);
208+
}}
209+
className={`font-play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white ${
210+
selectedYears.includes(year.value)
211+
? "border-[#B2B8FF] bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba]"
212+
: "bg-none dark:border-white"
213+
}`}
214+
>
215+
{year.label}
216+
</div>
217+
))}
218+
</div>
219+
</AccordionContent>
220+
</AccordionItem>
221+
</Accordion>
222+
</div>
223+
224+
<div className="flex w-full flex-col items-baseline justify-between border-b-2 border-[#36266d] px-[10px]">
225+
<Accordion className="w-full" type="single" collapsible>
226+
<AccordionItem className="border-none no-underline" value="item-1">
227+
<AccordionTrigger className="w-full no-underline">
228+
<div className="font-play text-sm no-underline">Semesters</div>
229+
</AccordionTrigger>
230+
<AccordionContent>
231+
<div className="my-2 flex w-full flex-wrap items-center">
232+
{semesters.map((semester) => (
233+
<div
234+
key={semester.value}
235+
onClick={() => {
236+
const newSems = selectedSemesters.includes(semester.value)
237+
? selectedSemesters.filter((s) => s !== semester.value)
238+
: [...selectedSemesters, semester.value];
239+
handleApplyFilters(
240+
selectedExams,
241+
selectedSlots,
242+
selectedYears,
243+
selectedCampuses,
244+
newSems,
245+
selectedAnswerKeyIncluded
246+
);
247+
}}
248+
className={`font-play mb-2 mr-2 flex h-fit cursor-pointer items-center rounded-full border-2 border-black px-2 py-1 text-xs font-semibold hover:bg-slate-800 hover:text-white ${
249+
selectedSemesters.includes(semester.value)
250+
? "border-[#B2B8FF] bg-[#B2B8FF] dark:border-[#434dba] dark:bg-[#434dba]"
251+
: "bg-none dark:border-white"
252+
}`}
253+
>
254+
{semester.label}
255+
</div>
256+
))}
257+
</div>
258+
</AccordionContent>
259+
</AccordionItem>
260+
</Accordion>
148261
</div>
149262
</div>
150263
);
151264
}
152265

153-
export default SideBar;
266+
export default SideBar;

0 commit comments

Comments
 (0)