contacts: use invite-search for adding contacts

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

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { Route, Link } from 'react-router-dom';
-import { deSig } from '/lib/util';
-import urbitOb from 'urbit-ob';
+import { InviteSearch } from './invite-search';
 
 
 export class AddScreen extends Component {
@@ -9,42 +8,26 @@ export class AddScreen extends Component {
     super(props);
 
     this.state = {
-      invites: '',
-      inviteError: false
+      invites: {
+        groups: [],
+        ships: []
+      }
     };
 
     this.invChange = this.invChange.bind(this);
   }
 
-  invChange(event) {
+  invChange(value) {
     this.setState({
-      invites: event.target.value
+      invites: value
     });
   }
 
   onClickAdd() {
     const { props, state } = this;
 
-    let aud = [];
-    let isValid = true;
-
-    if (state.invites.length > 2) {
-      aud = state.invites.split(',')
-      .map((mem) => `~${deSig(mem.trim())}`);
-
-      aud.forEach((mem) => {
-        if (!urbitOb.isValidPatp(mem)) {
-          isValid = false;
-        }
-      });
-    }
-
-    if (!isValid) {
-      this.setState({
-        inviteError: true
-      });
-      return;
-    }
+    let aud = state.invites.ships
+      .map((ship) => `~${ship}`);
 
     if (this.textarea) {
       this.textarea.value = '';
@@ -52,7 +35,10 @@ export class AddScreen extends Component {
     this.setState({
       error: false,
       success: true,
-      invites: ''
+      invites: {
+        groups: [],
+        ships: []
+      }
     }, () => {
       props.api.setSpinner(true);
       let submit = props.api.group.add(props.path, aud);
@@ -80,28 +66,23 @@ export class AddScreen extends Component {
           <Link to={"/~contacts" + props.path}>{"⟵ All Contacts"}</Link>
         </div>
         <div className="w-100 w-70-l w-70-xl mb4 pr6 pr0-l pr0-xl">
-          <h2 className="f8 pl3 pt6">Add Group Members</h2>
-          <p className="f9 pl3 gray2 lh-copy">Invite ships to your group</p>
-          <div className="relative">
-            <textarea
-            className="f8 ba b--gray3 w-100 pa3 pl3 ml3 mt2 mb2"
-            rows={1}
-            placeholder="~zod, ~dopzod, ~ravmel-ropdyl"
-            style={{
-              resize: "none",
-              height: 48,
-              paddingTop: 15
-            }}
-            onChange={this.invChange}/>
-            {invErrElem}
+          <h2 className="f8 pl4 pt4">Add Group Members</h2>
+          <p className="f9 pl4 gray2 lh-copy">Invite ships to your group</p>
+          <div className="relative pl4 mt2 pb6">
+          <InviteSearch
+            groups={props.groups}
+            groupResults={false}
+            invites={this.state.invites}
+            setInvite={this.invChange}
+          />
           </div>
           <button
             onClick={this.onClickAdd.bind(this)}
-            className="ml3 f8 ba pa2 b--green2 green2 pointer">
+            className="ml4 f8 ba pa2 b--green2 green2 pointer">
             Add Members
           </button>
           <Link to="/~contacts">
-            <button className="f8 ml3 ba pa2 b--black pointer">Cancel</button>
+            <button className="f8 ml4 ba pa2 b--black pointer">Cancel</button>
           </Link>
         </div>
       </div>

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

@@ -130,6 +130,7 @@ export class Root extends Component {
                     path={groupPath} />
                   <AddScreen
                     api={api}
+                    groups={groups}
                     path={groupPath}
                     history={props.history}
                   />