import classnames from 'classnames'; import { useEffect, useMemo, useState } from 'react'; import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses'; import { Button } from './Button'; import { Divider } from './Divider'; import { Dropdown } from './Dropdown'; import Editor from './Editor/Editor'; import { Icon } from './Icon'; import { IconButton } from './IconButton'; import { ScrollArea } from './ScrollArea'; import { HStack } from './Stacks'; interface Props { requestId: string; className?: string; } export function ResponsePane({ requestId, className }: Props) { const [activeResponseId, setActiveResponseId] = useState(null); const [viewMode, setViewMode] = useState<'pretty' | 'raw'>('pretty'); const responses = useResponses(requestId); const response = activeResponseId ? responses.data.find((r) => r.id === activeResponseId) : responses.data[responses.data.length - 1]; const deleteResponse = useDeleteResponse(response); const deleteAllResponses = useDeleteAllResponses(response?.requestId); useEffect(() => { setActiveResponseId(null); }, [responses.data?.length]); const contentType = useMemo( () => response?.headers.find((h) => h.name.toLowerCase() === 'content-type')?.value ?? 'text/plain', [response], ); const contentForIframe: string | null = useMemo(() => { if (!contentType.includes('html')) return null; if (response == null) return null; if (response.body.includes('')) { return response.body.replace(//gi, ``); } return response.body; }, [response?.body, contentType]); return (

{/**/} {/**/} {response?.error && (

{response.error}

)} {response && ( <>

{response.status} {response.statusReason && ` ${response.statusReason}`} • {response.elapsed}ms • {Math.round(response.body.length / 1000)} KB

{contentType.includes('html') && ( setViewMode((m) => (m === 'pretty' ? 'raw' : 'pretty'))} /> )} ({ label: r.status + ' - ' + r.elapsed + ' ms', leftSlot: response?.id === r.id ? : <>, onSelect: () => setActiveResponseId(r.id), })), ]} >

{['Preview', 'Headers', 'Cookies', 'Timing'].map((label, i) => ( ))} {viewMode === 'pretty' && contentForIframe !== null ? (