Merge pull request #414 from Advik-Gupta/staging

Fixed pinned section order issue and added sorting button

Author: abhitrueprogrammer

src/components/CatalogueContent.tsx

@@ -18,6 +18,7 @@ import { useCourses } from "@/context/courseContext";
 import { FilterProvider, useFilters } from "@/context/filterContext";
 import EmptyState from "./ui/EmptyState";
 import SidebarButton from "./SidebarButton";
+import SortComponent from "./ui/sorting";
 
 const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
   const [isMounted, setIsMounted] = useState(false);
@@ -27,6 +28,7 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
   const [pinned, setPinned] = useState<boolean>(false);
   const [relatedSubjects, setRelatedSubjects] = useState<string[]>([]);
   const { courses } = useCourses();
+  const [sortOption, setSortOption] = useState<"asc" | "desc" | "none">("none");
 
   // Use filter context
   const {
@@ -175,6 +177,31 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
     void fetchPapers();
   }, [subject, isMounted, setPapers, setFilterOptions]);
 
+  useEffect(() => {
+    if (!papers.length) return;
+
+    const filtered = [...papers];
+
+    if (sortOption === "asc") {
+      filtered.sort((a, b) => a.year.localeCompare(b.year));
+    } else if (sortOption === "desc") {
+      filtered.sort((a, b) => b.year.localeCompare(a.year));
+    }
+
+    setFilteredPapers(filtered);
+  }, [
+    papers,
+    selectedExams,
+    selectedSlots,
+    selectedYears,
+    selectedSemesters,
+    selectedCampuses,
+    selectedAnswerKeyIncluded,
+    sortOption,
+    setFilteredPapers,
+    setAppliedFilters,
+  ]);
+
   useEffect(() => {
     if (!papers.length) return;
 
@@ -206,6 +233,11 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
         answerkeyCondition
       );
     });
