Skip to content

Commit 8fbc2d4

Browse files
shikhar-sahayshikhar-sahay
authored
Merge branch 'CodeChefVIT:prod' into prod
2 parents 8411f5f + 7f53d60 commit 8fbc2d4

10 files changed

Lines changed: 228 additions & 178 deletions

File tree

‎src/app/pinned/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Pinned = () => {
1111

1212
return (
1313
<div id="pinned" className="mt-5 flex flex-col justify-between">
14-
<h1 className="mx-auto my-8 hidden text-center font-vipnabd text-3xl font-extrabold md:block">
14+
<h1 className="mx-auto my-8 text-center font-vipnabd text-xl font-extrabold sm:text-2xl md:text-3xl">
1515
Pinned Subjects
1616
</h1>
1717
<div className="mb-3 flex w-full flex-col items-center gap-2 px-6">

‎src/components/CatalogueContent.tsx‎

Lines changed: 57 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ const CatalogueContent = () => {
5353
const [pinned, setPinned] = useState<boolean>(false);
5454
const [relatedSubjects, setRelatedSubjects] = useState<string[]>([]);
5555
const { courses } = useCourses();
56+
const [currentPage, setCurrentPage] = useState(1);
57+
const [papersPerPage, setPapersPerPage] = useState(12); // show 12 per page
5658

5759
// Fetch related subjects when subject changes
5860
useEffect(() => {
@@ -315,6 +317,15 @@ const CatalogueContent = () => {
315317
setSelectedPapers([]);
316318
}, []);
317319

320+
const paginatedPapers = (appliedFilters ? filteredPapers : papers).slice(
321+
(currentPage - 1) * papersPerPage,
322+
currentPage * papersPerPage,
323+
);
324+
325+
const totalPages = Math.ceil(
326+
(appliedFilters ? filteredPapers.length : papers.length) / papersPerPage,
327+
);
328+
318329
// Render loading state until mounted to avoid hydration mismatch
319330
if (!isMounted) {
320331
return <Loader />;
@@ -427,34 +438,59 @@ const CatalogueContent = () => {
427438
{loading ? (
428439
<Loader />
429440
) : papers.length > 0 ? (
430-
<div
431-
className={`grid h-fit grid-cols-1 gap-8 px-[30px] pb-[40px] md:grid-cols-2 lg:grid-cols-4 ${filtersPulled ? "blur-xl" : ""}`}
432-
>
433-
{appliedFilters ? (
434-
filteredPapers.length > 0 ? (
435-
filteredPapers.map((paper: IPaper) => (
441+
<div className="flex flex-col items-center">
442+
<div
443+
className={`grid h-fit grid-cols-1 gap-8 px-[30px] pb-[40px] md:grid-cols-2 lg:grid-cols-4 ${filtersPulled ? "blur-xl" : ""}`}
444+
>
445+
{appliedFilters ? (
446+
paginatedPapers.length > 0 ? (
447+
paginatedPapers.map((paper: IPaper) => (
448+
<Card
449+
key={paper._id}
450+
paper={paper}
451+
onSelect={handleSelectPaper}
452+
isSelected={selectedPapers.some(
453+
(p) => p._id === paper._id,
454+
)}
455+
/>
456+
))
457+
) : (
458+
<div className="col-span-full flex justify-center">
459+
<EmptyState />
460+
</div>
461+
)
462+
) : (
463+
papers.map((paper: IPaper) => (
436464
<Card
437465
key={paper._id}
438466
paper={paper}
439467
onSelect={handleSelectPaper}
440468
isSelected={selectedPapers.some((p) => p._id === paper._id)}
441469
/>
442470
))
443-
) : (
444-
<div className="col-span-full flex justify-center">
445-
<EmptyState />
446-
</div>
447-
)
448-
) : (
449-
papers.map((paper: IPaper) => (
450-
<Card
451-
key={paper._id}
452-
paper={paper}
453-
onSelect={handleSelectPaper}
454-
isSelected={selectedPapers.some((p) => p._id === paper._id)}
455-
/>
456-
))
457-
)}
471+
)}
472+
</div>
473+
<div className="mt-8 flex items-center justify-center gap-4">
474+
<Button
475+
variant="outline"
476+
disabled={currentPage === 1}
477+
onClick={() => setCurrentPage((prev) => prev - 1)}
478+
>
479+
Previous
480+
</Button>
481+
482+
<span className="text-gray-700 dark:text-gray-300">
483+
Page {currentPage} of {totalPages}
484+
</span>
485+
486+
<Button
487+
variant="outline"
488+
disabled={currentPage === totalPages}
489+
onClick={() => setCurrentPage((prev) => prev + 1)}
490+
>
491+
Next
492+
</Button>
493+
</div>
458494
</div>
459495
) : (
460496
<Error

‎src/components/PinButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function PinButton({
1515
<button
1616
type="submit"
1717
onClick={onToggle}
18-
className={`ml-2 flex items-center gap-2 rounded-full border border-[#3A3745] px-4 py-2 text-sm font-medium transition ${
18+
className={`flex items-center gap-2 rounded-full border border-[#3A3745] px-3 py-3 sm:px-4 sm:py-2 text-sm font-medium transition ${
1919
isPinned
2020
? "bg-purple-700 text-white hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-500"
2121
: "bg-[#e8e9ff] text-gray-700 hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"

‎src/components/PinnedPapersCarousel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ function PinnedPapersCarousel({
110110
const plugins = [Autoplay({ delay: 8000, stopOnInteraction: true })];
111111

112112
return (
113-
<div className="px-4">
113+
<div className="px-4 sm:mt-4">
114114
<div className="">
115115
{displayPapers.length > 0 ?
116116
<Carousel

‎src/components/RelatedPaper.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,14 @@ const RelatedPapers = () => {
6666
if (loading) return <Loader />;
6767
if (!currentPaper) return <div className="font-vipna">Paper not found.</div>;
6868

69+
if (relatedPapers.length === 0) {
70+
return <></>;
71+
}
72+
6973
return (
70-
<div className="font-vipna space-y-4 p-6">
74+
<div className="space-y-4 p-6 font-vipna">
7175
<div className="flex items-center justify-between">
72-
<h2 className="font-play my-6 text-3xl font-semibold">Explore More</h2>
76+
<h2 className="my-6 font-play text-3xl font-semibold">Explore More</h2>
7377

7478
<Link
7579
href={`/catalogue?subject=${encodeURIComponent(currentPaper.subject)}`}

‎src/components/Searchbar/pinned-searchbar.tsx‎

Lines changed: 22 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,7 @@ function PinnedSearchBar({
2424
const [searchText, setSearchText] = useState("");
2525
const [suggestions, setSuggestions] = useState<string[]>([]);
2626
const suggestionsRef = useRef<HTMLUListElement | null>(null);
27-
const floatingContainerRef = useRef<HTMLDivElement>(null);
2827
const [pinned, setPinned] = useState<boolean>(false);
29-
const [open, setOpen] = useState(false);
3028
const [showControls, setShowControls] = useState(false);
3129
const searchRef = useRef<HTMLInputElement>(null);
3230
const [fuzzy, setFuzzy] = useState(
@@ -76,19 +74,6 @@ function PinnedSearchBar({
7674
filtersNotPulled?.();
7775
};
7876

79-
const handleClickOutside = (event: MouseEvent) => {
80-
const target = event.target as Node;
81-
if (
82-
floatingContainerRef.current &&
83-
!floatingContainerRef.current.contains(target)
84-
) {
85-
setOpen(false);
86-
}
87-
88-
if (suggestionsRef.current && !suggestionsRef.current.contains(target)) {
89-
setSuggestions([]);
90-
}
91-
};
9277

9378
useEffect(() => {
9479
const handleAddClicked = () => {
@@ -156,7 +141,6 @@ function PinnedSearchBar({
156141
const handleRemoveAll = () => {
157142
localStorage.setItem("userSubjects", JSON.stringify([]));
158143
window.dispatchEvent(new Event("userSubjectsChanged"));
159-
setOpen(false);
160144
};
161145

162146
useEffect(() => {
@@ -167,22 +151,16 @@ function PinnedSearchBar({
167151
if (storedSubjects.length > 0) {
168152
setShowControls(true);
169153
}
170-
171-
document.addEventListener("mousedown", handleClickOutside);
172-
return () => {
173-
document.removeEventListener("mousedown", handleClickOutside);
174-
};
175154
}, []);
176155

177156
return (
178157
<div className="w-full font-play">
179158
<div className="flex justify-center">
180-
<div className="w-full max-w-xl">
159+
<div className="w-full max-w-2xl">
181160
<form
182161
onSubmit={(e) => {
183162
e.preventDefault();
184163
handlePinToggle();
185-
if (searchText.trim() !== "") setOpen(false);
186164
}}
187165
>
188166
<div className="flex items-center gap-2">
@@ -220,68 +198,33 @@ function PinnedSearchBar({
220198
</ul>
221199
)}
222200
</div>
223-
224-
<div className="hidden md:block">
225-
<PinButton
226-
isPinned={pinned}
227-
onToggle={handlePinToggle}
228-
disabled={!showControls || searchText.trim() === ""}
229-
/>
230-
</div>
231-
232-
<div
233-
ref={floatingContainerRef}
234-
className={`md:hidden ${showControls ? "block" : "hidden"}`}
201+
<PinButton
202+
isPinned={pinned}
203+
onToggle={handlePinToggle}
204+
disabled={!showControls || searchText.trim() === ""}
205+
/>
206+
{displayPapers && <button
207+
onClick={() => {
208+
handleRemoveAll();
209+
}}
210+
className="items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] hidden sm:flex"
235211
>
236-
<NavDropdownButton
237-
isOpen={open}
238-
onClick={() => setOpen((prev) => !prev)}
239-
variant="pinned"
240-
/>
241212

242-
<div className={`${open ? "block" : "hidden"}`}>
243-
<FloatingControls>
244-
<PinButton
245-
isPinned={pinned}
246-
onToggle={() => {
247-
handlePinToggle();
248-
setOpen(false);
249-
}}
250-
disabled={!showControls || searchText.trim() === ""}
251-
/>
252-
{displayPapers && (
253-
<button
254-
onClick={() => {
255-
handleRemoveAll();
256-
setOpen(false);
257-
}}
258-
className="flex items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
259-
>
260-
Remove All <X className="h-4 w-4" />
261-
</button>
262-
)}
263-
</FloatingControls>
264-
</div>
265-
</div>
213+
Remove All <X className="h-4 w-4" />
214+
</button>}
266215
</div>
267216
</form>
268217
</div>
269218
</div>
270-
{displayPapers && (
271-
<div className="mt-2 hidden w-full md:block">
272-
<div className="ml-auto w-fit">
273-
<button
274-
onClick={() => {
275-
handleRemoveAll();
276-
setOpen(false);
277-
}}
278-
className="flex items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
279-
>
280-
Remove All <X className="h-4 w-4" />
281-
</button>
282-
</div>
283-
</div>
284-
)}
219+
220+
{displayPapers && <button
221+
onClick={() => {
222+
handleRemoveAll();
223+
}}
224+
className="sm:hidden mt-4 flex items-center gap-2 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-3 py-1.5 text-sm font-semibold text-gray-700 transition hover:bg-slate dark:bg-black dark:text-white dark:hover:bg-[#1A1823]"
225+
>
226+
Remove All <X className="h-4 w-4" />
227+
</button>}
285228
</div>
286229
);
287230
}

‎src/components/bannerDismiss.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default function Banner({
5252

5353
<button
5454
onClick={closeBanner}
55-
className="absolute right-4 top-6 transition hover:opacity-75 sm:static sm:self-start"
55+
className="absolute right-4 transition hover:opacity-75 sm:static sm:self-start"
5656
aria-label="Dismiss banner"
5757
style={{ color: accentColor }}
5858
>

0 commit comments

Comments
 (0)