12 add incoming messages dashboard

package.json

@@ -63,10 +63,11 @@
     "apollo-server": "^0.1.5",
     "apollo-tracer": "^0.1.4",
     "aws-sdk": "^2.6.3",
+    "axios": "^0.16.1",
     "babel-cli": "^6.10.1",
     "babel-core": "^6.10.4",
     "babel-loader": "^6.2.4",
-    "babel-polyfill": "^6.9.1",
+    "babel-polyfill": "^6.23.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",

src/containers/AdminIncomingMessageList.jsx

@@ -0,0 +1,85 @@
+import React, { Component } from 'react'
+// import { CampaignList } from '../components/campaign_list'
+import FloatingActionButton from 'material-ui/FloatingActionButton'
+import {
+  Table,
+  TableBody,
+  TableHeader,
+  TableHeaderColumn,
+  TableRow,
+  TableRowColumn,
+} from 'material-ui/Table';
+
+// import SimpleTable from './Table.jsx'
+import ContentAdd from 'material-ui/svg-icons/content/add'
+import { moment } from 'moment'
+import Subheader from 'material-ui/Subheader'
+import SpeakerNotesIcon from 'material-ui/svg-icons/action/speaker-notes'
+import axios from 'axios'
+import Empty from '../components/Empty'
+
+const styles = {
+  floatingButton: {
+    margin: 0,
+    top: 'auto',
+    right: 20,
+    bottom: 20,
+    left: 'auto',
+    position: 'fixed'
+  }
+}
+
+export default class AdminIncomingMessageList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      incomingmessages: [],
+      availablephonenumbers: []
+    };
+  }
+  componentDidMount() {
+    axios.get(`http://localhost:3000/allmessages`)
+      .then(response  => this.setState({ incomingmessages: response.data }))
+  }
+
+  getAvailablePhoneNumbers(){
+    axios.get(`http://localhost:3000/availablephonenumbers`)
+      .then(response => response.data)
+  }
+
+  render(){
+    return (
+      <div>
+        <h3> All Incoming Messages </h3>
+        <div>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHeaderColumn> Date Sent: </TableHeaderColumn>
+                  <TableHeaderColumn> From: </TableHeaderColumn>
+                  <TableHeaderColumn> To: </TableHeaderColumn>
+                  <TableHeaderColumn style={{width:'40%'}}> Message Body </TableHeaderColumn>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+            {this.state.incomingmessages.map( message => {
+              if(message.direction == 'inbound'){
+                return (
+                  <TableRow key={message.id}>
+                    <TableRowColumn> {message.date_sent}</TableRowColumn>
+                    <TableRowColumn>{message.from}</TableRowColumn>
+                    <TableRowColumn>{message.to}</TableRowColumn>
+                    <TableRowColumn style={{width:'40%'}}>{message.body}</TableRowColumn>
+                  </TableRow>
+                  )
+                }
+              }
+            )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    )
+  }
+}

src/containers/AdminNavigation.jsx

@@ -58,6 +58,9 @@ class AdminNavigation extends React.Component {
     }, {
       name: 'Optouts',
       path: 'optouts'
+    }, {
+      name: 'Incoming Messages',
+      path: 'incoming'
     }]
 
     const { roles } = this.props.data.currentUser

src/routes.jsx

@@ -5,6 +5,7 @@ import AdminCampaignList from './containers/AdminCampaignList'
 import AdminCampaignStats from './containers/AdminCampaignStats'
 import AdminPersonList from './containers/AdminPersonList'
 import AdminOptOutList from './containers/AdminOptOutList'
+import AdminIncomingMessageList from './containers/AdminIncomingMessageList'
 import AdminCampaignEdit from './containers/AdminCampaignEdit'
 import TexterDashboard from './components/TexterDashboard'
 import TopNav from './components/TopNav'
@@ -41,6 +42,7 @@ export default function makeRoutes(requireAuth = () => {}) {
           </Route>
           <Route path='people' component={AdminPersonList} />
           <Route path='optouts' component={AdminOptOutList} />
+          <Route path='incoming' component={AdminIncomingMessageList} />
           <Route path='settings' component={Settings} />
         </Route>
       </Route>

src/server/index.js

@@ -23,6 +23,10 @@ process.on('uncaughtException', (ex) => {
   process.exit(1)
 })
 const DEBUG = process.env.NODE_ENV === 'development'
+var accountSid = process.env.TWILIO_API_KEY;
+var authToken = process.env.TWILIO_AUTH_TOKEN;
+const client = require('twilio')(accountSid, authToken);
+
 setupAuth0Passport()
 seedZipCodes()
 setupUserNotificationObservers()
@@ -98,6 +102,30 @@ app.post('/twilio-message-report', wrap(async (req, res) => {
 }))
 
 
+// app.get('/incomingmessages', (req, res) => {
+//   client.sms.messages.list(function(err, data) {
+//     const listOfMessages = data.sms_messages
+//     listOfMessages.forEach(function(message){
+//       if(message.direction == "inbound"){
+//         return console.log(message.body)
+//       }
+//     })
+//   })
+// })
+
+app.get('/allmessages', (req, res) => {
+  client.sms.messages.list((err, data) => {
+    const listOfMessages = data.sms_messages
+      return res.json(listOfMessages)
+  })
+})
+
+app.get('/availablephonenumbers', (req, res) => {
+  client.incomingPhoneNumbers.list((err, data) => {
+      return res.json(data.incomingPhoneNumbers)
+  })
+})
+
 app.get('/logout-callback', (req, res) => {
   req.logOut()
   res.redirect('/login')