feat: Response Placeholder Component

This commit is contained in:
Anoop M D 2022-03-15 02:49:14 +05:30
parent 910f19c045
commit b313cc53cc
5 changed files with 49 additions and 1 deletions

View File

@ -0,0 +1,9 @@
import styled from 'styled-components';
const StyledWrapper = styled.div`
padding-top: 20%;
width: 100%;
`;
export default StyledWrapper;

View File

@ -0,0 +1,29 @@
import React from 'react';
import { IconSend } from '@tabler/icons';
import StyledWrapper from './StyledWrapper';
const Placeholder = () => {
return (
<StyledWrapper>
<div className="text-gray-300 flex justify-center" style={{fontSize: 200}}>
<IconSend size={150} strokeWidth={1}/>
</div>
<div className="flex mt-4">
<div className="flex flex-1 flex-col items-end px-1">
<div className="px-1 py-2">Send Request</div>
<div className="px-1 py-2">New Request</div>
<div className="px-1 py-2">Edit Environments</div>
<div className="px-1 py-2">Help</div>
</div>
<div className="flex flex-1 flex-col px-1">
<div className="px-1 py-2">Cmd + Enter</div>
<div className="px-1 py-2">Cmd + N</div>
<div className="px-1 py-2">Cmd + E</div>
<div className="px-1 py-2">Cmd + H</div>
</div>
</div>
</StyledWrapper>
);
};
export default Placeholder;

View File

@ -2,6 +2,7 @@ import React, { useState } from 'react';
import classnames from 'classnames';
import QueryResult from './QueryResult';
import Overlay from './Overlay';
import Placeholder from './Placeholder';
import ResponseHeaders from './ResponseHeaders';
import StatusCode from './StatusCode';
import ResponseTime from './ResponseTime';
@ -50,6 +51,14 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
);
}
if(response.state !== 'success') {
return (
<StyledWrapper className="flex h-full relative">
<Placeholder />
</StyledWrapper>
);
}
return (
<StyledWrapper className="flex flex-col h-full relative">
<div className="flex items-center px-3 tabs mt-1" role="tablist">

View File

@ -17,6 +17,7 @@ const sendRequest = async (item, collectionUid, dispatch) => {
dispatch({
type: actions.RESPONSE_RECEIVED,
response: {
state: 'success',
data: response.data,
headers: Object.entries(response.headers),
size: response.headers["content-length"],

View File

@ -3,7 +3,7 @@
--color-brand: #546de5;
--color-sidebar-collection-item-active-indent-border: #d0d0d0;
--color-sidebar-collection-item-active-background: #dddddd;
--color-sidebar-background: rgb(243, 243, 243);
--color-sidebar-background: #f3f3f3;
--color-request-dragbar-background: #e2e2e2;
--color-request-dragbar-background-active: #bbb;
--color-tab-active-border: #4d4d4d;