@@ -15,61 +15,17 @@ import Autoplay from "embla-carousel-autoplay";
15
15
import { chunkArray } from "@/util/utils" ;
16
16
import { Skeleton } from "@/components/ui/skeleton" ;
17
17
18
- function PapersCarousel ( {
19
- carouselType,
20
- } : {
21
- carouselType : "users" | "default" ;
22
- } ) {
18
+ function PapersCarousel ( ) {
23
19
const [ displayPapers , setDisplayPapers ] = useState < IUpcomingPaper [ ] > ( [ ] ) ;
24
20
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 ;
53
22
54
23
useEffect ( ( ) => {
55
24
async function fetchPapers ( ) {
56
25
try {
57
26
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 ) ;
73
29
} catch ( error ) {
74
30
console . error ( "Failed to fetch papers:" , error ) ;
75
31
} finally {
@@ -80,79 +36,68 @@ function PapersCarousel({
80
36
void fetchPapers ( ) ;
81
37
} , [ ] ) ;
82
38
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 ) ;
119
40
const plugins = [ Autoplay ( { delay : 8000 , stopOnInteraction : true } ) ] ;
120
41
121
42
return (
122
43
< div className = "px-4" >
123
44
< p className = "my-8 text-center font-play text-lg font-semibold" >
124
- { carouselType === "users" ? "Your Papers" : " Upcoming Papers" }
45
+ Upcoming Papers
125
46
</ p >
126
47
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 >
156
101
</ div >
157
102
) ;
158
103
}
0 commit comments