add channellist display

app/components/ChannelBox.js

@@ -0,0 +1,16 @@
+// @flow
+import React from 'react';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Avatar from '@material-ui/core/Avatar';
+
+const ChannelBox = ({ channelName, message }) => (
+  <ListItem>
+    <Avatar>
+      {channelName}
+    </Avatar>
+    <ListItemText primary={channelName} secondary={message} />
+  </ListItem>
+);
+
+export default ChannelBox;

app/components/ChannelList.js

@@ -0,0 +1,20 @@
+// @flow
+import React, { Fragment } from 'react';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import ChannelBox from './ChannelBox';
+
+const ChannelList = ({ channels }) => (
+  <List>
+    {Object.keys(channels).map((channel) => (
+      <Fragment key={channel}>
+        <ChannelBox channelName={channel} />
+        <li>
+          <Divider />
+        </li>
+      </Fragment>
+    ))}
+  </List>
+)
+
+export default ChannelList;

app/components/ChatBox.js

@@ -3,12 +3,12 @@ import React from 'react';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Avatar from '@material-ui/core/Avatar';
-import WorkIcon from '@material-ui/icons/Work';
+import ChatBubbleOutline from '@material-ui/icons/ChatBubbleSharp';
 
 const ChatBox = ({ username, message }) => (
   <ListItem>
     <Avatar>
-      <WorkIcon />
+      <ChatBubbleOutline />
     </Avatar>
     <ListItemText primary={`${username}`} secondary={message} />
   </ListItem>

app/components/ContextPanel.js

@@ -0,0 +1,10 @@
+import React, { Fragment } from 'react';
+import ChannelList from './ChannelList';
+
+const ContextPanel = ({ channels }) => (
+  <Fragment>
+    <ChannelList channels={channels} />
+  </Fragment>
+);
+
+export default ContextPanel;

app/components/Home.js

@@ -1,9 +1,11 @@
 // @flow
 import React, { Component } from 'react';
 import StatusJS from 'status-js-api';
+import { isNil } from 'lodash';
 import Grid from '@material-ui/core/Grid';
 import routes from '../constants/routes';
 import ChatRoom from './ChatRoom';
+import ContextPanel from './ContextPanel';
 import { User } from '../utils/actors';
 
 
@@ -95,11 +97,11 @@ status.connect("ws://localhost:8546");
     }
 
     render() {
-      const { messages } = this.state;
+      const { messages, channels } = this.state;
       return (
         <Grid container spacing={0}>
           <Grid item xs={3}>
-            <div>test</div>
+            {!isNil(channels) && <ContextPanel channels={channels} />}
           </Grid>
           <Grid item xs={9}>
             <ChatRoom messages={messages} sendMessage={this.sendMessage}/>

package.json

@@ -264,6 +264,7 @@
     "electron-updater": "^3.1.6",
     "formik": "^1.3.1",
     "history": "^4.7.2",
+    "lodash": "^4.17.11",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-hot-loader": "^4.3.4",