Skip to content

Commit 9f34607

Browse files
committed
patch:removed your papers section and fixed shifting for cls
1 parent 6f463fc commit 9f34607

File tree

2 files changed

+59
-115
lines changed

2 files changed

+59
-115
lines changed

src/components/PapersCarousel.tsx

Lines changed: 59 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -15,61 +15,17 @@ import Autoplay from "embla-carousel-autoplay";
1515
import { chunkArray } from "@/util/utils";
1616
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);
26-
27-
useEffect(() => {
28-
const handleResize = () => {
29-
if (window.innerWidth < 640) {
30-
setChunkSize(4);
31-
} else {
32-
setChunkSize(8);
33-
}
34-
};
35-
36-
localStorage.setItem(
37-
"userSubjects",
38-
JSON.stringify([
39-
"Information Security [CBS3002]",
40-
"Foundations of Data Analytics [BCSE351E]",
41-
"Design and Analysis of Algorithms [MCSE502L]",
42-
"Complex Variables and Linear Algebra [BMAT201L]",
43-
"Differential Equations and Transforms [BMAT102L]",
44-
])
45-
);
46-
47-
handleResize();
48-
window.addEventListener("resize", handleResize);
49-
return () => window.removeEventListener("resize", handleResize);
50-
}, []);
51-
52-
const chunkedPapers = chunkArray(displayPapers, chunkSize);
21+
const chunkSize = 8;
5322

