Detect JSON APIs returning HTML content-type

src-web/components/responseViewers/HTMLOrTextViewer.tsx

@@ -0,0 +1,37 @@
+import type { HttpResponse } from '@yaakapp/api';
+import { useContentTypeFromHeaders } from '../../hooks/useContentTypeFromHeaders';
+import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+import { isJSON, languageFromContentType } from '../../lib/contentType';
+import { BinaryViewer } from './BinaryViewer';
+import { TextViewer } from './TextViewer';
+import { WebPageViewer } from './WebPageViewer';
+
+interface Props {
+  response: HttpResponse;
+  pretty: boolean;
+  textViewerClassName?: string;
+}
+
+export function HTMLOrTextViewer({ response, pretty, textViewerClassName }: Props) {
+  const rawBody = useResponseBodyText(response);
+  let language = languageFromContentType(useContentTypeFromHeaders(response.headers));
+
+  // A lot of APIs return JSON with `text/html` content type, so interpret as JSON if so
+  if (language === 'html' && isJSON(rawBody.data ?? '')) {
+    language = 'json';
+  }
+
+  if (rawBody.isLoading) {
+    return null;
+  }
+
+  if (rawBody.data == null) {
+    return <BinaryViewer response={response} />;
+  }
+
+  if (language === 'html' && pretty) {
+    return <WebPageViewer response={response} />;
+  } else {
+    return <TextViewer response={response} pretty={pretty} className={textViewerClassName} />;
+  }
+}