import { useDeleteAllResponses, useDeleteResponse, useResponses } from '../hooks/useResponses';
import { motion } from 'framer-motion';
import { HStack, VStack } from './Stacks';
import Editor from './Editor/Editor';
import { useMemo } from 'react';
import { WindowDragRegion } from './WindowDragRegion';
import { Dropdown } from './Dropdown';
import { IconButton } from './IconButton';
interface Props {
requestId: string;
error: string | null;
}
export function ResponsePane({ requestId, error }: Props) {
const responses = useResponses(requestId);
const response = responses.data[0];
const deleteResponse = useDeleteResponse(response);
const deleteAllResponses = useDeleteAllResponses(response?.requestId);
const contentType = useMemo(
() =>
response?.headers.find((h) => h.name.toLowerCase() === 'content-type')?.value ?? 'text/plain',
[response],
);
const contentForIframe: string = useMemo(() => {
if (response == null) return '';
if (response.body.includes('')) {
return response.body.replace(//gi, ``);
}
return response.body;
}, [response?.id]);
return (
{error && {error}
}
{response && (
<>
{response.status}
{response.statusReason && ` ${response.statusReason}`}
•
{response.elapsed}ms
{contentType.includes('html') ? (
) : response?.body ? (
) : null}
)}
);
}