Refactor content viewer components and use for multpart and request body (#333)

src-web/components/responseViewers/HTMLOrTextViewer.tsx

@@ -1,7 +1,9 @@
 import type { HttpResponse } from '@yaakapp-internal/models';
+import { useMemo, useState } from 'react';
 import { useResponseBodyText } from '../../hooks/useResponseBodyText';
 import { languageFromContentType } from '../../lib/contentType';
 import { getContentTypeFromHeaders } from '../../lib/model_util';
+import type { EditorProps } from '../core/Editor/Editor';
 import { EmptyStateText } from '../EmptyStateText';
 import { TextViewer } from './TextViewer';
 import { WebPageViewer } from './WebPageViewer';
@@ -22,19 +24,54 @@ export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Prop
   }
 
   if (language === 'html' && pretty) {
-    return <WebPageViewer response={response} />;
+    return <WebPageViewer html={rawTextBody.data ?? ''} baseUrl={response.url} />;
   }
   if (rawTextBody.data == null) {
     return <EmptyStateText>Empty response</EmptyStateText>;
   }
   return (
-    <TextViewer
-      language={language}
+    <HttpTextViewer
+      response={response}
       text={rawTextBody.data}
+      language={language}
       pretty={pretty}
       className={textViewerClassName}
-      response={response}
-      requestId={response.requestId}
+    />
+  );
+}
+
+interface HttpTextViewerProps {
+  response: HttpResponse;
+  text: string;
+  language: EditorProps['language'];
+  pretty: boolean;
+  className?: string;
+}
+
+function HttpTextViewer({ response, text, language, pretty, className }: HttpTextViewerProps) {
+  const [currentFilter, setCurrentFilter] = useState<string | null>(null);
+  const filteredBody = useResponseBodyText({ response, filter: currentFilter });
+
+  const filterCallback = useMemo(
+    () => (filter: string) => {
+      setCurrentFilter(filter);
+      return {
+        data: filteredBody.data,
+        isPending: filteredBody.isPending,
+        error: !!filteredBody.error,
+      };
+    },
+    [filteredBody],
+  );
+
+  return (
+    <TextViewer
+      text={text}
+      language={language}
+      stateKey={`response.body.${response.id}`}
+      pretty={pretty}
+      className={className}
+      onFilter={filterCallback}
     />
   );
 }