@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/data-explorer/query-executor.tsx

@@ -1,37 +1,52 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { LoadingIndicator } from '../../components/loading-indicator';
-import { registerInternalPeersUI } from '../../ui-router/ui-loader';
-import { isDesktop } from '../../globals';
-import { groupDeviceVar, newid } from '@peers-app/peers-sdk';
-import { useObservable } from '../../hooks';
+import { groupDeviceVar, newid } from "@peers-app/peers-sdk";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { isDesktop } from "../../globals";
+import { useObservable } from "../../hooks";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
 interface ISqlQueryResult {
   columns: string[];
-  rows: any[][];
+  rows: unknown[][];
   rowCount: number;
   isWriteOperation?: boolean;
   changesCount?: number;
 }
 
+type DataExplorerQueryApi = {
+  executeQuery: (query: string, writeEnabled: boolean) => Promise<ISqlQueryResult>;
+};
+
+type WindowWithDataExplorerQuery = Window & {
+  electronAPI?: { dataExplorer?: DataExplorerQueryApi };
+};
+
+function getDataExplorerQueryApi(): DataExplorerQueryApi | undefined {
+  return (window as WindowWithDataExplorerQuery).electronAPI?.dataExplorer;
+}
+
 interface IQueryTab {
   id: string;
   name: string;
   query: string;
 }
 
-const defaultQuery = 'SELECT * FROM sqlite_master WHERE type=\'table\' LIMIT 10';
+const defaultQuery = "SELECT * FROM sqlite_master WHERE type='table' LIMIT 10";
 
 // Persistent vars at module level
