From 81e6e137640ed3b0c374cffbf31deee3162d9718 Mon Sep 17 00:00:00 2001
From: Pedro Carreno <34664891+Pkcarreno@users.noreply.github.com>
Date: Sun, 6 Oct 2024 12:38:35 -0400
Subject: [PATCH] fix(output): improve render value behavior

now can handle more values like 'undefined'
---
 .../components/output/format-output.tsx       | 60 ++++++-------------
 1 file changed, 19 insertions(+), 41 deletions(-)

diff --git a/src/features/editor/components/output/format-output.tsx b/src/features/editor/components/output/format-output.tsx
index b23828e..458bbe8 100644
--- a/src/features/editor/components/output/format-output.tsx
+++ b/src/features/editor/components/output/format-output.tsx
@@ -5,62 +5,40 @@ import type { Loggable } from '@/features/editor/types';
 import { JsonView } from './json-view-wrapper';
 
 interface Props {
-  value: Loggable;
+  value: Loggable | Record<string, Loggable>;
+  topLevel?: boolean;
 }
 
-export const FormatOutput: React.FC<Props> = ({ value }) => {
-  if (typeof value === 'string') {
-    return <span className="whitespace-pre-wrap break-all">{value}</span>;
+export const FormatOutput: React.FC<Props> = ({ value, topLevel = true }) => {
+  if (typeof value === 'string' && value === '') {
+    return <span className="text-muted italic">empty</span>;
   }
 
-  if (value && Array.isArray(value) && value.length > 0) {
-    return value.map((subValue, index) => {
-      if (subValue && typeof subValue === 'string') {
-        return (
-          <div key={`string-${index}`} className="w-fit">
-            <span className="whitespace-pre-wrap break-all">{subValue}</span>
-          </div>
-        );
-      }
+  if (Array.isArray(value) && topLevel) {
+    return value.map((subValue, index) => (
+      <FormatOutput key={index} value={subValue} topLevel={false} />
+    ));
+  }
 
-      if (subValue && typeof subValue === 'number') {
-        return (
-          <div key={`number-${index}`}>
-            <span className="w-fit text-[var(--w-rjv-key-number)]">
-              {subValue}
-            </span>
-          </div>
-        );
-      }
+  if (typeof value === 'string') {
+    return <span className="whitespace-pre-wrap break-all">{value}</span>;
+  }
 
-      if (
-        subValue &&
-        (typeof subValue === 'object' || Array.isArray(subValue))
-      ) {
-        return (
-          <div key={`object-${index}`} className="w-fit">
-            <JsonView value={subValue} />
-          </div>
-        );
-      }
-    });
+  if (typeof value === 'number') {
+    return <span className="w-fit text-[hsl(var(--yell))]">{value}</span>;
   }
 
   if (value && (typeof value === 'object' || Array.isArray(value))) {
     return (
-      <div className="w-fit">
+      <div className="my-auto w-fit">
         <JsonView value={value} />
       </div>
     );
   }
 
-  if (value && Array.isArray(value) && value.length === 0) {
-    return (
-      <div>
-        <span className="text-muted-foreground italic">empty</span>
-      </div>
-    );
+  if (!value) {
+    return <span className="text-muted w-fit">{String(value)}</span>;
   }
 
-  // return <>{value}</>;
+  return <span>{String(value)}</span>;
 };