feat: add headers and request body support

Author: dropdevrahul

app.go

@@ -58,13 +58,28 @@ type RequestResult struct {
 }
 
 // Greet returns a greeting for the given name
-func (a *App) MakeRequest(urlIn string, method string) RequestResult {
+func (a *App) MakeRequest(
+	urlIn string,
+	method string,
+	body string,
+	headers string,
+) RequestResult {
 	result := RequestResult{}
-	r, err := http.NewRequest(method, urlIn, nil)
+	rbody := bytes.NewBuffer([]byte(body))
+	r, err := http.NewRequest(method, urlIn, rbody)
 	if err != nil {
 		result.Error = err.Error()
 		return result
 	}
+
+	reqHeaders := strings.Split(headers, "\n")
+	for _, h := range reqHeaders {
+		if h != "" {
+			hh := strings.Split(h, ":")
+			r.Header.Add(hh[0], strings.Join(hh[1:], ";"))
+		}
+	}
+
 	res, httpResp, err := MakeRequest(a.client, r)
 	if err != nil {
 		result.Error = err.Error()
@@ -76,8 +91,8 @@ func (a *App) MakeRequest(urlIn string, method string) RequestResult {
 		vals := strings.Join(v, "; ")
 		headersArr = append(headersArr, k+": "+vals)
 	}
-	result.HeadersStr = strings.Join(headersArr, "\n")
 
+	result.HeadersStr = strings.Join(headersArr, "\n")
 	b := bytes.NewBuffer(make([]byte, 0, len(res)))
 	err = json.Indent(b, res, "\n", "  ")
 	if err != nil {

frontend/src/App.css

@@ -5,7 +5,6 @@
 
 .headersp {
   padding-left: 1em !important;
-  border: 1px solid #efefef55;
   padding: 1em !important;
 }
 
@@ -14,17 +13,20 @@
   padding-right: 1em !important;
   text-align: left;
   height: auto;
+  color: var(--mui-palette-primary-dark);
   overflow-x: hidden;
   overflow-y: auto;
 }
 
 .resultp {
-  border: 1px solid #efefef55;
   padding: 1em !important;
 }
 
 .result {
   text-align: left;
+  line-height: 0.7em;
+  font-size: 1em;
+  color: var(--mui-palette-success-dark);
   margin-right: 1em !important;
   overflow-y: auto;
 }
@@ -44,14 +46,38 @@
   margin: 0px auto;
 }
 
-.header-div {
+.req-header-div,.body-div,.header-div {
   margin-top: 1em !important;
-  color: #82aaff;
   font-weight: 1000;
 }
 
+
 .res-div {
   margin-top: 1em !important;
-  color: #82aaff;
   font-weight: 1000;
 }
+
+.req-body {
+  width: 100%;
+  padding: 0.5em !important;
+  color: var(--mui-palette-primary-dark) !important;
+  margin: 1em !important;
+  height: auto;
+}
+
+.req-headers {
+  width: 100%;
+  padding: 0.5em !important;
+  color: var(--mui-palette-success-dark) !important;
+  margin: 1em !important;
+  height: auto;
+}
+
+.error-div {
+  margin-top: 1em !important;
+  font-weight: 1000;
+}
+
+.error {
+  color: var(--mui-palette-error-dark);
+}

frontend/src/App.tsx

@@ -8,6 +8,9 @@ import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
 import MenuItem from '@mui/material/MenuItem'; // Grid version 2
 import Select from '@mui/material/Select'; // Grid version 2
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+import {
+  Experimental_CssVarsProvider as CssVarsProvider,
+} from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 
 const darkTheme = createTheme({
@@ -21,6 +24,8 @@ function App() {
     const [resultText, setResultText] = useState("");
     const [reqMethod, setReqMethod] = useState("GET");
     const [errorText, setErrorText] = useState("");
+    const [reqBody, setReqBody] = useState("");
+    const [reqHeaders, setReqHeaders] = useState("");
     const [resultHeader, setResultHeader] = useState("");
     const [url, setURL] = useState('');
     const updateURL = (e: any) => setURL(e.target.value);
@@ -31,16 +36,17 @@ function App() {
     };
 
     const updateMethod = (e: any) => setReqMethod(e.target.value);
+    const updateBody = (e:any) => setReqBody(e.target.value)
+    const updateReqHeaders = (e:any) => setReqHeaders(e.target.value)
     function makeRequest() {
-        MakeRequest(url, reqMethod).then(updateResultText);
+        MakeRequest(url, reqMethod, reqBody, reqHeaders).then(updateResultText);
     }
-
     return (
-        <ThemeProvider theme={darkTheme}>
+        <CssVarsProvider>
          <CssBaseline />
            <Grid container className="App">
               <Grid xs={1}>
-                <Select label="Type" value={reqMethod} variant="standard" onChange={updateMethod}>
+                <Select label="Type" value={reqMethod} className="url" color="success" variant="standard" onChange={updateMethod}>
                   <MenuItem value={"GET"}>GET</MenuItem>
                   <MenuItem value={"POST"}>POST</MenuItem>
                   <MenuItem value={"PUT"}>PUT</MenuItem>
@@ -52,23 +58,33 @@ function App() {
               </Grid>
               <Grid xs={1}>
                 <div id="req-button-p">
-                  <Button className="make-request" variant="outlined" onClick={makeRequest}>Go</Button>
+                  <Button className="make-request" color="primary" variant="contained" onClick={makeRequest}>Go</Button>
                 </div>
               </Grid>
+              <Grid xs={4} className="req-headers-p">
+                <Divider textAlign="left" className="req-header-div" color="success"><span>Request Headers</span></Divider>
+                <TextField id="reqheaders" multiline className="req-headers" variant="filled" rows={10} color="success"
+                  onChange={updateReqHeaders} autoComplete="off" name="reqheaders"/>
+              </Grid>
+              <Grid xs={8} className="req-body-p">
+                <Divider textAlign="left" className="body-div" color="primary"><span>Request Body</span></Divider>
+                <TextField id="url" multiline className="req-body" variant="filled" rows={10} color="primary"
+                  onChange={updateBody} autoComplete="off" name="reqbody"/>
+              </Grid>
               <Grid xs={4} className="headersp">
                 <Divider textAlign="left" className="header-div"><span color='#82aaff'>Headers</span></Divider>
                 <div id="headers" className="headers"><pre>{resultHeader}</pre></div>
               </Grid>
               <Grid xs={8} className="resultp">
-                <Divider textAlign="left" className="res-div"><span color='#c3e88d'>Result</span></Divider>
+                <Divider textAlign="left" className="res-div"><span color='#c3e88d'>Response</span></Divider>
                 <div id="result" className="result"><pre>{resultText}</pre></div>
               </Grid>
               <Grid xs={12} className="errorp">
-                <Divider textAlign="left" className="res-div"><span color='#c3e88d'>Error</span></Divider>
-                <div id="result" className="result"><pre>{errorText}</pre></div>
+                <Divider textAlign="left" className="error-div" color="error">Error</Divider>
+                <div id="error" className="error"><pre>{errorText}</pre></div>
               </Grid>
           </Grid>
-        </ThemeProvider>
+        </CssVarsProvider>
     )
 }
 

frontend/wailsjs/go/main/App.d.ts

@@ -2,4 +2,4 @@
 // This file is automatically generated. DO NOT EDIT
 import {main} from '../models';
 
-export function MakeRequest(arg1:string,arg2:string):Promise<main.RequestResult>;
+export function MakeRequest(arg1:string,arg2:string,arg3:string,arg4:string):Promise<main.RequestResult>;

frontend/wailsjs/go/main/App.js

@@ -2,6 +2,6 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
-export function MakeRequest(arg1, arg2) {
-  return window['go']['main']['App']['MakeRequest'](arg1, arg2);
+export function MakeRequest(arg1, arg2, arg3, arg4) {
+  return window['go']['main']['App']['MakeRequest'](arg1, arg2, arg3, arg4);
 }