contacts: add member interface works

pkg/arvo/app/contact-view.hoon

@@ -135,11 +135,6 @@
     :~  (group-poke [%unbundle path.act])
         (contact-poke [%delete path.act])
     ==
-  ::
-      %add
-    :~  (group-poke [%add [ship.act ~ ~] path.act])
-        (contact-poke [%add path.act ship.act contact.act])
-    ==
   ::
       %remove
     :~  (group-poke [%remove [ship.act ~ ~] path.act])

pkg/arvo/lib/contact-json.hoon

@@ -101,7 +101,6 @@
     %-  of
     :~  [%create create]
         [%delete delete]
-        [%add add]
         [%remove remove]
     ==
   ::
@@ -113,13 +112,6 @@
   ::
   ++  delete  (ot [%path pa]~)
   ::
-  ++  add
-    %-  ot
-    :~  [%path pa]
-        [%ship (su ;~(pfix sig fed:ag))]
-        [%contact cont]
-    ==
-  ::
   ++  remove
     %-  ot
     :~  [%path pa]

pkg/arvo/sur/contact-view.hoon

@@ -4,9 +4,6 @@
   $%  ::  create in both groups and contacts
       ::
       [%create =path members=(set ship)]
-      ::  add to both groups and contacts
-      ::
-      [%add =path =ship =contact]
       ::  remove from both groups and contacts
       ::
       [%remove =path =ship]

pkg/interface/contacts/src/js/api.js

@@ -9,6 +9,10 @@ class UrbitApi {
   setAuthTokens(authTokens) {
     this.authTokens = authTokens;
     this.bindPaths = [];
+
+    this.groups = {
+      add: this.groupAdd.bind(this)
+    };
     
     this.contacts = {
       edit: this.contactEdit.bind(this)
@@ -17,7 +21,6 @@ class UrbitApi {
     this.contactView = {
       create: this.contactCreate.bind(this),
       delete: this.contactDelete.bind(this),
-      add: this.contactAdd.bind(this),
       remove: this.contactRemove.bind(this),
     };
     
@@ -77,18 +80,11 @@ class UrbitApi {
     this.contactViewAction({ delete: { path }});
   }
 
-  contactAdd(path, ship, contact = {
-    nickname: '',
-    email: '',
-    phone: '',
-    website: '',
-    notes: '',
-    color: '0',
-    avatar: null
-  }) {
-    this.contactViewAction({
+  groupAdd(path, members) {
+    this.action("group-store", "group-action", {
       add: {
-        path, ship, contact
+        members: members,
+        path: path
       }
     });
   }

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

@@ -1,15 +1,106 @@
 import React, { Component } from 'react';
 import { Route, Link } from 'react-router-dom';
+import { deSig } from '/lib/util';
+import urbitOb from 'urbit-ob';
+
 
 export class AddScreen extends Component {
+  constructor(props) {
+    super(props);
+    
+    this.state = {
+      invites: '',
+      inviteError: false
+    };
+    
+    this.invChange = this.invChange.bind(this);
+  }
+  
+  invChange(event) {
+    this.setState({
+      invites: event.target.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;
+    }
+    
+    if (this.textarea) {
+      this.textarea.value = '';
+    }
+    this.setState({
+      error: false,
+      success: true,
+      invites: ''
+    }, () => {
+      props.setSpinner(true);
+      props.api.groups.add(props.path, aud)
+      props.history.push('/~contacts' + props.path);
+    });
+  }
+  
   render() {
     const { props } = this; 
-    //TODO This. Waiting on contact-hook
+    let invErrElem = (<span />);
+    if (this.state.inviteError) {
+      invErrElem = (
+        <span className="f9 inter red2 ml3 mb5 db">
+        Invites must be validly formatted ship names.
+        </span>
+      );
+    }
+
     return (
       <div className="h-100 w-100 flex flex-column overflow-y-scroll">
         <div className="w-100 dn-m dn-l dn-xl inter pt1 pb6 pl3 pt3 f8">
           <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}
+          </div>
+          <button 
+            onClick={this.onClickAdd.bind(this)}
+            className="ml3 f8 ba pa2 b--green2 green2 pointer">
+            Add Members
+          </button>
+          <Link to="/~contacts">
+            <button className="f8 ml3 ba pa2 b--black pointer">Cancel</button>
+          </Link>
+        </div>
       </div>
     )
   }

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

@@ -492,7 +492,7 @@ export class ContactCard extends Component {
 
     let editInfoText =
       state.edit ? "Finish Editing" : "Edit Contact Info";
-    if (props.share) {
+    if (props.share && state.edit) {
       editInfoText = "Share with Group";
     }
 

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

@@ -15,10 +15,9 @@ export class ContactItem extends Component {
     let prefix = props.share ? 'share' : 'view';
     return (
       <Link to={`/~contacts/${prefix}` + props.path}>
-        <div
-          className={
-            "pl4 pt1 pb1 f9 flex justify-start content-center " +
-            selectedClass}>
+        <div className=
+          {"pl4 pt1 pb1 f9 flex justify-start content-center " + selectedClass}
+        >
           <Sigil ship={props.ship} color={"#" + hexColor} size={32} />
           <p 
             className={

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

@@ -81,7 +81,6 @@ export class NewScreen extends Component {
       invites: ''
     }, () => {
       props.setSpinner(true);
-      //TODO add YOU to the group, but without invites
       props.api.contactCreate(group, aud);
     });
   }

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

@@ -107,8 +107,10 @@ export class Root extends Component {
                     activeDrawer="rightPanel"
                     path={groupPath} />
                   <AddScreen 
+                    api={api}
                     path={groupPath}
-                    contacts={groupContacts}
+                    setSpinner={this.setSpinner}
+                    history={props.history}
                   />
                 </Skeleton>
               );