papers-codechef/src/components/SideBar.tsx at db5c42d98b8257b4aad1dd989d7a7884f9787fc3 · CodeChefVIT/papers-codechef · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
"use client";

import React from "react";
import { Filter } from "lucide-react";
import SidebarButton from "./SidebarButton";
import SidebarSection from "./SidebarSection";
import { useFilters } from "@/context/filterContext";

function SideBar() {
  const [openItem, setOpenItem] = React.useState<string | undefined>(undefined);
  const {
    selectedExams,
    selectedSlots,
    selectedYears,
    selectedSemesters,
    selectedCampuses,
    selectedAnswerKeyIncluded,
    filterOptions,
    handleApplyFilters,
    setCurrentPage,
  } = useFilters();
  const exams =
    filterOptions?.unique_exams.map((exam) => ({ label: exam, value: exam })) ??
    [];
  const slots =
    filterOptions?.unique_slots
      .sort((a, b) => a.localeCompare(b, undefined, { numeric: true }))
      .map((slot) => ({ label: slot, value: slot })) ?? [];
  const years =
    filterOptions?.unique_years
      .sort((a, b) => b.localeCompare(a))
      .map((year) => ({ label: year, value: year })) ?? [];
  const semesters =
    filterOptions?.unique_semesters.map((semester) => ({
      label: semester,
      value: semester,
    })) ?? [];

  const filtersForSidebar = [
    {
      label: "Exams",
      data: exams,
      selected: selectedExams,
      updater: (newVal: string[]) => {
        handleApplyFilters(
          newVal,
          selectedSlots,
          selectedYears,
          selectedCampuses,
          selectedSemesters,
          selectedAnswerKeyIncluded,
        );
      },
    },
    {
      label: "Slots",
      data: slots,
      selected: selectedSlots,
      updater: (newVal: string[]) => {
        handleApplyFilters(
          selectedExams,
          newVal,
          selectedYears,
          selectedCampuses,
          selectedSemesters,
          selectedAnswerKeyIncluded,
        );
      },
    },
    {
      label: "Years",
      data: years,
      selected: selectedYears,
      updater: (newVal: string[]) => {
        handleApplyFilters(
          selectedExams,
          selectedSlots,
          newVal,
          selectedCampuses,
          selectedSemesters,
          selectedAnswerKeyIncluded,
        );
      },
    },
    {
      label: "Semesters",
      data: semesters,
      selected: selectedSemesters,
      updater: (newVal: string[]) => {
        handleApplyFilters(
          selectedExams,
          selectedSlots,
          selectedYears,
          selectedCampuses,
          newVal,
          selectedAnswerKeyIncluded,
        );
      },
    },
  ];

  return (
    <div className="no-scrollbar sticky top-0 h-[100vh] flex-col items-baseline overflow-y-auto border-r-2 border-[#36266d] bg-[#f3f5ff] pt-[10px] dark:bg-[#070114] md:flex">
      <div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-4">
        <div className="flex items-center gap-1">
          <Filter size={24} />
          <div className="font-play text-xl font-bold">Filters</div>
        </div>
        <SidebarButton
          onClick={() => handleApplyFilters([], [], [], [], [], false)}
        >
          Reset Filters
        </SidebarButton>
      </div>

      <div className="flex w-full items-center justify-between border-b-2 border-[#36266d] px-[10px] py-4">
        <SidebarButton
          selected={selectedAnswerKeyIncluded}
          onClick={() =>
            handleApplyFilters(
              selectedExams,
              selectedSlots,
              selectedYears,
              selectedCampuses,
              selectedSemesters,
              !selectedAnswerKeyIncluded,
            )
          }
        >
          Answer Key Available
        </SidebarButton>
      </div>

      {filtersForSidebar.map((section) => (
        <SidebarSection
          key={section.label}
          label={section.label}
          data={section.data}
          selected={section.selected}
          updater={section.updater}
          openItem={openItem}
          setOpenItem={setOpenItem}
        />
      ))}
    </div>
  );
}

export default SideBar;