Merge pull request #2360 from urbit/mp/os1/invite-search-contacts

invite search: fuzzy search ships by nicknames, show ship nicknames

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

@@ -8,6 +8,7 @@ export class InviteSearch extends Component {
     this.state = {
       groups: [],
       peers: [],
+      contacts: new Map,
       searchValue: "",
       searchResults: {
         groups: [],
@@ -33,7 +34,8 @@ export class InviteSearch extends Component {
     groups = groups.filter(e => !e.startsWith("/~/"));
 
     let peers = [],
-      peerSet = new Set();
+      peerSet = new Set(),
+      contacts = new Map;
     Object.keys(this.props.groups).map(group => {
       if (this.props.groups[group].size > 0) {
         let groupEntries = this.props.groups[group].values();
@@ -41,10 +43,23 @@ export class InviteSearch extends Component {
           peerSet.add(member);
         }
       }
+      if (this.props.contacts[group]) {
+        let groupEntries = this.props.groups[group].values();
+        for (let member of groupEntries) {
+          if (this.props.contacts[group][member]) {
+            if (contacts.has(member)) {
+              contacts.get(member).push(this.props.contacts[group][member].nickname);
+            }
+            else {
+              contacts.set(member, [this.props.contacts[group][member].nickname]);
+            }
+          }
+        }
+      }
     });
     peers = Array.from(peerSet);
 
-    this.setState({ groups: groups, peers: peers });
+    this.setState({ groups: groups, peers: peers, contacts: contacts });
   }
 
   search(event) {
@@ -72,6 +87,18 @@ export class InviteSearch extends Component {
         return e.includes(searchTerm) && !this.props.invites.ships.includes(e);
       });
 
+      for (let contact of this.state.contacts.keys()) {
+        let thisContact = this.state.contacts.get(contact);
+        let match = thisContact.filter(e => {
+          return e.toLowerCase().includes(searchTerm);
+        });
+        if (match.length > 0) {
+          if (!(contact in shipMatches)) {
+            shipMatches.push(contact);
+          }
+        }
+      }
+
       this.setState({
         searchResults: { groups: groupMatches, ships: shipMatches }
       });
@@ -125,7 +152,9 @@ export class InviteSearch extends Component {
       searchValue: "",
       searchResults: { groups: [], ships: [] }
     });
-    ships.push(ship);
+    if (!ships.includes(ship)) {
+      ships.push(ship);
+    }
     if (groups.length > 0) {
       return false;
     }
@@ -203,12 +232,15 @@ export class InviteSearch extends Component {
       });
 
       let shipResults = state.searchResults.ships.map(ship => {
+        let nicknames = (this.state.contacts.has(ship))
+          ? this.state.contacts.get(ship).join(", ")
+          : "";
         return (
           <li
             key={ship}
             className={
               "list mono white-d f8 pv1 ph3 pointer" +
-              " hover-bg-gray4 hover-black-d"
+              " hover-bg-gray4 hover-black-d relative"
             }
             onClick={e => this.addShip(ship)}>
             <Sigil
@@ -217,7 +249,8 @@ export class InviteSearch extends Component {
               color="#000000"
               classes="mix-blend-diff v-mid"
             />
-            <span className="v-mid ml2">{"~" + ship}</span>
+            <span className="v-mid ml2 mw5 truncate dib">{"~" + ship}</span>
+            <span className="absolute right-1 di truncate mw4 inter f9 pt1">{nicknames}</span>
           </li>
         );
       });
@@ -306,7 +339,7 @@ export class InviteSearch extends Component {
           }}
           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"
+            " db focus-b--black focus-b--white-d"
           }
           placeholder="Search for ships or existing groups"
           disabled={searchDisabled}

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

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

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

@@ -96,6 +96,7 @@ export class Root extends Component {
                     api={api}
                     inbox={state.inbox || {}}
                     groups={state.groups || {}}
+                    contacts={state.contacts || {}}
                     {...props}
                   />
                 </Skeleton>

pkg/interface/contacts/src/js/components/lib/add-contact.js

@@ -71,6 +71,7 @@ export class AddScreen extends Component {
           <div className="relative pl4 mt2 pb6">
           <InviteSearch
             groups={props.groups}
+            contacts={props.contacts}
             groupResults={false}
             invites={this.state.invites}
             setInvite={this.invChange}

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

@@ -1,21 +1,21 @@
-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);
     this.state = {
       groups: [],
       peers: [],
+      contacts: new Map,
       searchValue: "",
       searchResults: {
         groups: [],
         ships: []
       },
       inviteError: false
-    }
+    };
     this.search = this.search.bind(this);
   }
 
