Change output

Ref: #7

src/App.tsx

@@ -10,6 +10,7 @@ import { Modal } from './components/Modal';
 import logo from './assets/logo.png';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { ResultOutput } from './components/ResultOutput';
 
 const App: React.FC = () => {
   const { url, handleUrlChange, handleFetch,
@@ -52,13 +53,7 @@ const App: React.FC = () => {
               <div className='editorWrapper'>
                 <Editor defaultLanguage="ruby" value={expression} onChange={(value) => setExpression(value as string)} options={{ formatOnPaste: true, formatOnType: true }} />
               </div>
-              <div className='editorWrapper'>
-                <Editor defaultLanguage="json" value={result} options={{
-                  formatOnPaste: true,
-                  formatOnType: true,
-                  readOnly: true,
-                }} />
-              </div>
+              <ResultOutput resultItems={result} />
             </Allotment>
           </div>
         </Allotment>

src/components/ResultOutput/index.tsx

@@ -0,0 +1,28 @@
+import { List } from "antd";
+import './styles.css';
+
+interface ResultOutputProps {
+    resultItems: any[];
+}
+
+export function ResultOutput(props: ResultOutputProps) {
+    const { resultItems } = props;
+
+    if (resultItems.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="resultOutputContainer">
+            <List
+                size="small"
+                dataSource={resultItems}
+                renderItem={(item) => (
+                    <List.Item>
+                        <pre>{JSON.stringify(item, null, 2)}</pre>
+                    </List.Item>
+                )}
+            />
+        </div>
+    )
+}

src/components/ResultOutput/styles.css

@@ -0,0 +1,5 @@
+.resultOutputContainer {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}

src/hooks.ts

@@ -10,7 +10,7 @@ export function useFHIRPathUI() {
     const [url, setUrl] = useState<string>('');
     const [resource, setResource] = useState<string>('');
     const [expression, setExpression] = useState<string>('');
-    const [result, setResult] = useState<string>('');
+    const [result, setResult] = useState<any[]>([]);
     const [shareLink, setShareLink] = useState<string>('');
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [initialRun, setInitialRun] = useState<boolean>(true); // Track initial run
@@ -33,8 +33,7 @@ export function useFHIRPathUI() {
 
     const handleExecute = async (executeResource: string, executeExpression: string) => {
         setIsLoading(true);
-        const result = fhirpath.evaluate(JSON.parse(executeResource), executeExpression, null, fhirpath_r4_model);
-        setResult(JSON.stringify(result.data, null, 2));
+        setResult(fhirpath.evaluate(JSON.parse(executeResource), executeExpression, null, fhirpath_r4_model));
         setIsLoading(false);
     };
 
@@ -69,6 +68,7 @@ export function useFHIRPathUI() {
 
             handleFetch(decodedUrl);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {