publish: add groupResults prop, fix peer set

pkg/interface/publish/src/js/components/lib/invite-search.js

@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import urbitOb from "urbit-ob";
 import { Sigil } from "../lib/icons/sigil";
 
-
 export class InviteSearch extends Component {
   constructor(props) {
     super(props);
@@ -15,7 +14,7 @@ export class InviteSearch extends Component {
         ships: []
       },
       inviteError: false
-    }
+    };
     this.search = this.search.bind(this);
   }
 
@@ -34,13 +33,15 @@ export class InviteSearch extends Component {
     groups = groups.filter(e => !e.startsWith("/~/"));
 
     let peers = [],
-    peerSet = new Set();
+      peerSet = new Set();
     Object.keys(this.props.groups).map(group => {
       if (this.props.groups[group].size > 0) {
-        peerSet.add(...this.props.groups[group]);
+        let groupEntries = this.props.groups[group].values();
+        for (let member of groupEntries) {
+          peerSet.add(member);
+        }
       }
     });
-
     peers = Array.from(peerSet);
 
     this.setState({ groups: groups, peers: peers });
@@ -49,23 +50,28 @@ export class InviteSearch extends Component {
   search(event) {
     let searchTerm = event.target.value.toLowerCase().replace("~", "");
 
-    this.setState({searchValue: event.target.value});
+    this.setState({ searchValue: event.target.value });
 
     if (searchTerm.length < 2) {
-      this.setState({searchResults: { groups: [], ships: [] }})
+      this.setState({ searchResults: { groups: [], ships: [] } });
     }
 
     if (searchTerm.length > 2) {
       if (this.state.inviteError === true) {
-        this.setState({inviteError: false});
+        this.setState({ inviteError: false });
+      }
+
+      let groupMatches = [];
+      if (this.props.groupResults) {
+        groupMatches = this.state.groups.filter(e => {
+          return e.includes(searchTerm);
+        });
       }
 
-      let groupMatches = this.state.groups.filter(e => {
-        return e.includes(searchTerm);
-      });
       let shipMatches = this.state.peers.filter(e => {
         return e.includes(searchTerm) && !this.props.invites.ships.includes(e);
       });
+
       this.setState({
         searchResults: { groups: groupMatches, ships: shipMatches }
       });
@@ -75,34 +81,30 @@ export class InviteSearch extends Component {
         isValid = false;
       }
 
-      if ((shipMatches.length === 0) && (isValid)) {
+      if (shipMatches.length === 0 && isValid) {
         shipMatches.push(searchTerm);
         this.setState({
           searchResults: { groups: groupMatches, ships: shipMatches }
-        })
+        });
       }
     }
   }
 
   deleteGroup() {
     let { ships } = this.props.invites;
-    this.setState(
-      {
-        searchValue: "",
-        searchResults: { groups: [], ships: [] }
-      }
-    );
+    this.setState({
+      searchValue: "",
+      searchResults: { groups: [], ships: [] }
+    });
     this.props.setInvite({ groups: [], ships: ships });
   }
 
   deleteShip(ship) {
     let { groups, ships } = this.props.invites;
-    this.setState(
-      {
-        searchValue: "",
-        searchResults: { groups: [], ships: [] }
-      }
-    );
+    this.setState({
+      searchValue: "",
+      searchResults: { groups: [], ships: [] }
+    });
     ships = ships.filter(e => {
       return e !== ship;
     });
@@ -110,23 +112,19 @@ export class InviteSearch extends Component {
   }
 
   addGroup(group) {
-    this.setState(
-      {
-        searchValue: "",
-        searchResults: { groups: [], ships: [] }
-      }
-    );
+    this.setState({
+      searchValue: "",
+      searchResults: { groups: [], ships: [] }
+    });
     this.props.setInvite({ groups: [group], ships: [] });
   }
 
   addShip(ship) {
     let { groups, ships } = this.props.invites;
-    this.setState(
-      {
-        searchValue: "",
-        searchResults: { groups: [], ships: [] }
-      }
-    );
+    this.setState({
+      searchValue: "",
+      searchResults: { groups: [], ships: [] }
+    });
     ships.push(ship);
     if (groups.length > 0) {
       return false;
@@ -135,7 +133,10 @@ export class InviteSearch extends Component {
   }
 
   submitShipToAdd(ship) {
-    let searchTerm = ship.toLowerCase().replace("~", "").trim();
+    let searchTerm = ship
+      .toLowerCase()
+      .replace("~", "")
+      .trim();
     let isValid = true;
     if (!urbitOb.isValidPatp("~" + searchTerm)) {
       isValid = false;
@@ -157,8 +158,8 @@ export class InviteSearch extends Component {
       }
     }
 
-    let participants = <div/>
-    let searchResults = <div/>
+    let participants = <div />;
+    let searchResults = <div />;
 
     let invErrElem = <span />;
     if (state.inviteError) {
@@ -169,14 +170,23 @@ export class InviteSearch extends Component {
       );
     }
 
-    if ((state.searchResults.groups.length > 0)
-      || (state.searchResults.ships.length > 0)) {
+    if (
+      state.searchResults.groups.length > 0 ||
+      state.searchResults.ships.length > 0
+    ) {
+      let groupHeader =
+        state.searchResults.groups.length > 0 ? (
+          <p className="f9 gray2 ph3">Groups</p>
+        ) : (
+          ""
+        );
 
-      let groupHeader = (state.searchResults.groups.length > 0)
-        ? <p className="f9 gray2 ph3">Groups</p> : "";
-
-      let shipHeader = (state.searchResults.ships.length > 0)
-        ? <p className="f9 gray2 pv2 ph3">Ships</p> : "";
+      let shipHeader =
+        state.searchResults.ships.length > 0 ? (
+          <p className="f9 gray2 pv2 ph3">Ships</p>
+        ) : (
+          ""
+        );
 
       let groupResults = state.searchResults.groups.map(group => {
         return (
@@ -184,12 +194,13 @@ export class InviteSearch extends Component {
             key={group}
             className={
               "list mono white-d f8 pv2 ph3 pointer" +
-              " hover-bg-gray4 hover-black-d"}
+              " hover-bg-gray4 hover-black-d"
+            }
             onClick={e => this.addGroup(group)}>
             {group}
           </li>
         );
-      })
+      });
 
       let shipResults = state.searchResults.ships.map(ship => {
         return (
@@ -209,16 +220,20 @@ export class InviteSearch extends Component {
             <span className="v-mid ml2">{"~" + ship}</span>
           </li>
         );
-      })
+      });
 
-      searchResults =
-      <div className={"absolute bg-white bg-gray0-d white-d" +
-      " pv3 z-1 w-100 mt1 ba b--white-d overflow-y-scroll mh-16"}>
-        {groupHeader}
-        {groupResults}
-        {shipHeader}
-        {shipResults}
-      </div>
+      searchResults = (
+        <div
+          className={
+            "absolute bg-white bg-gray0-d white-d" +
+            " pv3 z-1 w-100 mt1 ba b--white-d overflow-y-scroll mh-16"
+          }>
+          {groupHeader}
+          {groupResults}
+          {shipHeader}
+          {shipResults}
+        </div>
+      );
     }
 
     let groupInvites = props.invites.groups || [];
@@ -231,9 +246,11 @@ export class InviteSearch extends Component {
             key={group}
             className={
               "f9 mono black pa2 bg-gray5 bg-gray1-d" +
-              " ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default"}>
+              " ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default"
+            }>
             {group}
-            <span className="white-d ml3 mono pointer"
+            <span
+              className="white-d ml3 mono pointer"
               onClick={e => this.deleteGroup(group)}>
               x
             </span>
@@ -244,12 +261,17 @@ export class InviteSearch extends Component {
       let ships = shipInvites.map(ship => {
         return (
           <span
-          key={ship}
-          className={"f9 mono black pa2 bg-gray5 bg-gray1-d" +
-          " ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default"}>
+            key={ship}
+            className={
+              "f9 mono black pa2 bg-gray5 bg-gray1-d" +
+              " ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default"
+            }>
             {"~" + ship}
-            <span className="white-d ml3 mono pointer"
-            onClick={e => this.deleteShip(ship)}>x</span>
+            <span
+              className="white-d ml3 mono pointer"
+              onClick={e => this.deleteShip(ship)}>
+              x
+            </span>
           </span>
         );
       });
@@ -259,7 +281,7 @@ export class InviteSearch extends Component {
           className={
             "f9 gray2 bb bl br b--gray3 b--gray2-d bg-gray0-d " +
             "white-d pa3 db w-100 inter"
-            }>
+          }>
           <span className="db gray2">Participants</span>
           {groups} {ships}
         </div>
@@ -282,8 +304,10 @@ export class InviteSearch extends Component {
           ref={e => {
             this.textarea = e;
           }}
-          className={"f7 ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 w-100"
-          + " db focus-b--black focus-b--white-d mono placeholder-inter"}
+          className={
+            "f7 ba b--gray3 b--gray2-d bg-gray0-d white-d pa3 w-100" +
+            " db focus-b--black focus-b--white-d mono placeholder-inter"
+          }
           placeholder="Search for ships or existing groups"
           disabled={searchDisabled}
           rows={1}
@@ -294,9 +318,10 @@ export class InviteSearch extends Component {
           }}
           onKeyPress={e => {
             if (e.key === "Enter" || e.key === ",") {
-            e.preventDefault();
-            this.submitShipToAdd(this.state.searchValue);
-          }}}
+              e.preventDefault();
+              this.submitShipToAdd(this.state.searchValue);
+            }
+          }}
           onChange={this.search}
           value={state.searchValue}
         />
@@ -308,4 +333,4 @@ export class InviteSearch extends Component {
   }
 }
 
-export default InviteSearch;
+export default InviteSearch;

pkg/interface/publish/src/js/components/lib/new.js

@@ -184,6 +184,7 @@ export class NewScreen extends Component {
           </p>
           <p className="f9 gray2 db mb2 pt1">Select an initial read-only audience for your notebook</p>
           <InviteSearch
+            groupResults={true}
             groups={this.props.groups}
             invites={this.state.invites}
             setInvite={this.setInvite}