@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,5 +1,17 @@
-import { getIconClassName, getUserContext, Groups, IDoc, IGroup, Observable, generateGroupShare, checkQRCodeCompatibility, copyToClipboard, rpcServerCalls, sleep } from "@peers-app/peers-sdk";
-import React, { useState } from "react";
+import {
+  checkQRCodeCompatibility,
+  copyToClipboard,
+  Groups,
+  generateGroupShare,
+  getIconClassName,
+  getUserContext,
+  type IDoc,
+  type IGroup,
+  type Observable,
+  rpcServerCalls,
+  sleep,
+} from "@peers-app/peers-sdk";
+import { useState } from "react";
 import { Checkbox } from "../../components/checkbox";
 import { Input } from "../../components/input";
 import { LoadingIndicator } from "../../components/loading-indicator";
@@ -16,36 +28,39 @@ interface IProps {
 }
 
 export const GroupDetails = (props: IProps) => {
-
-  const group = usePromise(async () => {
-    const userContext = await getUserContext();
-    const userGroupTable = Groups(userContext.userDataContext);
-    const group = await userGroupTable.get(props.groupId);
-    if (!group) {
-      throw new Error('Group not found');
-    }
-    updateActiveTabTitle(group.name || "Group");
-    const groupDoc = userGroupTable.initDoc(group);
-    // saves go to both the group and user db
-    groupDoc.save = async () => {
-      const groupDataContext = userContext.getDataContext(group.groupId);
-      const groupGroupTable = Groups(groupDataContext);
-      const groupData = groupDoc.toJS();
-      await groupGroupTable.signAndSave(groupData);
-      await userGroupTable.signAndSave(groupData);
-      return groupDoc.load();
-    }
-    const originalDelete = groupDoc.delete;
-    groupDoc.delete = async () => {
-      const deleteResult = await originalDelete();
-      userContext.defaultDataContext(userContext.userDataContext);
-      await sleep(100);
-      await rpcServerCalls.flushDatabases();
-      window.location.reload();
-      return deleteResult;
-    }
-    return groupDoc;
-  }, undefined, [props.groupId]);
+  const group = usePromise(
+    async () => {
+      const userContext = await getUserContext();
+      const userGroupTable = Groups(userContext.userDataContext);
+      const group = await userGroupTable.get(props.groupId);
+      if (!group) {
+        throw new Error("Group not found");
+      }
+      updateActiveTabTitle(group.name || "Group");
+      const groupDoc = userGroupTable.initDoc(group);
+      // saves go to both the group and user db
+      groupDoc.save = async () => {
+        const groupDataContext = userContext.getDataContext(group.groupId);
+        const groupGroupTable = Groups(groupDataContext);
+        const groupData = groupDoc.toJS();
+        await groupGroupTable.signAndSave(groupData);
+        await userGroupTable.signAndSave(groupData);
+        return groupDoc.load();
+      };
+      const originalDelete = groupDoc.delete;
+      groupDoc.delete = async () => {
+        const deleteResult = await originalDelete();
+        userContext.defaultDataContext(userContext.userDataContext);
+        await sleep(100);
+        await rpcServerCalls.flushDatabases();
+        window.location.reload();
+        return deleteResult;
+      };
+      return groupDoc;
+    },
+    undefined,
+    [props.groupId],
+  );
 
   if (!group) {
     return <LoadingIndicator />;
@@ -53,7 +68,6 @@ export const GroupDetails = (props: IProps) => {
 
   return (
     <div className="container-fluid p-3">
-
       <div className="d-flex">
         <div>
           <h4>
@@ -64,18 +78,15 @@ export const GroupDetails = (props: IProps) => {
           <h4>
             <Input
               key={group.groupId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              className="border border-0"
+              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
               value={group.qs.name}
             />
           </h4>
         </div>
         <div className="d-flex gap-2">
           <ShareButton groupId={props.groupId} />
-          <SaveButton
-            key={group.groupId}
-            doc={group}
-          />
+          <SaveButton key={group.groupId} doc={group} />
         </div>
       </div>
 
@@ -83,31 +94,34 @@ export const GroupDetails = (props: IProps) => {
         key={group.groupId}
         tabs={[
           {
-            name: 'Info', content:
+            name: "Info",
+            content: (
               <ScreenTabBody>
                 <GroupInfo group={group} />
               </ScreenTabBody>
+            ),
           },
           {
-            name: 'Members', content:
+            name: "Members",
+            content: (
               <ScreenTabBody>
                 <GroupMembersWrapper groupId={props.groupId} />
               </ScreenTabBody>
+            ),
           },
         ]}
       />
     </div>
-  )
-}
+  );
+};
 
 const GroupInfo = (props: { group: IDoc<IGroup> }) => {
-  const { group } = props
+  const { group } = props;
 
-  group.description = group.description || '';
+  group.description = group.description || "";
 
   return (
     <div>
-
       <small>Name:</small>
       <Input
         value={group.qs.name}
@@ -125,73 +139,70 @@ const GroupInfo = (props: { group: IDoc<IGroup> }) => {
       />
 
       <small>Group ID:</small>
-      <div className="form-control mb-3 p-2 bg-body-secondary text-body-secondary" style={{ fontFamily: 'monospace', fontSize: '0.9em' }}>
+      <div
+        className="form-control mb-3 p-2 bg-body-secondary text-body-secondary"
+        style={{ fontFamily: "monospace", fontSize: "0.9em" }}
+      >
         {group.groupId}
       </div>
 
       <div className="d-flex flex-row">
         <div className="ms-2">
           <label className="form-label small mt-2 me-2">Disabled:</label>
-          <Checkbox
-            className="form-check-input mt-2"
-            checked={group.qs.disabled}
-          />
+          <Checkbox className="form-check-input mt-2" checked={group.qs.disabled} />
         </div>
       </div>
 
       <br />
 
       <small className="mt-2">Description:</small>
-      <MarkdownEditorInline
-        value={group.qs.description as Observable<string>}
-      />
-
+      <MarkdownEditorInline value={group.qs.description as Observable<string>} />
     </div>
-  )
-}
+  );
+};
 
 const ShareButton = ({ groupId }: { groupId: string }) => {
   const [isSharing, setIsSharing] = useState(false);
   const [shareResult, setShareResult] = useState<{
     success: boolean;
     message: string;
-    qrInfo?: any;
+    qrInfo?: ReturnType<typeof checkQRCodeCompatibility>;
   } | null>(null);
 
   const handleShare = async () => {
     setIsSharing(true);
     setShareResult(null);
-    
+
     try {
       // Generate the group share data
       const groupShare = await generateGroupShare(groupId);
-      
+
       // Check QR code compatibility
       const qrInfo = checkQRCodeCompatibility(groupShare, 20);
-      
+
       // Convert to JSON
       const groupShareJson = JSON.stringify(groupShare, null, 2);
-      
+
       // Copy to clipboard
       const copied = await copyToClipboard(groupShareJson);
-      
+
       if (copied) {
         setShareResult({
           success: true,
           message: `Group share data copied to clipboard! (${qrInfo.size} chars, ${qrInfo.memberCount} admin members)`,
-          qrInfo
+          qrInfo,
         });
       } else {
         setShareResult({
           success: false,
-          message: 'Failed to copy to clipboard. Please copy manually from the modal.',
-          qrInfo
+          message: "Failed to copy to clipboard. Please copy manually from the modal.",
+          qrInfo,
         });
       }
-    } catch (error: any) {
+    } catch (error: unknown) {
       setShareResult({
         success: false,
-        message: `Error generating share: ${error.message}`,
+        message: `Error generating share: ${error instanceof Error ? error.message : String(error)}`,
       });
     } finally {
       setIsSharing(false);
@@ -200,7 +211,7 @@ const ShareButton = ({ groupId }: { groupId: string }) => {
 
   return (
     <>
-      <button 
+      <button
         className="btn btn-secondary btn-sm"
         onClick={handleShare}
         disabled={isSharing}
@@ -208,7 +219,11 @@ const ShareButton = ({ groupId }: { groupId: string }) => {
       >
         {isSharing ? (
           <>
-            <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>
             Sharing...
           </>
         ) : (
@@ -218,64 +233,68 @@ const ShareButton = ({ groupId }: { groupId: string }) => {
           </>
         )}
       </button>
-      
+
       {shareResult && (
-        <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: '500px', 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: "500px", width: "90%" }}>
             <div className="card-header d-flex justify-content-between align-items-center">
               <h6 className="mb-0">
-                <i className={`bi-${shareResult.success ? 'check-circle text-success' : 'exclamation-triangle text-warning'} me-2`}></i>
-                Group Share {shareResult.success ? 'Ready' : 'Error'}
+                <i
+                  className={`bi-${shareResult.success ? "check-circle text-success" : "exclamation-triangle text-warning"} me-2`}
+                ></i>
+                Group Share {shareResult.success ? "Ready" : "Error"}
               </h6>
-              <button 
-                className="btn-close" 
+              <button
+                className="btn-close"
                 onClick={() => setShareResult(null)}
                 aria-label="Close"
               ></button>
             </div>
             <div className="card-body">
               <p className="mb-3">{shareResult.message}</p>
-              
+
               {shareResult.qrInfo && (
                 <div className="mb-3">
                   <h6>QR Code Compatibility</h6>
                   <div className="row g-2">
                     <div className="col-6">
-                      <small className="text-muted">Size:</small><br/>
+                      <small className="text-muted">Size:</small>
+                      <br />
                       <strong>{shareResult.qrInfo.size} chars</strong>
                     </div>
                     <div className="col-6">
-                      <small className="text-muted">QR Version 20:</small><br/>
-                      <span className={`badge bg-${shareResult.qrInfo.fits ? 'success' : 'warning'}`}>
-                        {shareResult.qrInfo.fits ? '✓ Fits' : '⚠ Too Large'} ({shareResult.qrInfo.usagePercent}%)
+                      <small className="text-muted">QR Version 20:</small>
+                      <br />
+                      <span
+                        className={`badge bg-${shareResult.qrInfo.fits ? "success" : "warning"}`}
+                      >
+                        {shareResult.qrInfo.fits ? "✓ Fits" : "⚠ Too Large"} (
+                        {shareResult.qrInfo.usagePercent}%)
                       </span>
                     </div>
                   </div>
-                  
+
                   {!shareResult.qrInfo.fits && (
                     <div className="alert alert-warning mt-2 mb-0">
                       <small>
                         <i className="bi-exclamation-triangle me-1"></i>
-                        Data may be too large for standard QR codes. Consider reducing admin members or use text sharing.
+                        Data may be too large for standard QR codes. Consider reducing admin members
+                        or use text sharing.
                       </small>
                     </div>
                   )}
                 </div>
               )}
-              
+
               <div className="text-end">
-                <button 
-                  className="btn btn-secondary me-2"
-                  onClick={() => setShareResult(null)}
-                >
+                <button className="btn btn-secondary me-2" onClick={() => setShareResult(null)}>
                   Close
                 </button>
                 {shareResult.success && (
-                  <button 
-                    className="btn btn-primary"
-                    onClick={handleShare}
-                  >
+                  <button className="btn btn-primary" onClick={handleShare}>
                     Copy Again
                   </button>
                 )}
@@ -293,10 +312,10 @@ const GroupMembersWrapper = (props: { groupId: string }) => {
   if (!userContext) return null;
 
   return <GroupMembersUI groupId={props.groupId} userContext={userContext} />;
-}
+};
 
 registerInternalPeersUI({
-  peersUIId: '00group00details00component',
+  peersUIId: "00group00details00component",
   component: GroupDetails,
   routes: [
     {
@@ -308,8 +327,8 @@ registerInternalPeersUI({
         }
         return false;
       },
-      uiCategory: 'screen',
-      priority: 2
-    }
-  ]
-})
+      uiCategory: "screen",
+      priority: 2,
+    },
+  ],
+});

package/src/screens/groups/group-invite-listener.tsx

@@ -1,25 +1,25 @@
 /**
  * Component for admins to prepare group invitations and manage join requests.
- * 
+ *
  * Shows in the group details Members tab for users with Admin role or above.
- * 
+ *
  * Communicates with device layer through pvars (not direct imports).
  */
 
-import React, { useState, useEffect, useCallback } from "react";
 import {
+  copyToClipboard,
   GroupMemberRole,
   generateInvitePassword,
   groupInviteListeners,
+  groupInviteProcessRequest,
   groupInviteRequests,
-  groupInviteStatus,
   groupInviteStartListening,
+  groupInviteStatus,
   groupInviteStopListening,
-  groupInviteProcessRequest,
-  IGroupJoinRequest,
-  copyToClipboard,
-  UserContext,
+  type IGroupJoinRequest,
+  type UserContext,
 } from "@peers-app/peers-sdk";
+import { useCallback, useEffect, useState } from "react";
 import { useObservable } from "../../hooks";
 
 interface GroupInviteListenerProps {
@@ -44,7 +44,7 @@ export const GroupInviteListener = (props: GroupInviteListenerProps) => {
 
   // Check if we're currently listening for this group
   const currentListener = listeners?.[groupId];
-  const pendingRequests = (requests || []).filter(r => r.groupId === groupId);
+  const pendingRequests = (requests || []).filter((r) => r.groupId === groupId);
 
   // Sync local state with listener state
   useEffect(() => {
@@ -89,17 +89,20 @@ export const GroupInviteListener = (props: GroupInviteListenerProps) => {
   }, [password]);
 
   // Approve a join request (set pvar, device layer reacts)
-  const handleApprove = useCallback((request: IGroupJoinRequest) => {
-    setProcessingRequestId(request.requestId);
-    // Set the action pvar - device layer will process it
-    groupInviteProcessRequest({
-      requestId: request.requestId,
-      approved: true,
-      role: approvalRole
-    });
-    // Clear processing state after a short delay
-    setTimeout(() => setProcessingRequestId(null), 1000);
-  }, [approvalRole]);
+  const handleApprove = useCallback(
+    (request: IGroupJoinRequest) => {
+      setProcessingRequestId(request.requestId);
+      // Set the action pvar - device layer will process it
+      groupInviteProcessRequest({
+        requestId: request.requestId,
+        approved: true,
+        role: approvalRole,
+      });
+      // Clear processing state after a short delay
+      setTimeout(() => setProcessingRequestId(null), 1000);
+    },
+    [approvalRole],
+  );
 
   // Deny a join request (set pvar, device layer reacts)
   const handleDeny = useCallback((request: IGroupJoinRequest) => {
@@ -108,7 +111,7 @@ export const GroupInviteListener = (props: GroupInviteListenerProps) => {
     groupInviteProcessRequest({
       requestId: request.requestId,
       approved: false,
-      role: GroupMemberRole.None
+      role: GroupMemberRole.None,
     });
     // Clear processing state after a short delay
     setTimeout(() => setProcessingRequestId(null), 1000);
@@ -125,9 +128,7 @@ export const GroupInviteListener = (props: GroupInviteListenerProps) => {
       <div className="card-body">
         {/* Password input and controls */}
         <div className="mb-3">
-          <label className="form-label small text-muted">
-            Invitation Password
-          </label>
+          <label className="form-label small text-muted">Invitation Password</label>
           <div className="input-group">
             <input
               type="text"
@@ -155,7 +156,8 @@ export const GroupInviteListener = (props: GroupInviteListenerProps) => {
             </button>
           </div>
           <small className="text-muted">
-            Share this password with people you want to invite. They can enter it in the "Join Group" screen.
+            Share this password with people you want to invite. They can enter it in the "Join
+            Group" screen.
           </small>
         </div>
 
@@ -171,10 +173,7 @@ export const GroupInviteListener = (props: GroupInviteListenerProps) => {
               Start Listening
             </button>
           ) : (
-            <button
-              className="btn btn-danger"
-              onClick={handleStopListening}
-            >
+            <button className="btn btn-danger" onClick={handleStopListening}>
               <i className="bi-stop-circle me-2" />
               Stop Listening
             </button>
@@ -190,7 +189,9 @@ export const GroupInviteListener = (props: GroupInviteListenerProps) => {
             <div>
               <strong>Listening for join requests</strong>
               <br />
-              <small>Password: <code>{password}</code></small>
+              <small>
+                Password: <code>{password}</code>
+              </small>
             </div>
           </div>
         )}
@@ -210,12 +211,10 @@ export const GroupInviteListener = (props: GroupInviteListenerProps) => {
               <i className="bi-inbox-fill me-2" />
               Pending Requests ({pendingRequests.length})
             </h6>
-            
+
             {/* Role selector for approvals */}
             <div className="mb-2">
-              <label className="form-label small text-muted">
-                Role for new members:
-              </label>
+              <label className="form-label small text-muted">Role for new members:</label>
               <select
                 className="form-select form-select-sm"
                 value={approvalRole}
@@ -238,9 +237,7 @@ export const GroupInviteListener = (props: GroupInviteListenerProps) => {
                         <div>
                           <strong>{request.requester.name || request.requester.userId}</strong>
                           {request.requester.name && (
-                            <small className="text-muted d-block">
-                              {request.requester.userId}
-                            </small>
+                            <small className="text-muted d-block">{request.requester.userId}</small>
                           )}
                         </div>
                       </div>