11import { useEffect , useState } from 'react' ;
2+ import UploadModal from './Upload' ;
23
34export default function LabList ( { subjectId } ) {
45 const [ labs , setLabs ] = useState ( [ ] ) ;
56 const [ title , setTitle ] = useState ( '' ) ;
6- const [ file , setFile ] = useState ( null ) ;
7+ const [ modalOpen , setmodalOpen ] = useState ( false ) ;
78
89 const load = ( ) => fetch ( `http://localhost:4000/subjects/${ subjectId } )
910 . then ( r => r . json ( ) )
1011 . then ( res => setLabs ( res . data ) ) ;
1112
1213 useEffect ( load , [ subjectId ] ) ;
1314
14- const add = async e => {
15- e . preventDefault ( ) ;
16- const fd = new FormData ( ) ;
17- fd . append ( 'title' , title ) ;
18- fd . append ( 'file' , file ) ;
15+ const add = async ( uploadTitle , cloudinaryUrl ) => {
16+ const payload = {
17+ title : uploadTitle ,
18+ url : cloudinaryUrl
19+ } ;
20+
1921 await fetch ( `http://localhost:4000/subjects/${ subjectId } , {
20- method :'POST' ,
21- headers : { 'x-user-id' : 1 , 'x-user-role' : 'USER' } ,
22- body : fd
22+ method : 'POST' ,
23+ headers : {
24+ 'x-user-id' : 1 ,
25+ 'x-user-role' : 'USER' ,
26+ 'Content-Type' : 'application/json'
27+ } ,
28+ body : JSON . stringify ( payload )
2329 } ) ;
24- setTitle ( '' ) ; setFile ( null ) ;
30+ setTitle ( '' ) ;
2531 load ( ) ;
2632 } ;
2733
@@ -30,23 +36,42 @@ export default function LabList({ subjectId }) {
3036 load ( ) ;
3137 } ;
3238
39+ const handleUploadComplete = async ( { url, public_id } ) => {
40+ await add ( public_id , url ) ;
41+ setTitle ( "" )
42+ setmodalOpen ( false )
43+ }
44+
45+ const handleButtonClick = ( ) => {
46+ if ( title . trim ( ) === "" ) {
47+ alert ( "Please enter a title before uploading." )
48+ return
49+ }
50+ setmodalOpen ( true )
51+ }
52+
3353 return (
3454 < div >
3555 < h2 > Lab Materials</ h2 >
3656 < form onSubmit = { add } >
3757 < input value = { title } onChange = { e => setTitle ( e . target . value ) } placeholder = "Title" required />
38- < input type = "file" onChange = { e => setFile ( e . target . files [ 0 ] ) } required />
39- < button type = "submit" > Upload Lab</ button >
58+ < button type = "button" onClick = { handleButtonClick } disabled = { title . trim ( ) === "" } > Upload Lab</ button >
59+ < UploadModal
60+ open = { modalOpen }
61+ onClose = { ( ) => setmodalOpen ( false ) }
62+ onComplete = { handleUploadComplete }
63+ title = { title }
64+ />
4065 </ form >
4166 < ul >
4267 { labs . map ( l => (
4368 < li key = { l . id } >
44- < a href = { `http://localhost:4000 ${ l . url } ` } target = "_blank" > { l . title } </ a >
69+ < a href = { l . url } target = "_blank" rel = "noopener noreferrer "> { l . title } </ a >
4570 < span > by { l . user . name } </ span >
4671 < button onClick = { ( ) => del ( l . id ) } > Delete</ button >
4772 </ li >
4873 ) ) }
4974 </ ul >
5075 </ div >
5176 ) ;
52- }
77+ }
0 commit comments