Skip to content

Commit 1eb79cb

Browse files
garyslootskiygaryslootskiy
authored
Merge pull request #76 from NathanielBAdams/headers
Headers
2 parents 7cc6dfc + b0a7cab commit 1eb79cb

File tree

5 files changed

+127
-76
lines changed

5 files changed

+127
-76
lines changed

‎src/assets/img/Swell grpc.png

258 KB
Loading

‎src/assets/img/Swell rest.png

211 KB
Loading

‎src/assets/img/Swell ws.png

142 KB
Loading

‎src/client/components/composer/NewRequest/HeaderEntryForm.jsx

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import React, { Component } from "react";
44
import Header from "./Header.jsx";
55
import ContentReqRowComposer from "./ContentReqRowComposer.jsx";
6+
import { matchPath } from "react-router-dom";
67

78
class HeaderEntryForm extends Component {
89
constructor(props) {
@@ -24,11 +25,22 @@ class HeaderEntryForm extends Component {
2425
lastHeader?.key !== "" &&
2526
lastHeader?.key.toLowerCase() !== "content-type"
2627
) {
28+
// console.log("adding header");
2729
this.addHeader();
2830
}
2931
this.checkContentTypeHeaderUpdate();
3032
}
3133

34+
contentHeaderNeeded() {
35+
const { method } = this.props.newRequestFields;
36+
return (
37+
method === "PUT" ||
38+
method === "PATCH" ||
39+
method === "DELETE" ||
40+
method === "POST"
41+
);
42+
}
43+
3244
checkContentTypeHeaderUpdate() {
3345
let contentType;
3446

@@ -50,11 +62,11 @@ class HeaderEntryForm extends Component {
5062

5163
// Attempt to update header in these conditions:
5264
const foundHeader = this.props.newRequestHeaders.headersArr.find((header) =>
53-
/content-type$/i.test(header.key.toLowerCase())
65+
header.key.toLowerCase().includes("content-type")
5466
);
5567

5668
// 1. if there is no contentTypeHeader, but there should be
57-
if (!foundHeader && contentType !== "") {
69+
if (!foundHeader && contentType !== "" && this.contentHeaderNeeded()) {
5870
this.addContentTypeHeader(contentType);
5971
// this.updateContentTypeHeader(contentType, foundHeader);
6072
}
@@ -63,12 +75,19 @@ class HeaderEntryForm extends Component {
6375
//keeping this else if lets the user do what they want, it's fine, updateContentTypeHeader and removeContentTypeHeader will fix it later
6476
}
6577
// 3. if there is a contentTypeHeader, needs to update
66-
else if (foundHeader && foundHeader.value !== contentType) {
67-
this.updateContentTypeHeader(contentType, foundHeader);
68-
}
78+
// else if (
79+
// foundHeader &&
80+
// foundHeader.value !== contentType &&
81+
// this.contentHeaderNeeded()
82+
// ) {
83+
// console.log("here is why - updating content type");
84+
// console.log("foundHeader, contentType", foundHeader, contentType);
85+
// this.updateContentTypeHeader(contentType, foundHeader);
86+
// }
6987
}
7088

7189
addContentTypeHeader(contentType) {
90+
if (!this.contentHeaderNeeded()) return;
7291
const headersDeepCopy = JSON.parse(
7392
JSON.stringify(
7493
this.props.newRequestHeaders.headersArr.filter(
@@ -77,7 +96,7 @@ class HeaderEntryForm extends Component {
7796
)
7897
);
7998
const contentTypeHeader = {
80-
id: 0,
99+
id: Math.random() * 1000000,
81100
active: true,
82101
key: "Content-Type",
83102
value: contentType,
@@ -89,16 +108,17 @@ class HeaderEntryForm extends Component {
89108
});
90109
}
91110

92-
updateContentTypeHeader(contentType) {
111+
updateContentTypeHeader(contentType, foundHeader) {
93112
const filtered = this.props.newRequestHeaders.headersArr.filter(
94-
(header) => header.key.toLowerCase() !== "content-type"
113+
(header) => !header.key.toLowerCase().includes("content-type")
95114
);
96-
this.props.newRequestHeaders.headersArr.unshift({
97-
id: 0,
98-
active: true,
99-
key: "Content-Type",
100-
value: contentType,
101-
});
115+
// console.log(filtered);
116+
// this.props.newRequestHeaders.headersArr.unshift({
117+
// id: Math.random() * 1000000,
118+
// active: true,
119+
// key: "Content-Type",
120+
// value: contentType,
121+
// });
102122

103123
this.props.setNewRequestHeaders({
104124
headersArr: filtered,
@@ -111,7 +131,7 @@ class HeaderEntryForm extends Component {
111131
JSON.stringify(this.props.newRequestHeaders.headersArr)
112132
);
113133
headersDeepCopy.push({
114-
id: this.props.newRequestHeaders.headersArr.length,
134+
id: Math.random() * 1000000,
115135
active: false,
116136
key: "",
117137
value: "",
@@ -139,7 +159,8 @@ class HeaderEntryForm extends Component {
139159
}
140160
}
141161
// if it's the content-type header, just exit
142-
if (indexToBeUpdated === 0) return;
162+
const isFirst = indexToBeUpdated === 0;
163+
// if (isFirst) return;
143164

144165
// update
145166
headersDeepCopy[indexToBeUpdated][field] = value;

‎src/client/components/composer/NewRequest/RawBodyTypeSelect.jsx

Lines changed: 90 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ const RawBodyTypeSelect = (props) => {
2020
if (!dropdownEl.current.contains(event.target)) {
2121
setDropdownIsActive(false);
2222
}
23-
}
24-
document.addEventListener('click', closeDropdown);
25-
return () => document.removeEventListener('click', closeDropdown);
23+
};
24+
document.addEventListener("click", closeDropdown);
25+
return () => document.removeEventListener("click", closeDropdown);
2626
}, []);
2727

2828
// const removeContentTypeHeader = () => {
@@ -39,93 +39,124 @@ const RawBodyTypeSelect = (props) => {
3939
setNewRequestBody({
4040
...newRequestBody,
4141
rawType: rawTypeStr,
42-
})
43-
}
42+
});
43+
const headersCopy = JSON.parse(JSON.stringify(newRequestHeaders));
44+
headersCopy.headersArr[0] = {
45+
id: Math.random() * 1000000,
46+
active: true,
47+
key: "Content-type",
48+
value: rawTypeStr,
49+
};
50+
setNewRequestHeaders({
51+
headersArr: headersCopy.headersArr,
52+
});
53+
};
4454

4555
return (
46-
<div ref={dropdownEl} className={`mt-1 mr-3 dropdown ${dropdownIsActive ? 'is-active' : ''}`}>
47-
56+
<div
57+
ref={dropdownEl}
58+
className={`mt-1 mr-3 dropdown ${dropdownIsActive ? "is-active" : ""}`}
59+
>
4860
<div className="dropdown-trigger">
49-
<button className="button is-small is-primary is-outlined add-header-or-cookie-button" aria-haspopup="true" aria-controls="dropdown-menu"
61+
<button
62+
className="button is-small is-primary is-outlined add-header-or-cookie-button"
63+
aria-haspopup="true"
64+
aria-controls="dropdown-menu"
5065
onClick={() => setDropdownIsActive(!dropdownIsActive)}
5166
>
5267
<span>{newRequestBody.rawType}</span>
5368
<span className="icon is-small">
54-
<img src={dropDownArrow} className="is-awesome-icon" aria-hidden="true" />
69+
<img
70+
src={dropDownArrow}
71+
className="is-awesome-icon"
72+
aria-hidden="true"
73+
/>
5574
</span>
5675
</button>
5776
</div>
5877

5978
<div className="dropdown-menu">
6079
<ul className="dropdown-content">
61-
{newRequestBody.rawType !== 'text/plain' &&
80+
{newRequestBody.rawType !== "text/plain" && (
6281
<a
6382
onClick={() => {
64-
setDropdownIsActive(false);
65-
setNewRawBodyType("text/plain")
66-
}}
67-
className="dropdown-item"
68-
>text/plain</a>
69-
}
70-
{newRequestBody.rawType !== 'application/json' &&
71-
<a
83+
setDropdownIsActive(false);
84+
setNewRawBodyType("text/plain");
85+
}}
86+
className="dropdown-item"
87+
>
88+
text/plain
89+
</a>
90+
)}
91+
{newRequestBody.rawType !== "application/json" && (
92+
<a
7293
onClick={() => {
7394
setDropdownIsActive(false);
74-
setNewRawBodyType('application/json');
75-
}}
76-
className="dropdown-item"
77-
>application/json</a>
78-
}
79-
{newRequestBody.rawType !== 'application/javascript' &&
95+
setNewRawBodyType("application/json");
96+
}}
97+
className="dropdown-item"
98+
>
99+
application/json
100+
</a>
101+
)}
102+
{newRequestBody.rawType !== "application/javascript" && (
80103
<a
81104
onClick={() => {
82105
setDropdownIsActive(false);
83-
setNewRawBodyType('application/javascript')
84-
}}
85-
className="dropdown-item"
86-
>application/javascript</a>
87-
}
88-
{newRequestBody.rawType !== 'application/xml' &&
106+
setNewRawBodyType("application/javascript");
107+
}}
108+
className="dropdown-item"
109+
>
110+
application/javascript
111+
</a>
112+
)}
113+
{newRequestBody.rawType !== "application/xml" && (
89114
<a
90115
onClick={() => {
91116
setDropdownIsActive(false);
92-
setNewRawBodyType('application/xml')
93-
}}
94-
className="dropdown-item"
95-
>application/xml</a>
96-
}
97-
{newRequestBody.rawType !== 'text/xml' &&
117+
setNewRawBodyType("application/xml");
118+
}}
119+
className="dropdown-item"
120+
>
121+
application/xml
122+
</a>
123+
)}
124+
{newRequestBody.rawType !== "text/xml" && (
98125
<a
99126
onClick={() => {
100127
setDropdownIsActive(false);
101-
setNewRawBodyType('text/xml')
102-
}}
103-
className="dropdown-item"
104-
>text/xml</a>
105-
}
106-
{newRequestBody.rawType !== 'text/html' &&
107-
<a
128+
setNewRawBodyType("text/xml");
129+
}}
130+
className="dropdown-item"
131+
>
132+
text/xml
133+
</a>
134+
)}
135+
{newRequestBody.rawType !== "text/html" && (
136+
<a
108137
onClick={() => {
109138
setDropdownIsActive(false);
110-
setNewRawBodyType('text/html')
111-
}}
112-
className="dropdown-item"
113-
>text/html</a>
114-
}
139+
setNewRawBodyType("text/html");
140+
}}
141+
className="dropdown-item"
142+
>
143+
text/html
144+
</a>
145+
)}
115146
</ul>
116147
</div>
117148
</div>
118-
);
119-
}
120-
121-
// <select
122-
// onChange={(e) =>
123-
// setNewRequestBody({
124-
// ...newRequestBody,
125-
// rawType: e.target.value,
126-
// })
127-
// }
128-
// value={newRequestBody.rawType}
149+
);
150+
};
151+
152+
// <select
153+
// onChange={(e) =>
154+
// setNewRequestBody({
155+
// ...newRequestBody,
156+
// rawType: e.target.value,
157+
// })
158+
// }
159+
// value={newRequestBody.rawType}
129160
// >
130161
// {/* Raw Type: */}
131162
// <option value="text/plain">Text (text/plain)</option>
@@ -136,7 +167,6 @@ const RawBodyTypeSelect = (props) => {
136167
// <option value="text/html">HTML (text/html)</option>
137168
// </select>
138169

139-
140170
RawBodyTypeSelect.propTypes = {
141171
newRequestBody: PropTypes.object.isRequired,
142172
setNewRequestBody: PropTypes.func.isRequired,

0 commit comments

Comments
 (0)