1+ import React , { useEffect , useState } from 'react' ;
2+ import { useAuth } from "../context/authContext" ;
3+ import { User } from "../types" ;
4+ import "./SearchModal.css"
5+
6+ interface SearchModalProps {
7+ isOpen : boolean ;
8+ setOpen : React . Dispatch < React . SetStateAction < boolean > > ;
9+ circleId : string ;
10+ }
11+
12+ function SearchModal ( { isOpen, setOpen, circleId } : SearchModalProps ) {
13+ const authContext = useAuth ( ) ;
14+ if ( ! authContext ) {
15+ throw new Error ( "useAuth must be used within an AuthProvider" ) ;
16+ }
17+ const { getAccessToken } = authContext ;
18+
19+ const [ users , setUsers ] = useState < User [ ] > ( [ ] ) ;
20+ useEffect ( ( ) => {
21+ async function fetchInviteUsers ( ) {
22+ const token = await getAccessToken ( ) ;
23+ const headers = {
24+ 'Authorization' : `Bearer ${ token } ,
25+ } ;
26+ const body = {
27+ circle_id : circleId ,
28+ } ;
29+ fetch ( 'http://localhost:8000/api/circles/invite' , {
30+ method : 'POST' ,
31+ headers : headers ,
32+ body : JSON . stringify ( body ) ,
33+ } )
34+ . then ( async ( response ) => {
35+ const data = await response . json ( ) ;
36+ if ( ! response . ok ) {
37+ console . log ( "Error:" , data ) ;
38+ }
39+ else {
40+ console . log ( "Data:" , data ) ;
41+ const mappedUsers = data . map ( ( user : any ) => ( {
42+ id : user . id ,
43+ username : user . username ,
44+ checked : false
45+ } ) ) ;
46+ setUsers ( mappedUsers ) ;
47+ }
48+ } )
49+ . catch ( error => {
50+ console . log ( error ) ;
51+ } ) ;
52+ }
53+ fetchInviteUsers ( ) ;
54+ } , [ circleId ] ) ;
55+
56+ async function handleSubmit ( e : React . FormEvent < HTMLFormElement > ) {
57+ e . preventDefault ( ) ;
58+ const invitedUsers = users . filter ( user => user . checked ) . map ( user => user . id ) ;
59+ const token = await getAccessToken ( ) ;
60+ const headers = {
61+ 'Authorization' : `Bearer ${ token } ,
62+ } ;
63+ const body = {
64+ circle_id : circleId ,
65+ users : invitedUsers ,
66+ } ;
67+ console . log ( body ) ;
68+ fetch ( 'http://localhost:8000/api/circles/search' , {
69+ method : 'POST' ,
70+ headers : headers ,
71+ body : JSON . stringify ( body ) ,
72+ } )
73+ . then ( async ( response ) => {
74+ const data = await response . json ( ) ;
75+ if ( ! response . ok ) {
76+ console . log ( "Error:" , data ) ;
77+ }
78+ else {
79+ console . log ( "Data:" , data ) ;
80+ setOpen ( false ) ;
81+ }
82+ } )
83+ . catch ( error => {
84+ console . log ( error ) ;
85+ } ) ;
86+ } ;
87+
88+ const [ inviteAll , setInviteAll ] = useState ( false ) ;
89+
90+ if ( ! isOpen ) return null ;
91+
92+ return (
93+ < div className = "search-modal mx-auto max-w-screen-xl relative z-10 focus:outline-none" >
94+ < form action = "#" className = "mx-auto mb-4 mt-6 max-w-md space-y-4" onSubmit = { handleSubmit } >
95+ < div className = "search w-full relative rounded-md" >
96+ < input
97+ className = "search-input w-full border-gray-200 p-2 text-sm shadow-sm text-black"
98+ placeholder = "Search text"
99+ id = "circleName"
100+ />
101+ < svg xmlns = "http://www.w3.org/2000/svg"
102+ className = "size-11 search-icon hover:cursor-pointer"
103+ fill = "hsl(0, 0%, 95%)"
104+ viewBox = "0 0 24 24"
105+ stroke = "hsl(0, 0%, 95%)"
106+ strokeWidth = "1" >
107+ < path d = "M 9 2 C 5.1458514 2 2 5.1458514 2 9 C 2 12.854149 5.1458514 16 9 16 C 10.747998 16 12.345009 15.348024 13.574219 14.28125 L 14 14.707031 L 14 16 L 20 22 L 22 20 L 16 14 L 14.707031 14 L 14.28125 13.574219 C 15.348024 12.345009 16 10.747998 16 9 C 16 5.1458514 12.854149 2 9 2 z M 9 4 C 11.773268 4 14 6.2267316 14 9 C 14 11.773268 11.773268 14 9 14 C 6.2267316 14 4 11.773268 4 9 C 4 6.2267316 6.2267316 4 9 4 z" > </ path >
108+ </ svg >
109+ </ div >
110+ < div className = "flex items-center justify-between" >
111+ < button
112+ type = "submit"
113+ className = "inline-block rounded-lg bg-blue-500 px-5 py-3 text-sm font-medium text-white"
114+ >
115+ Submit
116+ </ button >
117+ </ div >
118+ </ form >
119+ </ div >
120+ ) ;
121+ }
122+ export default SearchModal ;
0 commit comments