feat: welcome screen add new request

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 (
-      <div className="pb-4 px-4">No request selected</div>
+      <Welcome dispatch={dispatch} actions={actions}/>
     );
   }
 
@@ -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}`;

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;

packages/grafnode-components/src/components/Welcome/StyledWrapper.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+`;
+
+export default StyledWrapper;

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 (
+    <StyledWrapper className="pb-4 px-4">
+      <div>Welcome</div>
+
+      <div>
+        <button
+          style={{backgroundColor: '#8e44ad'}}
+          className="flex items-center h-full text-white active:bg-blue-600 font-bold text-xs px-4 py-2 ml-2 uppercase rounded shadow hover:shadow-md outline-none focus:outline-none ease-linear transition-all duration-150"
+          onClick={handleClick}
+        >
+          Add Request
+        </button>
+      </div>
+    </StyledWrapper>
+  )
+};
+
+export default Welcome;

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
 };

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);