Skip to content

Commit 744299f

Browse files
abhitrueprogrammerabhitrueprogrammer
authored
Merge pull request #223 from shikhar-sahay/starredPapers
Moved searchbar from sidebar to navbar
2 parents d144ac8 + 161e35e commit 744299f

File tree

5 files changed

+243
-242
lines changed

5 files changed

+243
-242
lines changed

‎src/components/Navbar.tsx

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,24 @@ import ModeToggle from "@/components/toggle-theme";
66
import Link from "next/link";
77
import { usePathname } from "next/navigation";
88
import { ArrowDownLeftIcon } from "lucide-react";
9+
import SearchbarChild from "./Searchbar/searchbar-child";
10+
import { fetchSubjects } from "./Searchbar/searchbar";
11+
import { useEffect, useState } from "react";
912

1013
function Navbar() {
1114
const pathname = usePathname();
15+
const [subjects, setSubjects] = useState<string[]>([]);
16+
17+
useEffect(() => {
18+
const getSubjects = async () => {
19+
const subs = await fetchSubjects();
20+
setSubjects(subs);
21+
};
22+
getSubjects();
23+
}, []);
1224

1325
return (
14-
<div className="sticky top-0 z-10 flex h-[85px] w-full items-center justify-between gap-x-3 overflow-hidden bg-[#B2B8FF] px-2 py-6 dark:bg-[#130E1F] md:px-12">
26+
<div className="sticky top-0 z-10 flex h-[85px] w-full items-center justify-between gap-x-3 bg-[#B2B8FF] px-2 py-6 dark:bg-[#130E1F] md:px-12">
1527
<div className="flex items-center gap-x-2 md:w-auto">
1628
<a
1729
href="https://www.codechefvit.com/"
@@ -32,6 +44,15 @@ function Navbar() {
3244
Papers
3345
</Link>
3446
</div>
47+
48+
{pathname === "/catalogue" && (
49+
<div className="hidden flex-1 justify-center md:flex">
50+
<div className="w-[60%] max-w-[500px]">
51+
<SearchbarChild initialSubjects={subjects} />
52+
</div>
53+
</div>
54+
)}
55+
3556
<div className="md:w/[20%] flex items-center justify-end gap-x-2">
3657
<div className="scale-75 sm:scale-100">
3758
<ModeToggle />
@@ -52,4 +73,4 @@ function Navbar() {
5273
);
5374
}
5475

55-
export default Navbar;
76+
export default Navbar;

‎src/components/PapersCarousel.tsx

Lines changed: 69 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { useEffect, useState } from "react";
44
import axios from "axios";
55
import { type IUpcomingPaper } from "@/interface";
6-
import Loader from "./ui/loader";
76
import UpcomingPaper from "./UpcomingPaper";
87
import {
98
Carousel,
@@ -14,15 +13,12 @@ import {
1413
} from "@/components/ui/carousel";
1514
import Autoplay from "embla-carousel-autoplay";
1615
import { chunkArray } from "@/util/utils";
16+
import { Skeleton } from "@/components/ui/skeleton";
1717

18-
function PapersCarousel({
19-
carouselType,
20-
}: {
21-
carouselType: "users" | "default";
22-
}) {
18+
function PapersCarousel() {
2319
const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
2420
const [isLoading, setIsLoading] = useState(true);
25-
const [chunkSize, setChunkSize] = useState<number>(4);
21+
const [chunkSize, setChunkSize] = useState<number>(4); // dynamic chunk size
2622

2723
useEffect(() => {
2824
const handleResize = () => {
@@ -33,6 +29,7 @@ function PapersCarousel({
3329
}
3430
};
3531

32+
// preload sample subjects
3633
localStorage.setItem(
3734
"userSubjects",
3835
JSON.stringify([
@@ -41,35 +38,20 @@ function PapersCarousel({
4138
"Design and Analysis of Algorithms [MCSE502L]",
4239
"Complex Variables and Linear Algebra [BMAT201L]",
4340
"Differential Equations and Transforms [BMAT102L]",
44-
]),
41+
])
4542
);
4643

47-
handleResize();
44+
handleResize(); // initialize
4845
window.addEventListener("resize", handleResize);
49-
50-
return () => {
51-
window.removeEventListener("resize", handleResize);
52-
};
46+
return () => window.removeEventListener("resize", handleResize);
5347
}, []);
5448

55-
const chunkedPapers = chunkArray(displayPapers, chunkSize);
56-
5749
useEffect(() => {
5850
async function fetchPapers() {
5951
try {
6052
setIsLoading(true);
61-
if (carouselType === "users") {
62-
const storedSubjects = JSON.parse(
63-
localStorage.getItem("userSubjects") ?? "[]"
64-
) as string[];
65-
const response = await axios.post<IUpcomingPaper []>("/api/user-papers", storedSubjects);
66-
setDisplayPapers(response.data);
67-
} else {
68-
const response = await axios.get<IUpcomingPaper[]>(
69-
"/api/upcoming-papers",
70-
);
71-
setDisplayPapers(response.data);
72-
}
53+
const response = await axios.get<IUpcomingPaper[]>("/api/upcoming-papers");
54+
setDisplayPapers(response.data);
7355
} catch (error) {
7456
console.error("Failed to fetch papers:", error);
7557
} finally {
@@ -80,52 +62,75 @@ function PapersCarousel({
8062
void fetchPapers();
8163
}, []);
8264

83-
if (isLoading) {
84-
return <Loader prop="m-10" />;
85-
}
86-
65+
const chunkedPapers = chunkArray(displayPapers, chunkSize);
8766
const plugins = [Autoplay({ delay: 8000, stopOnInteraction: true })];
8867

8968
return (
9069
<div className="px-4">
9170
<p className="my-8 text-center font-play text-lg font-semibold">
92-
{carouselType === "users" ? "Your Papers" : "Upcoming Papers"}
71+
Upcoming Papers
9372
</p>
9473

95-
<div className="">
96-
<Carousel
97-
opts={{
98-
align: "start",
99-
loop: true,
100-
}}
101-
plugins={plugins}
102-
className="w-full"
103-
>
104-
<div className="relative mt-4 flex justify-end gap-4">
105-
<CarouselPrevious className="relative" />
106-
<CarouselNext className="relative" />
107-
</div>
108-
<CarouselContent>
109-
{chunkedPapers.map((paperGroup, index) => {
110-
return (
111-
<CarouselItem
112-
key={`carousel-item-${index}`}
113-
className="grid grid-cols-2 grid-rows-2 gap-4 md:grid-cols-4 lg:auto-rows-fr"
74+
<Carousel
75+
opts={{ align: "start", loop: true }}
76+
plugins={plugins}
77+
className="w-full"
78+
>
79+
<div className="relative mt-4 flex justify-end gap-4">
80+
<CarouselPrevious className="relative" />
81+
<CarouselNext className="relative" />
82+
</div>
83+
84+
<CarouselContent>
85+
{isLoading ? (
86+
<CarouselItem
87+
className={`grid ${
88+
chunkSize === 4
89+
? "grid-cols-2 grid-rows-2"
90+
: "grid-cols-4"
91+
} gap-4 lg:auto-rows-fr`}
92+
>
93+
{Array.from({ length: chunkSize }).map((_, idx) => (
94+
<div
95+
key={idx}
96+
className="cursor-pointer rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] text-black shadow-lg transition duration-150 ease-in-out hover:bg-[#EFEAFF] dark:border-[#36266D] dark:bg-[#171720] dark:text-white hover:dark:bg-[#262635]"
11497
>
115-
{paperGroup.map((paper, subIndex) => (
116-
<div key={subIndex} className="h-full">
117-
<UpcomingPaper
118-
subject={paper.subject}
119-
slots={paper.slots}
120-
/>
98+
<div className="border-b-2 border-[#453D60] p-2">
99+
<Skeleton className="h-6 w-24 rounded-md" />
100+
</div>
101+
<div className="flex flex-col justify-between p-4">
102+
<Skeleton className="mb-4 h-6 w-32 rounded-md" />
103+
<div className="flex gap-2">
104+
<Skeleton className="h-7 w-16 rounded-full" />
105+
<Skeleton className="h-7 w-16 rounded-full" />
121106
</div>
122-
))}
123-
</CarouselItem>
124-
);
125-
})}
126-
</CarouselContent>
127-
</Carousel>
128-
</div>
107+
</div>
108+
</div>
109+
))}
110+
</CarouselItem>
111+
) : (
112+
chunkedPapers.map((paperGroup, index) => (
113+
<CarouselItem
114+
key={`carousel-item-${index}`}
115+
className={`grid ${
116+
chunkSize === 4
117+
? "grid-cols-2 grid-rows-2"
118+
: "grid-cols-4"
119+
} gap-4 lg:auto-rows-fr`}
120+
>
121+
{paperGroup.map((paper, subIndex) => (
122+
<div key={subIndex} className="h-full">
123+
<UpcomingPaper
124+
subject={paper.subject}
125+
slots={paper.slots}
126+
/>
127+
</div>
128+
))}
129+
</CarouselItem>
130+
))
131+
)}
132+
</CarouselContent>
133+
</Carousel>
129134
</div>
130135
);
131136
}

0 commit comments

Comments
 (0)