@@ -24,24 +24,23 @@ import {Header} from './lib/header';
2424import { RequestHeader } from './components/headerform' ;
2525
2626class Request {
27- Method : string ;
28- URL : string ;
29- Headers : Header ;
30- Body : string ;
27+ method : string ;
28+ url : string ;
29+ headers : { [ key : string ] : string } ;
30+ body : string ;
3131
3232 constructor ( source : any = { } ) {
3333 if ( 'string' === typeof source ) source = JSON . parse ( source ) ;
34- this . Method = source [ "Method" ] ;
35- this . URL = source [ "URL " ] ;
36- this . Headers = source [ "Headers " ] ;
37- this . Body = source [ "Body " ] ;
34+ this . method = source [ "Method" ] ;
35+ this . url = source [ "url " ] ;
36+ this . headers = source [ "headers " ] ;
37+ this . body = source [ "body " ] ;
3838 }
3939}
4040
4141
4242function App ( ) {
43- const [ value , setValue ] = useState ( 'one' ) ;
44- const [ reqBodies , setReqBodies ] = useState ( [ "" ] )
43+ const [ reqBodies , setReqBodies ] = useState < Array < string > > ( [ "" ] )
4544 const [ reqHeaders , setReqHeaders ] = useState < Array < Array < Header > > > ( [ [
4645 { Key : "" , Value : "" } ,
4746 { Key : "" , Value : "" } ,
@@ -52,7 +51,9 @@ function App() {
5251 { Key : "" , Value : "" } ,
5352 ] ] ) ;
5453
55- const [ responses , setResponses ] = useState ( [ new main . RequestResult ] )
54+ console . log ( reqHeaders )
55+
56+ const [ responses , setResponses ] = useState < Array < main . RequestResult > > ( [ new main . RequestResult ] )
5657 const [ activeReqBody , setActiveReqBody ] = useState ( 0 )
5758 const [ activeReqHeader , setActiveReqHeader ] = useState ( 0 )
5859 const [ request , setRequest ] = useState ( new Request ( { "Method" : "GET" } ) )
@@ -76,18 +77,17 @@ function App() {
7677 } ) ) ;
7778 } ;
7879
79- const updateActiveReqTab = ( e : any ) => {
80- setActiveReqBody ( e . target . value )
81- setActiveReqHeader ( e . target . value )
80+ const updateActiveReqTab = ( e : any , index : number ) => {
81+ setActiveReqBody ( index )
82+ setActiveReqHeader ( index )
8283 }
8384
8485 const addReqBody = ( e : any ) => {
85- reqBodies . push ( reqBodies [ activeReqBody ] )
86- reqHeaders . push ( reqHeaders [ activeReqBody ] )
87- responses . push ( responses [ activeReqBody ] )
88- setReqBodies ( [ ...reqBodies ] )
89- setResponses ( [ ...responses ] )
90- setReqHeaders ( [ ...reqHeaders ] )
86+ setReqBodies ( [ ...reqBodies ] . concat ( ...[ reqBodies [ activeReqBody ] ] ) )
87+ setReqHeaders ( reqHeaders . concat ( [ [ { Key : "" , Value : "" } ] ] ) )
88+ setResponses ( [ ...responses ] . concat ( ...[ responses [ activeReqBody ] ] ) )
89+ setActiveReqBody ( activeReqBody + 1 )
90+ console . log ( reqHeaders )
9191 }
9292
9393 const updateReqBody = ( e : any ) => {
@@ -108,16 +108,14 @@ function App() {
108108 } ;
109109
110110 const updateCurlBody = ( e : any ) => setCurlBody ( e . target . value )
111- const headers : Map < string , string > = new Map < string , string >
112-
113- for ( let k of reqHeaders [ activeReqBody ] ) {
114- headers . set ( k . Key , k . Value )
115- }
116-
117- console . log ( headers )
118111
119112 function makeRequest ( ) {
120- MakeRequest ( request . URL , request . Method ,
113+ const headers : Map < string , string > = new Map < string , string >
114+
115+ for ( let k of reqHeaders [ activeReqBody ] ) {
116+ headers . set ( k . Key , k . Value )
117+ }
118+ MakeRequest ( request . url , request . method ,
121119 reqBodies [ activeReqBody ] ,
122120 headers ) . then ( ( r : main . RequestResult ) => {
123121 setResult ( r )
@@ -128,10 +126,10 @@ function App() {
128126 function importCurl ( ) {
129127 RunCurl ( curlBody ) . then ( ( result : any ) => {
130128 let req = new Request ( {
131- "Method " : result . Method ,
132- "URL " : result . URL ,
133- "Body " : result . RequestBody ,
134- "Headers " : result . ReqHeaders ,
129+ "method " : result . Method ,
130+ "url " : result . URL ,
131+ "body " : result . RequestBody ,
132+ "headers " : result . ReqHeaders ,
135133 } )
136134 setRequest ( req )
137135 setResult ( result )
@@ -140,7 +138,7 @@ function App() {
140138 }
141139
142140 function handleExport ( ) {
143- Export ( result )
141+ Export ( request , reqHeaders , reqBodies , result )
144142 }
145143
146144 const darkTheme = createTheme ( {
@@ -193,8 +191,8 @@ function App() {
193191 < Grid xs = { 2 } sm = { 2 } md = { 2 } lg = { 1 } sx = { { marginTop : "1em" } } >
194192 < FormControl fullWidth variant = 'filled' >
195193 < InputLabel > Method</ InputLabel >
196- < Select label = "Method" value = { request . Method }
197- color = "success" name = "Method " variant = "filled"
194+ < Select label = "Method" value = { request . method }
195+ color = "success" name = "method " variant = "filled"
198196 onChange = { handleRequestChange } >
199197 < MenuItem value = { "GET" } > GET</ MenuItem >
200198 < MenuItem value = { "POST" } > POST</ MenuItem >
@@ -204,8 +202,8 @@ function App() {
204202 </ Grid >
205203 < Grid xs = { 12 } sm = { 12 } md = { 8 } lg = { 9 } >
206204 < FormControl fullWidth >
207- < TextField id = "url" variant = "standard" value = { request . URL } fullWidth
208- onChange = { handleRequestChange } autoComplete = "off" name = "URL " />
205+ < TextField id = "url" variant = "standard" value = { request . url } fullWidth
206+ onChange = { handleRequestChange } autoComplete = "off" name = "url " />
209207 </ FormControl >
210208 </ Grid >
211209 < Grid xs = { 1 } sm = { 1 } md = { 1 } lg = { 1 } >
@@ -231,25 +229,40 @@ function App() {
231229 reqHeaders . map ( ( d , index ) =>
232230 < Button
233231 key = { index }
234- variant = "contained" value = { index } color = "success" onClick = { updateActiveReqTab }
232+ variant = { activeReqBody === index ? "contained" : "outlined" } value = { index } color = "success" onClick = { ( e ) => updateActiveReqTab ( e , index ) }
235233 > { index + 1 } </ Button > )
236234 }
237235 < Button color = "success" sx = { { minWidth : "2rem" , padding : "0em" } } onClick = { addReqBody } >
238236 < AddIcon />
239237 </ Button >
240238 </ ButtonGroup >
241- < RequestHeader activeReqHeader = { activeReqHeader } reqHeaders = { reqHeaders } > </ RequestHeader >
239+ {
240+ reqHeaders . map ( ( p : Header [ ] , baseIndex : number ) => p . map (
241+ ( d : Header , index : number ) => {
242+ return baseIndex === activeReqHeader && < RequestHeader key = { index . toString ( ) + baseIndex . toString ( ) }
243+ update = { ( h : Header ) => {
244+ reqHeaders [ activeReqHeader ] [ index ] = h ;
245+ setReqHeaders ( [ ...reqHeaders ] ) ;
246+ console . log ( reqHeaders ) ;
247+ }
248+ }
249+ header = { reqHeaders [ activeReqHeader ] [ index ] } > </ RequestHeader >
250+ }
251+ ) )
252+ }
242253 </ Grid >
243254 < Grid xs = { 7 } >
244255 < ButtonGroup >
245256 < Button color = "success" > Request Body</ Button >
246257 {
247258 reqBodies . map ( ( d , index ) => < Button
248259 key = { index } style = { { padding : "0em" , minWidth : "2rem" } }
249- variant = "contained" value = { index } color = "success" onClick = { updateActiveReqTab }
260+ value = { index } color = "success" onClick = { ( e ) => updateActiveReqTab ( e , index ) }
261+ variant = { activeReqBody === index ? "contained" : "outlined" }
250262 > { index + 1 } </ Button > )
251263 }
252- < Button color = "success" sx = { { minWidth : "2rem" , padding : "0em" } } onClick = { addReqBody } > < AddIcon /> </ Button >
264+ < Button color = "success" sx = { { minWidth : "2rem" , padding : "0em" } }
265+ onClick = { addReqBody } > < AddIcon /> </ Button >
253266 </ ButtonGroup >
254267 < TextField margin = 'dense' rows = { 16 } sx = { { width : "100%" , height : "100%" } }
255268 multiline variant = "outlined" color = "primary"
@@ -264,9 +277,11 @@ function App() {
264277 < ButtonGroup >
265278 < Button color = "success" > Response Headers</ Button >
266279 {
267- responses . map ( ( d , index ) => < Button
280+ responses . map ( ( d , index ) =>
281+ < Button
268282 key = { index } style = { { padding : "0em" , minWidth : "2rem" } }
269- variant = "contained" value = { index } color = "success" onClick = { updateActiveReqTab }
283+ variant = { activeReqBody === index ? "contained" : "outlined" }
284+ value = { index } color = "success" onClick = { ( e ) => updateActiveReqTab ( e , index ) }
270285 > { index + 1 } </ Button > )
271286 }
272287 < Button color = "success" onClick = { addReqBody } > < AddIcon /> </ Button >
@@ -280,7 +295,8 @@ function App() {
280295 {
281296 responses . map ( ( d , index ) => < Button
282297 key = { index } style = { { padding : "0em" , minWidth : "2rem" } }
283- variant = "contained" value = { index } color = "success" onClick = { updateActiveReqTab }
298+ variant = { activeReqBody === index ? "contained" : "outlined" }
299+ value = { index } color = "success" onClick = { ( e ) => updateActiveReqTab ( e , index ) }
284300 > { index + 1 } </ Button > )
285301 }
286302 < Button color = "success" onClick = { addReqBody } > < AddIcon /> </ Button >
0 commit comments