chat: add groupResults prop, fix peer set

pkg/interface/chat/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);
   }
 
@@ -37,7 +36,10 @@ export class InviteSearch extends Component {
       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);
@@ -51,7 +53,7 @@ export class InviteSearch extends Component {
     this.setState({ searchValue: event.target.value });
 
     if (searchTerm.length < 2) {
-      this.setState({searchResults: { groups: [], ships: [] }})
+      this.setState({ searchResults: { groups: [], ships: [] } });
     }
 
     if (searchTerm.length > 2) {
@@ -59,12 +61,17 @@ export class InviteSearch extends Component {
         this.setState({ inviteError: false });
       }
 
-      let groupMatches = this.state.groups.filter(e => {
+      let groupMatches = [];
+      if (this.props.groupResults) {
+        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 }
       });
@@ -74,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(
-      {
+    this.setState({
       searchValue: "",
       searchResults: { groups: [], ships: [] }
-      }
-    );
+    });
     this.props.setInvite({ groups: [], ships: ships });
   }
 
   deleteShip(ship) {
     let { groups, ships } = this.props.invites;
-    this.setState(
-      {
+    this.setState({
       searchValue: "",
       searchResults: { groups: [], ships: [] }
-      }
-    );
+    });
     ships = ships.filter(e => {
       return e !== ship;
     });
@@ -109,23 +112,19 @@ export class InviteSearch extends Component {
   }
 
   addGroup(group) {
-    this.setState(
-      {
+    this.setState({
       searchValue: "",
       searchResults: { groups: [], ships: [] }
-      }
-    );
+    });
     this.props.setInvite({ groups: [group], ships: [] });
   }
 
   addShip(ship) {
     let { groups, ships } = this.props.invites;
-    this.setState(
-      {
+    this.setState({
       searchValue: "",
       searchResults: { groups: [], ships: [] }
-      }
-    );
+    });
     ships.push(ship);
     if (groups.length > 0) {
       return false;
@@ -134,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;
@@ -156,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) {
@@ -168,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 (
@@ -183,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 (
@@ -208,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"}>
+      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 || [];
@@ -230,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,11 +262,16 @@ export class InviteSearch extends Component {
         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"}>
+            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>
         );
       });
@@ -281,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}
@@ -295,7 +320,8 @@ export class InviteSearch extends Component {
             if (e.key === "Enter" || e.key === ",") {
               e.preventDefault();
               this.submitShipToAdd(this.state.searchValue);
-          }}}
+            }
+          }}
           onChange={this.search}
           value={state.searchValue}
         />

pkg/interface/chat/src/js/components/new.js

@@ -246,6 +246,7 @@ export class NewScreen extends Component {
           </p>
           <InviteSearch
             groups={props.groups}
+            groupResults={true}
             invites={{
               groups: state.groups,
               ships: state.ships