gRPC Support (#20)

src-web/components/responseViewers/JsonViewer.tsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import { useResponseBodyText } from '../../hooks/useResponseBodyText';
+import type { HttpResponse } from '../../lib/models';
+import { JsonAttributeTree } from '../core/JsonAttributeTree';
+
+interface Props {
+  response: HttpResponse;
+  className?: string;
+}
+
+export function JsonViewer({ response, className }: Props) {
+  const rawBody = useResponseBodyText(response) ?? '';
+  let parsed = {};
+  try {
+    parsed = JSON.parse(rawBody);
+  } catch (e) {
+    // foo
+  }
+
+  return (
+    <div className={classNames(className, 'overflow-x-auto h-full')}>
+      <JsonAttributeTree attrValue={parsed} />
+    </div>
+  );
+}