prepping contact add

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

@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+export class Contacts extends Component {
+    render() {
+        return (
+            <div>
+                <p>Hey.</p>
+            </div>
+        )
+    }
+}
+
+export default Contacts

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

@@ -8,14 +8,20 @@ export class Groups extends Component {
 
   render() {
     const { props, state } = this;
+    console.log(props.contacts);
 
     let groupItems = Object.keys(props.contacts)
     .map((path) => {
+      let name = path.substr(1);
+      (name[1] === '/')
+        ? name = '~' + window.ship + name.substr(1)
+        : null;
       return (
         <GroupsItem
         key={path}
         link={path}
-        group={props.contacts[path]}/>
+        name={name}
+        contacts={props.contacts[path]}/>
       )
     });
 

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

@@ -9,9 +9,9 @@ export class GroupsItem extends Component {
 
         return (
             <Link
-            to={"/" + props.link}>
+            to={"~contacts/group" + props.link}>
                 <div className="w-100 v-mid f9 pl4">
-                <p>{Object.keys(props.group)}</p>
+                <p class="mono">{props.name}</p>
                 </div>
             </Link>
         )

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

@@ -8,6 +8,7 @@ import { subscription } from '/subscription';
 import { store } from '/store';
 import { Skeleton } from '/components/skeleton';
 import { NewScreen } from '/components/lib/new';
+import { Contacts } from '/components/contacts.js';
 
 
 export class Root extends Component {
@@ -43,13 +44,26 @@ export class Root extends Component {
             render={ (props) => {
               return (
                 <Skeleton
-                  spinner={this.state.spinner}
+                  spinner={state.spinner}
                   contacts={state.contacts}
                   activeDrawer="rightPanel">
                   <NewScreen />
                 </Skeleton>
               );
           }} />
+          <Route exact path="/~contacts/group/:group"
+            render={ (props) => {
+              return(
+                <Skeleton
+                  spinner={state.spinner}
+                  contacts={state.contacts}
+                  activeDrawer="contacts">
+                    <Contacts 
+                    contacts={state.contacts} />
+                  </Skeleton>
+              )
+            }}
+            />
         </div>
       </BrowserRouter>
     )