add being able to initiate direct message

app/components/ContextFilter.js

@@ -24,7 +24,7 @@ class ContextFilter extends React.Component {
 
   render() {
     const { open } = this.state;
-    const { joinChannel, name } = this.props;
+    const { joinConversation, name } = this.props;
     return (
       <Fragment>
         <span onClick={this.handleClickOpen} style={{"color": "#CAC4C9", "cursor": "pointer"}}>
@@ -35,7 +35,7 @@ class ContextFilter extends React.Component {
           initialValues={{ channel: '' }}
           onSubmit={(values, { setSubmitting, resetForm }) => {
               const { channel } = values;
-              joinChannel(channel);
+              joinConversation(channel);
               resetForm();
               setSubmitting(false);
               this.handleClose();

app/components/ContextPanel.js

@@ -1,14 +1,12 @@
 import React, { Fragment } from 'react';
-import Divider from '@material-ui/core/Divider';
 import ChannelList from './ChannelList';
 import ContextFilter from './ContextFilter';
 import styles from './ContextPanel.css';
 
-const borderStyle = {  };
-const ContextPanel = ({ channels, joinChannel }) => (
+const ContextPanel = ({ channels, joinConversation }) => (
   <div className={styles.sidebar} style={{"backgroundColor": "#4d394b", "height": "100%", "padding": "16px", borderRight: '1px solid ghostwhite'}} >
     <h3 style={{"marginTop": "0px", "color": "white"}}>Status</h3>
-    <ContextFilter name="Channels" joinChannel={joinChannel} />
+    <ContextFilter name="Channels" joinConversation={joinConversation} />
     <ChannelList channels={channels} />
   </div>
 );

app/components/Home.js

@@ -8,8 +8,9 @@ import ChatRoom from './ChatRoom';
 import ContextPanel from './ContextPanel';
 import { User } from '../utils/actors';
 import { ChatContext } from '../context';
+import { isContactCode } from '../utils/parsers';
 
-let typingNotificationsTimestamp = {};
+const typingNotificationsTimestamp = {};
 
 const DEFAULT_CHANNEL = "mytest";
 const status = new StatusJS();
@@ -41,21 +42,42 @@ export default class Home extends Component<Props> {
     this.setState({ currentChannel: channelName,  });
   }
 
-  joinChannel = channelName => {
-    const { channels } = this.state;
-    status.joinChat(channelName, () => {
-      this.setState({
-        currentChannel: channelName,
-        channels: { ...channels, [channelName]: { users: {} } }
+  joinConversation = contact => {
+    const { joinChannel, addDirectMessage } = this;
+    if (isContactCode(contact)) {
+      addDirectMessage(contact)
+    } else {
+      joinChannel(contact)
+    }
+  }
+
+  addDirectMessage = contactCode => {
+    status.addContact(contactCode, () => {
+      this.addConversationEntry(contactCode);
+      this.createOnUserMessageHandler(contactCode);
     })
+  }
+
+  addConversationEntry = code => {
+    const { channels } = this.state;
+    this.setState({
+      currentChannel: code,
+      channels: {
+        ...channels,
+        [code]: { users: {} }
+      }
+    })
+  }
+
+  joinChannel = channelName => {
+    status.joinChat(channelName, () => {
+      this.addConversationEntry(channelName);
       console.log(`joined channel ${channelName}`);
       status.onMessage(channelName, (err, data) => {
         const msg = JSON.parse(data.payload)[1][0];
 
         if (JSON.parse(data.payload)[1][1] === 'content/json') {
           return this.handleProtocolMessages(channelName, data);
-        } else {
-          //channels.addMessage(DEFAULT_CHANNEL, msg, data.data.sig, data.username)
         }
         const message = { username: data.username, message: msg, data };
         this.setState((prevState) => {
@@ -71,6 +93,25 @@ export default class Home extends Component<Props> {
     });
   }
 
+  createOnUserMessageHandler = contactCode => {
+    status.onUserMessage((err, data) => {
+      const payload = JSON.parse(data.payload);
+      const msg = payload[1][0];
+      //const sender = data.sig;
+
+      const message = { username: data.username, message: msg, data };
+      this.setState((prevState) => {
+        const existing = prevState.messages[contactCode];
+        return {
+          messages: {
+            ...prevState.messages,
+            [contactCode]: existing ? [ ...existing, message ] : [ message ]
+          }
+        }
+      })
+    });
+  }
+
   sendMessage = message => {
     const { currentChannel } = this.state;
     status.sendMessage(currentChannel, message);
@@ -164,7 +205,7 @@ export default class Home extends Component<Props> {
           <Grid item xs={3}>
             {!isNil(channels) && <ContextPanel
                                    channels={channels}
-                                   joinChannel={this.joinChannel} />}
+                                   joinConversation={this.joinConversation} />}
           </Grid>
           <Grid item xs={9}>
             <ChatRoom

app/utils/parsers.js

@@ -0,0 +1,2 @@
+const CONTACT_CODE_REGEXP = /^(0x)?[0-9a-f]{130}$/i;
+export const isContactCode = str => CONTACT_CODE_REGEXP.test(str);