diff --git a/packages/grafnode-components/src/components/RequestTabPanel/index.js b/packages/grafnode-components/src/components/RequestTabPanel/index.js index 4819f6f8a..6776ba9c8 100644 --- a/packages/grafnode-components/src/components/RequestTabPanel/index.js +++ b/packages/grafnode-components/src/components/RequestTabPanel/index.js @@ -4,6 +4,7 @@ import { rawRequest, gql } from 'graphql-request'; import QueryUrl from '../QueryUrl'; import RequestPane from '../RequestPane'; import ResponsePane from '../ResponsePane'; +import Welcome from '../Welcome'; import { flattenItems, findItem @@ -58,7 +59,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re if(!activeRequestTabId) { return ( -
No request selected
+ ); } @@ -70,9 +71,16 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re ); } - const collection = find(collections, (c) => c.id === focusedTab.collectionId); - const flattenedItems = flattenItems(collection.items); - const item = findItem(flattenedItems, activeRequestTabId); + let collection; + let item; + + if(focusedTab.collectionId) { + collection = find(collections, (c) => c.id === focusedTab.collectionId); + let flattenedItems = flattenItems(collection.items); + item = findItem(flattenedItems, activeRequestTabId); + } else { + item = focusedTab; + } const runQuery = async () => { const query = gql`${item.request.body.graphql.query}`; diff --git a/packages/grafnode-components/src/components/Sidebar/index.js b/packages/grafnode-components/src/components/Sidebar/index.js index df4d04efe..d97f4fdc3 100644 --- a/packages/grafnode-components/src/components/Sidebar/index.js +++ b/packages/grafnode-components/src/components/Sidebar/index.js @@ -7,7 +7,7 @@ import { IconBox, IconSearch, IconDots } from '@tabler/icons'; import StyledWrapper from './StyledWrapper'; const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => { - const [modalOpen, setModalOpen] = useState(true); + const [modalOpen, setModalOpen] = useState(false); const menuDropdownTippyRef = useRef(); const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref; diff --git a/packages/grafnode-components/src/components/Welcome/StyledWrapper.js b/packages/grafnode-components/src/components/Welcome/StyledWrapper.js new file mode 100644 index 000000000..2a193b181 --- /dev/null +++ b/packages/grafnode-components/src/components/Welcome/StyledWrapper.js @@ -0,0 +1,6 @@ +import styled from 'styled-components'; + +const StyledWrapper = styled.div` +`; + +export default StyledWrapper; diff --git a/packages/grafnode-components/src/components/Welcome/index.js b/packages/grafnode-components/src/components/Welcome/index.js new file mode 100644 index 000000000..7664e21b8 --- /dev/null +++ b/packages/grafnode-components/src/components/Welcome/index.js @@ -0,0 +1,28 @@ +import React from 'react'; +import StyledWrapper from './StyledWrapper'; + +const Welcome = ({dispatch, actions}) => { + const handleClick = () => { + dispatch({ + type: actions.ADD_NEW_HTTP_REQUEST + }); + }; + + return ( + +
Welcome
+ +
+ +
+
+ ) +}; + +export default Welcome; diff --git a/packages/grafnode-run/src/providers/Store/actions.js b/packages/grafnode-run/src/providers/Store/actions.js index 00c72951f..e9e89d963 100644 --- a/packages/grafnode-run/src/providers/Store/actions.js +++ b/packages/grafnode-run/src/providers/Store/actions.js @@ -4,6 +4,7 @@ const REQUEST_TAB_CLICK = "REQUEST_TAB_CLICK"; const REQUEST_TAB_CLOSE = "REQUEST_TAB_CLOSE"; const RESPONSE_RECEIVED = "RESPONSE_RECEIVED"; const ADD_REQUEST = "ADD_REQUEST"; +const ADD_NEW_HTTP_REQUEST = "ADD_NEW_HTTP_REQUEST"; export default { SIDEBAR_COLLECTION_CLICK, @@ -11,5 +12,6 @@ export default { REQUEST_TAB_CLICK, REQUEST_TAB_CLOSE, RESPONSE_RECEIVED, - ADD_REQUEST + ADD_REQUEST, + ADD_NEW_HTTP_REQUEST }; diff --git a/packages/grafnode-run/src/providers/Store/reducer.js b/packages/grafnode-run/src/providers/Store/reducer.js index 33ab693cc..43d65d86b 100644 --- a/packages/grafnode-run/src/providers/Store/reducer.js +++ b/packages/grafnode-run/src/providers/Store/reducer.js @@ -57,6 +57,27 @@ const reducer = (state, action) => { }); } + case actions.ADD_NEW_HTTP_REQUEST: { + return produce(state, (draft) => { + const uid = nanoid(); + draft.requestTabs.push({ + id: uid, + name: 'Untitled Request', + method: 'GET', + request: { + url: 'https://api.spacex.land/graphql/', + body: { + graphql: { + query: '{}' + } + } + }, + collectionId: null + }); + draft.activeRequestTabId = uid; + }); + } + case actions.RESPONSE_RECEIVED: { return produce(state, (draft) => { const collection = find(draft.collections, (c) => c.id === action.collectionId);