import React, { useState, useEffect, useRef } from 'react'; import find from 'lodash/find'; import toast from 'react-hot-toast'; import { useSelector, useDispatch } from 'react-redux'; import GraphQLRequestPane from 'components/RequestPane/GraphQLRequestPane'; import HttpRequestPane from 'components/RequestPane/HttpRequestPane'; import ResponsePane from 'components/ResponsePane'; import Welcome from 'components/Welcome'; import { findItemInCollection } from 'utils/collections'; import { updateRequestPaneTabWidth } from 'providers/ReduxStore/slices/tabs'; import { sendRequest } from 'providers/ReduxStore/slices/collections/actions'; import RequestNotFound from './RequestNotFound'; import QueryUrl from 'components/RequestPane/QueryUrl'; import NetworkError from 'components/ResponsePane/NetworkError'; import RunnerResults from 'components/RunnerResults'; import VariablesEditor from 'components/VariablesEditor'; import CollectionSettings from 'components/CollectionSettings'; import { DocExplorer } from '@usebruno/graphql-docs'; import StyledWrapper from './StyledWrapper'; import FolderSettings from 'components/FolderSettings'; const MIN_LEFT_PANE_WIDTH = 300; const MIN_RIGHT_PANE_WIDTH = 350; const DEFAULT_PADDING = 5; const RequestTabPanel = () => { if (typeof window == 'undefined') { return
; } const dispatch = useDispatch(); const tabs = useSelector((state) => state.tabs.tabs); const activeTabUid = useSelector((state) => state.tabs.activeTabUid); const collections = useSelector((state) => state.collections.collections); const screenWidth = useSelector((state) => state.app.screenWidth); let asideWidth = useSelector((state) => state.app.leftSidebarWidth); const focusedTab = find(tabs, (t) => t.uid === activeTabUid); const [leftPaneWidth, setLeftPaneWidth] = useState( focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2 ); // 2.2 so that request pane is relatively smaller const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING); const [dragging, setDragging] = useState(false); // Not a recommended pattern here to have the child component // make a callback to set state, but treating this as an exception const docExplorerRef = useRef(null); const [schema, setSchema] = useState(null); const [showGqlDocs, setShowGqlDocs] = useState(false); const onSchemaLoad = (schema) => setSchema(schema); const toggleDocs = () => setShowGqlDocs((showGqlDocs) => !showGqlDocs); const handleGqlClickReference = (reference) => { if (docExplorerRef.current) { docExplorerRef.current.showDocForReference(reference); } if (!showGqlDocs) { setShowGqlDocs(true); } }; useEffect(() => { const leftPaneWidth = (screenWidth - asideWidth) / 2.2; setLeftPaneWidth(leftPaneWidth); }, [screenWidth]); useEffect(() => { setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING); }, [screenWidth, asideWidth, leftPaneWidth]); const handleMouseMove = (e) => { if (dragging) { e.preventDefault(); let leftPaneXPosition = e.clientX + 2; if ( leftPaneXPosition < asideWidth + DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH || leftPaneXPosition > screenWidth - MIN_RIGHT_PANE_WIDTH ) { return; } setLeftPaneWidth(leftPaneXPosition - asideWidth); setRightPaneWidth(screenWidth - e.clientX - DEFAULT_PADDING); } }; const handleMouseUp = (e) => { if (dragging) { e.preventDefault(); setDragging(false); dispatch( updateRequestPaneTabWidth({ uid: activeTabUid, requestPaneWidth: e.clientX - asideWidth - DEFAULT_PADDING }) ); } }; 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, asideWidth]); if (!activeTabUid) { return ; } if (!focusedTab || !focusedTab.uid || !focusedTab.collectionUid) { return
An error occurred!
; } let collection = find(collections, (c) => c.uid === focusedTab.collectionUid); if (!collection || !collection.uid) { return
Collection not found!
; } if (focusedTab.type === 'collection-runner') { return ; } if (focusedTab.type === 'variables') { return ; } if (focusedTab.type === 'collection-settings') { return ; } if (focusedTab.type === 'folder-settings') { const folder = findItemInCollection(collection, focusedTab.folderUid); return ; } const item = findItemInCollection(collection, activeTabUid); if (!item || !item.uid) { return ; } const handleRun = async () => { dispatch(sendRequest(item, collection.uid)).catch((err) => toast.custom((t) => toast.dismiss(t.id)} />, { duration: 5000 }) ); }; return (
{item.type === 'graphql-request' ? ( ) : null} {item.type === 'http-request' ? ( ) : null}
{item.type === 'graphql-request' ? (
(docExplorerRef.current = r)}>
) : null}
); }; export default RequestTabPanel;