@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,366 @@
+import { getMe, getUserContext, Groups, ICursorIterable, IGroup, newid, newKeys, observable, rpcServerCalls, 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';
+
+export function GroupList() {
+  const userContext = usePromise(getUserContext);
+  const [searchTextObs] = useState(() => observable(''));
+  const [searchText] = useObservable(searchTextObs);
+  const [cursorObs] = useState(() => observable<ICursorIterable<IGroup>>());
+  
+  // All hooks must be called before any conditional returns
+  const groupsTable = userContext ? Groups(userContext.userDataContext) : null;
+
+  async function newCursor() {
+    if (!groupsTable) return;
+    
+    const filter = {
+      $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 }) 
+    });
+    cursorObs(cursor);
+    return cursor;
+  }
+
+  useEffect(() => {
+    if (groupsTable) {
+      newCursor();
+    }
+  }, [searchText, groupsTable]);
+  
+  // Early return after all hooks
+  if (!userContext) {
+    return <LoadingIndicator />;
+  }
+
+  async function loadMore(existing: IGroup[]): Promise<IGroup[]> {
+    if (!groupsTable) return [];
+    
+    let moreMatches: IGroup[] = [];
+    let cursor = cursorObs() || await newCursor();
+    if (!cursor) return [];
+    
+    for await (const nextRecord of cursor) {
+      if (existing.find(e => e.groupId === nextRecord.groupId)) continue;
+      moreMatches.push(nextRecord);
+      if (searchText.length && moreMatches.length > 5) break;
+      if (moreMatches.length >= 10) break;
+    }
+    if (moreMatches.length === 0) {
+      cursorObs(undefined);
+    }
+    return moreMatches;
+  }
+
+  async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
+    if (evt.key !== "Enter") return;
+    const name = searchText.trim();
+    if (!name) return;
+    searchTextObs('');
+    await newRecord(name);
+  }
+
+  async function newRecord(name: string) {
+    const userContext = await getUserContext();
+    const groupName = name.trim();
+    const groupId = newid();
+
+    // Generate cryptographic keys for the group
+    const groupKeys = newKeys();
+
+    // NOTE: this is relying on the userContext to be able to create a group context for a group that doesn't yet exist
+    //       at time of writing, this is supported but is probably unintuitive behavior so we need to watch for this changing in the future
+    const groupDataContext = userContext.getDataContext(groupId);
+
+    // Store groupKeys.secretKey securely for this group
+    const persistentVarsTable = userContext.userDataContext.tableContainer.getTableByName('PersistentVars');
+    const groupSecretKeyVarName = 'groupSecretKey_' + groupDataContext.dataContextId;
+    await persistentVarsTable.save({
+      persistentVarId: newid(),
+      name: groupSecretKeyVarName,
+      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,
+      trustLevel: TrustLevel.Trusted
+    });
+
+    // create group in both the user's and group's context
+    const group = await Groups(userContext.userDataContext).save({
+      groupId,
+      name: groupName,
+      description: '',
+      iconClassName: 'bi-people-fill', // Default icon
+      founderUserId: me.userId,
+      disabled: false,
+      publicKey: groupKeys.publicKey,
+      publicBoxKey: groupKeys.publicBoxKey,
+      signature: '', // calling save will sign
+    });
+    await Groups(groupDataContext).save(group);
+
+    mainContentPath(`groups/${group.groupId}`);
+    return group;
+  }
+
+  function renderItem(group: IGroup) {
+    const groupIcon = group.iconClassName || 'bi-people-fill';
+    return (
+      <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 || ''} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className='container-fluid'>
+      <div className="input-group mt-3 mb-3">
+        <Input 
+          value={searchTextObs} 
+          className="form-control" 
+          placeholder="Search or create group"
+          autoFocus={isDesktop() ? true : false}
+          onKeyUp={evt => searchSubmit(evt)}
+        />
+        <ImportGroupButton />
+      </div>
+
+      <div className="peers-list-container">
+        <LazyList
+          resetTrigger={searchText}
+          loadMore={loadMore}
+          scrollThreshold={0.6}          
+          renderItems={(groups) => {
+            return groups.map(renderItem);
+          }}
+          loadingIndicator={
+            <div className="d-flex justify-content-center" style={{ height: 200 }}>
+              <LoadingIndicator />
+            </div>
+          }
+          endOfList={
+            <div className="d-flex justify-content-center" style={{ height: 200 }}>
+              {/* <span className="h3">End of List</span> */}
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+const ImportGroupButton = () => {
+  const [isImporting, setIsImporting] = useState(false);
+  const [showImportDialog, setShowImportDialog] = useState(false);
+  const [importText, setImportText] = useState('');
+  const [importResult, setImportResult] = useState<{
+    success: boolean;
+    message: string;
+    groupId?: string;
+  } | null>(null);
+
+  const handleImport = async () => {
+    if (!importText.trim()) {
+      setImportResult({
+        success: false,
+        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
+      });
+      setImportText('');
+      
+      // Navigate to the imported group after a brief delay
+      setTimeout(() => {
+        mainContentPath(`groups/${groupId}`);
+        setShowImportDialog(false);
+        setImportResult(null);
+      }, 2000);
+      
+    } catch (error: any) {
+      setImportResult({
+        success: false,
+        message: `Import failed: ${error.message}`
+      });
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  const handlePasteFromClipboard = async () => {
+    try {
+      if (navigator.clipboard && navigator.clipboard.readText) {
+        const clipboardText = await navigator.clipboard.readText();
+        setImportText(clipboardText);
+      }
+    } 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" 
+        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)}
+          >
+            <i className="bi-download me-2"></i>
+            Import Shared Group
+          </button>
+        </li>
+      </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="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" 
+                onClick={() => {
+                  setShowImportDialog(false);
+                  setImportText('');
+                  setImportResult(null);
+                }}
+                aria-label="Close"
+              ></button>
+            </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.
+              </p>
+              
+              <div className="mb-3">
+                <label className="form-label">Group Share JSON:</label>
+                <div className="d-flex gap-2 mb-2">
+                  <button 
+                    className="btn btn-secondary btn-sm"
+                    onClick={handlePasteFromClipboard}
+                    title="Paste from clipboard"
+                  >
+                    <i className="bi-clipboard me-1"></i>
+                    Paste from Clipboard
+                  </button>
+                </div>
+                <textarea
+                  className="form-control font-monospace"
+                  rows={8}
+                  value={importText}
+                  onChange={(e) => setImportText(e.target.value)}
+                  placeholder="Paste the group share JSON here..."
+                  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>
+                  {importResult.message}
+                  {importResult.success && importResult.groupId && (
+                    <div className="mt-2">
+                      <small>Redirecting to group in 2 seconds...</small>
+                    </div>
+                  )}
+                </div>
+              )}
+              
+              <div className="text-end">
+                <button 
+                  className="btn btn-secondary me-2"
+                  onClick={() => {
+                    setShowImportDialog(false);
+                    setImportText('');
+                    setImportResult(null);
+                  }}
+                  disabled={isImporting}
+                >
+                  Cancel
+                </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>
+                      Importing...
+                    </>
+                  ) : (
+                    <>
+                      <i className="bi-download me-1"></i>
+                      Import Group
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+registerInternalPeersUI({
+  peersUIId: '00mf8qrs004w5u2wqk64d2yp6',
+  component: GroupList,
+  routes: [
+    {
+      isMatch: (props, context) => context.path === 'groups',
+      uiCategory: 'screen',
+      priority: 2
+    }
+  ]
+})