@@ -6,92 +6,100 @@ import { useParams } from "next/navigation";
66import { type IPaper , type Filters } from "@/interface" ;
77import Card from "@/components/Card" ;
88import Loader from "@/components/ui/loader" ;
9+ import { Button } from "./ui/button" ;
910
1011const RelatedPapers = ( ) => {
11- const params = useParams ( ) ;
12- const id = params ?. id as string ;
13-
14- const [ currentPaper , setCurrentPaper ] = useState < IPaper | null > ( null ) ;
15- const [ relatedPapers , setRelatedPapers ] = useState < IPaper [ ] > ( [ ] ) ;
16- const [ loading , setLoading ] = useState ( true ) ;
17-
18- useEffect ( ( ) => {
19- const fetchData = async ( ) => {
20- try {
21- const getpaper = await axios . get < IPaper > ( `/api/paper-by-id/${ id } ` ) ;
22- const paper = getpaper . data ;
23- setCurrentPaper ( paper ) ;
24-
25- const allPapersBySubject = await axios . get < Filters > ( "/api/papers" , {
26- params : { subject : paper . subject } ,
27- } ) ;
28-
29- const all = allPapersBySubject . data . papers ;
30-
31- const sameExam = all . filter (
32- ( p ) => p . _id !== paper . _id && p . exam === paper . exam
33- ) . slice ( 0 , 4 ) ;
34-
35- let finalPapers = [ ...sameExam ] ;
36-
37- if ( finalPapers . length < 4 ) {
38- const additional = all . filter (
39- ( p ) =>
40- p . _id !== paper . _id &&
41- p . exam !== paper . exam &&
42- ! finalPapers . some ( ( fp ) => fp . _id === p . _id )
43- ) ;
44-
45- finalPapers = [ ...finalPapers , ...additional . slice ( 0 , 4 - finalPapers . length ) ] ;
46- }
47-
48- setRelatedPapers ( finalPapers ) ;
49- } catch ( err ) {
50- console . error ( "Error fetching related papers:" , err ) ;
51- } finally {
52- setLoading ( false ) ;
53- }
54- } ;
55-
56- if ( id ) {
57- void fetchData ( ) ;
12+ const params = useParams ( ) ;
13+ const id = params ?. id as string ;
14+
15+ const [ currentPaper , setCurrentPaper ] = useState < IPaper | null > ( null ) ;
16+ const [ relatedPapers , setRelatedPapers ] = useState < IPaper [ ] > ( [ ] ) ;
17+ const [ loading , setLoading ] = useState ( true ) ;
18+
19+ useEffect ( ( ) => {
20+ const fetchData = async ( ) => {
21+ try {
22+ const getpaper = await axios . get < IPaper > ( `/api/paper-by-id/${ id } ` ) ;
23+ const paper = getpaper . data ;
24+ setCurrentPaper ( paper ) ;
25+
26+ const allPapersBySubject = await axios . get < Filters > ( "/api/papers" , {
27+ params : { subject : paper . subject } ,
28+ } ) ;
29+
30+ const all = allPapersBySubject . data . papers ;
31+
32+ const sameExam = all
33+ . filter ( ( p ) => p . _id !== paper . _id && p . exam === paper . exam )
34+ . slice ( 0 , 4 ) ;
35+
36+ let finalPapers = [ ...sameExam ] ;
37+
38+ if ( finalPapers . length < 4 ) {
39+ const additional = all . filter (
40+ ( p ) =>
41+ p . _id !== paper . _id &&
42+ p . exam !== paper . exam &&
43+ ! finalPapers . some ( ( fp ) => fp . _id === p . _id ) ,
44+ ) ;
45+
46+ finalPapers = [
47+ ...finalPapers ,
48+ ...additional . slice ( 0 , 4 - finalPapers . length ) ,
49+ ] ;
5850 }
59- } , [ id ] ) ;
60-
61-
62- if ( loading ) return < Loader /> ;
63- if ( ! currentPaper ) return < div className = "vipna" > Paper not found.</ div > ;
64-
65- return (
66- < div className = "p-6 space-y-4 vipna" >
67- < div className = "flex justify-between items-center" >
68- < h2 className = "text-3xl play font-semibold my-6" > Explore More</ h2 >
69- < Link
70- href = { `/catalogue?subject=${ encodeURIComponent ( currentPaper . subject ) } ` }
71- passHref
72- >
73- < button className = "border dark:border-[#7480FF] dark:bg-[#171720] border-[#734DFF] bg-[#ffffff] hover:dark:bg-[#21212d] p-3 play rounded-sm text-xl" >
74- View All
75- </ button >
76- </ Link >
7751
78- </ div >
79- { relatedPapers . length === 0 ? (
80- < p className = "play" > No related papers found.</ p >
81- ) : (
82- < div className = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" >
83- { relatedPapers . map ( ( paper ) => (
84- < Card
85- key = { paper . _id }
86- paper = { paper }
87- onSelect = { ( ) => { "" } }
88- isSelected = { false }
89- />
90- ) ) }
91- </ div >
92- ) }
52+ setRelatedPapers ( finalPapers ) ;
53+ } catch ( err ) {
54+ console . error ( "Error fetching related papers:" , err ) ;
55+ } finally {
56+ setLoading ( false ) ;
57+ }
58+ } ;
59+
60+ if ( id ) {
61+ void fetchData ( ) ;
62+ }
63+ } , [ id ] ) ;
64+
65+ if ( loading ) return < Loader /> ;
66+ if ( ! currentPaper ) return < div className = "vipna" > Paper not found.</ div > ;
67+
68+ return (
69+ < div className = "vipna space-y-4 p-6" >
70+ < div className = "flex items-center justify-between" >
71+ < h2 className = "play my-6 text-3xl font-semibold" > Explore More</ h2 >
72+
73+ < Link
74+ href = { `/catalogue?subject=${ encodeURIComponent ( currentPaper . subject ) } ` }
75+ passHref
76+ >
77+ < Button
78+ variant = "outline"
79+ className = "flex gap-2 border-2 border-black font-sans font-semibold hover:bg-slate-800 hover:text-white dark:border-[#434dba] dark:hover:border-white dark:hover:bg-slate-900"
80+ >
81+ View All
82+ </ Button >
83+ </ Link >
84+ </ div >
85+ { relatedPapers . length === 0 ? (
86+ < p className = "play" > No related papers found.</ p >
87+ ) : (
88+ < div className = "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4" >
89+ { relatedPapers . map ( ( paper ) => (
90+ < Card
91+ key = { paper . _id }
92+ paper = { paper }
93+ onSelect = { ( ) => {
94+ ( "" ) ;
95+ } }
96+ isSelected = { false }
97+ />
98+ ) ) }
9399 </ div >
94- ) ;
100+ ) }
101+ </ div >
102+ ) ;
95103} ;
96104
97105export default RelatedPapers ;
0 commit comments