@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/network-viewer/group-details-modal.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import { TrustLevel } from '@peers-app/peers-sdk';
-import { LoadingIndicator } from '../../components/loading-indicator';
-import { TrustLevelBadge } from '../../components/trust-level-badge';
+import { TrustLevel } from "@peers-app/peers-sdk";
+import { useCallback, useEffect, useState } from "react";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { TrustLevelBadge } from "../../components/trust-level-badge";
+import { getNetworkViewerApi } from "./network-viewer-ipc";
 
 // TypeScript type definitions (matching backend)
 interface IGroupDetails {
@@ -52,64 +53,71 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
     size?: number;
   } | null>(null);
 
-  const loadData = async () => {
+  const loadData = useCallback(async () => {
     try {
-      const api = (window as any).electronAPI?.networkViewer;
+      const api = getNetworkViewerApi();
       if (!api) {
-        console.warn('Network Viewer API not available');
+        console.warn("Network Viewer API not available");
         return;
       }
 
-      const [groupData, syncData] = await Promise.all([
+      const [groupData, syncDataUnknown] = await Promise.all([
         api.getGroupDetails(groupId),
-        api.getGroupSyncStatus(groupId)
+        api.getGroupSyncStatus(groupId),
       ]);
 
-      if (!groupData) {
+      const groupDetails = groupData as IGroupDetails | null | undefined;
+      if (!groupDetails) {
         setNotFound(true);
       } else {
-        setGroup(groupData);
+        setGroup(groupDetails);
         setNotFound(false);
       }
 
+      const syncData = syncDataUnknown as IGroupSyncInfo[] | undefined;
       if (syncData && syncData.length > 0) {
         setSyncInfo(syncData[0]);
       }
     } catch (error) {
-      console.error('Error loading group details:', error);
+      console.error("Error loading group details:", error);
       setNotFound(true);
     } finally {
       setLoading(false);
     }
-  };
+  }, [groupId]);
 
   const handleDownloadDatabase = async (deviceId: string) => {
     try {
       setDownloading(true);
-      setDownloadProgress('Preparing download...');
+      setDownloadProgress("Preparing download...");
       setDownloadResult(null);
 
-      const api = (window as any).electronAPI?.networkViewer;
+      const api = getNetworkViewerApi();
       if (!api?.downloadRemoteDatabase) {
         setDownloadResult({
           success: false,
-          message: 'Download API not available'
+          message: "Download API not available",
         });
         return;
       }
 
-      setDownloadProgress('Downloading database...');
-      const result = await api.downloadRemoteDatabase(groupId, deviceId);
+      setDownloadProgress("Downloading database...");
+      const result = (await api.downloadRemoteDatabase(groupId, deviceId)) as {
+        success: boolean;
+        message: string;
+        filePath?: string;
+        size?: number;
+      };
 
       setDownloadResult(result);
       if (result.success) {
         setDownloadProgress(null);
       }
-    } catch (error: any) {
-      console.error('Error downloading database:', error);
+    } catch (error: unknown) {
+      console.error("Error downloading database:", error);
       setDownloadResult({
         success: false,
-        message: error?.message || 'Download failed'
+        message: error instanceof Error ? error.message : "Download failed",
       });
     } finally {
       setDownloading(false);
@@ -118,26 +126,30 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
   };
 
   useEffect(() => {
-    loadData();    
-  }, [groupId]);
+    loadData();
+  }, [loadData]);
 
   return (
     <div
       className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-start justify-content-center"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 1050, overflowY: 'auto', paddingTop: '2rem', paddingBottom: '2rem' }}
+      style={{
+        backgroundColor: "rgba(0,0,0,0.5)",
+        zIndex: 1050,
+        overflowY: "auto",
+        paddingTop: "2rem",
+        paddingBottom: "2rem",
+      }}
       onClick={onClose}
     >
       <div
         className="card"
-        style={{ maxWidth: '900px', width: '90%', maxHeight: '90vh' }}
+        style={{ maxWidth: "900px", width: "90%", maxHeight: "90vh" }}
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
         <div className="card-header d-flex justify-content-between align-items-center">
           <div>
-            <h5 className="mb-0">
-              {loading ? 'Loading...' : group?.groupName || 'Group Details'}
-            </h5>
+            <h5 className="mb-0">{loading ? "Loading..." : group?.groupName || "Group Details"}</h5>
             {group && (
               <small className="text-muted">
                 <code>{group.groupId}</code>
@@ -148,13 +160,11 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
         </div>
 
         {/* Body */}
-        <div className="card-body" style={{ overflowY: 'auto', maxHeight: 'calc(90vh - 120px)' }}>
+        <div className="card-body" style={{ overflowY: "auto", maxHeight: "calc(90vh - 120px)" }}>
           {loading && <LoadingIndicator />}
 
           {!loading && (notFound || !group) && (
-            <div className="alert alert-warning">
-              Group not found.
-            </div>
+            <div className="alert alert-warning">Group not found.</div>
           )}
 
           {!loading && group && (
@@ -197,9 +207,7 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
               {/* Members List */}
               {group.members.length > 0 && (
                 <div className="mb-4">
-                  <h6 className="border-bottom pb-2 mb-3">
-                    Members ({group.members.length})
-                  </h6>
+                  <h6 className="border-bottom pb-2 mb-3">Members ({group.members.length})</h6>
                   <div className="table-responsive">
                     <table className="table table-sm table-hover">
                       <thead>
@@ -213,11 +221,7 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
                       <tbody>
                         {group.members.map((member) => (
                           <tr key={member.userId}>
-                            <td>
-                              {member.userName || (
-                                <span className="text-muted">-</span>
-                              )}
-                            </td>
+                            <td>{member.userName || <span className="text-muted">-</span>}</td>
                             <td>
                               <code className="text-muted small">{member.userId}</code>
                             </td>
@@ -242,8 +246,8 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
                   Download Database (Fast Sync)
                 </h6>
                 <p className="text-muted small mb-3">
-                  Download the entire database from a connected device. This is useful for fast initial sync on a new device.
-                  The database will be saved as a backup file.
+                  Download the entire database from a connected device. This is useful for fast
+                  initial sync on a new device. The database will be saved as a backup file.
                 </p>
 
                 {syncInfo && syncInfo.connectedDevices.length > 0 ? (
@@ -259,14 +263,20 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
                         >
                           {downloading ? (
                             <>
-                              <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+                              <span
+                                className="spinner-border spinner-border-sm me-1"
+                                role="status"
+                                aria-hidden="true"
+                              ></span>
                               Downloading...
                             </>
                           ) : (
                             <>
                               <i className="bi bi-cloud-download me-1"></i>
                               {device.deviceId.substring(0, 8)}...
-                              <span className="badge bg-secondary ms-1">{Math.round(device.latencyMs)}ms</span>
+                              <span className="badge bg-secondary ms-1">
+                                {Math.round(device.latencyMs)}ms
+                              </span>
                             </>
                           )}
                         </button>
@@ -276,21 +286,28 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
                 ) : (
                   <div className="alert alert-info mb-0">
                     <i className="bi bi-info-circle me-2"></i>
-                    No devices are currently connected to this group. Connect to a device first to download its database.
+                    No devices are currently connected to this group. Connect to a device first to
+                    download its database.
                   </div>
                 )}
 
                 {downloadProgress && (
                   <div className="mt-3">
                     <div className="d-flex align-items-center">
-                      <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>
                       <span>{downloadProgress}</span>
                     </div>
                   </div>
                 )}
 
                 {downloadResult && (
-                  <div className={`alert mt-3 mb-0 ${downloadResult.success ? 'alert-success' : 'alert-danger'}`}>
+                  <div
+                    className={`alert mt-3 mb-0 ${downloadResult.success ? "alert-success" : "alert-danger"}`}
+                  >
                     {downloadResult.success ? (
                       <>
                         <i className="bi bi-check-circle me-2"></i>
@@ -299,7 +316,10 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
                         <small>
                           File: <code>{downloadResult.filePath}</code>
                           <br />
-                          Size: {downloadResult.size ? `${(downloadResult.size / (1024 * 1024)).toFixed(2)} MB` : 'Unknown'}
+                          Size:{" "}
+                          {downloadResult.size
+                            ? `${(downloadResult.size / (1024 * 1024)).toFixed(2)} MB`
+                            : "Unknown"}
                         </small>
                       </>
                     ) : (
@@ -318,4 +338,3 @@ export function GroupDetailsModal({ groupId, onClose }: IGroupDetailsModalProps)
     </div>
   );
 }
-

package/src/screens/network-viewer/index.ts

@@ -1,9 +1,8 @@
-
 // Import all network viewer screen components to ensure they register their routes
-import './network-viewer';
+import "./network-viewer";
 
-export * from "./network-viewer";
-export * from "./device-details-modal";
+export * from "./connection-troubleshooter";
 export * from "./cpu-usage-graph";
+export * from "./device-details-modal";
+export * from "./network-viewer";
 export * from "./usage-graph";
-export * from "./connection-troubleshooter";

package/src/screens/network-viewer/network-viewer-ipc.ts

@@ -0,0 +1,23 @@
+export type NetworkViewerElectronApi = {
+  getOverview: () => Promise<unknown>;
+  getConnections: () => Promise<unknown>;
+  /** No-arg: all groups; with id: single group. */
+  getGroupSyncStatus: (groupId?: string) => Promise<unknown>;
+  getDisconnectedDevices: () => Promise<unknown>;
+  refreshNetworkInfo: () => Promise<void>;
+  disconnectDevice: (deviceId: string) => Promise<void>;
+  connectToDevice: (deviceId: string) => Promise<{ success: boolean; message?: string }>;
+  deleteDevice: (deviceId: string) => Promise<{ success: boolean; message?: string }>;
+  getDeviceDetails: (deviceId: string) => Promise<unknown>;
+  getGroupDetails: (groupId: string) => Promise<unknown>;
+  downloadRemoteDatabase?: (groupId: string, deviceId: string) => Promise<unknown>;
+  runDiagnostics: () => Promise<unknown>;
+};
+
+type WindowWithNetworkViewer = Window & {
+  electronAPI?: { networkViewer?: NetworkViewerElectronApi };
+};
+
+export function getNetworkViewerApi(): NetworkViewerElectronApi | undefined {
+  return (window as WindowWithNetworkViewer).electronAPI?.networkViewer;
+}