2021-12-04 12:30:03 +01:00
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
import find from 'lodash/find';
|
2022-03-13 22:13:36 +01:00
|
|
|
import { useStore } from 'providers/Store';
|
|
|
|
import actions from 'providers/Store/actions';
|
|
|
|
import QueryUrl from 'components/QueryUrl';
|
|
|
|
import GraphQLRequestPane from 'components/GraphQLRequestPane';
|
|
|
|
import HttpRequestPane from 'components/HttpRequestPane';
|
|
|
|
import ResponsePane from 'components/ResponsePane';
|
|
|
|
import Welcome from 'components/Welcome';
|
2021-12-04 12:30:03 +01:00
|
|
|
import {
|
|
|
|
flattenItems,
|
|
|
|
findItem
|
|
|
|
} from '../../utils';
|
2021-12-06 14:29:49 +01:00
|
|
|
import useGraphqlSchema from '../../hooks/useGraphqlSchema';
|
2021-12-04 12:30:03 +01:00
|
|
|
|
|
|
|
import StyledWrapper from './StyledWrapper';
|
|
|
|
|
2022-03-13 22:13:36 +01:00
|
|
|
const RequestTabPanel = () => {
|
2021-12-04 12:30:03 +01:00
|
|
|
if(typeof window == 'undefined') {
|
|
|
|
return <div></div>;
|
|
|
|
}
|
2022-03-13 22:13:36 +01:00
|
|
|
const [store, storeDispatch] = useStore();
|
|
|
|
|
|
|
|
const {
|
|
|
|
collections,
|
|
|
|
requestTabs,
|
|
|
|
activeRequestTabUid
|
|
|
|
} = store;
|
2021-12-04 12:30:03 +01:00
|
|
|
|
2022-01-31 06:06:29 +01:00
|
|
|
let asideWidth = 270;
|
2021-12-06 14:29:49 +01:00
|
|
|
let {
|
|
|
|
schema
|
|
|
|
} = useGraphqlSchema('https://api.spacex.land/graphql');
|
2022-01-26 11:04:46 +01:00
|
|
|
const [leftPaneWidth, setLeftPaneWidth] = useState((window.innerWidth - asideWidth)/2 - 10); // 10 is for dragbar
|
|
|
|
const [rightPaneWidth, setRightPaneWidth] = useState((window.innerWidth - asideWidth)/2);
|
2021-12-04 12:30:03 +01:00
|
|
|
const [dragging, setDragging] = useState(false);
|
|
|
|
const handleMouseMove = (e) => {
|
|
|
|
if(dragging) {
|
2022-01-26 11:04:46 +01:00
|
|
|
e.preventDefault();
|
|
|
|
setLeftPaneWidth(e.clientX - asideWidth);
|
2021-12-04 12:30:03 +01:00
|
|
|
setRightPaneWidth(window.innerWidth - (e.clientX));
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const handleMouseUp = (e) => {
|
2022-01-26 11:04:46 +01:00
|
|
|
if(dragging) {
|
|
|
|
e.preventDefault();
|
|
|
|
setDragging(false);
|
|
|
|
}
|
2021-12-04 12:30:03 +01:00
|
|
|
};
|
2022-01-26 11:04:46 +01:00
|
|
|
const handleDragbarMouseDown = (e) => {
|
2021-12-04 12:30:03 +01:00
|
|
|
e.preventDefault();
|
|
|
|
setDragging(true);
|
|
|
|
};
|
|
|
|
|
2022-01-26 11:04:46 +01:00
|
|
|
useEffect(() => {
|
|
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
|
|
};
|
|
|
|
}, [dragging, leftPaneWidth]);
|
2022-01-18 17:11:27 +01:00
|
|
|
|
|
|
|
const onUrlChange = (value) => {
|
2022-03-13 22:13:36 +01:00
|
|
|
storeDispatch({
|
2022-01-18 17:11:27 +01:00
|
|
|
type: actions.REQUEST_URL_CHANGED,
|
|
|
|
url: value,
|
|
|
|
requestTab: focusedTab,
|
2022-03-13 22:13:36 +01:00
|
|
|
collectionUid: collection ? collection.uid : null
|
2022-01-18 17:11:27 +01:00
|
|
|
});
|
|
|
|
};
|
2021-12-04 12:30:03 +01:00
|
|
|
|
2022-01-18 17:25:22 +01:00
|
|
|
const onGraphqlQueryChange = (value) => {
|
2022-03-13 22:13:36 +01:00
|
|
|
storeDispatch({
|
2022-01-18 17:25:22 +01:00
|
|
|
type: actions.REQUEST_GQL_QUERY_CHANGED,
|
|
|
|
query: value,
|
|
|
|
requestTab: focusedTab,
|
2022-03-13 22:13:36 +01:00
|
|
|
collectionUid: collection ? collection.uid : null
|
2022-01-18 17:25:22 +01:00
|
|
|
});
|
|
|
|
};
|
2021-12-04 12:30:03 +01:00
|
|
|
|
2022-03-13 22:13:36 +01:00
|
|
|
if(!activeRequestTabUid) {
|
2021-12-04 12:30:03 +01:00
|
|
|
return (
|
2022-03-13 22:13:36 +01:00
|
|
|
<Welcome dispatch={storeDispatch} actions={actions}/>
|
2021-12-04 12:30:03 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-03-13 22:13:36 +01:00
|
|
|
const focusedTab = find(requestTabs, (rt) => rt.uid === activeRequestTabUid);
|
2021-12-04 12:30:03 +01:00
|
|
|
|
2022-03-13 22:13:36 +01:00
|
|
|
if(!focusedTab || !focusedTab.uid) {
|
2021-12-04 12:30:03 +01:00
|
|
|
return (
|
|
|
|
<div className="pb-4 px-4">An error occured!</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-01-04 18:00:15 +01:00
|
|
|
let collection;
|
|
|
|
let item;
|
|
|
|
|
2022-03-13 22:13:36 +01:00
|
|
|
if(focusedTab.collectionUid) {
|
|
|
|
collection = find(collections, (c) => c.uid === focusedTab.collectionUid);
|
2022-01-04 18:00:15 +01:00
|
|
|
let flattenedItems = flattenItems(collection.items);
|
2022-03-13 22:13:36 +01:00
|
|
|
item = findItem(flattenedItems, activeRequestTabUid);
|
2022-01-04 18:00:15 +01:00
|
|
|
} else {
|
|
|
|
item = focusedTab;
|
|
|
|
}
|
2021-12-04 12:30:03 +01:00
|
|
|
|
|
|
|
const runQuery = async () => {
|
2022-03-13 22:13:36 +01:00
|
|
|
storeDispatch({
|
2022-01-18 15:58:18 +01:00
|
|
|
type: actions.SEND_REQUEST,
|
|
|
|
requestTab: focusedTab,
|
2022-03-13 22:13:36 +01:00
|
|
|
collectionUid: collection ? collection.uid : null
|
2022-01-18 15:58:18 +01:00
|
|
|
});
|
2021-12-04 12:30:03 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2022-01-07 20:26:10 +01:00
|
|
|
<StyledWrapper className="flex flex-col flex-grow">
|
2021-12-04 12:30:03 +01:00
|
|
|
<div
|
|
|
|
className="pb-4 px-4"
|
|
|
|
style={{
|
2022-01-24 23:11:35 +01:00
|
|
|
borderBottom: 'solid 1px var(--color-layout-border)'
|
2021-12-04 12:30:03 +01:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div className="pt-2 text-gray-600">{item.name}</div>
|
|
|
|
<QueryUrl
|
2022-01-18 17:11:27 +01:00
|
|
|
value = {item.request.url}
|
2021-12-04 12:30:03 +01:00
|
|
|
onChange={onUrlChange}
|
|
|
|
handleRun={runQuery}
|
2022-01-07 17:50:24 +01:00
|
|
|
collections={collections}
|
2021-12-04 12:30:03 +01:00
|
|
|
/>
|
|
|
|
</div>
|
2022-01-07 20:26:10 +01:00
|
|
|
<section className="main flex flex-grow">
|
2022-01-26 11:04:46 +01:00
|
|
|
<section className="request-pane">
|
|
|
|
<div
|
|
|
|
className="px-4"
|
|
|
|
style={{width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)'}}
|
|
|
|
>
|
2022-01-20 17:04:44 +01:00
|
|
|
{item.request.type === 'graphql' ? (
|
|
|
|
<GraphQLRequestPane
|
|
|
|
onRunQuery={runQuery}
|
|
|
|
schema={schema}
|
|
|
|
leftPaneWidth={leftPaneWidth}
|
|
|
|
value={item.request.body.graphql.query}
|
|
|
|
onQueryChange={onGraphqlQueryChange}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
{item.request.type === 'http' ? (
|
|
|
|
<HttpRequestPane
|
|
|
|
leftPaneWidth={leftPaneWidth}
|
|
|
|
/>
|
|
|
|
) : null}
|
2021-12-04 12:30:03 +01:00
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
2022-01-26 11:04:46 +01:00
|
|
|
<div className="drag-request" onMouseDown={handleDragbarMouseDown}>
|
2021-12-04 12:30:03 +01:00
|
|
|
</div>
|
|
|
|
|
2022-01-26 16:01:49 +01:00
|
|
|
<section className="response-pane flex-grow">
|
2021-12-04 12:30:03 +01:00
|
|
|
<ResponsePane
|
|
|
|
rightPaneWidth={rightPaneWidth}
|
2022-01-01 19:42:38 +01:00
|
|
|
response={item.response}
|
2022-01-18 15:58:18 +01:00
|
|
|
isLoading={item.response && item.response.state === 'sending' ? true : false}
|
2021-12-04 12:30:03 +01:00
|
|
|
/>
|
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</StyledWrapper>
|
|
|
|
)
|
|
|
|
};
|
|
|
|
|
|
|
|
export default RequestTabPanel;
|