Skip to content

Commit a3ebfe2

Browse files
kurto8kurto8
authored
Merge pull request #32 from oslabs-beta/kurtis
UI OVERHAULIN
2 parents fd6c753 + e69358e commit a3ebfe2

File tree

8 files changed

+204
-73
lines changed

8 files changed

+204
-73
lines changed

‎src/assets/style/sidebar.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
// background-color: gray;
55
// }
66

7+
.composer {
8+
padding-left: 8px;
9+
padding-right: 8px;
10+
}
11+
712
.include-data-checkbox {
813
background: #FFFFFF;
914
/* neutral-300 */
@@ -186,4 +191,16 @@
186191

187192
.no-border-please {
188193
border: none !important;
194+
}
195+
196+
.inputs {
197+
display: flex;
198+
justify-content: space-between;
199+
}
200+
201+
.restReqBtns {
202+
display: flex;
203+
flex-direction: column;
204+
align-items: center;
205+
// justify-content: start;
189206
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const NewRequestButton = ({ onClick }) => (
77
type="button"
88
style={{margin: '10px'}}
99
>
10-
Add New Request
10+
Add to Workspace
1111
</button>
1212
);
1313

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
const SendRequestButton = ({ onClick }) => (
4+
<button
5+
className="button is-normal is-primary-100 add-request-button is-vertical-align-center is-justify-content-center no-border-please"
6+
onClick={onClick}
7+
type="button"
8+
style={{margin: '10px', paddingLeft: '32px', paddingRight: '32px'}}
9+
>
10+
Send Request
11+
</button>
12+
);
13+
14+
export default SendRequestButton;

‎src/client/components/composer/RestContainer.jsx

Lines changed: 168 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,71 @@
11
/* eslint-disable jsx-a11y/label-has-associated-control */
22
/* eslint-disable jsx-a11y/label-has-for */
3-
import React from 'react';
4-
import { useSelector } from 'react-redux';
3+
import React, { useEffect, useState } from 'react';
4+
import { useSelector, useDispatch } from 'react-redux';
55
import uuid from 'uuid/v4';
6+
import * as actions from '../../actions/actions';
67
import historyController from '../../controllers/historyController';
8+
import connectionController from '../../controllers/reqResController';
79
import HeaderEntryForm from './NewRequest/HeaderEntryForm';
810
import BodyEntryForm from './NewRequest/BodyEntryForm.jsx';
911
import TestEntryForm from './NewRequest/TestEntryForm.jsx';
1012
import CookieEntryForm from './NewRequest/CookieEntryForm.jsx';
1113
import RestMethodAndEndpointEntryForm from './NewRequest/RestMethodAndEndpointEntryForm.jsx';
1214
import NewRequestButton from './NewRequest/NewRequestButton.jsx';
15+
import SendRequestButton from './NewRequest/SendRequestButton.jsx'
16+
import RestRequestContent from '../display/RestRequestContent';
17+
import SingleReqResContainer from '../containers/SingleReqResContainer';
18+
19+
function RestContainer(props) {
20+
const dispatch = useDispatch();
21+
22+
const {
23+
resetComposerFields,
24+
setNewRequestFields,
25+
newRequestFields,
26+
newRequestFields: {
27+
gRPC,
28+
url,
29+
method,
30+
graphQL,
31+
restUrl,
32+
wsUrl,
33+
webrtc,
34+
gqlUrl,
35+
grpcUrl,
36+
network,
37+
testContent,
38+
},
39+
setNewRequestBody,
40+
setNewTestContent,
41+
newRequestBody,
42+
newRequestBody: {
43+
JSONFormatted,
44+
rawType,
45+
bodyContent,
46+
bodyVariables,
47+
bodyType,
48+
},
49+
setNewRequestHeaders,
50+
newRequestHeaders,
51+
newRequestHeaders: { headersArr },
52+
setNewRequestCookies,
53+
newRequestCookies,
54+
newRequestCookies: { cookiesArr },
55+
setNewRequestStreams,
56+
newRequestStreams,
57+
newRequestStreams: { protoPath },
58+
setNewRequestSSE,
59+
newRequestSSE: { isSSE },
60+
currentTab,
61+
introspectionData,
62+
setComposerWarningMessage,
63+
setComposerDisplay,
64+
warningMessage,
65+
reqResAdd,
66+
setWorkspaceActiveTab
67+
} = props;
1368

14-
function RestContainer({
15-
resetComposerFields,
16-
setNewRequestFields,
17-
newRequestFields,
18-
newRequestFields: {
19-
gRPC,
20-
url,
21-
method,
22-
graphQL,
23-
restUrl,
24-
wsUrl,
25-
webrtc,
26-
gqlUrl,
27-
grpcUrl,
28-
network,
29-
testContent,
30-
},
31-
setNewRequestBody,
32-
setNewTestContent,
33-
newRequestBody,
34-
newRequestBody: {
35-
JSONFormatted,
36-
rawType,
37-
bodyContent,
38-
bodyVariables,
39-
bodyType,
40-
},
41-
setNewRequestHeaders,
42-
newRequestHeaders,
43-
newRequestHeaders: { headersArr },
44-
setNewRequestCookies,
45-
newRequestCookies,
46-
newRequestCookies: { cookiesArr },
47-
setNewRequestStreams,
48-
newRequestStreams,
49-
newRequestStreams: { protoPath },
50-
setNewRequestSSE,
51-
newRequestSSE: { isSSE },
52-
currentTab,
53-
introspectionData,
54-
setComposerWarningMessage,
55-
setComposerDisplay,
56-
warningMessage,
57-
reqResAdd,
58-
setWorkspaceActiveTab,
59-
}) {
6069
const requestValidationCheck = () => {
6170
const validationMessage = {};
6271
//Error conditions...
@@ -74,14 +83,98 @@ function RestContainer({
7483
return validationMessage;
7584
};
7685

86+
const sendNewRequest = () => {
87+
const warnings = requestValidationCheck();
88+
if (Object.keys(warnings).length > 0) {
89+
setComposerWarningMessage(warnings);
90+
return;
91+
}
92+
93+
let reqRes;
94+
const protocol = url.match(/(https?:\/\/)|(wss?:\/\/)/)[0];
95+
// HTTP && GRAPHQL QUERY & MUTATION REQUESTS
96+
if (!/wss?:\/\//.test(protocol) && !gRPC) {
97+
const URIWithoutProtocol = `${url.split(protocol)[1]}/`;
98+
URIWithoutProtocol; // deleteable ???
99+
const host = protocol + URIWithoutProtocol.split('/')[0];
100+
let path = `/${URIWithoutProtocol.split('/')
101+
.splice(1)
102+
.join('/')
103+
.replace(/\/{2,}/g, '/')}`;
104+
if (path.charAt(path.length - 1) === '/' && path.length > 1) {
105+
path = path.substring(0, path.length - 1);
106+
}
107+
path = path.replace(/https?:\//g, 'http://');
108+
reqRes = {
109+
id: uuid(),
110+
createdAt: new Date(),
111+
protocol: url.match(/https?:\/\//)[0],
112+
host,
113+
path,
114+
url,
115+
webrtc,
116+
graphQL,
117+
gRPC,
118+
timeSent: null,
119+
timeReceived: null,
120+
connection: 'uninitialized',
121+
connectionType: null,
122+
checkSelected: false,
123+
protoPath,
124+
request: {
125+
method,
126+
headers: headersArr.filter((header) => header.active && !!header.key),
127+
cookies: cookiesArr.filter((cookie) => cookie.active && !!cookie.key),
128+
body: bodyContent || '',
129+
bodyType,
130+
bodyVariables: bodyVariables || '',
131+
rawType,
132+
isSSE,
133+
network,
134+
restUrl,
135+
testContent: testContent || '',
136+
wsUrl,
137+
gqlUrl,
138+
grpcUrl,
139+
},
140+
response: {
141+
headers: null,
142+
events: null,
143+
},
144+
checked: false,
145+
minimized: false,
146+
tab: currentTab,
147+
};
148+
console.log(reqRes);
149+
}
150+
151+
// add request to history
152+
historyController.addHistoryToIndexedDb(reqRes);
153+
reqResAdd(reqRes);
154+
// dispatch(actions.scheduledReqResUpdate(reqRes));
155+
156+
//reset for next request
157+
resetComposerFields();
158+
// dispatch(actions.setResponsePaneActiveTab('events'));
159+
// dispatch(actions.setSidebarActiveTab('composer'));
160+
161+
connectionController.openReqRes(reqRes.id);
162+
dispatch(
163+
actions.saveCurrentResponseData(
164+
reqRes,
165+
'singleReqResContainercomponentSendHandler'
166+
)
167+
);
168+
};
169+
77170
const addNewRequest = () => {
78171
const warnings = requestValidationCheck();
79172
if (Object.keys(warnings).length > 0) {
80173
setComposerWarningMessage(warnings);
81174
return;
82175
}
83176

84-
let reqRes;
177+
let reqRes;
85178
const protocol = url.match(/(https?:\/\/)|(wss?:\/\/)/)[0];
86179
// HTTP && GRAPHQL QUERY & MUTATION REQUESTS
87180
if (!/wss?:\/\//.test(protocol) && !gRPC) {
@@ -96,7 +189,7 @@ function RestContainer({
96189
path = path.substring(0, path.length - 1);
97190
}
98191
path = path.replace(/https?:\//g, 'http://');
99-
reqRes = {
192+
reqRes = {
100193
id: uuid(),
101194
createdAt: new Date(),
102195
protocol: url.match(/https?:\/\//)[0],
@@ -169,21 +262,30 @@ function RestContainer({
169262
warningMessage={warningMessage}
170263
setComposerWarningMessage={setComposerWarningMessage}
171264
/>
172-
<HeaderEntryForm
173-
newRequestHeaders={newRequestHeaders}
174-
newRequestStreams={newRequestStreams}
175-
newRequestBody={newRequestBody}
176-
newRequestFields={newRequestFields}
177-
setNewRequestHeaders={setNewRequestHeaders}
178-
setNewRequestStreams={setNewRequestStreams}
179-
isDark={isDark}
180-
/>
181-
<CookieEntryForm
182-
newRequestCookies={newRequestCookies}
183-
newRequestBody={newRequestBody}
184-
setNewRequestCookies={setNewRequestCookies}
185-
isDark={isDark}
186-
/>
265+
<span className="inputs">
266+
<div>
267+
<HeaderEntryForm
268+
newRequestHeaders={newRequestHeaders}
269+
newRequestStreams={newRequestStreams}
270+
newRequestBody={newRequestBody}
271+
newRequestFields={newRequestFields}
272+
setNewRequestHeaders={setNewRequestHeaders}
273+
setNewRequestStreams={setNewRequestStreams}
274+
isDark={isDark}
275+
/>
276+
<CookieEntryForm
277+
newRequestCookies={newRequestCookies}
278+
newRequestBody={newRequestBody}
279+
setNewRequestCookies={setNewRequestCookies}
280+
isDark={isDark}
281+
/>
282+
</div>
283+
<div className="is-3rem-footer is-clickable restReqBtns">
284+
<SendRequestButton onClick={sendNewRequest} />
285+
<p> --- or --- </p>
286+
<NewRequestButton onClick={addNewRequest} />
287+
</div>
288+
</span>
187289
{/* SSE TOGGLE SWITCH */}
188290
<div className="field mt-2">
189291
<span className="composer-section-title mr-3">
@@ -214,9 +316,7 @@ function RestContainer({
214316
testContent={testContent}
215317
/>
216318
</div>
217-
<div className="is-3rem-footer is-clickable">
218-
<NewRequestButton onClick={addNewRequest} />
219-
</div>
319+
220320
</div>
221321
);
222322
}

‎src/client/components/containers/ContentsContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const ContentsContainer = () => {
2929
return (
3030
<div
3131
// className={`${isDark ? 'is-dark-400 dark-divider' : 'is-divider-neutral-300'} column is-tall is-one-third is-flex is-flex-direction-column`} // gigi playing with css
32-
className={`${isDark ? 'is-dark-400 dark-divider' : 'is-divider-neutral-300'} box is-3 is-tall`}
32+
className={`${isDark ? 'is-dark-400 dark-divider' : 'is-divider-neutral-300'} box is-3 is-tall add-vertical-scroll`}
3333
id="workspace"
3434
style={{margin: "10px", maxHeight: "98vh"}}
3535
>

‎src/client/components/containers/ReqResContainer.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ const ReqResContainer = (props) => {
4545
<div className="is-flex is-flex-direction-row is-justify-content-space-around is-align-items-center mt-3">
4646
<button
4747
className={`${isDark ? 'is-dark-200' : ''} button is-small is-rest-invert is-outlined button-padding-vertical button-hover-color`}
48-
style={{ minWidth: '30vw' }}
4948
type="button"
5049
onClick={runCollectionTest}
5150
>

‎src/client/components/containers/SidebarContainer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ const SidebarContainer = (props) => {
2828

2929
return (
3030
<div
31-
className={`box is-child ${isDark ? 'is-dark-400 add-vertical-scroll' : 'is-divider-neutral-300'}`} // gigi playing with css
31+
className={`box is-child ${isDark ? 'is-dark-400' : 'is-divider-neutral-300 '}`} // gigi playing with css
3232
// className={`column is-one-third is-flex is-flex-direction-column is-tall ${isDark ? 'is-dark-400' : ''}`}
3333
style={{ height: '50vh', margin: "10px"}}
3434
id="composer"
3535
>
3636

3737
{/* HEADER */}
38-
<div className="hero is-flex-direction-row is-primary has-text-centered">
38+
<div className="hero is-flex-direction-row is-primary has-text-centered composer">
3939
{/* dark mode toggle goes here : https://www.w3schools.com/howto/howto_css_switch.asp */}
4040
<input
4141
id="darkModeSwitch"

‎src/client/components/containers/SingleReqResContainer.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,7 @@ const SingleReqResContainer = (props) => {
309309
if (connectionType !== 'WebSocket') {
310310
dispatch(actions.setResponsePaneActiveTab('events'));
311311
}
312+
// console.log(content)
312313
connectionController.openReqRes(content.id);
313314
dispatch(
314315
actions.saveCurrentResponseData(

0 commit comments

Comments
 (0)