5423
useEffect(() => {
5524
async function fetchPapers() {
5625
try {
5726
setIsLoading(true);
58-
if (carouselType === "users") {
59-
const storedSubjects = JSON.parse(
60-
localStorage.getItem("userSubjects") ?? "[]"
61-
) as string[];
62-
const response = await axios.post<IUpcomingPaper[]>(
63-
"/api/user-papers",
64-
storedSubjects
65-
);
66-
setDisplayPapers(response.data);
67-
} else {
68-
const response = await axios.get<IUpcomingPaper[]>(
69-
"/api/upcoming-papers"
70-
);
71-
setDisplayPapers(response.data);
72-
}
27+
const response = await axios.get<IUpcomingPaper[]>("/api/upcoming-papers");
28+
setDisplayPapers(response.data);
7329
} catch (error) {
7430
console.error("Failed to fetch papers:", error);
7531
} finally {
@@ -80,79 +36,68 @@ function PapersCarousel({
8036
void fetchPapers();
8137
}, []);
8238

83-
if (isLoading) {
84-
return (
85-
<div className="px-4">
86-
<p className="my-8 text-center font-play text-lg font-semibold">
87-
{carouselType === "users" ? "Your Papers" : "Upcoming Papers"}
88-
</p>
89-
90-
<div
91-
className={`${
92-
carouselType === "users"
93-
? "grid grid-cols-4"
94-
: "grid grid-cols-2 grid-rows-2 md:grid-cols-4"
95-
} gap-4 lg:auto-rows-fr`}
96-
>
97-
{Array.from({ length: chunkSize }).map((_, index) => (
98-
<div
99-
key={index}
100-
className="h-full rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] shadow-lg dark:border-[#36266D] dark:bg-[#171720]"
101-
>
102-
<div className="border-b-2 border-[#453D60] p-2">
103-
<Skeleton className="h-8 w-24 rounded-md" />
104-
</div>
105-
<div className="flex flex-col justify-between p-4">
106-
<Skeleton className="mb-4 h-8 w-40 rounded-md" />
107-
<div className="flex gap-2">
108-
<Skeleton className="h-7 w-16 rounded-full" />
109-
<Skeleton className="h-7 w-16 rounded-full" />
110-
</div>
111-
</div>
112-
</div>
113-
))}
114-
</div>
115-
</div>
116-
);
117-
}
118-
39+
const chunkedPapers = chunkArray(displayPapers, chunkSize);
11940
const plugins = [Autoplay({ delay: 8000, stopOnInteraction: true })];
12041

12142
return (
12243
<div className="px-4">
12344
<p className="my-8 text-center font-play text-lg font-semibold">
124-
{carouselType === "users" ? "Your Papers" : "Upcoming Papers"}
45+
Upcoming Papers
12546
</p>
12647

127-
<div>
128-
<Carousel
129-
opts={{ align: "start", loop: true }}
130-
plugins={plugins}
131-
className="w-full"
132-
>
133-
<div className="relative mt-4 flex justify-end gap-4">
134-
<CarouselPrevious className="relative" />
135-
<CarouselNext className="relative" />
136-
</div>
137-
<CarouselContent>
138-
{chunkedPapers.map((paperGroup, index) => (
139-
<CarouselItem
140-
key={`carousel-item-${index}`}
141-
className="grid grid-cols-2 grid-rows-2 gap-4 md:grid-cols-4 lg:auto-rows-fr"
142-
>
143-
{paperGroup.map((paper, subIndex) => (
144-
<div key={subIndex} className="h-full">
145-
<UpcomingPaper
146-
subject={paper.subject}
147-
slots={paper.slots}
148-
/>
149-
</div>
150-
))}
151-
</CarouselItem>
152-
))}
153-
</CarouselContent>
154-
</Carousel>
155-
</div>
48+
<Carousel
49+
opts={{ align: "start", loop: true }}
50+
plugins={plugins}
51+
className="w-full"
52+
>
53+
<div className="relative mt-4 flex justify-end gap-4">
54+
<CarouselPrevious className="relative" />
55+
<CarouselNext className="relative" />
56+
</div>
57+
58+
<CarouselContent>
59+
{isLoading
60+
? Array.from({ length: 1 }).map((_, index) => (
61+
<CarouselItem
62+
key={`skeleton-carousel-item-${index}`}
63+
className="grid grid-cols-2 grid-rows-2 gap-4 md:grid-cols-4 lg:auto-rows-fr"
64+
>
65+
{Array.from({ length: chunkSize }).map((_, idx) => (
66+
<div
67+
key={idx}
68+
className="h-full rounded-sm border-2 border-[#734DFF] bg-[#FFFFFF] shadow-lg dark:border-[#36266D] dark:bg-[#171720]"
69+
>
70+
<div className="border-b-2 border-[#453D60] p-2">
71+
<Skeleton className="h-8 w-24 rounded-md" />
72+
</div>
73+
<div className="flex flex-col justify-between p-4">
74+
<Skeleton className="mb-4 h-8 w-40 rounded-md" />
75+
<div className="flex gap-2">
76+
<Skeleton className="h-7 w-16 rounded-full" />
77+
<Skeleton className="h-7 w-16 rounded-full" />
78+
</div>
79+
</div>
80+
</div>
81+
))}
82+
</CarouselItem>
83+
))
84+
: chunkedPapers.map((paperGroup, index) => (
85+
<CarouselItem
86+
key={`carousel-item-${index}`}
87+
className="grid grid-cols-2 grid-rows-2 gap-4 md:grid-cols-4 lg:auto-rows-fr"
88+
>
89+
{paperGroup.map((paper, subIndex) => (
90+
<div key={subIndex} className="h-full">
91+
<UpcomingPaper
92+
subject={paper.subject}
93+
slots={paper.slots}
94+
/>
95+
</div>
96+
))}
97+
</CarouselItem>
98+
))}
99+
</CarouselContent>
100+
</Carousel>
156101
</div>
157102
);
158103
}

src/components/screens/Hero.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ const Hero = () => {
1111
<div className="px-6">
1212
<SearchBar />
1313
</div>
14-
<PapersCarousel carouselType="users" />
1514
<PapersCarousel carouselType="default" />
1615
{/* <div className="hidden lg:flex flex-col items-center whitespace-nowrap text-center">
1716
<h1 className="font-play text-md">Learn More</h1>

0 commit comments

Comments
 (0)