diff --git a/packages/grafnode-components/src/components/RequestTabPanel/index.js b/packages/grafnode-components/src/components/RequestTabPanel/index.js index 7c25a3730..abdc576d2 100644 --- a/packages/grafnode-components/src/components/RequestTabPanel/index.js +++ b/packages/grafnode-components/src/components/RequestTabPanel/index.js @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react'; import find from 'lodash/find'; -import { rawRequest, gql } from 'graphql-request'; import QueryUrl from '../QueryUrl'; import RequestPane from '../RequestPane'; import ResponsePane from '../ResponsePane'; @@ -19,13 +18,11 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re } let asideWidth = 200; - let [data, setData] = useState({}); let [url, setUrl] = useState('https://api.spacex.land/graphql'); let { schema } = useGraphqlSchema('https://api.spacex.land/graphql'); let [query, setQuery] = useState(''); - let [isLoading, setIsLoading] = useState(false); const [leftPaneWidth, setLeftPaneWidth] = useState(500); const [rightPaneWidth, setRightPaneWidth] = useState(window.innerWidth - 700 - asideWidth); const [dragging, setDragging] = useState(false); @@ -83,33 +80,11 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re } const runQuery = async () => { - const query = gql`${item.request.body.graphql.query}`; - - setIsLoading(true); - const timeStart = Date.now(); - const { data, errors, extensions, headers, status } = await rawRequest(item.request.url, query); - const timeEnd = Date.now(); - setData(data); - setIsLoading(false); - console.log(headers); - - if(data && !errors) { - // todo: alternate way to calculate length when content length is not present - const size = headers.map["content-length"]; - - dispatch({ - type: actions.RESPONSE_RECEIVED, - response: { - data: data, - headers: Object.entries(headers.map), - size: size, - status: status, - duration: timeEnd - timeStart - }, - requestTab: focusedTab, - collectionId: collection.id - }); - } + dispatch({ + type: actions.SEND_REQUEST, + requestTab: focusedTab, + collectionId: collection ? collection.id : null + }); }; return ( @@ -148,7 +123,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re diff --git a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js index 532da8997..af29e3a7a 100644 --- a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js +++ b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js @@ -22,7 +22,7 @@ const Wrapper = styled.div` padding-right: 0; cursor: pointer; font-size: 0.8125rem; - height: 40px; + height: 38px; .tab-container { width: 100%; diff --git a/packages/grafnode-components/src/components/Welcome/index.js b/packages/grafnode-components/src/components/Welcome/index.js index 76330c750..2c30bd08c 100644 --- a/packages/grafnode-components/src/components/Welcome/index.js +++ b/packages/grafnode-components/src/components/Welcome/index.js @@ -3,9 +3,16 @@ import { IconPlus, IconUpload } from '@tabler/icons'; import StyledWrapper from './StyledWrapper'; const Welcome = ({dispatch, actions}) => { - const handleClick = () => { + const newGraphqlRequest = () => { dispatch({ - type: actions.ADD_NEW_HTTP_REQUEST + type: actions.ADD_NEW_GQL_REQUEST, + requestType: 'graphql' + }); + }; + const newHttpRequest = () => { + dispatch({ + type: actions.ADD_NEW_HTTP_REQUEST, + requestType: 'http' }); }; @@ -36,12 +43,12 @@ const Welcome = ({dispatch, actions}) => {
grafnode
-
opensource API collection collaboration platform
+
Opensource API collection collaboration platform
Create Request
-
+
@@ -49,7 +56,7 @@ const Welcome = ({dispatch, actions}) => { Http
-
+
{ + dispatch({ + type: actions.SENDING_REQUEST, + request: request, + collectionId: collectionId + }); + + const query = gql`${request.request.body.graphql.query}`; + + const timeStart = Date.now(); + const { data, errors, extensions, headers, status } = await rawRequest(request.request.url, query); + const timeEnd = Date.now(); + + if(data && !errors) { + // todo: alternate way to calculate length when content length is not present + const size = headers.map["content-length"]; + + dispatch({ + type: actions.RESPONSE_RECEIVED, + response: { + data: data, + headers: Object.entries(headers.map), + size: size, + status: status, + duration: timeEnd - timeStart + }, + request: request, + collectionId: collectionId + }); + } +}; + +export { + sendRequest +}; diff --git a/packages/grafnode-run/src/providers/Store/actions.js b/packages/grafnode-run/src/providers/Store/actions.js index e9e89d963..0d91c3f2f 100644 --- a/packages/grafnode-run/src/providers/Store/actions.js +++ b/packages/grafnode-run/src/providers/Store/actions.js @@ -3,8 +3,11 @@ const SIDEBAR_COLLECTION_ITEM_CLICK = "SIDEBAR_COLLECTION_ITEM_CLICK"; const REQUEST_TAB_CLICK = "REQUEST_TAB_CLICK"; const REQUEST_TAB_CLOSE = "REQUEST_TAB_CLOSE"; const RESPONSE_RECEIVED = "RESPONSE_RECEIVED"; +const SEND_REQUEST = "SEND_REQUEST"; +const SENDING_REQUEST = "SENDING_REQUEST"; const ADD_REQUEST = "ADD_REQUEST"; const ADD_NEW_HTTP_REQUEST = "ADD_NEW_HTTP_REQUEST"; +const ADD_NEW_GQL_REQUEST = "ADD_NEW_GQL_REQUEST"; export default { SIDEBAR_COLLECTION_CLICK, @@ -12,6 +15,9 @@ export default { REQUEST_TAB_CLICK, REQUEST_TAB_CLOSE, RESPONSE_RECEIVED, + SEND_REQUEST, + SENDING_REQUEST, ADD_REQUEST, - ADD_NEW_HTTP_REQUEST + ADD_NEW_HTTP_REQUEST, + ADD_NEW_GQL_REQUEST }; diff --git a/packages/grafnode-run/src/providers/Store/index.js b/packages/grafnode-run/src/providers/Store/index.js index 9650f001d..f7d9aa9a1 100644 --- a/packages/grafnode-run/src/providers/Store/index.js +++ b/packages/grafnode-run/src/providers/Store/index.js @@ -1,5 +1,6 @@ -import React, { useContext, useReducer, createContext } from 'react'; +import React, { useEffect, useContext, useReducer, createContext } from 'react'; import reducer from './reducer'; +import { sendRequest } from '../../network'; import { nanoid } from 'nanoid'; export const StoreContext = createContext(); @@ -108,12 +109,24 @@ const collection2 = { const initialState = { collections: [collection, collection2], - activeRequestTabId: null, + activeRequestTabId: null, + requestQueuedToSend: null, requestTabs: [] }; export const StoreProvider = props => { - const [state, dispatch] = useReducer(reducer, initialState); + const [state, dispatch] = useReducer(reducer, initialState); + + useEffect(() => { + if(state.requestQueuedToSend) { + const { + request, + collectionId + } = state.requestQueuedToSend; + + sendRequest(request, collectionId, dispatch) + } + }, [state.requestQueuedToSend]); return ; }; diff --git a/packages/grafnode-run/src/providers/Store/reducer.js b/packages/grafnode-run/src/providers/Store/reducer.js index bcc7b55f4..b5b1ffffb 100644 --- a/packages/grafnode-run/src/providers/Store/reducer.js +++ b/packages/grafnode-run/src/providers/Store/reducer.js @@ -66,6 +66,25 @@ const reducer = (state, action) => { name: 'New Tab', method: 'GET', request: { + type: 'http', + url: 'https://api.spacex.land/graphql/', + body: {} + }, + collectionId: null + }); + draft.activeRequestTabId = uid; + }); + } + + case actions.ADD_NEW_GQL_REQUEST: { + return produce(state, (draft) => { + const uid = nanoid(); + draft.requestTabs.push({ + id: uid, + name: 'New Tab', + method: 'GET', + request: { + type: 'graphql', url: 'https://api.spacex.land/graphql/', body: { graphql: { @@ -79,7 +98,7 @@ const reducer = (state, action) => { }); } - case actions.RESPONSE_RECEIVED: { + case actions.SEND_REQUEST: { return produce(state, (draft) => { const collection = find(draft.collections, (c) => c.id === action.collectionId); @@ -87,6 +106,42 @@ const reducer = (state, action) => { let flattenedItems = flattenItems(collection.items); let item = findItem(flattenedItems, action.requestTab.id); + if(item) { + item.response = item.response || {}; + item.response.state = 'queued'; + draft.requestQueuedToSend = { + collectionId: action.collectionId, + request: item + } + } + } + }); + } + + case actions.SENDING_REQUEST: { + return produce(state, (draft) => { + const collection = find(draft.collections, (c) => c.id === action.collectionId); + + if(collection) { + let flattenedItems = flattenItems(collection.items); + let item = findItem(flattenedItems, action.request.id); + + if(item) { + item.response.state = 'sending'; + draft.requestQueuedToSend = null; + } + } + }); + } + + case actions.RESPONSE_RECEIVED: { + return produce(state, (draft) => { + const collection = find(draft.collections, (c) => c.id === action.collectionId); + + if(collection) { + let flattenedItems = flattenItems(collection.items); + let item = findItem(flattenedItems, action.request.id); + if(item) { item.response = action.response; } @@ -122,6 +177,7 @@ const reducer = (state, action) => { "depth": 2, "name": "Capsules 2", "request": { + "type": "graphql", "url": "https://api.spacex.land/graphql/", "method": "POST", "headers": [],