import React, { useState, useEffect } from 'react'; import find from 'lodash/find'; import { useSelector, useDispatch } from 'react-redux'; import QueryUrl from 'components/QueryUrl'; import GraphQLRequestPane from 'components/GraphQLRequestPane'; import HttpRequestPane from 'components/HttpRequestPane'; import ResponsePane from 'components/ResponsePane'; import Welcome from 'components/Welcome'; import { findItemInCollection } from 'utils/collections'; import { sendRequest, requestUrlChanged } from 'providers/ReduxStore/slices/collections'; import { requestChanged } from 'providers/ReduxStore/slices/tabs'; import useGraphqlSchema from '../../hooks/useGraphqlSchema'; import StyledWrapper from './StyledWrapper'; const RequestTabPanel = () => { if(typeof window == 'undefined') { return
; } const tabs = useSelector((state) => state.tabs.tabs); const activeTabUid = useSelector((state) => state.tabs.activeTabUid); const collections = useSelector((state) => state.collections.collections); const dispatch = useDispatch(); let asideWidth = 270; let { schema } = useGraphqlSchema('https://api.spacex.land/graphql'); const [leftPaneWidth, setLeftPaneWidth] = useState((window.innerWidth - asideWidth)/2 - 10); // 10 is for dragbar const [rightPaneWidth, setRightPaneWidth] = useState((window.innerWidth - asideWidth)/2); const [dragging, setDragging] = useState(false); const handleMouseMove = (e) => { if(dragging) { e.preventDefault(); setLeftPaneWidth(e.clientX - asideWidth); setRightPaneWidth(window.innerWidth - (e.clientX)); } }; const handleMouseUp = (e) => { if(dragging) { e.preventDefault(); setDragging(false); } }; const handleDragbarMouseDown = (e) => { e.preventDefault(); setDragging(true); }; useEffect(() => { document.addEventListener('mouseup', handleMouseUp); document.addEventListener('mousemove', handleMouseMove); return () => { document.removeEventListener('mouseup', handleMouseUp); document.removeEventListener('mousemove', handleMouseMove); }; }, [dragging, leftPaneWidth]); const onGraphqlQueryChange = (value) => { // todo }; if(!activeTabUid) { return (