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 ( ); } const focusedTab = find(tabs, (t) => t.uid === activeTabUid); if(!focusedTab || !focusedTab.uid || !focusedTab.collectionUid) { return (
An error occured!
); } let collection = find(collections, (c) => c.uid === focusedTab.collectionUid); if(!collection || !collection.uid) { return (
Collection not found!
); } const item = findItemInCollection(collection, activeTabUid); const onUrlChange = (value) => { dispatch(requestChanged({ itemUid: item.uid, collectionUid: collection.uid })); dispatch(requestUrlChanged({ itemUid: item.uid, collectionUid: collection.uid, url: value })); }; const runQuery = async () => { // todo }; const sendNetworkRequest = async () => { dispatch(sendRequest(item, collection.uid)); }; return (
{item.name}
{item.type === 'graphql-request' ? ( ) : null} {item.type === 'http-request' ? ( ) : null}
) }; export default RequestTabPanel;