feat: Request and Responses Panes, CodeMirror View

packages/grafnode-run/package.json

@@ -27,11 +27,15 @@
     "@tabler/icons": "^1.46.0",
     "@tippyjs/react": "^4.2.6",
     "classnames": "^2.3.1",
+    "codemirror": "^5.64.0",
+    "graphql-request": "^3.7.0",
     "immer": "^9.0.7",
+    "lodash": "^4.17.21",
     "nanoid": "^3.1.30",
     "next": "12.0.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-tabs": "^3.2.3",
     "styled-components": "^5.3.3",
     "tailwindcss": "^2.2.19"
   },

packages/grafnode-run/src/pageComponents/Main/index.js

@@ -1,14 +1,22 @@
 import React from 'react';
+import dynamic from 'next/dynamic'
 import {
   Navbar,
   RequestTabs,
   Sidebar
 } from '@grafnode/components';
 import actions from 'providers/Store/actions';
-import { useStore } from 'providers/Store';
+import { useStore } from '../../providers/Store/index';
 import StyledWrapper from './StyledWrapper';
 
+const RequestTabPanel = dynamic(import('@grafnode/components').then(mod => mod.RequestTabPanel), { ssr: false });
+
 export default function Main() {
+  // disable ssr
+  if(typeof window === 'undefined') {
+    return null;
+  }
+
   const [state, dispatch] = useStore();
 
   const {
@@ -17,8 +25,6 @@ export default function Main() {
     activeRequestTabId
   } = state;
 
-  console.log(actions);
-
   return (
     <div>
       <Navbar />
@@ -36,6 +42,11 @@ export default function Main() {
             dispatch={dispatch}
             activeRequestTabId={activeRequestTabId}
           />
+          <RequestTabPanel
+            collections={collections}
+            requestTabs={requestTabs}
+            activeRequestTabId={activeRequestTabId}
+          />
         </section>
       </StyledWrapper>
     </div>

packages/grafnode-run/src/pages/_app.js

@@ -2,6 +2,8 @@ import { StoreProvider } from 'providers/Store';
 
 import '../styles/globals.css'
 import 'tailwindcss/dist/tailwind.min.css';
+import 'react-tabs/style/react-tabs.css';
+import 'codemirror/lib/codemirror.css';
 
 function MyApp({ Component, pageProps }) {
   return (