@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/contacts/user-connect.tsx

@@ -1,26 +1,26 @@
-import { 
-  formatConnectionCode, 
-  generateConnectionCode, 
+import {
+  Devices,
+  formatConnectionCode,
   generateConfirmationHash,
+  generateConnectionCode,
   getMe,
-  getUserContext, 
-  IUser,
-  IUserConnectInfo,
-  setUserTrustLevel, 
-  TrustLevel, 
-  userConnectCodeOffer, 
-  userConnectCodeAnswer, 
+  getUserContext,
+  type IUser,
+  type IUserConnectInfo,
+  setUserTrustLevel,
+  TrustLevel,
+  Users,
+  userConnectCodeAnswer,
+  userConnectCodeOffer,
   userConnectStatus,
-  Users, 
-  Devices
 } from "@peers-app/peers-sdk";
-import React, { useState, useEffect, useCallback } from 'react';
-import { mainContentPath } from '../../globals';
-import { useObservable } from '../../hooks';
-import { registerInternalPeersUI } from '../../ui-router/ui-loader';
+import { useCallback, useEffect, useState } from "react";
+import { mainContentPath } from "../../globals";
+import { useObservable } from "../../hooks";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
-type ConnectionMode = 'select' | 'initiate' | 'respond';
-type ConnectionStatus = 'idle' | 'waiting' | 'success' | 'error';
+type ConnectionMode = "select" | "initiate" | "respond";
+type ConnectionStatus = "idle" | "waiting" | "success" | "error";
 
 interface ConnectionResult {
   remoteUser: IUser;
@@ -28,17 +28,80 @@ interface ConnectionResult {
 }
 
 export function UserConnect() {
-  const [mode, setMode] = useState<ConnectionMode>('select');
-  const [status, setStatus] = useState<ConnectionStatus>('idle');
-  const [connectionCode, setConnectionCode] = useState<string>('');
-  const [inputCode, setInputCode] = useState<string>('');
+  const [mode, setMode] = useState<ConnectionMode>("select");
+  const [status, setStatus] = useState<ConnectionStatus>("idle");
+  const [connectionCode, setConnectionCode] = useState<string>("");
+  const [inputCode, setInputCode] = useState<string>("");
   const [result, setResult] = useState<ConnectionResult | null>(null);
-  const [error, setError] = useState<string>('');
+  const [error, setError] = useState<string>("");
   const [copied, setCopied] = useState(false);
 
   // Subscribe to userConnectStatus from the device layer
   const [connectStatus] = useObservable(userConnectStatus);
 
+  const handleConnectStatusChange = useCallback(
+    async (connectStatusValue: string) => {
+      if (!connectStatusValue || status === "success") return;
+
+      if (connectStatusValue.startsWith("Error:")) {
+        // Error status
+        setError(connectStatusValue.replace("Error: ", ""));
+        setStatus("error");
+      } else if (connectStatusValue.length > 0) {
+        // Success - connectStatus is the remote userId
+        const remoteUserId = connectStatusValue;
+
+        try {
+          const userContext = await getUserContext();
+          const me = await getMe();
+          const remoteUser = await Users(userContext.userDataContext).get(remoteUserId);
+
+          if (!remoteUser) {
+            setError("Could not find connected user");
+            setStatus("error");
+            return;
+          }
+
+          const remoteDevice = await Devices(userContext.userDataContext).findOne({
+            userId: remoteUserId,
+          });
+          if (!remoteDevice) {
+            setError("Could not find connected device but connection was successful");
+            setStatus("error");
+            return;
+          }
+
+          // Build user connect info for confirmation hash
+          const myInfo: IUserConnectInfo = {
+            userId: me.userId,
+            publicKey: me.publicKey,
+            publicBoxKey: me.publicBoxKey,
+            deviceId: userContext.deviceId(),
+          };
+          const remoteInfo: IUserConnectInfo = {
+            userId: remoteUser.userId,
+            publicKey: remoteUser.publicKey,
+            publicBoxKey: remoteUser.publicBoxKey,
+            deviceId: remoteDevice.deviceId,
+          };
+
+          const confirmationHash = generateConfirmationHash(myInfo, remoteInfo);
+
+          setResult({ remoteUser, confirmationHash });
+          setStatus("success");
+
+          // Clear the codes
+          userConnectCodeOffer("");
+          userConnectCodeAnswer("");
+        } catch (err: unknown) {
+          setError(err instanceof Error ? err.message : String(err));
+          setStatus("error");
+        }
+      }
+    },
+    [status],
+  );
+
   // Also set up a direct subscription after loading is complete
   useEffect(() => {
     let disposed = false;
@@ -49,7 +112,7 @@ export function UserConnect() {
       subscription = userConnectStatus.subscribe(() => {
         // Force a re-render by checking the current value
         const currentStatus = userConnectStatus();
-        if (currentStatus && typeof currentStatus === 'string') {
+        if (currentStatus && typeof currentStatus === "string") {
           handleConnectStatusChange(currentStatus);
         }
       });
@@ -59,70 +122,11 @@ export function UserConnect() {
       disposed = true;
       subscription?.dispose();
     };
-  }, []);
-
-  // Handle connect status changes
-  const handleConnectStatusChange = useCallback(async (connectStatusValue: string) => {
-    if (!connectStatusValue || status === 'success') return;
-
-    if (connectStatusValue.startsWith('Error:')) {
-      // Error status
-      setError(connectStatusValue.replace('Error: ', ''));
-      setStatus('error');
-    } else if (connectStatusValue.length > 0) {
-      // Success - connectStatus is the remote userId
-      const remoteUserId = connectStatusValue;
-      
-      try {
-        const userContext = await getUserContext();
-        const me = await getMe();
-        const remoteUser = await Users(userContext.userDataContext).get(remoteUserId);
-        
-        if (!remoteUser) {
-          setError('Could not find connected user');
-          setStatus('error');
-          return;
-        }
-
-        const remoteDevice = await Devices(userContext.userDataContext).findOne({ userId: remoteUserId });
-        if (!remoteDevice) {
-          setError('Could not find connected device but connection was successful');
-          setStatus('error');
-          return;
-        }
-
-        // Build user connect info for confirmation hash
-        const myInfo: IUserConnectInfo = {
-          userId: me.userId,
-          publicKey: me.publicKey,
-          publicBoxKey: me.publicBoxKey,
-          deviceId: userContext.deviceId(),
-        };
-        const remoteInfo: IUserConnectInfo = {
-          userId: remoteUser.userId,
-          publicKey: remoteUser.publicKey,
-          publicBoxKey: remoteUser.publicBoxKey,
-          deviceId: remoteDevice.deviceId,
-        };
-
-        const confirmationHash = generateConfirmationHash(myInfo, remoteInfo);
-        
-        setResult({ remoteUser, confirmationHash });
-        setStatus('success');
-        
-        // Clear the codes
-        userConnectCodeOffer('');
-        userConnectCodeAnswer('');
-      } catch (err: any) {
-        setError(err.message || 'Failed to complete connection');
-        setStatus('error');
-      }
-    }
-  }, [status]);
+  }, [handleConnectStatusChange]);
 
   // React to userConnectStatus changes from useObservable
   useEffect(() => {
-    if (connectStatus && typeof connectStatus === 'string') {
+    if (connectStatus && typeof connectStatus === "string") {
       handleConnectStatusChange(connectStatus);
     }
   }, [connectStatus, handleConnectStatusChange]);
@@ -130,18 +134,18 @@ export function UserConnect() {
   // Clean up on unmount
   useEffect(() => {
     return () => {
-      if (mode === 'initiate' && status === 'waiting') {
-        userConnectCodeOffer('');
-        userConnectCodeAnswer('');
+      if (mode === "initiate" && status === "waiting") {
+        userConnectCodeOffer("");
+        userConnectCodeAnswer("");
       }
     };
   }, [mode, status]);
 
   const handleInitiate = useCallback(async () => {
-    setMode('initiate');
-    setStatus('waiting');
-    setError('');
-    userConnectStatus(''); // Clear any previous status
+    setMode("initiate");
+    setStatus("waiting");
+    setError("");
+    userConnectStatus(""); // Clear any previous status
 
     // Generate the connection code
     const code = generateConnectionCode();
@@ -151,37 +155,37 @@ export function UserConnect() {
   }, []);
 
   const handleRespond = useCallback(async () => {
-    if (inputCode.replace(/[^0-9A-Za-z]/g, '').length !== 12) {
-      setError('Please enter a valid 12-character connection code');
+    if (inputCode.replace(/[^0-9A-Za-z]/g, "").length !== 12) {
+      setError("Please enter a valid 12-character connection code");
       return;
     }
-    
-    setStatus('waiting');
-    setError('');
-    userConnectStatus(''); // Clear any previous status
+
+    setStatus("waiting");
+    setError("");
+    userConnectStatus(""); // Clear any previous status
     userConnectCodeAnswer(inputCode);
   }, [inputCode]);
 
   const handleCancel = useCallback(async () => {
-    userConnectCodeOffer('');
-    userConnectCodeAnswer('');
-    userConnectStatus('');
-    setMode('select');
-    setStatus('idle');
-    setConnectionCode('');
-    setError('');
+    userConnectCodeOffer("");
+    userConnectCodeAnswer("");
+    userConnectStatus("");
+    setMode("select");
+    setStatus("idle");
+    setConnectionCode("");
+    setError("");
   }, []);
 
   const handleReset = useCallback(() => {
-    userConnectCodeOffer('');
-    userConnectCodeAnswer('');
-    userConnectStatus('');
-    setMode('select');
-    setStatus('idle');
-    setConnectionCode('');
-    setInputCode('');
+    userConnectCodeOffer("");
+    userConnectCodeAnswer("");
+    userConnectStatus("");
+    setMode("select");
+    setStatus("idle");
+    setConnectionCode("");
+    setInputCode("");
     setResult(null);
-    setError('');
+    setError("");
     setCopied(false);
   }, []);
 
@@ -190,14 +194,18 @@ export function UserConnect() {
 
     try {
       const userContext = await getUserContext();
-      
+
       // Contact is already saved by the device layer, just set trust level
-      await setUserTrustLevel(result.remoteUser.userId, TrustLevel.Trusted, userContext.userDataContext);
+      await setUserTrustLevel(
+        result.remoteUser.userId,
+        TrustLevel.Trusted,
+        userContext.userDataContext,
+      );
 
       // Navigate to contact details
       mainContentPath(`contacts/${result.remoteUser.userId}`);
-    } catch (err: any) {
-      setError(err.message || 'Failed to save contact');
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err));
     }
   }, [result]);
 
@@ -208,13 +216,13 @@ export function UserConnect() {
       await navigator.clipboard.writeText(connectionCode);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
+    } catch (_err) {
       // Fallback for older browsers
-      const textArea = document.createElement('textarea');
+      const textArea = document.createElement("textarea");
       textArea.value = connectionCode;
       document.body.appendChild(textArea);
       textArea.select();
-      document.execCommand('copy');
+      document.execCommand("copy");
       document.body.removeChild(textArea);
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
@@ -224,15 +232,15 @@ export function UserConnect() {
   // Format input code as user types
   const handleCodeInput = (value: string) => {
     // Remove non-alphanumeric characters
-    const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, '');
-    
+    const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, "");
+
     // Format as XXXX-YYYY-ZZZZ
-    let formatted = '';
+    let formatted = "";
     for (let i = 0; i < cleaned.length && i < 12; i++) {
-      if (i === 4 || i === 8) formatted += '-';
+      if (i === 4 || i === 8) formatted += "-";
       formatted += cleaned[i];
     }
-    
+
     setInputCode(formatted);
   };
 
@@ -243,7 +251,7 @@ export function UserConnect() {
           <i className="bi-person-plus-fill me-2" />
           Connect to New User
         </h4>
-        {mode !== 'select' && (
+        {mode !== "select" && (
           <button className="btn btn-outline-secondary btn-sm" onClick={handleReset}>
             <i className="bi-arrow-left me-1" />
             Back
@@ -252,12 +260,12 @@ export function UserConnect() {
       </div>
 
       {/* Mode Selection */}
-      {mode === 'select' && (
+      {mode === "select" && (
         <div className="row g-3">
           <div className="col-md-6">
-            <div 
-              className="card h-100 border-primary" 
-              style={{ cursor: 'pointer' }}
+            <div
+              className="card h-100 border-primary"
+              style={{ cursor: "pointer" }}
               onClick={handleInitiate}
             >
               <div className="card-body text-center p-4">
@@ -270,10 +278,10 @@ export function UserConnect() {
             </div>
           </div>
           <div className="col-md-6">
-            <div 
-              className="card h-100 border-success" 
-              style={{ cursor: 'pointer' }}
-              onClick={() => setMode('respond')}
+            <div
+              className="card h-100 border-success"
+              style={{ cursor: "pointer" }}
+              onClick={() => setMode("respond")}
             >
               <div className="card-body text-center p-4">
                 <i className="bi-keyboard display-4 text-success mb-3" />
@@ -288,32 +296,30 @@ export function UserConnect() {
       )}
 
       {/* Initiate Mode - Show Generated Code */}
-      {mode === 'initiate' && status === 'waiting' && (
+      {mode === "initiate" && status === "waiting" && (
         <div className="text-center">
           <div className="mb-4">
             <p className="text-muted">Share this code with the person you want to connect with:</p>
           </div>
-          
-          <div className="mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
+
+          <div className="mb-4" style={{ maxWidth: "400px", margin: "0 auto" }}>
             <div className="input-group">
               <input
                 type="text"
                 className="form-control form-control-lg text-center font-monospace"
-                value={connectionCode || 'XXXX-YYYY-ZZZZ'}
+                value={connectionCode || "XXXX-YYYY-ZZZZ"}
                 readOnly
-                style={{ letterSpacing: '0.15em', fontSize: '1.5rem' }}
+                style={{ letterSpacing: "0.15em", fontSize: "1.5rem" }}
               />
-              <button 
-                className="btn btn-outline-primary" 
+              <button
+                className="btn btn-outline-primary"
                 onClick={handleCopyCode}
                 title="Copy to clipboard"
               >
                 <i className={copied ? "bi-check-lg" : "bi-clipboard"} />
               </button>
             </div>
-            {copied && (
-              <small className="text-success mt-1 d-block">Copied!</small>
-            )}
+            {copied && <small className="text-success mt-1 d-block">Copied!</small>}
           </div>
 
           <div className="mb-4">
@@ -321,9 +327,7 @@ export function UserConnect() {
             <span className="text-muted">Waiting for connection...</span>
           </div>
 
-          <p className="text-muted small">
-            This code will expire in 10 minutes
-          </p>
+          <p className="text-muted small">This code will expire in 10 minutes</p>
 
           <button className="btn btn-outline-secondary" onClick={handleCancel}>
             Cancel
@@ -332,13 +336,13 @@ export function UserConnect() {
       )}
 
       {/* Respond Mode - Enter Code */}
-      {mode === 'respond' && status !== 'success' && (
+      {mode === "respond" && status !== "success" && (
         <div className="text-center">
           <div className="mb-4">
             <p className="text-muted">Enter the connection code shared with you:</p>
           </div>
 
-          <div className="mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
+          <div className="mb-4" style={{ maxWidth: "400px", margin: "0 auto" }}>
             <input
               type="text"
               className="form-control form-control-lg text-center font-monospace"
@@ -346,23 +350,25 @@ export function UserConnect() {
               value={inputCode}
               onChange={(e) => handleCodeInput(e.target.value)}
               maxLength={14}
-              style={{ letterSpacing: '0.15em', fontSize: '1.5rem' }}
-              autoFocus
+              style={{ letterSpacing: "0.15em", fontSize: "1.5rem" }}
             />
           </div>
 
           {error && (
-            <div className="alert alert-danger" style={{ maxWidth: '400px', margin: '0 auto 1rem' }}>
+            <div
+              className="alert alert-danger"
+              style={{ maxWidth: "400px", margin: "0 auto 1rem" }}
+            >
               {error}
             </div>
           )}
 
-          <button 
+          <button
             className="btn btn-primary btn-lg"
             onClick={handleRespond}
-            disabled={status === 'waiting' || inputCode.replace(/[^0-9A-Z]/gi, '').length !== 12}
+            disabled={status === "waiting" || inputCode.replace(/[^0-9A-Z]/gi, "").length !== 12}
           >
-            {status === 'waiting' ? (
+            {status === "waiting" ? (
               <>
                 <span className="spinner-border spinner-border-sm me-2" role="status" />
                 Connecting...
@@ -378,27 +384,27 @@ export function UserConnect() {
       )}
 
       {/* Success State */}
-      {status === 'success' && result && (
+      {status === "success" && result && (
         <div className="text-center">
           <div className="mb-4">
             <i className="bi-check-circle-fill text-success display-3" />
           </div>
-          
+
           <h5 className="mb-4">Connection Successful!</h5>
 
-          <div className="card mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
+          <div className="card mb-4" style={{ maxWidth: "400px", margin: "0 auto" }}>
             <div className="card-body">
               <p className="text-muted mb-2">Verify with the other person that you both see:</p>
-              <h3 className="font-monospace text-primary mb-3" style={{ letterSpacing: '0.2em' }}>
+              <h3 className="font-monospace text-primary mb-3" style={{ letterSpacing: "0.2em" }}>
                 {result.confirmationHash}
               </h3>
-              
+
               <hr />
-              
+
               <div className="text-start">
                 <small className="text-muted">Name:</small>
                 <p className="mb-2">{result.remoteUser.name}</p>
-                
+
                 <small className="text-muted">User ID:</small>
                 <p className="font-monospace small mb-0">{result.remoteUser.userId}</p>
               </div>
@@ -418,15 +424,15 @@ export function UserConnect() {
       )}
 
       {/* Error State */}
-      {status === 'error' && (
+      {status === "error" && (
         <div className="text-center">
           <div className="mb-4">
             <i className="bi-x-circle-fill text-danger display-3" />
           </div>
-          
+
           <h5 className="mb-4">Connection Failed</h5>
 
-          <div className="alert alert-danger" style={{ maxWidth: '400px', margin: '0 auto 1rem' }}>
+          <div className="alert alert-danger" style={{ maxWidth: "400px", margin: "0 auto 1rem" }}>
             {error}
           </div>
 
@@ -440,13 +446,13 @@ export function UserConnect() {
 }
 
 registerInternalPeersUI({
-  peersUIId: '000user00connect0screen01',
+  peersUIId: "000user00connect0screen01",
   component: UserConnect,
   routes: [
     {
-      isMatch: (props, context) => context.path === 'contacts/connect',
-      uiCategory: 'screen',
-      priority: 3
-    }
-  ]
+      isMatch: (_props, context) => context.path === "contacts/connect",
+      uiCategory: "screen",
+      priority: 3,
+    },
+  ],
 });