@@ -34,7 +34,8 @@ export class InviteSearch extends Component {
     groups = groups.filter(e => !e.startsWith("/~/"));
 
     let peers = [],
-    peerSet = new Set();
+      peerSet = new Set(),
+      contacts = new Map;
     Object.keys(this.props.groups).map(group => {
       if (this.props.groups[group].size > 0) {
         let groupEntries = this.props.groups[group].values();
@@ -42,37 +43,62 @@ export class InviteSearch extends Component {
           peerSet.add(member);
         }
       }
+      if (this.props.contacts[group]) {
+        let groupEntries = this.props.groups[group].values();
+        for (let member of groupEntries) {
+          if (this.props.contacts[group][member]) {
+            if (contacts.has(member)) {
+              contacts.get(member).push(this.props.contacts[group][member].nickname);
+            }
+            else {
+              contacts.set(member, [this.props.contacts[group][member].nickname]);
+            }
+          }
+        }
+      }
     });
     peers = Array.from(peerSet);
 
-    this.setState({ groups: groups, peers: peers });
+    this.setState({ groups: groups, peers: peers, contacts: contacts });
   }
 
   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);
-       });
+        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);
       });
 
+      for (let contact of this.state.contacts.keys()) {
+        let thisContact = this.state.contacts.get(contact);
+        let match = thisContact.filter(e => {
+          return e.toLowerCase().includes(searchTerm);
+        });
+        if (match.length > 0) {
+          if (!(contact in shipMatches)) {
+            shipMatches.push(contact);
+          }
+        }
+      }
+
       this.setState({
         searchResults: { groups: groupMatches, ships: shipMatches }
       });
@@ -82,34 +108,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;
     });
@@ -117,24 +139,22 @@ 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: [] }
-      }
-    );
-    ships.push(ship);
+    this.setState({
+      searchValue: "",
+      searchResults: { groups: [], ships: [] }
+    });
+    if (!ships.includes(ship)) {
+      ships.push(ship);
+    }
     if (groups.length > 0) {
       return false;
     }
@@ -142,7 +162,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;
@@ -164,8 +187,8 @@ export class InviteSearch extends Component {
       }
     }
 
-    let participants = <div/>
-    let searchResults = <div/>
+    let participants = <div />;
+    let searchResults = <div />;
 
     let invErrElem = <span />;
     if (state.inviteError) {
@@ -176,14 +199,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 (
@@ -191,20 +223,24 @@ 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 => {
+        let nicknames = (this.state.contacts.has(ship))
+          ? this.state.contacts.get(ship).join(", ")
+          : "";
         return (
           <li
             key={ship}
             className={
               "list mono white-d f8 pv1 ph3 pointer" +
-              " hover-bg-gray4 hover-black-d"
+              " hover-bg-gray4 hover-black-d relative"
             }
             onClick={e => this.addShip(ship)}>
             <Sigil
@@ -213,19 +249,24 @@ export class InviteSearch extends Component {
               color="#000000"
               classes="mix-blend-diff v-mid"
             />
-            <span className="v-mid ml2">{"~" + ship}</span>
+            <span className="v-mid ml2 mw5 truncate dib">{"~" + ship}</span>
+            <span className="absolute right-1 di truncate mw4 inter f9 pt1">{nicknames}</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 || [];
@@ -238,9 +279,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>
@@ -251,12 +294,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>
         );
       });
@@ -266,7 +314,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>
@@ -289,8 +337,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"
+          }
           placeholder="Search for ships or existing groups"
           disabled={searchDisabled}
           rows={1}
@@ -301,9 +351,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}
         />
@@ -315,4 +366,4 @@ export class InviteSearch extends Component {
   }
 }
 
-export default InviteSearch;
+export default InviteSearch;

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

