Support binary responses!

2026-03-22 17:39:12 +01:00 · 2023-04-13 18:48:40 -07:00
parent 29309500a6
commit f9f1ba9e24
25 changed files with 455 additions and 231 deletions
--- a/src-web/components/responseViewers/ImageViewer.tsx
+++ b/src-web/components/responseViewers/ImageViewer.tsx
@@ -0,0 +1,15 @@
+import { convertFileSrc } from '@tauri-apps/api/tauri';
+import type { HttpResponse } from '../../lib/models';
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function ImageViewer({ response }: Props) {
+  if (response.bodyPath === null) {
+    return <div>Empty response body</div>;
+  }
+
+  const src = convertFileSrc(response.bodyPath);
+  return <img src={src} alt="Response preview" />;
+}
--- a/src-web/components/responseViewers/TextViewer.tsx
+++ b/src-web/components/responseViewers/TextViewer.tsx
@@ -0,0 +1,26 @@
+import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+import { useResponseContentType } from '../../hooks/useResponseContentType';
+import { tryFormatJson } from '../../lib/formatters';
+import type { HttpResponse } from '../../lib/models';
+import { Editor } from '../core/Editor';
+
+interface Props {
+  response: HttpResponse;
+  pretty: boolean;
+}
+
+export function TextViewer({ response, pretty }: Props) {
+  const contentType = useResponseContentType(response);
+  const rawBody = useResponseBodyText(response) ?? '';
+  const body = pretty && contentType?.includes('json') ? tryFormatJson(rawBody) : rawBody;
+
+  return (
+    <Editor
+      readOnly
+      forceUpdateKey={body}
+      className="bg-gray-50 dark:!bg-gray-100"
+      defaultValue={body}
+      contentType={contentType}
+    />
+  );
+}
--- a/src-web/components/responseViewers/WebPageViewer.tsx
+++ b/src-web/components/responseViewers/WebPageViewer.tsx
@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+import type { HttpResponse } from '../../lib/models';
+
+interface Props {
+  response: HttpResponse;
+}
+
+export function WebPageViewer({ response }: Props) {
+  const { url } = response;
+  const body = useResponseBodyText(response) ?? '';
+
+  const contentForIframe: string | undefined = useMemo(() => {
+    if (body.includes('<head>')) {
+      return body.replace(/<head>/gi, `<head><base href="${url}"/>`);
+    }
+    return body;
+  }, [url, body]);
+
+  return (
+    <div className="h-full pb-3">
+      <iframe
+        title="Response preview"
+        srcDoc={contentForIframe}
+        sandbox="allow-scripts allow-same-origin"
+        className="h-full w-full rounded border border-highlightSecondary"
+      />
+    </div>
+  );
+}