json data is now collapsible!

components/DebugStream.tsx

@@ -42,6 +42,8 @@ const DebugStream = () => {
       message,
       timestamp,
       jsonData: jsonData?.result,
+      linkText: 'Expand',
+      defaultCollapsed: true
     };
   }, []);
 

components/Link.tsx

@@ -3,6 +3,7 @@ import { styled } from "../stitches.config";
 const StyledLink = styled("a", {
   color: "CurrentColor",
   textDecoration: "underline",
+  cursor: 'pointer'
 });
 
 export default StyledLink;

components/LogBox.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useLayoutEffect, ReactNode } from "react";
+import { useRef, useLayoutEffect, ReactNode, FC, useState } from "react";
 import { Notepad, Prohibit } from "phosphor-react";
 import useStayScrolled from "react-stay-scrolled";
 import NextLink from "next/link";
@@ -16,7 +16,7 @@ interface ILogBox {
   enhanced?: boolean;
 }
 
-const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhanced }) => {
+const LogBox: FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhanced }) => {
   const logRef = useRef<HTMLPreElement>(null);
   const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
 
@@ -117,16 +117,7 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav,
                 p: enhanced ? "$1" : undefined,
               }}
             >
-              <LogText variant={log.type}>
+              <Log {...log} />
-                {log.timestamp && <Text muted>{log.timestamp.toLocaleTimeString()} </Text>}
-                {log.message}{" "}
-                {log.link && (
-                  <NextLink href={log.link} shallow passHref>
-                    <Link as="a">{log.linkText}</Link>
-                  </NextLink>
-                )}
-                {log.jsonData && <Code>{JSON.stringify(log.jsonData, null, 2)}</Code>}
-              </LogText>
             </Box>
           ))}
           {children}
@@ -136,4 +127,33 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav,
   );
 };
 
+export const Log: FC<ILog> = ({
+  type,
+  timestamp,
+  message,
+  link,
+  linkText,
+  defaultCollapsed,
+  jsonData,
+}) => {
+  const [expanded, setExpanded] = useState(!defaultCollapsed);
+  return (
+    <LogText variant={type}>
+      {timestamp && <Text muted>{timestamp.toLocaleTimeString()} </Text>}
+      {message}{" "}
+      {link && (
+        <NextLink href={link} shallow passHref>
+          <Link as="a">{linkText}</Link>
+        </NextLink>
+      )}
+      {jsonData && (
+        <Link onClick={() => setExpanded(!expanded)} as="a">
+          {expanded ? "Collapse" : "Expand"}
+        </Link>
+      )}
+      {expanded && jsonData && <Code>{JSON.stringify(jsonData, null, 2)}</Code>}
+    </LogText>
+  );
+};
+
 export default LogBox;

components/LogText.tsx

@@ -5,7 +5,6 @@ const Text = styled("span", {
   lineHeight: "$body",
   color: "$text",
   wordWrap: "break-word",
-  whiteSpace: 'pre-wrap',
   variants: {
     variant: {
       log: {

state/index.ts

@@ -37,6 +37,7 @@ export interface ILog {
   timestamp?: Date;
   link?: string;
   linkText?: string;
+  defaultCollapsed?: boolean
 }
 
 export interface ISelect<T = string> {