@@ -118,6 +118,7 @@ export class NewScreen extends Component {
           <div className="relative pl3 pb6 mt2">
             <InviteSearch
               groups={this.props.groups}
+              contacts={this.props.contacts}
               groupResults={false}
               invites={this.state.invites}
               setInvite={this.invChange}

pkg/interface/contacts/src/js/components/root.js

@@ -72,6 +72,7 @@ export class Root extends Component {
                   <NewScreen
                     history={props.history}
                     groups={groups}
+                    contacts={contacts}
                     api={api} />
                 </Skeleton>
               );
@@ -133,6 +134,7 @@ export class Root extends Component {
                     groups={groups}
                     path={groupPath}
                     history={props.history}
+                    contacts={contacts}
                   />
                 </Skeleton>
               );

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

@@ -8,6 +8,7 @@ export class InviteSearch extends Component {
     this.state = {
       groups: [],
       peers: [],
+      contacts: new Map,
       searchValue: "",
       searchResults: {
         groups: [],
@@ -33,7 +34,8 @@ export class InviteSearch extends Component {
     groups = groups.filter(e => !e.startsWith("/~/"));
 
     let peers = [],
-      peerSet = new Set();
+      peerSet = new Set(),
+      contacts = new Map;
     Object.keys(this.props.groups).map(group => {
       if (this.props.groups[group].size > 0) {
         let groupEntries = this.props.groups[group].values();
@@ -41,10 +43,23 @@ export class InviteSearch extends Component {
           peerSet.add(member);
         }
       }
+      if (this.props.contacts[group]) {
+        let groupEntries = this.props.groups[group].values();
+        for (let member of groupEntries) {
+          if (this.props.contacts[group][member]) {
+            if (contacts.has(member)) {
+              contacts.get(member).push(this.props.contacts[group][member].nickname);
+            }
+            else {
+              contacts.set(member, [this.props.contacts[group][member].nickname]);
+            }
+          }
+        }
+      }
     });
     peers = Array.from(peerSet);
 
-    this.setState({ groups: groups, peers: peers });
+    this.setState({ groups: groups, peers: peers, contacts: contacts });
   }
 
   search(event) {
@@ -72,6 +87,18 @@ export class InviteSearch extends Component {
         return e.includes(searchTerm) && !this.props.invites.ships.includes(e);
       });
 
+      for (let contact of this.state.contacts.keys()) {
+        let thisContact = this.state.contacts.get(contact);
+        let match = thisContact.filter(e => {
+          return e.toLowerCase().includes(searchTerm);
+        });
+        if (match.length > 0) {
+          if (!(contact in shipMatches)) {
+            shipMatches.push(contact);
+          }
+        }
+      }
+
       this.setState({
         searchResults: { groups: groupMatches, ships: shipMatches }
       });
@@ -125,8 +152,10 @@ export class InviteSearch extends Component {
       searchValue: "",
       searchResults: { groups: [], ships: [] }
     });
-    ships.push(ship);
-    if (groups.length > 0) {
+    if (!ships.includes(ship)) {
+      ships.push(ship);
+    }
+    if ((groups.length > 0)) {
       return false;
     }
     this.props.setInvite({ groups: groups, ships: ships });
@@ -178,15 +207,15 @@ export class InviteSearch extends Component {
         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 groupResults = state.searchResults.groups.map(group => {
         return (
@@ -203,12 +232,15 @@ export class InviteSearch extends Component {
       });
 
       let shipResults = state.searchResults.ships.map(ship => {
+        let nicknames = (this.state.contacts.has(ship))
+          ? this.state.contacts.get(ship).join(", ")
+          : "";
         return (
           <li
             key={ship}
             className={
               "list mono white-d f8 pv1 ph3 pointer" +
-              " hover-bg-gray4 hover-black-d"
+              " hover-bg-gray4 hover-black-d relative"
             }
             onClick={e => this.addShip(ship)}>
             <Sigil
@@ -217,7 +249,8 @@ export class InviteSearch extends Component {
               color="#000000"
               classes="mix-blend-diff v-mid"
             />
-            <span className="v-mid ml2">{"~" + ship}</span>
+            <span className="v-mid ml2 mw5 truncate dib">{"~" + ship}</span>
+            <span className="absolute right-1 di truncate mw4 inter f9 pt1">{nicknames}</span>
           </li>
         );
       });
@@ -306,7 +339,7 @@ export class InviteSearch extends Component {
           }}
           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"
+            " db focus-b--black focus-b--white-d"
           }
           placeholder="Search for ships or existing groups"
           disabled={searchDisabled}

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

@@ -188,6 +188,7 @@ export class NewScreen extends Component {
           <InviteSearch
             groupResults={true}
             groups={this.props.groups}
+            contacts={this.props.contacts}
             invites={this.state.invites}
             setInvite={this.setInvite}
           />

pkg/interface/publish/src/js/components/root.js

@@ -65,6 +65,7 @@ export class Root extends Component {
               <NewScreen
                 notebooks={state.notebooks}
                 groups={state.groups}
+                contacts={contacts}
                 api={api}
                 {...props}
               />