@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/contacts/contact-list.tsx

@@ -1,35 +1,46 @@
-import { getUserContext, ICursorIterable, IUserWithSource, observable, setUserTrustLevel, TrustLevel, Users, usersCursor } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from 'react';
-import { Input } from '../../components/input';
-import { LazyList } from '../../components/lazy-list';
-import { LoadingIndicator } from '../../components/loading-indicator';
-import { TrustLevelBadge } from '../../components/trust-level-badge';
-import { mainContentPath } from '../../globals';
-import { useObservable } from '../../hooks';
-import { registerInternalPeersUI } from '../../ui-router/ui-loader';
+import {
+  getUserContext,
+  type ICursorIterable,
+  type IUserWithSource,
+  observable,
+  setUserTrustLevel,
+  TrustLevel,
+  Users,
+  usersCursor,
+} from "@peers-app/peers-sdk";
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
+import { Input } from "../../components/input";
+import { LazyList } from "../../components/lazy-list";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { TrustLevelBadge } from "../../components/trust-level-badge";
+import { mainContentPath } from "../../globals";
+import { useObservable } from "../../hooks";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
 export function ContactList() {
-  const [searchTextObs] = useState(() => observable(''));
+  const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
   const [cursorObs] = useState(() => observable<ICursorIterable<IUserWithSource> | undefined>());
   const [existingContacts, setExistingContacts] = useState<IUserWithSource[]>([]);
 
-  async function newCursor() {
+  const newCursor = useCallback(async () => {
     const cursor = await usersCursor({ name: { $matchWords: searchText } });
     cursorObs(cursor);
     return cursor;
-  }
+  }, [searchText, cursorObs]);
 
   useEffect(() => {
-    newCursor();
+    void newCursor();
     setExistingContacts([]); // Reset existing contacts when search changes
-  }, [searchText]);
+  }, [newCursor]);
 
   async function loadMore(existing: IUserWithSource[]): Promise<IUserWithSource[]> {
-    let moreMatches: IUserWithSource[] = [];
-    let cursor = cursorObs() || await newCursor();
+    const moreMatches: IUserWithSource[] = [];
+    const cursor = cursorObs() || (await newCursor());
     for await (const nextContact of cursor) {
-      if (existing.find(e => e.userId === nextContact.userId)) continue;
+      if (existing.some((e) => e.userId === nextContact.userId)) continue;
+      if (moreMatches.some((e) => e.userId === nextContact.userId)) continue;
       moreMatches.push(nextContact);
       if (searchText.length && moreMatches.length > 5) break;
       if (moreMatches.length >= 10) break;
@@ -53,9 +64,9 @@ export function ContactList() {
 
       const newContact = await usersTable.initRecord({
         userId: userId.trim(),
-        name: 'New User',
-        publicKey: '',
-        publicBoxKey: '',
+        name: "New User",
+        publicKey: "",
+        publicBoxKey: "",
       });
 
       await usersTable.save(newContact);
@@ -66,22 +77,22 @@ export function ContactList() {
       // Navigate to the details screen for the new contact
       mainContentPath(`contacts/${userId.trim()}`);
     } catch (error) {
-      console.error('Error creating contact:', error);
+      console.error("Error creating contact:", error);
     }
   }
 
   async function handleSearchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
-    if (evt.key !== 'Enter') return;
-    
+    if (evt.key !== "Enter") return;
+
     const input = searchText.trim();
     if (!input) return;
-    
+
     // Check if there are any existing results
     if (existingContacts.length === 0) {
       // No results found, check if it's a valid user ID
       if (isValidUserId(input)) {
         // Clear search and create new contact with the ID
-        searchTextObs('');
+        searchTextObs("");
         await createContact(input);
       }
     }
@@ -96,25 +107,17 @@ export function ContactList() {
       if (lastSource !== contact.source) {
         elements.push(
           <div key={`separator-${index}`} className="my-3">
-            { lastSource !== null &&
-              <hr className="border-secondary opacity-50" />
-            }
-            {contact.source === 'userDataContext' && 
+            {lastSource !== null && <hr className="border-secondary opacity-50" />}
+            {contact.source === "userDataContext" && (
               <h5>Personal Contacts {lastSource !== null && "(not in this group)"}</h5>
-            }
-            {contact.source === 'currentDataContext' && 
-              <h5>Users in this group</h5>
-            }
-            {contact.source === 'otherDataContexts' && 
-              <h5>Users from other groups</h5>
-            }
-          </div>
+            )}
+            {contact.source === "currentDataContext" && <h5>Users in this group</h5>}
+            {contact.source === "otherDataContexts" && <h5>Users from other groups</h5>}
+          </div>,
         );
         lastSource = contact.source;
       }
-      elements.push(
-        <ContactCard key={contact.userId} contact={contact} />
-      );
+      elements.push(<ContactCard key={contact.userId} contact={contact} />);
     });
 
     return elements;
@@ -134,9 +137,9 @@ export function ContactList() {
       </div>
 
       <div className="input-group mb-3">
-        <Input 
-          value={searchTextObs} 
-          className="form-control" 
+        <Input
+          value={searchTextObs}
+          className="form-control"
           placeholder="Search or create contacts"
           autoFocus={true}
           onKeyUp={handleSearchSubmit}
@@ -172,26 +175,34 @@ interface ContactCardProps {
 const ContactCard = ({ contact }: ContactCardProps) => {
   const getSourceLabel = (source: string) => {
     switch (source) {
-      case 'userDataContext': return 'Personal';
-      case 'currentDataContext': return 'Current Context';
-      case 'otherDataContexts': return 'Groups';
-      default: return source;
+      case "userDataContext":
+        return "Personal";
+      case "currentDataContext":
+        return "Current Context";
+      case "otherDataContexts":
+        return "Groups";
+      default:
+        return source;
     }
   };
 
   const getSourceIcon = (source: string) => {
     switch (source) {
-      case 'userDataContext': return 'bi-person-fill';
-      case 'currentDataContext': return 'bi-house-fill';
-      case 'otherDataContexts': return 'bi-people-fill';
-      default: return 'bi-question-circle';
+      case "userDataContext":
+        return "bi-person-fill";
+      case "currentDataContext":
+        return "bi-house-fill";
+      case "otherDataContexts":
+        return "bi-people-fill";
+      default:
+        return "bi-question-circle";
     }
   };
 
   return (
     <div className="list-group-item d-flex align-items-center justify-content-between py-2">
       <div className="d-flex align-items-center">
-        <i className="bi-person-circle me-3" style={{ fontSize: '32px', color: '#6c757d' }} />
+        <i className="bi-person-circle me-3" style={{ fontSize: "32px", color: "#6c757d" }} />
         <div>
           <strong>{contact.name}</strong>
           <div className="d-flex align-items-center">
@@ -204,7 +215,7 @@ const ContactCard = ({ contact }: ContactCardProps) => {
           </div>
         </div>
       </div>
-      
+
       <div className="d-flex align-items-center">
         {<TrustLevelBadge level={contact.trustLevel || TrustLevel.Unknown} />}
         <a href={`#contacts/${contact.userId}`} className="btn btn-outline-primary btn-sm ms-2">
@@ -217,13 +228,13 @@ const ContactCard = ({ contact }: ContactCardProps) => {
 };
 
 registerInternalPeersUI({
-  peersUIId: '00mfc4ql0lgqmjxrpvcd4ufk0',
+  peersUIId: "00mfc4ql0lgqmjxrpvcd4ufk0",
   component: ContactList,
   routes: [
     {
-      isMatch: (props, context) => context.path === 'contacts',
-      uiCategory: 'screen',
-      priority: 2
-    }
-  ]
-});
+      isMatch: (_props, context) => context.path === "contacts",
+      uiCategory: "screen",
+      priority: 2,
+    },
+  ],
+});

package/src/screens/contacts/index.ts

@@ -1,8 +1,8 @@
 // Import all contact screen components to ensure they register their routes
-import './contact-list';
-import './contact-details';
-import './user-connect';
+import "./contact-list";
+import "./contact-details";
+import "./user-connect";
 
-export * from "./contact-list";
 export * from "./contact-details";
-export * from "./user-connect";
+export * from "./contact-list";
+export * from "./user-connect";