@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/screens/contacts/contact-list.js

@@ -1,41 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContactList = ContactList;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const input_1 = require("../../components/input");
 const lazy_list_1 = require("../../components/lazy-list");
 const loading_indicator_1 = require("../../components/loading-indicator");
@@ -44,24 +12,26 @@ const globals_1 = require("../../globals");
 const hooks_1 = require("../../hooks");
 const ui_loader_1 = require("../../ui-router/ui-loader");
 function ContactList() {
-    const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
+    const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(""));
     const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
     const [cursorObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)());
     const [existingContacts, setExistingContacts] = (0, react_1.useState)([]);
-    async function newCursor() {
+    const newCursor = (0, react_1.useCallback)(async () => {
         const cursor = await (0, peers_sdk_1.usersCursor)({ name: { $matchWords: searchText } });
         cursorObs(cursor);
         return cursor;
-    }
+    }, [searchText, cursorObs]);
     (0, react_1.useEffect)(() => {
-        newCursor();
+        void newCursor();
         setExistingContacts([]); // Reset existing contacts when search changes
-    }, [searchText]);
+    }, [newCursor]);
     async function loadMore(existing) {
-        let moreMatches = [];
-        let cursor = cursorObs() || await newCursor();
+        const moreMatches = [];
+        const cursor = cursorObs() || (await newCursor());
         for await (const nextContact of cursor) {
-            if (existing.find(e => e.userId === nextContact.userId))
+            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)
@@ -85,9 +55,9 @@ function ContactList() {
             const usersTable = (0, peers_sdk_1.Users)(userContext.userDataContext);
             const newContact = await usersTable.initRecord({
                 userId: userId.trim(),
-                name: 'New User',
-                publicKey: '',
-                publicBoxKey: '',
+                name: "New User",
+                publicKey: "",
+                publicBoxKey: "",
             });
             await usersTable.save(newContact);
             // Set initial trust level
@@ -96,11 +66,11 @@ function ContactList() {
             (0, globals_1.mainContentPath)(`contacts/${userId.trim()}`);
         }
         catch (error) {
-            console.error('Error creating contact:', error);
+            console.error("Error creating contact:", error);
         }
     }
     async function handleSearchSubmit(evt) {
-        if (evt.key !== 'Enter')
+        if (evt.key !== "Enter")
             return;
         const input = searchText.trim();
         if (!input)
@@ -110,7 +80,7 @@ function ContactList() {
             // 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);
             }
         }
@@ -121,79 +91,50 @@ function ContactList() {
         contacts.forEach((contact, index) => {
             // Add horizontal separator when source changes
             if (lastSource !== contact.source) {
-                elements.push(react_1.default.createElement("div", { key: `separator-${index}`, className: "my-3" },
-                    lastSource !== null &&
-                        react_1.default.createElement("hr", { className: "border-secondary opacity-50" }),
-                    contact.source === 'userDataContext' &&
-                        react_1.default.createElement("h5", null,
-                            "Personal Contacts ",
-                            lastSource !== null && "(not in this group)"),
-                    contact.source === 'currentDataContext' &&
-                        react_1.default.createElement("h5", null, "Users in this group"),
-                    contact.source === 'otherDataContexts' &&
-                        react_1.default.createElement("h5", null, "Users from other groups")));
+                elements.push((0, jsx_runtime_1.jsxs)("div", { className: "my-3", children: [lastSource !== null && (0, jsx_runtime_1.jsx)("hr", { className: "border-secondary opacity-50" }), contact.source === "userDataContext" && ((0, jsx_runtime_1.jsxs)("h5", { children: ["Personal Contacts ", lastSource !== null && "(not in this group)"] })), contact.source === "currentDataContext" && (0, jsx_runtime_1.jsx)("h5", { children: "Users in this group" }), contact.source === "otherDataContexts" && (0, jsx_runtime_1.jsx)("h5", { children: "Users from other groups" })] }, `separator-${index}`));
                 lastSource = contact.source;
             }
-            elements.push(react_1.default.createElement(ContactCard, { key: contact.userId, contact: contact }));
+            elements.push((0, jsx_runtime_1.jsx)(ContactCard, { contact: contact }, contact.userId));
         });
         return elements;
     }
-    return (react_1.default.createElement("div", { className: "container-fluid p-3" },
-        react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-3" },
-            react_1.default.createElement("h4", null,
-                react_1.default.createElement("i", { className: "bi-person-fill-check me-2" }),
-                "Contacts"),
-            react_1.default.createElement("a", { href: "#contacts/connect", className: "btn btn-primary btn-sm" },
-                react_1.default.createElement("i", { className: "bi-person-plus me-1" }),
-                "Connect to New User")),
-        react_1.default.createElement("div", { className: "input-group mb-3" },
-            react_1.default.createElement(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search or create contacts", autoFocus: true, onKeyUp: handleSearchSubmit })),
-        react_1.default.createElement("div", { className: "peers-list-container" },
-            react_1.default.createElement(lazy_list_1.LazyList, { resetTrigger: searchText, loadMore: loadMore, scrollThreshold: 0.6, renderItems: renderItems, loadingIndicator: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } },
-                    react_1.default.createElement(loading_indicator_1.LoadingIndicator, null)), endOfList: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [(0, jsx_runtime_1.jsxs)("h4", { children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-fill-check me-2" }), "Contacts"] }), (0, jsx_runtime_1.jsxs)("a", { href: "#contacts/connect", className: "btn btn-primary btn-sm", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-plus me-1" }), "Connect to New User"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "input-group mb-3", children: (0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: "Search or create contacts", autoFocus: true, onKeyUp: handleSearchSubmit }) }), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { resetTrigger: searchText, loadMore: loadMore, scrollThreshold: 0.6, renderItems: renderItems, loadingIndicator: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", style: { height: 200 }, children: (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {}) }), endOfList: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }) })] }));
 }
 const ContactCard = ({ contact }) => {
     const getSourceLabel = (source) => {
         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) => {
         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 (react_1.default.createElement("div", { className: "list-group-item d-flex align-items-center justify-content-between py-2" },
-        react_1.default.createElement("div", { className: "d-flex align-items-center" },
-            react_1.default.createElement("i", { className: "bi-person-circle me-3", style: { fontSize: '32px', color: '#6c757d' } }),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("strong", null, contact.name),
-                react_1.default.createElement("div", { className: "d-flex align-items-center" },
-                    react_1.default.createElement("small", { className: "text-muted" }, contact.userId),
-                    react_1.default.createElement("span", { className: "mx-1 text-muted" }, "\u2022"),
-                    react_1.default.createElement("small", { className: "text-info d-flex align-items-center" },
-                        react_1.default.createElement("i", { className: `${getSourceIcon(contact.source)} me-1` }),
-                        getSourceLabel(contact.source))))),
-        react_1.default.createElement("div", { className: "d-flex align-items-center" },
-            react_1.default.createElement(trust_level_badge_1.TrustLevelBadge, { level: contact.trustLevel || peers_sdk_1.TrustLevel.Unknown }),
-            react_1.default.createElement("a", { href: `#contacts/${contact.userId}`, className: "btn btn-outline-primary btn-sm ms-2" },
-                react_1.default.createElement("i", { className: "bi-eye me-1" }),
-                "View"))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "list-group-item d-flex align-items-center justify-content-between py-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-circle me-3", style: { fontSize: "32px", color: "#6c757d" } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: contact.name }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted", children: contact.userId }), (0, jsx_runtime_1.jsx)("span", { className: "mx-1 text-muted", children: "\u2022" }), (0, jsx_runtime_1.jsxs)("small", { className: "text-info d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)("i", { className: `${getSourceIcon(contact.source)} me-1` }), getSourceLabel(contact.source)] })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [(0, jsx_runtime_1.jsx)(trust_level_badge_1.TrustLevelBadge, { level: contact.trustLevel || peers_sdk_1.TrustLevel.Unknown }), (0, jsx_runtime_1.jsxs)("a", { href: `#contacts/${contact.userId}`, className: "btn btn-outline-primary btn-sm ms-2", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-eye me-1" }), "View"] })] })] }));
 };
 (0, ui_loader_1.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/dist/screens/contacts/index.d.ts

@@ -1,6 +1,6 @@
-import './contact-list';
-import './contact-details';
-import './user-connect';
-export * from "./contact-list";
+import "./contact-list";
+import "./contact-details";
+import "./user-connect";
 export * from "./contact-details";
+export * from "./contact-list";
 export * from "./user-connect";

package/dist/screens/contacts/index.js

@@ -18,6 +18,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 require("./contact-list");
 require("./contact-details");
 require("./user-connect");
-__exportStar(require("./contact-list"), exports);
 __exportStar(require("./contact-details"), exports);
+__exportStar(require("./contact-list"), exports);
 __exportStar(require("./user-connect"), exports);

package/dist/screens/contacts/user-connect.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare function UserConnect(): React.JSX.Element;
+export declare function UserConnect(): import("react/jsx-runtime").JSX.Element;