@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/groups/group-list.tsx

@@ -1,46 +1,58 @@
-import { getMe, getUserContext, Groups, ICursorIterable, IGroup, newid, newKeys, observable, peersCorePackageId, rpcServerCalls, setUserTrustLevel, TrustLevel, Users } 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 { MarkdownWithMentions } from '../../components/markdown-with-mentions';
-import { isDesktop, mainContentPath } from '../../globals';
-import { useObservable, usePromise } from '../../hooks';
-import { registerInternalPeersUI } from '../../ui-router/ui-loader';
+import {
+  Groups,
+  getMe,
+  getUserContext,
+  type ICursorIterable,
+  type IGroup,
+  newid,
+  newKeys,
+  observable,
+  peersCorePackageId,
+  rpcServerCalls,
+  setUserTrustLevel,
+  TrustLevel,
+  Users,
+} 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 { MarkdownWithMentions } from "../../components/markdown-with-mentions";
+import { isDesktop, mainContentPath } from "../../globals";
+import { useObservable, usePromise } from "../../hooks";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
 export function GroupList() {
   const userContext = usePromise(getUserContext);
-  const [searchTextObs] = useState(() => observable(''));
+  const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
   const [cursorObs] = useState(() => observable<ICursorIterable<IGroup> | undefined>());
-  
+
   // All hooks must be called before any conditional returns
   const groupsTable = userContext ? Groups(userContext.userDataContext) : null;
 
-  async function newCursor() {
+  const newCursor = useCallback(async () => {
     if (!groupsTable) return;
-    
+
     const filter = {
-      $or: [
-        { name: { $matchWords: searchText } },
-        { description: { $matchWords: searchText } },
-      ],
-      disabled: { $ne: true }
+      $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
+      disabled: { $ne: true },
     };
-    const cursor = await groupsTable.cursor(searchText ? filter : { disabled: { $ne: true } }, { 
-      sortBy: ['name'], 
-      ...(searchText ? {} : { textSearch: searchText }) 
+    const cursor = await groupsTable.cursor(searchText ? filter : { disabled: { $ne: true } }, {
+      sortBy: ["name"],
+      ...(searchText ? {} : { textSearch: searchText }),
     });
     cursorObs(cursor);
     return cursor;
-  }
+  }, [groupsTable, searchText, cursorObs]);
 
   useEffect(() => {
     if (groupsTable) {
-      newCursor();
+      void newCursor();
     }
-  }, [searchText, groupsTable]);
-  
+  }, [groupsTable, newCursor]);
+
   // Early return after all hooks
   if (!userContext) {
     return <LoadingIndicator />;
@@ -48,13 +60,14 @@ export function GroupList() {
 
   async function loadMore(existing: IGroup[]): Promise<IGroup[]> {
     if (!groupsTable) return [];
-    
-    let moreMatches: IGroup[] = [];
-    let cursor = cursorObs() || await newCursor();
+
+    const moreMatches: IGroup[] = [];
+    const cursor = cursorObs() || (await newCursor());
     if (!cursor) return [];
-    
+
     for await (const nextRecord of cursor) {
-      if (existing.find(e => e.groupId === nextRecord.groupId)) continue;
+      if (existing.some((e) => e.groupId === nextRecord.groupId)) continue;
+      if (moreMatches.some((e) => e.groupId === nextRecord.groupId)) continue;
       moreMatches.push(nextRecord);
       if (searchText.length && moreMatches.length > 5) break;
       if (moreMatches.length >= 10) break;
@@ -69,7 +82,7 @@ export function GroupList() {
     if (evt.key !== "Enter") return;
     const name = searchText.trim();
     if (!name) return;
-    searchTextObs('');
+    searchTextObs("");
     await newRecord(name);
   }
 
@@ -86,16 +99,17 @@ export function GroupList() {
     const groupDataContext = userContext.getDataContext(groupId);
 
     // Store groupKeys.secretKey securely for this group
-    const persistentVarsTable = userContext.userDataContext.tableContainer.getTableByName('PersistentVars');
-    const groupSecretKeyVarName = 'groupSecretKey_' + groupDataContext.dataContextId;
+    const persistentVarsTable =
+      userContext.userDataContext.tableContainer.getTableByName("PersistentVars");
+    const groupSecretKeyVarName = `groupSecretKey_${groupDataContext.dataContextId}`;
     await persistentVarsTable.save({
       persistentVarId: newid(),
       name: groupSecretKeyVarName,
-      scope: 'groupUser',
+      scope: "groupUser",
       isSecret: true,
       value: { value: groupKeys.secretKey },
     });
-    
+
     // add me to the group's users table
     const me = await getMe();
     await Users(groupDataContext).save(me);
@@ -107,52 +121,49 @@ export function GroupList() {
     const group = await Groups(userContext.userDataContext).signAndSave({
       groupId,
       name: groupName,
-      description: '',
-      iconClassName: 'bi-people-fill', // Default icon
+      description: "",
+      iconClassName: "bi-people-fill", // Default icon
       founderUserId: me.userId,
       disabled: false,
       publicKey: groupKeys.publicKey,
       publicBoxKey: groupKeys.publicBoxKey,
-      signature: '', // will be set via signAndSave
+      signature: "", // will be set via signAndSave
     });
     await Groups(groupDataContext).signAndSave(group);
 
     // Auto-install peers-core for the new group
-    await rpcServerCalls.addOrUpdatePackage(peersCorePackageId, { dataContextId: groupId }).catch((err: any) => {
-      console.error('Error auto-installing peers-core for group:', err);
-    });
+    await rpcServerCalls
+      .addOrUpdatePackage(peersCorePackageId, { dataContextId: groupId })
+      .catch((err: unknown) => {
+        console.error("Error auto-installing peers-core for group:", err);
+      });
 
     mainContentPath(`groups/${group.groupId}`);
     return group;
   }
 
   function renderItem(group: IGroup) {
-    const groupIcon = group.iconClassName || 'bi-people-fill';
+    const groupIcon = group.iconClassName || "bi-people-fill";
     return (
-      <div
-        key={group.groupId}
-        className='container-fluid pb-4'
-      >
+      <div key={group.groupId} className="container-fluid pb-4">
         <i className={groupIcon}></i>&nbsp;
-        <a href={`#groups/${group.groupId}`}>
-          {group.name || '<unnamed-group>'}
-        </a>
-        <div style={{ paddingLeft: '20px' }}>
-          <MarkdownWithMentions content={group.description || ''} />
+        <a href={`#groups/${group.groupId}`}>{group.name || "<unnamed-group>"}</a>
+        <div style={{ paddingLeft: "20px" }}>
+          <MarkdownWithMentions content={group.description || ""} />
         </div>
       </div>
     );
   }
 
   return (
-    <div className='container-fluid'>
+    <div className="container-fluid">
       <div className="input-group mt-3 mb-3">
-        <Input 
-          value={searchTextObs} 
-          className="form-control" 
+        <Input
+          value={searchTextObs}
+          className="form-control"
           placeholder="Search or create group"
-          autoFocus={isDesktop() ? true : false}
-          onKeyUp={evt => searchSubmit(evt)}
+          autoFocus={!!isDesktop()}
+          onKeyUp={(evt) => searchSubmit(evt)}
         />
         <ImportGroupButton />
       </div>
@@ -161,7 +172,7 @@ export function GroupList() {
         <LazyList
           resetTrigger={searchText}
           loadMore={loadMore}
-          scrollThreshold={0.6}          
+          scrollThreshold={0.6}
           renderItems={(groups) => {
             return groups.map(renderItem);
           }}
@@ -184,7 +195,7 @@ export function GroupList() {
 const ImportGroupButton = () => {
   const [isImporting, setIsImporting] = useState(false);
   const [showImportDialog, setShowImportDialog] = useState(false);
-  const [importText, setImportText] = useState('');
+  const [importText, setImportText] = useState("");
   const [importResult, setImportResult] = useState<{
     success: boolean;
     message: string;
@@ -195,34 +206,33 @@ const ImportGroupButton = () => {
     if (!importText.trim()) {
       setImportResult({
         success: false,
-        message: 'Please paste the group share JSON data'
+        message: "Please paste the group share JSON data",
       });
       return;
     }
 
     setIsImporting(true);
     setImportResult(null);
-    
+
     try {
       const groupId = await rpcServerCalls.importGroupShare(importText.trim());
       setImportResult({
         success: true,
         message: `Group imported successfully!`,
-        groupId
+        groupId,
       });
-      setImportText('');
-      
+      setImportText("");
+
       // Navigate to the imported group after a brief delay
       setTimeout(() => {
         mainContentPath(`groups/${groupId}`);
         setShowImportDialog(false);
         setImportResult(null);
       }, 2000);
-      
-    } catch (error: any) {
+    } catch (error: unknown) {
       setImportResult({
         success: false,
-        message: `Import failed: ${error.message}`
+        message: `Import failed: ${error instanceof Error ? error.message : String(error)}`,
       });
     } finally {
       setIsImporting(false);
@@ -231,31 +241,28 @@ const ImportGroupButton = () => {
 
   const handlePasteFromClipboard = async () => {
     try {
-      if (navigator.clipboard && navigator.clipboard.readText) {
+      if (navigator.clipboard?.readText) {
         const clipboardText = await navigator.clipboard.readText();
         setImportText(clipboardText);
       }
-    } catch (error) {
-      console.log('Failed to read from clipboard - user can paste manually');
+    } catch (_error) {
+      console.log("Failed to read from clipboard - user can paste manually");
     }
   };
 
   return (
     <>
-      <button 
-        className="btn btn-outline-secondary dropdown-toggle" 
-        type="button" 
-        data-bs-toggle="dropdown" 
+      <button
+        className="btn btn-outline-secondary dropdown-toggle"
+        type="button"
+        data-bs-toggle="dropdown"
         aria-expanded="false"
       >
         <i className="bi-plus-lg"></i>
       </button>
       <ul className="dropdown-menu dropdown-menu-end">
         <li>
-          <button 
-            className="dropdown-item"
-            onClick={() => setShowImportDialog(true)}
-          >
+          <button className="dropdown-item" onClick={() => setShowImportDialog(true)}>
             <i className="bi-download me-2"></i>
             Import Shared Group
           </button>
@@ -263,19 +270,21 @@ const ImportGroupButton = () => {
       </ul>
 
       {showImportDialog && (
-        <div className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center" 
-             style={{ backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 1050 }}>
-          <div className="card" style={{ maxWidth: '600px', width: '90%' }}>
+        <div
+          className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"
+          style={{ backgroundColor: "rgba(0,0,0,0.5)", zIndex: 1050 }}
+        >
+          <div className="card" style={{ maxWidth: "600px", width: "90%" }}>
             <div className="card-header d-flex justify-content-between align-items-center">
               <h6 className="mb-0">
                 <i className="bi-download me-2"></i>
                 Import Shared Group
               </h6>
-              <button 
-                className="btn-close" 
+              <button
+                className="btn-close"
                 onClick={() => {
                   setShowImportDialog(false);
-                  setImportText('');
+                  setImportText("");
                   setImportResult(null);
                 }}
                 aria-label="Close"
@@ -283,13 +292,14 @@ const ImportGroupButton = () => {
             </div>
             <div className="card-body">
               <p className="mb-3">
-                Paste the group share JSON data below to import a shared group with its admin members.
+                Paste the group share JSON data below to import a shared group with its admin
+                members.
               </p>
-              
+
               <div className="mb-3">
                 <label className="form-label">Group Share JSON:</label>
                 <div className="d-flex gap-2 mb-2">
-                  <button 
+                  <button
                     className="btn btn-secondary btn-sm"
                     onClick={handlePasteFromClipboard}
                     title="Paste from clipboard"
@@ -304,13 +314,15 @@ const ImportGroupButton = () => {
                   value={importText}
                   onChange={(e) => setImportText(e.target.value)}
                   placeholder="Paste the group share JSON here..."
-                  style={{ fontSize: '0.9em' }}
+                  style={{ fontSize: "0.9em" }}
                 />
               </div>
-              
+
               {importResult && (
-                <div className={`alert alert-${importResult.success ? 'success' : 'danger'} mb-3`}>
-                  <i className={`bi-${importResult.success ? 'check-circle' : 'exclamation-triangle'} me-2`}></i>
+                <div className={`alert alert-${importResult.success ? "success" : "danger"} mb-3`}>
+                  <i
+                    className={`bi-${importResult.success ? "check-circle" : "exclamation-triangle"} me-2`}
+                  ></i>
                   {importResult.message}
                   {importResult.success && importResult.groupId && (
                     <div className="mt-2">
@@ -319,27 +331,31 @@ const ImportGroupButton = () => {
                   )}
                 </div>
               )}
-              
+
               <div className="text-end">
-                <button 
+                <button
                   className="btn btn-secondary me-2"
                   onClick={() => {
                     setShowImportDialog(false);
-                    setImportText('');
+                    setImportText("");
                     setImportResult(null);
                   }}
                   disabled={isImporting}
                 >
                   Cancel
                 </button>
-                <button 
+                <button
                   className="btn btn-primary"
                   onClick={handleImport}
                   disabled={isImporting || !importText.trim()}
                 >
                   {isImporting ? (
                     <>
-                      <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>
                       Importing...
                     </>
                   ) : (
@@ -359,13 +375,13 @@ const ImportGroupButton = () => {
 };
 
 registerInternalPeersUI({
-  peersUIId: '00mf8qrs004w5u2wqk64d2yp6',
+  peersUIId: "00mf8qrs004w5u2wqk64d2yp6",
   component: GroupList,
   routes: [
     {
-      isMatch: (props, context) => context.path === 'groups',
-      uiCategory: 'screen',
-      priority: 2
-    }
-  ]
-})
+      isMatch: (_props, context) => context.path === "groups",
+      uiCategory: "screen",
+      priority: 2,
+    },
+  ],
+});