Continue organization

apps/leafcutter/components/LiveDataViewer.tsx

@@ -0,0 +1,22 @@
+import { FC, useEffect, useState } from "react";
+import { useAppContext } from "./AppProvider";
+import { RawDataViewer } from "./RawDataViewer";
+
+export const LiveDataViewer: FC = () => {
+  const { query, setFoundCount } = useAppContext();
+  const [rows, setRows] = useState<any[]>([]);
+  const searchQuery = encodeURI(JSON.stringify(query));
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await fetch(
+        `/api/visualizations/query?searchQuery=${searchQuery}`
+      );
+      const json = await result.json();
+      setRows(json);
+      setFoundCount(json?.length ?? 0);
+    };
+    fetchData();
+  }, [searchQuery, setFoundCount]);
+
+  return <RawDataViewer rows={rows} height={350} />;
+};