@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,8 +1,23 @@
-import { GroupMembers, getUserContext, IUserWithSource, usersCursor, getUserById, Users, TrustLevel, GroupMemberRole, getUserRole, getRoleLabel, Groups, UserContext, setUserTrustLevel, getUserTrustLevel, IUser } from "@peers-app/peers-sdk";
+import {
+  GroupMemberRole,
+  GroupMembers,
+  Groups,
+  getRoleLabel,
+  getUserById,
+  getUserContext,
+  getUserRole,
+  type IUser,
+  type IUserWithSource,
+  setUserTrustLevel,
+  TrustLevel,
+  type UserContext,
+  Users,
+  usersCursor,
+} from "@peers-app/peers-sdk";
 import React from "react";
 import { LoadingIndicator } from "../../components/loading-indicator";
 import { TrustLevelBadge } from "../../components/trust-level-badge";
-import { Typeahead, TypeaheadItem } from "../../components/typeahead";
+import { Typeahead, type TypeaheadItem } from "../../components/typeahead";
 import { usePromise } from "../../hooks";
 import { GroupInviteListener } from "./group-invite-listener";
 
@@ -13,108 +28,125 @@ interface GroupMembersUIProps {
 
 export const GroupMembersUI = (props: GroupMembersUIProps) => {
   const { groupId, userContext } = props;
-  
+
   // Get the group's data context and tables
   const groupDataContext = userContext.getDataContext(groupId);
   const groupMembersTable = GroupMembers(groupDataContext);
   const groupUsersTable = Users(groupDataContext);
-    
+
   // State for refreshing the component
   const [refreshKey, setRefreshKey] = React.useState(0);
-  
+
   // Load group members with user details and check current user permissions
-  const membersData = usePromise(async () => {
-    const members = await groupMembersTable.list({ deleted: { $ne: true } });
-
-    // Get user details for each member using the group context
-    const membersWithUsers = await Promise.all(
-      members.map(async (member) => {
-        const user = await getUserById(member.userId, {
-          currentDataContext: groupDataContext,
-          includeTrustLevel: true
-        });
-
-        // If user found from external source, save to current group
-        if (user && user.source !== 'currentDataContext') {
-          try {
-            const newGroupUser: IUser = { ...user };
-            delete (newGroupUser as any).source;
-            delete (newGroupUser as any).trustLevel;
-            await groupUsersTable.save(newGroupUser);
-
-            // Set trust level for this user in the group context
-            await setUserTrustLevel(user.userId, TrustLevel.NewUser, groupDataContext);
-
-            // Update user reference to reflect it's now in current group
-            user.trustLevel = TrustLevel.NewUser;
-            user.source = 'currentDataContext';
-          } catch (saveErr) {
-            console.error('Failed to save user to group context:', saveErr);
+  const membersData = usePromise(
+    async () => {
+      const members = await groupMembersTable.list({ deleted: { $ne: true } });
+
+      // Get user details for each member using the group context
+      const membersWithUsers = await Promise.all(
+        members.map(async (member) => {
+          const user = await getUserById(member.userId, {
+            currentDataContext: groupDataContext,
+            includeTrustLevel: true,
+          });
+
+          // If user found from external source, save to current group
+          if (user && user.source !== "currentDataContext") {
+            try {
+              const raw = { ...user } as Record<string, unknown>;
+              delete raw.source;
+              delete raw.trustLevel;
+              await groupUsersTable.save(raw as IUser);
+
+              // Set trust level for this user in the group context
+              await setUserTrustLevel(user.userId, TrustLevel.NewUser, groupDataContext);
+
+              // Update user reference to reflect it's now in current group
+              user.trustLevel = TrustLevel.NewUser;
+              user.source = "currentDataContext";
+            } catch (saveErr) {
+              console.error("Failed to save user to group context:", saveErr);
+            }
           }
-        }
 
-        // TODO don't do it this way!!! Use group-specific trust level fetching
-        if (user && !user.trustLevel) {
-          const userCursor = await usersCursor({ userId: member.userId }, { includeTrustLevel: true });
-          const _user = await userCursor.next();
-          user.trustLevel = _user?.trustLevel || user.trustLevel || TrustLevel.Unknown;
-        }
+          // TODO don't do it this way!!! Use group-specific trust level fetching
+          if (user && !user.trustLevel) {
+            const userCursor = await usersCursor(
+              { userId: member.userId },
+              { includeTrustLevel: true },
+            );
+            const _user = await userCursor.next();
+            user.trustLevel = _user?.trustLevel || user.trustLevel || TrustLevel.Unknown;
+          }
 
-        // // Fetch trust level for this user in the group context
-        // if (user) {
-        //   try {
-        //     const trustLevel = await getUserTrustLevel(groupDataContext, user.userId);
-        //     user.trustLevel = trustLevel;
-        //   } catch (err) {
-        //     console.error('Failed to get trust level:', err);
-        //     user.trustLevel = TrustLevel.Unknown;
-        //   }
-        // }
-
-        return {
-          member,
-          user: user || null
-        };
-      })
-    );
-    
-    return membersWithUsers;
-  }, [], [groupId, refreshKey]);
+          // // Fetch trust level for this user in the group context
+          // if (user) {
+          //   try {
+          //     const trustLevel = await getUserTrustLevel(groupDataContext, user.userId);
+          //     user.trustLevel = trustLevel;
+          //   } catch (err) {
+          //     console.error('Failed to get trust level:', err);
+          //     user.trustLevel = TrustLevel.Unknown;
+          //   }
+          // }
+
+          return {
+            member,
+            user: user || null,
+          };
+        }),
+      );
+
+      return membersWithUsers;
+    },
+    [],
+    [groupId, refreshKey],
+  );
 
   // Check if current user has admin privileges in this group
-  const userPermissions = usePromise(async () => {
-    const currentUserContext = await getUserContext();
-    const currentUserId = currentUserContext.userId;
-    const userRole = await getUserRole(groupId, currentUserId);
-
-    return {
-      isMember: !!userRole,
-      canEdit: userRole >= GroupMemberRole.Admin,
-      userRole: userRole,
-      currentUserId: currentUserId
-    };
-  }, undefined, [groupId]);
+  const userPermissions = usePromise(
+    async () => {
+      const currentUserContext = await getUserContext();
+      const currentUserId = currentUserContext.userId;
+      const userRole = await getUserRole(groupId, currentUserId);
+
+      return {
+        isMember: !!userRole,
+        canEdit: userRole >= GroupMemberRole.Admin,
+        userRole: userRole,
+        currentUserId: currentUserId,
+      };
+    },
+    undefined,
+    [groupId],
+  );
 
   // Load group and founder information
-  const founderData = usePromise(async () => {
-    const groupsTable = Groups(groupDataContext);
-    const group = await groupsTable.get(groupId) || await Groups(userContext.userDataContext).get(groupId);
-    
-    if (!group) {
-      return null;
-    }
-
-    // Try to get founder user details
-    const founderUser = await getUserById(group.founderUserId, {
-      currentDataContext: groupDataContext
-    });
+  const founderData = usePromise(
+    async () => {
+      const groupsTable = Groups(groupDataContext);
+      const group =
+        (await groupsTable.get(groupId)) ||
+        (await Groups(userContext.userDataContext).get(groupId));
+
+      if (!group) {
+        return null;
+      }
 
-    return {
-      group,
-      founderUser,
-      founderUserId: group.founderUserId
-    };
-  }, undefined, [groupId, refreshKey]);
+      // Try to get founder user details
+      const founderUser = await getUserById(group.founderUserId, {
+        currentDataContext: groupDataContext,
+      });
+
+      return {
+        group,
+        founderUser,
+        founderUserId: group.founderUserId,
+      };
+    },
+    undefined,
+    [groupId, refreshKey],
+  );
 
   const [newMemberRole, setNewMemberRole] = React.useState<GroupMemberRole>(GroupMemberRole.Reader);
   const [addingMember, setAddingMember] = React.useState(false);
@@ -123,35 +155,36 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
   // Search function for typeahead
   const searchContacts = async (query: string): Promise<(IUserWithSource & TypeaheadItem)[]> => {
     try {
-      const cursor = await usersCursor({ name: { $matchWords: query } }, { includeTrustLevel: true });
+      const cursor = await usersCursor(
+        { name: { $matchWords: query } },
+        { includeTrustLevel: true },
+      );
       const results: IUserWithSource[] = [];
-      
+
       // Get first 10 results
       for await (const contact of cursor) {
         results.push(contact);
         if (results.length >= 10) break;
       }
-      
+
       // Filter out users who are already members
-      const currentMembers = membersData?.map(m => m.member.userId) || [];
-      const filteredResults = results.filter(contact => 
-        !currentMembers.includes(contact.userId)
-      );
-      
-      return filteredResults.map(contact => ({
+      const currentMembers = membersData?.map((m) => m.member.userId) || [];
+      const filteredResults = results.filter((contact) => !currentMembers.includes(contact.userId));
+
+      return filteredResults.map((contact) => ({
         ...contact,
-        id: contact.userId
+        id: contact.userId,
       }));
     } catch (error) {
-      console.error('Error searching contacts:', error);
+      console.error("Error searching contacts:", error);
       return [];
     }
   };
 
   // Render function for typeahead results
-  const renderContactItem = (contact: IUserWithSource & TypeaheadItem, isSelected: boolean) => (
+  const renderContactItem = (contact: IUserWithSource & TypeaheadItem, _isSelected: boolean) => (
     <div className="d-flex align-items-center">
-      <i className="bi-person-circle me-2" style={{ fontSize: '20px' }} />
+      <i className="bi-person-circle me-2" style={{ fontSize: "20px" }} />
       <div className="flex-grow-1">
         <div className="fw-semibold">{contact.name}</div>
         <small className="text-muted">{contact.userId}</small>
@@ -168,25 +201,33 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
   // Helper functions for contact sources
   const getSourceLabel = (source: string) => {
     switch (source) {
-      case 'userDataContext': return 'Personal';
-      case 'currentDataContext': return 'Current';
-      case 'otherDataContexts': return 'Groups';
-      default: return source;
+      case "userDataContext":
+        return "Personal";
+      case "currentDataContext":
+        return "Current";
+      case "otherDataContexts":
+        return "Groups";
+      default:
+        return source;
     }
   };
 
   const getSourceIcon = (source: string) => {
     switch (source) {
-      case 'userDataContext': return 'person-fill';
-      case 'currentDataContext': return 'house-fill';
-      case 'otherDataContexts': return 'people-fill';
-      default: return 'question-circle';
+      case "userDataContext":
+        return "person-fill";
+      case "currentDataContext":
+        return "house-fill";
+      case "otherDataContexts":
+        return "people-fill";
+      default:
+        return "question-circle";
     }
   };
 
   const addMember = async () => {
     if (selectedContacts.length === 0) return;
-    
+
     setAddingMember(true);
     try {
       // Add all selected contacts with the chosen role
@@ -199,30 +240,28 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
           member = await groupMembersTable.initRecord({
             groupId: groupId,
             userId: contact.userId,
-            role: newMemberRole
+            role: newMemberRole,
           });
         }
         await groupMembersTable.signAndSave(member);
       }
-      
+
       // Reset form
       setSelectedContacts([]);
       setNewMemberRole(GroupMemberRole.Reader);
 
       // Refresh the members list
-      setRefreshKey(prev => prev + 1);
+      setRefreshKey((prev) => prev + 1);
     } catch (err) {
-      console.error('Failed to add member:', err);
-      alert('Failed to add member. They may already be in the group.');
+      console.error("Failed to add member:", err);
+      alert("Failed to add member. They may already be in the group.");
     } finally {
       setAddingMember(false);
     }
   };
 
   // Render function for contact badges
-  const renderContactBadge = (contact: IUserWithSource) => (
-    <span>{contact.name}</span>
-  );
+  const renderContactBadge = (contact: IUserWithSource) => <span>{contact.name}</span>;
 
   const updateRole = async (memberId: string, newRole: GroupMemberRole) => {
     try {
@@ -230,23 +269,23 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
       if (member) {
         member.role = newRole;
         await groupMembersTable.signAndSave(member);
-        setRefreshKey(prev => prev + 1);
+        setRefreshKey((prev) => prev + 1);
       }
     } catch (err) {
-      console.error('Failed to update role:', err);
-      alert('Failed to update member role.');
+      console.error("Failed to update role:", err);
+      alert("Failed to update member role.");
     }
   };
 
   const removeMember = async (memberId: string) => {
-    if (!confirm('Remove this member from the group?')) return;
-    
+    if (!confirm("Remove this member from the group?")) return;
+
     try {
       await groupMembersTable.delete(memberId);
-      setRefreshKey(prev => prev + 1);
+      setRefreshKey((prev) => prev + 1);
     } catch (err) {
-      console.error('Failed to remove member:', err);
-      alert('Failed to remove member.');
+      console.error("Failed to remove member:", err);
+      alert("Failed to remove member.");
     }
   };
 
@@ -261,16 +300,20 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
       <div className="d-flex justify-content-between align-items-center mb-3">
         <h6 className="mb-0">Group Members</h6>
         <div className="d-flex align-items-center gap-2">
-          <div className={`alert alert-${userRole ? 'primary' : 'warning'} py-2 px-3 mb-0 d-flex align-items-center`}>
-            <i className={`bi ${userRole ? 'bi-person-badge' : 'bi-exclamation-triangle'} me-2`}></i>
+          <div
+            className={`alert alert-${userRole ? "primary" : "warning"} py-2 px-3 mb-0 d-flex align-items-center`}
+          >
+            <i
+              className={`bi ${userRole ? "bi-person-badge" : "bi-exclamation-triangle"} me-2`}
+            ></i>
             <strong>Your role: {getRoleLabel(userRole)}</strong>
           </div>
           {/* Founder info - only show if current user is NOT the founder */}
           {founderData && founderData.founderUserId !== currentUserId && (
-            <a 
+            <a
               href={`#contacts/${founderData.founderUserId}`}
               className="alert alert-warning py-2 px-3 mb-0 d-flex align-items-center text-decoration-none"
-              style={{ cursor: 'pointer' }}
+              style={{ cursor: "pointer" }}
             >
               <i className="bi bi-crown-fill me-2"></i>
               <strong>Founder: {founderData.founderUser?.name || founderData.founderUserId}</strong>
@@ -278,11 +321,9 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
           )}
         </div>
       </div>
-      
+
       {/* Group Invite Listener - Only for admins/owners */}
-      {canEdit && (
-        <GroupInviteListener groupId={groupId} userContext={userContext} />
-      )}
+      {canEdit && <GroupInviteListener groupId={groupId} userContext={userContext} />}
 
       {/* Add New Member - Only for admins/owners */}
       {canEdit && (
@@ -297,16 +338,21 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
                   onSelectionChange={(items) => setSelectedContacts(items as IUserWithSource[])}
                   renderItem={renderContactItem}
                   renderBadge={renderContactBadge}
-                  selectedItems={selectedContacts.map(contact => ({...contact, id: contact.userId}))}
+                  selectedItems={selectedContacts.map((contact) => ({
+                    ...contact,
+                    id: contact.userId,
+                  }))}
                   multiSelect={true}
                   disabled={addingMember}
                 />
               </div>
               <div className="col-md-3">
-                <select 
-                  className="form-select" 
+                <select
+                  className="form-select"
                   value={newMemberRole}
-                  onChange={(e) => setNewMemberRole(Number(e.target.value) || 0 as GroupMemberRole)}
+                  onChange={(e) =>
+                    setNewMemberRole(Number(e.target.value) || (0 as GroupMemberRole))
+                  }
                   disabled={addingMember}
                 >
                   <option value={GroupMemberRole.None}>None</option>
@@ -317,14 +363,18 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
                 </select>
               </div>
               <div className="col-md-3">
-                <button 
-                  className="btn btn-primary w-100" 
+                <button
+                  className="btn btn-primary w-100"
                   onClick={addMember}
                   disabled={addingMember || selectedContacts.length === 0}
                 >
-                  {addingMember ? 'Adding...' : 
-                   selectedContacts.length === 1 ? 'Add Member' :
-                   selectedContacts.length > 1 ? `Add ${selectedContacts.length} Members` : 'Add'}
+                  {addingMember
+                    ? "Adding..."
+                    : selectedContacts.length === 1
+                      ? "Add Member"
+                      : selectedContacts.length > 1
+                        ? `Add ${selectedContacts.length} Members`
+                        : "Add"}
                 </button>
               </div>
             </div>
@@ -339,7 +389,6 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
         </div>
       )}
 
-
       {/* Members List */}
       {membersData.length === 0 ? (
         <div className="alert alert-info">
@@ -357,16 +406,16 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
                       <div className="d-flex align-items-center">
                         <strong>
                           {user?.name || member.userId}
-                          {member.userId === currentUserId && ' (You)'}
+                          {member.userId === currentUserId && " (You)"}
                         </strong>
-                        {user?.source === 'userDataContext' && (
-                          <span className="badge bg-info ms-2" style={{ fontSize: '0.7rem' }}>
+                        {user?.source === "userDataContext" && (
+                          <span className="badge bg-info ms-2" style={{ fontSize: "0.7rem" }}>
                             <i className="bi bi-person me-1"></i>
                             Personal
                           </span>
                         )}
-                        {user?.source === 'otherDataContexts' && (
-                          <span className="badge bg-secondary ms-2" style={{ fontSize: '0.7rem' }}>
+                        {user?.source === "otherDataContexts" && (
+                          <span className="badge bg-secondary ms-2" style={{ fontSize: "0.7rem" }}>
                             <i className="bi bi-people me-1"></i>
                             Other Groups
                           </span>
@@ -378,26 +427,34 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
                     </div>
                   </div>
                 </div>
-                
+
                 <div className="d-flex align-items-center">
                   <div className="me-2">
                     <TrustLevelBadge level={user?.trustLevel || TrustLevel.Unknown} />
                   </div>
 
                   {/* View button - Always visible */}
-                  <a href={`#contacts/${member.userId}`} className="btn btn-outline-primary btn-sm me-2">
+                  <a
+                    href={`#contacts/${member.userId}`}
+                    className="btn btn-outline-primary btn-sm me-2"
+                  >
                     <i className="bi-eye me-1" />
                     View
                   </a>
-                  
+
                   {canEdit ? (
                     <>
                       {/* Role Selector - Only for admins/owners */}
-                      <select 
-                        className="form-select form-select-sm me-2" 
-                        style={{ width: '120px' }}
+                      <select
+                        className="form-select form-select-sm me-2"
+                        style={{ width: "120px" }}
                         value={member.role}
-                        onChange={(e) => updateRole(member.groupMemberId, Number(e.target.value) || 0 as GroupMemberRole)}
+                        onChange={(e) =>
+                          updateRole(
+                            member.groupMemberId,
+                            Number(e.target.value) || (0 as GroupMemberRole),
+                          )
+                        }
                       >
                         <option value={GroupMemberRole.None}>None</option>
                         <option value={GroupMemberRole.Reader}>Reader</option>
@@ -405,9 +462,9 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
                         <option value={GroupMemberRole.Admin}>Admin</option>
                         <option value={GroupMemberRole.Owner}>Owner</option>
                       </select>
-                      
+
                       {/* Remove Button - Only for admins/owners */}
-                      <button 
+                      <button
                         className="btn btn-outline-danger btn-sm"
                         onClick={() => removeMember(member.groupMemberId)}
                         title="Remove member"
@@ -431,13 +488,17 @@ export const GroupMembersUI = (props: GroupMembersUIProps) => {
       {/* Role Descriptions */}
       <div className="mt-4">
         <small className="text-muted">
-          <strong>Roles:</strong><br/>
-          <strong>Reader:</strong> Can view group content<br/>
-          <strong>Writer:</strong> Can create and edit content<br/>
-          <strong>Admin:</strong> Can manage members and settings<br/>
+          <strong>Roles:</strong>
+          <br />
+          <strong>Reader:</strong> Can view group content
+          <br />
+          <strong>Writer:</strong> Can create and edit content
+          <br />
+          <strong>Admin:</strong> Can manage members and settings
+          <br />
           <strong>Owner:</strong> Full control including group deletion
         </small>
       </div>
     </div>
   );
-};
+};

package/src/screens/groups/index.ts

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

package/src/screens/join-group/index.ts

@@ -1,4 +1,4 @@
 // Import to ensure route registration
-import './join-group';
+import "./join-group";
 
-export * from './join-group';
+export * from "./join-group";