feat: response status code

This commit is contained in:
Anoop M D 2022-01-02 00:12:38 +05:30
parent 305fa14c7f
commit 8c93d00dac
8 changed files with 104 additions and 19 deletions

View File

@ -86,8 +86,11 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
if(data && !errors) {
dispatch({
type: actions.RESPONSE_RECEIVED,
response: data,
responseHeaders: Object.entries(headers.map),
response: {
data: data,
headers: Object.entries(headers.map),
status: status
},
requestTab: focusedTab,
collectionId: collection.id
});
@ -128,8 +131,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
<section className="response-pane px-4 flex-grow">
<ResponsePane
rightPaneWidth={rightPaneWidth}
data={item.response}
headers={item.responseHeaders}
response={item.response}
isLoading={isLoading}
/>
</section>

View File

@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
const ResponseHeaders = ({headers}) => {
return (
<StyledWrapper className="mt-4">
<StyledWrapper className="mt-3">
<table>
<thead>
<tr>

View File

@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
const ResponseSize = () => {
return (
<StyledWrapper className="mt-4 ml-4">
<StyledWrapper className="mt-3 ml-4">
8.31KB
</StyledWrapper>
)

View File

@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
const ResponseTime = () => {
return (
<StyledWrapper className="mt-4 ml-4">
<StyledWrapper className="mt-3 ml-4">
2.8s
</StyledWrapper>
)

View File

@ -0,0 +1,68 @@
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
const statusCodePhraseMap = {
100: 'Continue',
101: 'Switching Protocols',
102: 'Processing',
103: 'Early Hints',
200: 'OK',
201: 'Created',
202: 'Accepted',
203: 'Non-Authoritative Information',
204: 'No Content',
205: 'Reset Content',
206: 'Partial Content',
207: 'Multi-Status',
208: 'Already Reported',
226: 'IM Used',
300: 'Multiple Choice',
301: 'Moved Permanently',
302: 'Found',
303: 'See Other',
304: 'Not Modified',
305: 'Use Proxy',
306: 'unused',
307: 'Temporary Redirect',
308: 'Permanent Redirect',
400: 'Bad Request',
401: 'Unauthorized',
402: 'Payment Required',
403: 'Forbidden',
404: 'Not Found',
405: 'Method Not Allowed',
406: 'Not Acceptable',
407: 'Proxy Authentication Required',
408: 'Request Timeout',
409: 'Conflict',
410: 'Gone',
411: 'Length Required',
412: 'Precondition Failed',
413: 'Payload Too Large',
414: 'URI Too Long',
415: 'Unsupported Media Type',
416: 'Range Not Satisfiable',
417: 'Expectation Failed',
418: 'I\'m a teapot',
421: 'Misdirected Request',
422: 'Unprocessable Entity',
423: 'Locked',
424: 'Failed Dependency',
425: 'Too Early',
426: 'Upgrade Required',
428: 'Precondition Required',
429: 'Too Many Requests',
431: 'Request Header Fields Too Large',
451: 'Unavailable For Legal Reasons',
500: 'Internal Server Error',
501: 'Not Implemented',
502: 'Bad Gateway',
503: 'Service Unavailable',
504: 'Gateway Timeout',
505: 'HTTP Version Not Supported',
506: 'Variant Also Negotiates',
507: 'Insufficient Storage',
508: 'Loop Detected',
510: 'Not Extended',
511: 'Network Authentication Required'
};
export default statusCodePhraseMap;

View File

@ -1,10 +1,22 @@
import React from 'react';
import classnames from 'classnames';
import statusCodePhraseMap from './get-status-code-phrase';
import StyledWrapper from './StyledWrapper';
const StatusCode = () => {
const StatusCode = ({status}) => {
const getTabClassname = () => {
return classnames('mt-3', {
'text-blue-700': status >= 100 && status < 200,
'text-green-700': status >= 200 && status < 300,
'text-purple-700': status >= 300 && status < 400,
'text-yellow-700': status >= 400 && status < 500,
'text-red-700': status >= 500 && status < 600
});
};
return (
<StyledWrapper className="text-green-700 mt-4">
200 OK
<StyledWrapper className={getTabClassname()}>
{status} {statusCodePhraseMap[status]}
</StyledWrapper>
)
};

View File

@ -7,9 +7,11 @@ import ResponseTime from './ResponseTime';
import ResponseSize from './ResponseSize';
import StyledWrapper from './StyledWrapper';
const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
const [selectedTab, setSelectedTab] = useState('response');
response = response || {};
const getTabClassname = (tabName) => {
return classnames(`tab select-none ${tabName}`, {
'active': tabName === selectedTab
@ -22,14 +24,14 @@ const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
return (
<QueryResult
width={rightPaneWidth}
data={data}
data={response.data}
isLoading={isLoading}
/>
);
}
case 'headers': {
return (
<ResponseHeaders headers={headers}/>
<ResponseHeaders headers={response.headers}/>
);
}
@ -44,11 +46,13 @@ const ResponsePane = ({rightPaneWidth, data, isLoading, headers}) => {
<div className="flex items-center tabs mt-1" role="tablist">
<div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
<div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>
<div className="flex flex-grow justify-end items-center">
<StatusCode />
<ResponseTime />
<ResponseSize />
</div>
{!isLoading ? (
<div className="flex flex-grow justify-end items-center">
<StatusCode status={response.status}/>
<ResponseTime />
<ResponseSize />
</div>
) : null }
</div>
<section>
{getTabPanel(selectedTab)}

View File

@ -67,7 +67,6 @@ const reducer = (state, action) => {
if(item) {
item.response = action.response;
item.responseHeaders = action.responseHeaders;
}
}
});