feat: url bar now occupies full width of the panel

This commit is contained in:
Anoop M D 2022-10-15 00:35:00 +05:30
parent e46e3d5b22
commit 013f9f9e3d
4 changed files with 16 additions and 17 deletions

View File

@ -7,8 +7,6 @@ import QueryParams from 'components/RequestPane/QueryParams';
import RequestHeaders from 'components/RequestPane/RequestHeaders';
import RequestBody from 'components/RequestPane/RequestBody';
import RequestBodyMode from 'components/RequestPane/RequestBody/RequestBodyMode';
import QueryUrl from 'components/RequestPane/QueryUrl';
import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
import StyledWrapper from './StyledWrapper';
const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
@ -16,8 +14,6 @@ const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
const tabs = useSelector((state) => state.tabs.tabs);
const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
const handleRun = async () => dispatch(sendRequest(item, collection.uid));
const selectTab = (tab) => {
dispatch(updateRequestPaneTab({
uid: item.uid,
@ -62,14 +58,7 @@ const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
};
return (
<StyledWrapper className="flex flex-col h-full relativ">
<div className="pt-2 pb-3">
<QueryUrl
item = {item}
collection={collection}
handleRun={handleRun}
/>
</div>
<StyledWrapper className="flex flex-col h-full relative">
<div className="flex items-center tabs" role="tablist">
<div className={getTabClassname('params')} role="tab" onClick={() => selectTab('params')}>Params</div>
<div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>Body</div>

View File

@ -7,7 +7,9 @@ import ResponsePane from 'components/ResponsePane';
import Welcome from 'components/Welcome';
import { findItemInCollection } from 'utils/collections';
import { updateRequestPaneTabWidth } from 'providers/ReduxStore/slices/tabs';
import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
import RequestNotFound from './RequestNotFound';
import QueryUrl from 'components/RequestPane/QueryUrl';
import useGraphqlSchema from '../../hooks/useGraphqlSchema';
import StyledWrapper from './StyledWrapper';
@ -101,13 +103,21 @@ const RequestTabPanel = () => {
);
};
const handleRun = async () => dispatch(sendRequest(item, collection.uid));
const onGraphqlQueryChange = (value) => {};
const runQuery = async () => {};
return (
<StyledWrapper className={`flex flex-col flex-grow ${dragging ? 'dragging' : ''}`}>
<section className="main flex flex-grow">
<section className="request-pane mt-2">
<div className="pt-4 pb-3 px-4">
<QueryUrl
item = {item}
collection={collection}
handleRun={handleRun}
/>
</div>
<section className="main flex flex-grow pb-4">
<section className="request-pane">
<div
className="px-4"
style={{width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)'}}
@ -136,7 +146,7 @@ const RequestTabPanel = () => {
<div className="drag-request-border" />
</div>
<section className="response-pane flex-grow mt-2">
<section className="response-pane flex-grow">
<ResponsePane
item={item}
collection={collection}

View File

@ -3,7 +3,8 @@ import find from 'lodash/find';
import Mousetrap from 'mousetrap';
import { useSelector, useDispatch } from 'react-redux';
import SaveRequest from 'components/RequestPane/SaveRequest';
import { saveRequest, sendRequest } from 'providers/ReduxStore/slices/collections';
import { saveRequest } from 'providers/ReduxStore/slices/collections';
import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
import { findCollectionByUid, findItemInCollection } from 'utils/collections';
export const HotkeysContext = React.createContext();

View File

@ -195,7 +195,6 @@ export const transformCollectionToSaveToIdb = (collection, options = {}) => {
json: si.request.body.json,
text: si.request.body.text,
xml: si.request.body.xml,
multipartForm: si.request.body.multipartForm,
formUrlEncoded: copyFormUrlEncodedParams(si.request.body.formUrlEncoded),
multipartForm: copyMultipartFormParams(si.request.body.multipartForm)
}