+    if (sortOption === "asc") {
+      filtered.sort((a, b) => a.year.localeCompare(b.year));
+    } else if (sortOption === "desc") {
+      filtered.sort((a, b) => b.year.localeCompare(a.year));
+    }
     setFilteredPapers(filtered);
     setAppliedFilters(
       selectedExams.length > 0 ||
@@ -285,6 +317,10 @@ const CatalogueContentInner = ({ subject }: { subject: string | null }) => {
 
           {/* Select/Deselect/Download All Buttons */}
           <div className="mb-8 flex w-full items-center justify-end gap-4">
+            <SortComponent
+              onSortChange={setSortOption}
+              currentSort={sortOption}
+            />
             <SidebarButton onClick={handleSelectAll}>Select All</SidebarButton>
             <SidebarButton onClick={handleDeselectAll}>
               Deselect All

src/components/PinnedPapersCarousel.tsx

@@ -84,6 +84,16 @@ function PinnedPapersCarousel() {
 
       const allDisplayPapers = [...fetchedPapers, ...missingSubjects];
 
+      allDisplayPapers.sort((a, b) => {
+        const aIndex = storedSubjects.indexOf(a.subject);
+        const bIndex = storedSubjects.indexOf(b.subject);
+
+        return (
+          (aIndex === -1 ? Number.MAX_SAFE_INTEGER : aIndex) -
+          (bIndex === -1 ? Number.MAX_SAFE_INTEGER : bIndex)
+        );
+      });
+
       setDisplayPapers(allDisplayPapers);
     } catch (error) {
       console.error("Failed to fetch papers:", error);
@@ -126,6 +136,16 @@ function PinnedPapersCarousel() {
 
           const allDisplayPapers = [...fetchedPapers, ...missingSubjects];
 
+          allDisplayPapers.sort((a, b) => {
+            const aIndex = storedSubjects.indexOf(a.subject);
+            const bIndex = storedSubjects.indexOf(b.subject);
+
+            return (
+              (aIndex === -1 ? Number.MAX_SAFE_INTEGER : aIndex) -
+              (bIndex === -1 ? Number.MAX_SAFE_INTEGER : bIndex)
+            );
+          });
+
           setDisplayPapers(allDisplayPapers);
         } catch (error) {
           console.error("Failed to fetch papers:", error);

src/components/ui/sorting.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+type SortOption = "asc" | "desc" | "none";
+
+interface SortComponentProps {
+  onSortChange: (sortOption: SortOption) => void;
+  currentSort: SortOption;
+}
+
+const SortComponent: React.FC<SortComponentProps> = ({
+  onSortChange,
+  currentSort,
+}) => {
+  const handleSortChange = (option: SortOption) => {
+    onSortChange(option);
+  };
+
+  const getSortIcon = () => {
+    if (currentSort === "asc") return <ArrowUp className="h-4 w-4" />;
+    if (currentSort === "desc") return <ArrowDown className="h-4 w-4" />;
+    return <ArrowUpDown className="h-4 w-4" />;
+  };
+
+  const getSortLabel = () => {
+    if (currentSort === "asc") return "Year (Old to New)";
+    if (currentSort === "desc") return "Year (New to Old)";
+    return "Sort by Year";
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          className="flex gap-2 border-2 border-black bg-white font-sans font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:bg-[#070114] dark:text-white dark:hover:border-white dark:hover:bg-slate-900"
+        >
+          {getSortIcon()}
+          <span className="hidden sm:inline">{getSortLabel()}</span>
+          <span className="sm:hidden">Sort</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="w-48 border-2 border-black bg-white dark:border-[#434dba] dark:bg-[#0a0118]"
+      >
+        <DropdownMenuItem
+          onClick={() => handleSortChange("desc")}
+          className={`cursor-pointer font-semibold ${
+            currentSort === "desc" ? "bg-violet-100 dark:bg-violet-900/30" : ""
+          }`}
+        >
+          <ArrowDown className="mr-2 h-4 w-4" />
+          Year (New to Old)
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => handleSortChange("asc")}
+          className={`cursor-pointer font-semibold ${
+            currentSort === "asc" ? "bg-violet-100 dark:bg-violet-900/30" : ""
+          }`}
+        >
+          <ArrowUp className="mr-2 h-4 w-4" />
+          Year (Old to New)
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => handleSortChange("none")}
+          className={`cursor-pointer font-semibold ${
+            currentSort === "none" ? "bg-violet-100 dark:bg-violet-900/30" : ""
+          }`}
+        >
+          <ArrowUpDown className="mr-2 h-4 w-4" />
+          Default Order
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default SortComponent;

src/context/filterContext.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import React, { createContext, useContext, useState, useCallback, type ReactNode } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { type IPaper, type Filters } from "@/interface";
 import JSZip from "jszip";
@@ -27,25 +33,21 @@ interface FilterState {
 }
 
 interface FilterActions {
-
   setSelectedExams: (exams: string[]) => void;
   setSelectedSlots: (slots: string[]) => void;
   setSelectedYears: (years: string[]) => void;
   setSelectedSemesters: (semesters: string[]) => void;
   setSelectedCampuses: (campuses: string[]) => void;
   setSelectedAnswerKeyIncluded: (included: boolean) => void;
 
-
   setPapers: (papers: IPaper[]) => void;
   setFilteredPapers: (papers: IPaper[]) => void;
   setFilterOptions: (options: Filters | undefined) => void;
 
-
   setFiltersPulled: (pulled: boolean) => void;
   setAppliedFilters: (applied: boolean) => void;
   setCurrentPage: (page: number) => void;
 
-
   handleApplyFilters: (
     exams: string[],
     slots: string[],
@@ -62,7 +64,6 @@ interface FilterActions {
   noAppliedFilters: () => void;
   closeFilters: () => void;
 
-
   paginatedPapers: IPaper[];
   totalPages: number;
 }
@@ -76,15 +77,19 @@ interface FilterProviderProps {
   subject: string | null;
 }
 
-export const FilterProvider: React.FC<FilterProviderProps> = ({ children, subject }) => {
+export const FilterProvider: React.FC<FilterProviderProps> = ({
+  children,
+  subject,
+}) => {
   const router = useRouter();
 
   const [selectedExams, setSelectedExams] = useState<string[]>([]);
   const [selectedSlots, setSelectedSlots] = useState<string[]>([]);
   const [selectedYears, setSelectedYears] = useState<string[]>([]);
   const [selectedSemesters, setSelectedSemesters] = useState<string[]>([]);
   const [selectedCampuses, setSelectedCampuses] = useState<string[]>([]);
-  const [selectedAnswerKeyIncluded, setSelectedAnswerKeyIncluded] = useState<boolean>(false);
+  const [selectedAnswerKeyIncluded, setSelectedAnswerKeyIncluded] =
+    useState<boolean>(false);
 
   const [papers, setPapers] = useState<IPaper[]>([]);
   const [filteredPapers, setFilteredPapers] = useState<IPaper[]>([]);
@@ -128,7 +133,6 @@ export const FilterProvider: React.FC<FilterProviderProps> = ({ children, subjec
 
   const searchParams = useSearchParams();
   const handleDownloadSelected = useCallback(async () => {
-
     if (selectedPapers.length === 0) {
       toast.error("No papers selected for download.");
       return;
@@ -196,11 +200,20 @@ export const FilterProvider: React.FC<FilterProviderProps> = ({ children, subjec
       setSelectedAnswerKeyIncluded(anskey);
       setCurrentPage(1);
     },
-    [router, subject, setSelectedExams, setSelectedSlots, setSelectedYears, setSelectedCampuses, setSelectedSemesters, setSelectedAnswerKeyIncluded, setCurrentPage],
+    [
+      router,
+      subject,
+      setSelectedExams,
+      setSelectedSlots,
+      setSelectedYears,
+      setSelectedCampuses,
+      setSelectedSemesters,
+      setSelectedAnswerKeyIncluded,
+      setCurrentPage,
+    ],
   );
 
-
-  const paginatedPapers = (appliedFilters ? filteredPapers : papers).slice(
+  const paginatedPapers = filteredPapers.slice(
     (currentPage - 1) * papersPerPage,
     currentPage * papersPerPage,
   );
@@ -251,7 +264,9 @@ export const FilterProvider: React.FC<FilterProviderProps> = ({ children, subjec
     totalPages,
   };
 
-  return <FilterContext.Provider value={value}>{children}</FilterContext.Provider>;
+  return (
+    <FilterContext.Provider value={value}>{children}</FilterContext.Provider>
+  );
 };
 
 export const useFilters = (): FilterContextType => {