WIP 5

packages/leafcutter-ui/components/LiveDataViewer.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { FC, useEffect, useState } from "react";
+import { useLeafcutterContext } from "./LeafcutterProvider";
+import { RawDataViewer } from "./RawDataViewer";
+import { searchVisualizationsAction } from "../actions/visualizations";
+
+export const LiveDataViewer: FC = () => {
+  const { query, setFoundCount, datasource } = useLeafcutterContext();
+  const [rows, setRows] = useState<any[]>([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await searchVisualizationsAction(datasource, query);
+      setRows(result);
+      setFoundCount(result?.length ?? 0);
+    };
+    fetchData();
+  }, [query, setFoundCount, datasource]);
+
+  return <RawDataViewer rows={rows} height={350} />;
+};