-const queryTabs = groupDeviceVar<IQueryTab[]>('dataExplorerQueryTabs', {
-  defaultValue: [{
-    id: newid(),
-    name: 'Query 1',
-    query: defaultQuery
-  }]
+const queryTabs = groupDeviceVar<IQueryTab[]>("dataExplorerQueryTabs", {
+  defaultValue: [
+    {
+      id: newid(),
+      name: "Query 1",
+      query: defaultQuery,
+    },
+  ],
 });
 
-const activeQueryTabId = groupDeviceVar<string>('dataExplorerActiveQueryTab', {
-  defaultValue: ''
+const activeQueryTabId = groupDeviceVar<string>("dataExplorerActiveQueryTab", {
+  defaultValue: "",
 });
 
 export function QueryExecutor() {
@@ -41,30 +56,30 @@ export function QueryExecutor() {
   const [errors, setErrors] = useState<{ [tabId: string]: string }>({});
   const [loading, setLoading] = useState<{ [tabId: string]: boolean }>({});
   const [writeEnabled, setWriteEnabled] = useState(false);
-  
+
   // Local state for query input to avoid locking up on fast typing
-  const [localQuery, setLocalQuery] = useState<string>('');
+  const [localQuery, setLocalQuery] = useState<string>("");
   const debounceTimeoutRef = useRef<NodeJS.Timeout>();
-  const lastSavedQueryRef = useRef<string>('');
+  const lastSavedQueryRef = useRef<string>("");
 
   const tabs = queryTabs();
   const activeTabId = activeQueryTabId();
-  const activeTab = tabs.find(t => t.id === activeTabId);
-  
+  const activeTab = tabs.find((t) => t.id === activeTabId);
+
   // Sync local query with persisted query when tab changes
   useEffect(() => {
-    const persistedQuery = activeTab?.query || '';
+    const persistedQuery = activeTab?.query || "";
     setLocalQuery(persistedQuery);
     lastSavedQueryRef.current = persistedQuery;
-  }, [activeTabId, activeTab?.id]);
+  }, [activeTab?.query]);
 
   // Subscribe to tab changes
-  useEffect(() => {  
+  useEffect(() => {
     // Initialize activeTabId if not set
     if (!activeQueryTabId() && queryTabs().length > 0) {
       activeQueryTabId(queryTabs()[0].id);
     }
-  }, [queryTabs()]);
+  }, []);
 
   const query = localQuery;
   const result = activeTab ? results[activeTab.id] : null;
@@ -75,23 +90,21 @@ export function QueryExecutor() {
   const updatePersistedQuery = (newQuery: string) => {
     if (!activeTab) return;
     if (newQuery === lastSavedQueryRef.current) return; // Skip if unchanged
-    
+
     const currentTabs = queryTabs();
-    queryTabs(currentTabs.map(t =>
-      t.id === activeTab.id ? { ...t, query: newQuery } : t
-    ));
+    queryTabs(currentTabs.map((t) => (t.id === activeTab.id ? { ...t, query: newQuery } : t)));
     lastSavedQueryRef.current = newQuery;
   };
 
   const setQuery = (newQuery: string) => {
     // Update local state immediately for responsive UI
     setLocalQuery(newQuery);
-    
+
     // Clear existing debounce timeout
     if (debounceTimeoutRef.current) {
       clearTimeout(debounceTimeoutRef.current);
     }
-    
+
     // Debounce the persisted update (300ms delay)
     debounceTimeoutRef.current = setTimeout(() => {
       updatePersistedQuery(newQuery);
@@ -118,7 +131,7 @@ export function QueryExecutor() {
 
   const setResult = (result: ISqlQueryResult | null) => {
     if (!activeTab) return;
-    setResults(prev => {
+    setResults((prev) => {
       const newResults = { ...prev };
       if (result === null) {
         delete newResults[activeTab.id];
@@ -131,7 +144,7 @@ export function QueryExecutor() {
 
   const setError = (error: string | null) => {
     if (!activeTab) return;
-    setErrors(prev => {
+    setErrors((prev) => {
       const newErrors = { ...prev };
       if (error === null) {
         delete newErrors[activeTab.id];
@@ -144,12 +157,12 @@ export function QueryExecutor() {
 
   const setLoadingState = (isLoading: boolean) => {
     if (!activeTab) return;
-    setLoading(prev => ({ ...prev, [activeTab.id]: isLoading }));
+    setLoading((prev) => ({ ...prev, [activeTab.id]: isLoading }));
   };
 
   const executeQuery = async () => {
     if (!query.trim()) {
-      setError('Please enter a query');
+      setError("Please enter a query");
       return;
     }
 
@@ -165,16 +178,16 @@ export function QueryExecutor() {
       setError(null);
       setResult(null);
 
-      const api = (window as any).electronAPI?.dataExplorer;
+      const api = getDataExplorerQueryApi();
       if (!api) {
-        setError('Data Explorer API not available');
+        setError("Data Explorer API not available");
         return;
       }
 
       const queryResult = await api.executeQuery(query, writeEnabled);
       setResult(queryResult);
-    } catch (err: any) {
-      setError(err.message || 'Query execution failed');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Query execution failed");
     } finally {
       setLoadingState(false);
     }
@@ -185,7 +198,7 @@ export function QueryExecutor() {
     const newTab: IQueryTab = {
       id: newid(),
       name: `Query ${currentTabs.length + 1}`,
-      query: defaultQuery
+      query: defaultQuery,
     };
     queryTabs([...currentTabs, newTab]);
     activeQueryTabId(newTab.id);
@@ -195,8 +208,8 @@ export function QueryExecutor() {
     const currentTabs = queryTabs();
     if (currentTabs.length === 1) return; // Don't close the last tab
 
-    const tabIndex = currentTabs.findIndex(t => t.id === tabId);
-    const newTabs = currentTabs.filter(t => t.id !== tabId);
+    const tabIndex = currentTabs.findIndex((t) => t.id === tabId);
+    const newTabs = currentTabs.filter((t) => t.id !== tabId);
 
     queryTabs(newTabs);
 
@@ -207,28 +220,26 @@ export function QueryExecutor() {
     }
 
     // Clean up results and errors for closed tab
-    setResults(prev => {
+    setResults((prev) => {
       const newResults = { ...prev };
       delete newResults[tabId];
       return newResults;
     });
-    setErrors(prev => {
+    setErrors((prev) => {
       const newErrors = { ...prev };
       delete newErrors[tabId];
       return newErrors;
     });
   };
 
-  const renameTab = (tabId: string, newName: string) => {
+  const _renameTab = (tabId: string, newName: string) => {
     const currentTabs = queryTabs();
-    queryTabs(currentTabs.map(t =>
-      t.id === tabId ? { ...t, name: newName } : t
-    ));
+    queryTabs(currentTabs.map((t) => (t.id === tabId ? { ...t, name: newName } : t)));
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     // Execute on Cmd/Ctrl + Enter
-    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
       e.preventDefault();
       executeQuery();
     }
@@ -268,13 +279,10 @@ export function QueryExecutor() {
           {tabs.map((tab) => (
             <li key={tab.id} className="nav-item">
               <div
-                className={`nav-link ${tab.id === activeTabId ? 'active' : ''}`}
-                style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}
+                className={`nav-link ${tab.id === activeTabId ? "active" : ""}`}
+                style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: "8px" }}
               >
-                <span
-                  onClick={() => activeQueryTabId(tab.id)}
-                  style={{ flex: 1 }}
-                >
+                <span onClick={() => activeQueryTabId(tab.id)} style={{ flex: 1 }}>
                   {tab.name}
                 </span>
                 {tabs.length > 1 && (
@@ -285,11 +293,11 @@ export function QueryExecutor() {
                       closeTab(tab.id);
                     }}
                     style={{
-                      border: 'none',
-                      background: 'none',
-                      fontSize: '1.2em',
+                      border: "none",
+                      background: "none",
+                      fontSize: "1.2em",
                       lineHeight: 1,
-                      opacity: 0.6
+                      opacity: 0.6,
                     }}
                     title="Close tab"
                   >
@@ -303,7 +311,7 @@ export function QueryExecutor() {
             <button
               className="nav-link"
               onClick={addNewTab}
-              style={{ border: 'none', background: 'none' }}
+              style={{ border: "none", background: "none" }}
               title="New query tab"
             >
               <i className="bi bi-plus-lg"></i>
@@ -350,7 +358,11 @@ export function QueryExecutor() {
             >
               {isLoading ? (
                 <>
-                  <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                  <span
+                    className="spinner-border spinner-border-sm me-2"
+                    role="status"
+                    aria-hidden="true"
+                  ></span>
                   Executing...
                 </>
               ) : (
@@ -387,19 +399,16 @@ export function QueryExecutor() {
           <div className="card-body">
             <div className="d-flex justify-content-between align-items-center mb-3">
               <h5 className="card-title mb-0">
-                {result.isWriteOperation ? 'Write Result' : 'Query Results'}
+                {result.isWriteOperation ? "Write Result" : "Query Results"}
                 {result.isWriteOperation ? (
                   <span className="badge bg-success ms-2">
-                    {result.changesCount} row{result.changesCount !== 1 ? 's' : ''} affected
+                    {result.changesCount} row{result.changesCount !== 1 ? "s" : ""} affected
                   </span>
                 ) : (
                   <span className="badge bg-primary ms-2">{result.rowCount} rows</span>
                 )}
               </h5>
-              <button
-                className="btn btn-sm btn-outline-secondary"
-                onClick={() => setResult(null)}
-              >
+              <button className="btn btn-sm btn-outline-secondary" onClick={() => setResult(null)}>
                 <i className="bi bi-x"></i> Clear
               </button>
             </div>
@@ -407,7 +416,8 @@ export function QueryExecutor() {
             {result.isWriteOperation ? (
               <div className="alert alert-success mb-0">
                 <i className="bi bi-check-circle-fill me-2"></i>
-                Query executed successfully. {result.changesCount} row{result.changesCount !== 1 ? 's' : ''} affected.
+                Query executed successfully. {result.changesCount} row
+                {result.changesCount !== 1 ? "s" : ""} affected.
               </div>
             ) : result.rowCount === 0 ? (
               <div className="alert alert-info mb-0">
@@ -432,8 +442,8 @@ export function QueryExecutor() {
                           <td key={cellIdx} className="font-monospace small">
                             {cell === null ? (
                               <span className="text-muted fst-italic">null</span>
-                            ) : typeof cell === 'object' ? (
-                              <pre className="mb-0" style={{ fontSize: '0.7rem' }}>
+                            ) : typeof cell === "object" ? (
+                              <pre className="mb-0" style={{ fontSize: "0.7rem" }}>
                                 {JSON.stringify(cell, null, 2)}
                               </pre>
                             ) : (
@@ -460,7 +470,7 @@ export function QueryExecutor() {
               <li className="mb-2">
                 <button
                   className="btn btn-sm btn-outline-secondary font-monospace"
-                  onClick={() => setQuery('SELECT * FROM sqlite_master WHERE type=\'table\'')}
+                  onClick={() => setQuery("SELECT * FROM sqlite_master WHERE type='table'")}
                 >
                   List all tables
                 </button>
@@ -468,7 +478,7 @@ export function QueryExecutor() {
               <li className="mb-2">
                 <button
                   className="btn btn-sm btn-outline-secondary font-monospace"
-                  onClick={() => setQuery('PRAGMA table_info(Users)')}
+                  onClick={() => setQuery("PRAGMA table_info(Users)")}
                 >
                   Show Users table schema
                 </button>
@@ -476,7 +486,7 @@ export function QueryExecutor() {
               <li className="mb-2">
                 <button
                   className="btn btn-sm btn-outline-secondary font-monospace"
-                  onClick={() => setQuery('SELECT name, sql FROM sqlite_master WHERE type=\'index\'')}
+                  onClick={() => setQuery("SELECT name, sql FROM sqlite_master WHERE type='index'")}
                 >
                   List all indexes
                 </button>
@@ -484,7 +494,7 @@ export function QueryExecutor() {
               <li className="mb-2">
                 <button
                   className="btn btn-sm btn-outline-secondary font-monospace"
-                  onClick={() => setQuery('PRAGMA database_list')}
+                  onClick={() => setQuery("PRAGMA database_list")}
                 >
                   Show attached databases
                 </button>
@@ -498,13 +508,13 @@ export function QueryExecutor() {
 }
 
 registerInternalPeersUI({
-  peersUIId: 'data-explorer-query-ui',
+  peersUIId: "data-explorer-query-ui",
   component: QueryExecutor,
   routes: [
     {
-      isMatch: (_props, context) => context.path === 'data-explorer/query',
-      uiCategory: 'screen',
-      priority: 2
-    }
-  ]
+      isMatch: (_props, context) => context.path === "data-explorer/query",
+      uiCategory: "screen",
+      priority: 2,
+    },
+  ],
 });