Share sheet renders properly in group

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

@@ -9,7 +9,7 @@ export class ContactCard extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      edit: false,
+      edit: props.share,
       colorToSet: "",
       nickNameToSet: "",
       emailToSet: "",
@@ -200,34 +200,30 @@ export class ContactCard extends Component {
   renderEditCard() {
     const { props } = this;
     // if this is our first edit in a new group, propagate from root identity
-    let defaultValue = {
-      nickname: (props.share) 
-      ? props.rootIdentity.nickname
-      : props.contact.nickname,
-      email: (props.share)
-      ? props.rootIdentity.email
-      : props.contact.email,
-      phone: (props.share)
-      ? props.rootIdentity.phone
-      : props.contact.phone,
-      website: (props.share)
-      ? props.rootIdentity.website
-      : props.contact.website,
-      notes: (props.share)
-      ? props.rootIdentity.notes
-      : props.contact.notes
-    }
+    let defaultValue = props.share ? {
+      nickname: props.rootIdentity.nickname,
+      email: props.rootIdentity.email,
+      phone: props.rootIdentity.phone,
+      website: props.rootIdentity.website,
+      notes: props.rootIdentity.notes,
+      color: props.rootIdentity.color
+    } : {
+      nickname: props.contact.nickname,
+      email: props.contact.email,
+      phone: props.contact.phone,
+      website: props.contact.website,
+      notes: props.contact.notes,
+      color: props.contact.color
+    };
 
     let shipType = this.shipParser(props.ship);
 
-    let currentColor = (props.contact.color) 
-    ? props.contact.color 
-    : "0x0";
-
+    let currentColor = !!defaultValue.color ? defaultValue.color : "0x0";
     let hexColor = uxToHex(currentColor);
 
     let sigilColor = "";
-    let hasAvatar = (props.contact.avatar !== "TODO");
+    let hasAvatar = 
+      'avatar' in props.contact && props.contact.avatar !== "TODO";
 
 
     if (!hasAvatar) { 
@@ -239,6 +235,7 @@ export class ContactCard extends Component {
            className="b--gray4 black f7 ba db pl2"
            onChange={this.sigilColorSet}
            defaultValue={"#" + hexColor}
+           key={hexColor}
            style={{
              resize: "none",
              height: 40,
@@ -257,12 +254,12 @@ export class ContactCard extends Component {
     if (hasAvatar) {
       removeImage = (
         <div>
-          <button class="f9 black pointer db"
+          <button className="f9 black pointer db"
             onClick={() => this.setField("removeAvatar")}>
             Remove photo
-            </button>
+          </button>
         </div>
-      )
+      );
     }
 
     return (
@@ -272,15 +269,12 @@ export class ContactCard extends Component {
           {sigilColor}
           <button className="f9 b--black ba pa2">Upload an Image</button>
           {removeImage}
-
           <div className="w-100 pt8 lh-copy tl">
             <p className="f9 gray2">Ship Name</p>
             <p className="f8 mono">~{props.ship}</p>
             <p className="f9 gray2 mt3">Ship Type</p>
             <p className="f8">{shipType}</p>
-
             <hr className="mv8 gray4 b--gray4 bb-0 b--solid" />
-
             <p className="f9 gray2">Nickname</p>
               <div className="w-100 flex">
                 <textarea
@@ -428,7 +422,7 @@ export class ContactCard extends Component {
     let hexColor = uxToHex(currentColor);
 
     let avatar = 
-      (props.contact.avatar !== "TODO") ?
+      ('avatar' in props.contact && props.contact.avatar !== "TODO") ?
       <img className="dib h-auto" width={128} src={props.contact.avatar} /> :
       <Sigil ship={props.ship} size={128} color={"#" + hexColor} />;
 
@@ -498,6 +492,9 @@ export class ContactCard extends Component {
 
     let editInfoText =
       state.edit ? "Finish Editing" : "Edit Contact Info";
+    if (props.share) {
+      editInfoText = "Share with Group";
+    }
 
     let ourOpt = (props.ship === window.ship) ? "dib" : "dn";
     let localOpt =
@@ -507,7 +504,7 @@ export class ContactCard extends Component {
       (props.path.includes(window.ship) && (props.ship !== window.ship))
       ? "dib" : "dn";
 
-    let card = (state.edit) ? this.renderEditCard() : this.renderCard();
+    let card = state.edit ? this.renderEditCard() : this.renderCard();
 
     //TODO "Share card" if it's /me -> sends to /~/default of recipient
     return (

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

@@ -12,8 +12,9 @@ export class ContactItem extends Component {
     let hexColor = uxToHex(props.color);
     let name = (props.nickname) ? props.nickname : "~" + props.ship;
 
+    let prefix = props.share ? 'share' : 'view';
     return (
-      <Link to={"/~contacts" + props.path}>
+      <Link to={`/~contacts/${prefix}` + props.path}>
         <div
           className={
             "pl4 pt1 pb1 f9 flex justify-start content-center " +

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

@@ -1,22 +1,36 @@
 import React, { Component } from 'react';
 import { Route, Link } from 'react-router-dom';
 import { ContactItem } from '/components/lib/contact-item';
+import { ShareSheet } from '/components/lib/share-sheet';
 import { Sigil } from '../lib/icons/sigil';
 
 export class ContactSidebar extends Component {
   render() {
     const { props } = this;
 
-    console.log(props.group);
+    let group = new Set(Array.from(props.group));
     let responsiveClasses =
       props.activeDrawer === "contacts" ? "db" : "dn db-ns";
 
+    let me = (window.ship in props.defaultContacts) ?
+      props.defaultContacts[window.ship] : { color: '0x0', nickname: null};
+    
+    let shareSheet = 
+      !(window.ship in props.contacts) ?
+      ( <ShareSheet
+          ship={window.ship}
+          nickname={me.nickname}
+          color={me.color}
+          path={props.path}
+          selected={props.path + "/" + window.ship === props.selectedContact}
+        />
+      ) : (<div></div>);
+    group.delete(window.ship);
 
     let contactItems = 
       Object.keys(props.contacts)
       .map((contact) => {
-        props.group.delete(contact);
-        console.log(contact);
+        group.delete(contact);
         let path = props.path + "/" + contact;
         let obj = props.contacts[contact];
         return (
@@ -25,13 +39,15 @@ export class ContactSidebar extends Component {
             ship={contact}
             nickname={obj.nickname}
             color={obj.color}
-            path={path}
-            selected={path === props.selectedContact} />
+            path={props.path}
+            selected={path === props.selectedContact}
+            share={true}
+          />
         );
       });
 
     let groupItems =
-      Array.from(props.group).map((member) => {
+      Array.from(group).map((member) => {
         return (
           <div className="pl4 pt1 pb1 f9 flex justify-start content-center">
             <Sigil ship={member} color="#aaaaaa" size={32} />
@@ -43,11 +59,6 @@ export class ContactSidebar extends Component {
         );
       });
 
-    /*
-     * TODO if your contact in this group is completely empty,
-     * show prompt to "share details selectively",
-     * using your root identity as template
-    */
     return (
       <div className={`bn br-m br-l br-xl b--black lh-copy h-100 flex-shrink-0 
       flex-basis-100-s flex-basis-30-ns mw5-m mw5-l mw5-xl relative 
@@ -56,6 +67,7 @@ export class ContactSidebar extends Component {
           <Link to="/~contacts/">{"⟵ All Groups"}</Link>
         </div>
         <div className="overflow-y-scroll h-100">
+          {shareSheet}
           <h2 className="f9 pt4 pr4 pb2 pl4 gray2 c-default">Members</h2>
           {contactItems}
           {groupItems}

pkg/interface/contacts/src/js/components/lib/share-sheet.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { Route, Link } from 'react-router-dom';
+import { Sigil } from '../lib/icons/sigil';
+import { uxToHex } from '../../lib/util';
+import { ContactItem } from '/components/lib/contact-item';
+
+
+export class ShareSheet extends Component {
+  render() {
+    const { props } = this;
+    let selectedClass = (props.selected) ? "bg-gray4" : "";
+    let hexColor = uxToHex(props.color);
+
+    return (
+      <div>
+        <p className="pt2 pb2 pl3 pr3 f8 gray3">Share Your Profile</p>
+        <ContactItem
+          key={props.ship}
+          ship={props.ship}
+          nickname={props.nickname}
+          color={props.color}
+          path={props.path}
+          selected={props.selected}
+          share={true} />
+        <p className="pt2 pb3 pl3 pr3 f8">
+           Your personal information is hidden to others in this group
+           by default.
+        </p>
+        <p className="pl3 pr3 f8">
+          Share whenever you are ready, or edit its contents for this group.
+        </p>
+      </div>
+    );
+  }
+}
+

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

@@ -30,6 +30,9 @@ export class Root extends Component {
     const { props, state } = this;
 
     let contacts = !!state.contacts ? state.contacts : {};
+    let defaultContacts =
+      (!!state.contacts && '/~/default' in state.contacts) ?
+      state.contacts['/~/default'] : {};
     let groups = !!state.groups ? state.groups : {};
 
     return (
@@ -72,8 +75,9 @@ export class Root extends Component {
                   groups={groups}
                   activeDrawer="contacts"
                   selected={groupPath}>
-                    <ContactSidebar 
+                    <ContactSidebar
                       contacts={groupContacts}
+                      defaultContacts={defaultContacts}
                       group={group}
                       activeDrawer="contacts"
                       path={groupPath} />
@@ -98,6 +102,7 @@ export class Root extends Component {
                   selected={groupPath}>
                   <ContactSidebar
                     contacts={groupContacts}
+                    defaultContacts={defaultContacts}
                     group={group}
                     activeDrawer="rightPanel"
                     path={groupPath} />
@@ -108,17 +113,17 @@ export class Root extends Component {
                 </Skeleton>
               );
             }} />
-          <Route exact path="/~contacts/:ship/:group/:contact"
-            render={ (props) => {
+          <Route exact path="/~contacts/share/:ship/:group"
+            render={(props) => {
               let groupPath =
                 `/${props.match.params.ship}/${props.match.params.group}`;
-              let shipPath = 
-                `${groupPath}/${props.match.params.contact}`;
+              let shipPath = `${groupPath}/${window.ship}`;
+              let rootIdentity = defaultContacts[window.ship] || {};
 
               let groupContacts = contacts[groupPath] || {};
               let contact =
-                (props.match.params.contact in groupContacts) ?
-                groupContacts[props.match.params.contact] : {};
+                (window.ship in groupContacts) ?
+                groupContacts[window.ship] : {};
               let group = groups[groupPath] || new Set([]);
 
               return (
@@ -131,43 +136,10 @@ export class Root extends Component {
                   <ContactSidebar
                     activeDrawer="rightPanel"
                     contacts={groupContacts}
+                    defaultContacts={defaultContacts}
                     group={group}
                     path={groupPath}
                     selectedContact={shipPath} />
-                  <ContactCard
-                    contact={contact}
-                    path={groupPath}
-                    ship={props.match.params.contact} />
-                </Skeleton>
-              );
-            }} />
-          <Route exact path="/~contacts/share/:ship/:group"
-            render={(props) => {
-              let groupPath =
-                `/${props.match.params.ship}/${props.match.params.group}`;
-              let shipPath = `${groupPath}/${window.ship}`;
-
-              let defaultContacts = contacts["/~/default"] || {};
-              let rootIdentity = defaultContacts[window.ship] || {};
-
-              let groupContacts = contacts[groupPath] || {};
-              let contact =
-                (window.ship in groupContacts) ?
-                groupContacts[window.ship] : {};
-
-              return (
-                <Skeleton
-                  spinner={state.spinner}
-                  contacts={contacts}
-                  groups={groups}
-                  activeDrawer="rightPanel"
-                  selected={groupPath}>
-                  <ContactSidebar
-                    activeDrawer="rightPanel"
-                    contacts={groupContacts}
-                    groups={groups}
-                    path={groupPath}
-                    selectedContact={shipPath} />
                   <ContactCard
                     contact={contact}
                     path={groupPath}
@@ -177,9 +149,48 @@ export class Root extends Component {
                 </Skeleton>
               );
             }} />
+          <Route exact path="/~contacts/view/:ship/:group/:contact"
+            render={ (props) => {
+              let groupPath =
+                `/${props.match.params.ship}/${props.match.params.group}`;
+              let shipPath = 
+                `${groupPath}/${props.match.params.contact}`;
+
+              let groupContacts = contacts[groupPath] || {};
+              let contact =
+                (props.match.params.contact in groupContacts) ?
+                groupContacts[props.match.params.contact] : {};
+              let group = groups[groupPath] || new Set([]);
+
+              let rootIdentity = 
+                props.match.params.contact === window.ship ?
+                defaultContacts[window.ship] : null;
+
+              return (
+                <Skeleton
+                  spinner={state.spinner}
+                  contacts={contacts}
+                  groups={groups}
+                  activeDrawer="rightPanel"
+                  selected={groupPath}>
+                  <ContactSidebar
+                    activeDrawer="rightPanel"
+                    contacts={groupContacts}
+                    defaultContacts={defaultContacts}
+                    group={group}
+                    path={groupPath}
+                    selectedContact={shipPath} />
+                  <ContactCard
+                    contact={contact}
+                    path={groupPath}
+                    ship={props.match.params.contact}
+                    rootIdentity={rootIdentity}
+                  />
+                </Skeleton>
+              );
+            }} />
           <Route exact path="/~contacts/me"
             render={ (props) => {
-              let defaultContacts = contacts["/~/default"] || {};
               let me = defaultContacts[window.ship] || {};
 
               return (