2021-12-03 20:37:38 +01:00
|
|
|
import React from 'react';
|
2021-12-04 12:30:03 +01:00
|
|
|
import dynamic from 'next/dynamic'
|
2021-12-03 21:33:46 +01:00
|
|
|
import {
|
|
|
|
RequestTabs,
|
|
|
|
Sidebar
|
|
|
|
} from '@grafnode/components';
|
2021-12-03 20:37:38 +01:00
|
|
|
import actions from 'providers/Store/actions';
|
2021-12-04 12:30:03 +01:00
|
|
|
import { useStore } from '../../providers/Store/index';
|
2021-12-03 20:37:38 +01:00
|
|
|
import StyledWrapper from './StyledWrapper';
|
|
|
|
|
2021-12-05 16:45:20 +01:00
|
|
|
import 'codemirror/mode/javascript/javascript';
|
|
|
|
import 'codemirror/addon/edit/matchbrackets';
|
|
|
|
import 'codemirror/addon/fold/brace-fold';
|
|
|
|
import 'codemirror/addon/fold/foldgutter';
|
2021-12-06 14:29:49 +01:00
|
|
|
import 'codemirror/addon/hint/show-hint';
|
|
|
|
import 'codemirror/keymap/sublime';
|
|
|
|
import 'codemirror/addon/comment/comment';
|
|
|
|
import 'codemirror/addon/edit/closebrackets';
|
|
|
|
import 'codemirror/addon/search/search';
|
|
|
|
import 'codemirror/addon/search/searchcursor';
|
|
|
|
import 'codemirror/addon/search/jump-to-line';
|
|
|
|
import 'codemirror/addon/dialog/dialog';
|
2021-12-05 16:45:20 +01:00
|
|
|
|
2021-12-06 14:29:49 +01:00
|
|
|
import 'codemirror-graphql/hint';
|
|
|
|
import 'codemirror-graphql/lint';
|
|
|
|
import 'codemirror-graphql/info';
|
|
|
|
import 'codemirror-graphql/jump';
|
2021-12-05 17:04:03 +01:00
|
|
|
import 'codemirror-graphql/mode';
|
|
|
|
|
2021-12-05 16:45:20 +01:00
|
|
|
import 'codemirror/addon/fold/foldgutter.css';
|
2022-01-26 11:04:46 +01:00
|
|
|
import 'codemirror/addon/dialog/dialog.css';
|
2021-12-06 14:29:49 +01:00
|
|
|
import 'codemirror/addon/hint/show-hint.css';
|
2021-12-05 16:45:20 +01:00
|
|
|
|
2021-12-04 12:30:03 +01:00
|
|
|
const RequestTabPanel = dynamic(import('@grafnode/components').then(mod => mod.RequestTabPanel), { ssr: false });
|
|
|
|
|
2021-12-03 20:37:38 +01:00
|
|
|
export default function Main() {
|
|
|
|
const [state, dispatch] = useStore();
|
|
|
|
|
|
|
|
const {
|
|
|
|
collections,
|
2021-12-03 21:33:46 +01:00
|
|
|
requestTabs,
|
2021-12-03 20:37:38 +01:00
|
|
|
activeRequestTabId
|
|
|
|
} = state;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<StyledWrapper>
|
|
|
|
<Sidebar
|
|
|
|
collections={collections}
|
|
|
|
actions={actions}
|
|
|
|
dispatch={dispatch}
|
|
|
|
activeRequestTabId={activeRequestTabId}
|
|
|
|
/>
|
2021-12-10 19:34:00 +01:00
|
|
|
<section className='flex flex-grow flex-col'>
|
2021-12-03 21:33:46 +01:00
|
|
|
<RequestTabs
|
|
|
|
requestTabs={requestTabs}
|
|
|
|
actions={actions}
|
|
|
|
dispatch={dispatch}
|
|
|
|
activeRequestTabId={activeRequestTabId}
|
|
|
|
/>
|
2021-12-04 12:30:03 +01:00
|
|
|
<RequestTabPanel
|
2021-12-09 17:44:49 +01:00
|
|
|
actions={actions}
|
|
|
|
dispatch={dispatch}
|
2021-12-04 12:30:03 +01:00
|
|
|
collections={collections}
|
|
|
|
requestTabs={requestTabs}
|
|
|
|
activeRequestTabId={activeRequestTabId}
|
|
|
|
/>
|
2021-12-03 20:37:38 +01:00
|
|
|
</section>
|
|
|
|
</StyledWrapper>
|
|
|
|
</div>
|
2021-12-30 15:12:04 +01:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|