├── .dockerignore
├── .ebextensions
    ├── files.config
    └── papertrail.config
├── .gitignore
├── .sequelizerc
├── Dockerfile
├── LICENSE.md
├── README.md
├── buzzbot.js
├── client
    ├── .gitignore
    ├── css
    │   └── base.css
    ├── index.html
    └── js
    │   ├── CreateForm.js
    │   ├── Dashboard.js
    │   ├── Footer.js
    │   ├── Layout.js
    │   ├── Message.js
    │   ├── MessageForm.js
    │   ├── Nav.js
    │   ├── PollView.js
    │   ├── Response.js
    │   ├── ResponseList.js
    │   ├── SendForm.js
    │   ├── TriggerForm.js
    │   ├── formatting.js
    │   └── index.js
├── config.js
├── db
    ├── .gitignore
    ├── controller.js
    ├── fixtures
    │   ├── example-menu-commands.js
    │   ├── example-messages.js
    │   ├── example-tags.js
    │   └── example-triggers.js
    ├── index.js
    ├── init.js
    ├── models
    │   ├── menu-command.js
    │   ├── message-event.js
    │   ├── message.js
    │   ├── responses.js
    │   ├── tag.js
    │   ├── trigger.js
    │   └── users.js
    ├── nuke.js
    ├── scripts
    │   ├── init-seq-ids.sql
    │   └── init-triggers.sql
    └── sequelize_config.js
├── docs
    ├── architecture.md
    ├── assets
    │   ├── buzzbot-cover.png
    │   ├── buzzbot-messages-back.jpg
    │   ├── create-message-view.png
    │   ├── dashboard-view.png
    │   ├── open-lab-logo.png
    │   ├── scan-fb-page-code.jpg
    │   ├── search-for-fb-page.png
    │   ├── send-message-to-buzzbot.jpg
    │   └── send-message-view.png
    ├── database-structure.md
    ├── installation.md
    └── overview.md
├── etc
    └── init
    │   └── buzzbot.conf
├── package.json
├── src
    ├── commands.js
    └── messenger-interface.js
├── test
    ├── .gitignore
    ├── README.md
    ├── load-test.json
    └── test-server.js
└── webpack.config.js


/.dockerignore:
--------------------------------------------------------------------------------
1 | # Elastic Beanstalk Files
2 | .elasticbeanstalk/*
3 | .git
4 | .gitignore


--------------------------------------------------------------------------------
/.ebextensions/files.config:
--------------------------------------------------------------------------------
1 | files:
2 |     "/etc/nginx/conf.d/websocketupgrade.conf" :
3 |         mode: "000755"
4 |         owner: root
5 |         group: root
6 |         content: |
7 |              proxy_set_header        Upgrade         $http_upgrade;
8 |              proxy_set_header        Connection      "upgrade";


--------------------------------------------------------------------------------
/.ebextensions/papertrail.config:
--------------------------------------------------------------------------------
  1 | # See http://help.papertrailapp.com/kb/hosting-services/aws-elastic-beanstalk/
  2 | # Usage:
  3 | # - replace <VERSION> with the version of remote_syslog2 you want to use. Example: .../download/v0.14/remote_syslog_linux_amd64.tar.gz
  4 | # - replace <YOUR-TRACKED-FILES> with the files you want to monitor for new log lines. Example:  - /var/log/httpd/access_log
  5 | # - replace <YOUR-LOG-DESTINATION> and <YOUR-PORT-NUMBER> with the values shown under log destinations: https://papertrailapp.com/account/destinations
  6 | 
  7 | sources:
  8 |   /home/ec2-user: https://github.com/papertrail/remote_syslog2/releases/download/v0.17/remote_syslog_linux_amd64.tar.gz
  9 | 
 10 | files:
 11 |   "/etc/log_files.yml":
 12 |     mode: "00644"
 13 |     owner: root
 14 |     group: root
 15 |     encoding: plain
 16 |     content: |
 17 |       files:
 18 |         - /var/log/eb-docker/containers/eb-current-app/*.log
 19 |         - /var/log/nginx/*.log
 20 |       hostname: ##WILL_BE_REPLACED##
 21 |       destination:
 22 |         host: logs4.papertrailapp.com
 23 |         port: 17050
 24 |         protocol: tls
 25 |         
 26 |   "/tmp/set-logger-hostname.sh":
 27 |     mode: "00555"
 28 |     owner: root
 29 |     group: root
 30 |     encoding: plain
 31 |     content: |
 32 |       #!/bin/bash
 33 |       logger_config="/etc/log_files.yml"
 34 |       appname=`{ "Ref" : "AWSEBEnvironmentName" }`
 35 |       instid=`wget -q -O - http://169.254.169.254/latest/meta-data/instance-id`
 36 |       myhostname=${appname}_${instid}
 37 |   
 38 |       if [ -f $logger_config ]; then
 39 |         # Sub the hostname
 40 |         sed "s/hostname:.*/hostname: $myhostname/" -i $logger_config       
 41 |       fi
 42 |  
 43 |   "/etc/init.d/remote_syslog":
 44 |     mode: "00555"
 45 |     owner: root
 46 |     group: root
 47 |     encoding: plain
 48 |     content: |
 49 |       #!/bin/bash
 50 |       #
 51 |       # remote_syslog This shell script takes care of starting and stopping
 52 |       #               remote_syslog daemon
 53 |       #
 54 |       # chkconfig: - 58 74
 55 |       # description: papertrail/remote_syslog \
 56 |       #              https://github.com/papertrail/remote_syslog2/blob/master/examples/remote_syslog.init.d
 57 |  
 58 |       ### BEGIN INIT INFO
 59 |       # Provides: remote_syslog
 60 |       # Required-Start: $network $local_fs $remote_fs
 61 |       # Required-Stop: $network $local_fs $remote_fs
 62 |       # Should-Start: $syslog $named ntpdate
 63 |       # Should-Stop: $syslog $named
 64 |       # Short-Description: start and stop remote_errolog
 65 |       # Description: papertrail/remote_syslog2
 66 |       #              https://github.com/papertrail/remote_syslog2/blob/master/examples/remote_syslog.init.d
 67 |       ### END INIT INFO
 68 |  
 69 |       # Source function library.
 70 |       . /etc/init.d/functions
 71 |  
 72 |       # Source networking configuration.
 73 |       . /etc/sysconfig/network
 74 |        
 75 |       prog="/usr/local/bin/remote_syslog"   
 76 |       config="/etc/log_files.yml"
 77 |       pid_dir="/var/run"
 78 |  
 79 |       EXTRAOPTIONS="--poll=true"
 80 |  
 81 |       pid_file="$pid_dir/remote_syslog.pid"
 82 |  
 83 |       PATH=/sbin:/bin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin
 84 |  
 85 |       RETVAL=0
 86 |  
 87 |       is_running(){
 88 |           # Do we have PID-file?
 89 |           if [ -f "$pid_file" ]; then
 90 |               # Check if proc is running
 91 |               pid=`cat "$pid_file" 2> /dev/null`
 92 |               if [[ $pid != "" ]]; then
 93 |                   exepath=`readlink /proc/"$pid"/exe 2> /dev/null`
 94 |                   exe=`basename "$exepath"`
 95 |                   if [[ $exe == "remote_syslog" ]]; then
 96 |                       # Process is running
 97 |                       return 0
 98 |                   fi
 99 |               fi
100 |           fi
101 |           return 1
102 |       }
103 |  
104 |       start(){
105 |           echo -n $"Starting $prog: "
106 |           unset HOME MAIL USER USERNAME
107 |           $prog -c $config --pid-file=$pid_file $EXTRAOPTIONS
108 |           RETVAL=$?
109 |           echo
110 |           return $RETVAL
111 |       }
112 |  
113 |       stop(){
114 |           echo -n $"Stopping $prog: "
115 |           if (is_running); then
116 |             kill `cat $pid_file`
117 |             RETVAL=$?
118 |             echo
119 |             return $RETVAL
120 |           else
121 |             echo "$pid_file not found"
122 |           fi
123 |       }
124 |  
125 |       status(){
126 |           echo -n $"Checking for $pid_file: "
127 |  
128 |           if (is_running); then
129 |             echo "found"
130 |           else
131 |             echo "not found"
132 |           fi
133 |       }
134 |  
135 |       reload(){
136 |           restart
137 |       }
138 |  
139 |       restart(){
140 |           stop
141 |           start
142 |       }
143 |  
144 |       condrestart(){
145 |           is_running && restart
146 |           return 0
147 |       }
148 |  
149 |       # See how we were called.
150 |       case "$1" in
151 |           start)
152 |         start
153 |         ;;
154 |           stop)
155 |         stop
156 |         ;;
157 |           status)
158 |         status
159 |         ;;
160 |           restart)
161 |         restart
162 |         ;;
163 |           reload)
164 |         reload
165 |         ;;
166 |           condrestart)
167 |         condrestart
168 |         ;;
169 |           *)
170 |         echo $"Usage: $0 {start|stop|status|restart|condrestart|reload}"
171 |         RETVAL=1
172 |       esac
173 |  
174 |       exit $RETVAL
175 |  
176 | container_commands:
177 |   00_stop_service:
178 |     command: "/sbin/service remote_syslog stop"
179 |     ignoreErrors: true
180 | 
181 |   01_set_logger_hostname:
182 |     command: ". /tmp/set-logger-hostname.sh"
183 |     
184 |   02_install_remote_syslog_binary:
185 |     command: "cp /home/ec2-user/remote_syslog/remote_syslog /usr/local/bin"
186 |   
187 |   03_enable_service:
188 |     command: "/sbin/chkconfig remote_syslog on"
189 |  
190 |   04_start_service:
191 |     command: "/sbin/service remote_syslog restart"
192 |     ignoreErrors: true


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 
3 | node_modules
4 | npm-debug.log*
5 | 
6 | 


--------------------------------------------------------------------------------
/.sequelizerc:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   config: './db/sequelize_config.js',
3 |   migrationsPath: './db/migrations',
4 |   modelsPath: './db/models'
5 | };
6 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:argon
 2 | 
 3 | 
 4 | RUN mkdir -p /usr/src/app
 5 | WORKDIR /usr/src/app
 6 | 
 7 | COPY package.json /usr/src/app/
 8 | RUN npm install
 9 | 
10 | COPY . /usr/src/app
11 | 
12 | EXPOSE 8080
13 | 
14 | CMD ["npm", "run", "init"]
15 | CMD [ "npm", "start" ]
16 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | ### The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Buzzfeed Open Lab and [contributors](https://github.com/buzzfeed-openlab/buzzbot/graphs/contributors)
 4 | 
 5 | ```
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | 
14 | 
15 | The above copyright notice and this permission notice shall be included in
16 | all copies or substantial portions of the Software.
17 | 
18 | 
19 | 
20 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
21 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
22 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
23 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
24 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
25 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
26 | THE SOFTWARE.
27 | ```
28 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 | <img src="https://github.com/buzzfeed-openlab/buzzbot/blob/master/docs/assets/buzzbot-cover.png?raw=true" alt="BuzzBot" width="512" height="195"></img>
 3 | </div>
 4 | 
 5 | # BuzzBot
 6 | 
 7 | BuzzBot is an experiment, designed to help journalists connect with people on the ground at events. It acts as a Facebook Messenger bot plus a dashboard that journalists can use to send messages to groups of users and view aggregated responses.
 8 | 
 9 | BuzzFeed News and Open Lab deployed BuzzBot at the 2016 conventions. 
10 | 
11 | ### Jump to:
12 | 
13 | - [Overview](./docs/overview.md)
14 | - [Architecture](./docs/architecture.md)
15 | - [Installation](./docs/installation.md)
16 | 
17 | =======
18 | 
19 | #### Written by [Westley Argentum Hennigh-Palermo](mailto:WestleyArgentum@gmail.com) at the [Open Lab](https://www.buzzfeed.com/openlab)
20 | 
21 | The Open Lab for Journalism, Technology, and the Arts is a workshop in BuzzFeed’s San Francisco bureau. We offer fellowships to artists, programmers, and storytellers to spend a year making new work in a collaborative environment.
22 | 
23 | <div align="left">
24 | <img src="https://github.com/buzzfeed-openlab/buzzbot/blob/master/docs/assets/open-lab-logo.png?raw=true" alt="OpenLab" width="128" height="128"></img>
25 | </div>
26 | 


--------------------------------------------------------------------------------
/buzzbot.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import path from 'path';
  3 | import express from 'express';
  4 | import bodyParser from 'body-parser';
  5 | import request from 'request';
  6 | import webpack from 'webpack';
  7 | import webpackConfig from './webpack.config.js';
  8 | 
  9 | import db, { Controller, pg, User, Tag } from './db';
 10 | import Commands from './src/commands';
 11 | import {
 12 |     sendMessage,
 13 |     sendMessagesSequentially,
 14 |     fetchUserInfo,
 15 |     markSeen,
 16 |     updatePersistentMenu,
 17 |     turnOnGetStartedButton,
 18 | } from './src/messenger-interface';
 19 | 
 20 | import config from './config.js';
 21 | 
 22 | // clear user table
 23 | // User.destroy({ where: {} }).then(() => {
 24 | //     console.log('CLEARED USER TABLE');
 25 | // });
 26 | 
 27 | updatePersistentMenu(config.pageToken);
 28 | turnOnGetStartedButton(config.pageToken);
 29 | 
 30 | var app = express();
 31 | 
 32 | // Middleware -------
 33 | 
 34 | // enable webpack hot reloading in development
 35 | if (config.env === 'development') {
 36 |     const compiler = webpack(webpackConfig);
 37 |     app.use(require('webpack-dev-middleware')(compiler, {
 38 |       noInfo: true,
 39 |       publicPath: webpackConfig.output.publicPath
 40 |     }));
 41 | 
 42 |     app.use(require('webpack-hot-middleware')(compiler));
 43 | }
 44 | 
 45 | // serve up the admin page
 46 | app.use('/admin', express.static(path.join(__dirname, 'client')));
 47 | 
 48 | // body parsing
 49 | app.use(bodyParser.json());
 50 | app.use(bodyParser.urlencoded({ extended: false }));
 51 | 
 52 | // error handling
 53 | app.use(function (error, req, res, next) {
 54 |     if (error) {
 55 |         console.log('ERROR: ', error);
 56 |     } else {
 57 |         next();
 58 |     }
 59 | });
 60 | 
 61 | // -------
 62 | 
 63 | // Handler functions -------
 64 | 
 65 | function setContainsAll(set, items) {
 66 |     for (var i = 0; i < items.length; ++i) {
 67 |         if (!set.has(items[i])) {
 68 |             return false;
 69 |         }
 70 |     }
 71 | 
 72 |     return true;
 73 | }
 74 | 
 75 | function parseTag(tag) {
 76 |     var tagData = tag.split(':');
 77 |     return { mid: tagData[0], tag: tagData[1] };
 78 | }
 79 | 
 80 | function normalizeText(text) {
 81 |     return String(text).toUpperCase();
 82 | }
 83 | 
 84 | function handleIncomingMessage(token, event) {
 85 |     const userId = event.sender.id;
 86 | 
 87 |     Controller.getOrCreateUser(userId).spread((user, createdUser) => {
 88 |         const props = {
 89 |             text: event.message.text,
 90 |             attachments: event.message.attachments
 91 |         };
 92 | 
 93 |         !props.text && !props.attachments && console.log('WARNING, unknown event:', event, 'from user:', userId);
 94 | 
 95 |         if (createdUser) {
 96 |             startInitialConversation(token, userId);
 97 | 
 98 |             return Controller.createResponse(userId, props).then(() => { console.log('PERSISTED GREETING'); });
 99 |         }
100 | 
101 |         Controller.getMessageEventsForUser(userId).then((messageEvents) => {
102 |             // look for messages expecting unstructured replies
103 |             var message;
104 |             for (var i = 0; i < messageEvents.length; ++i) {
105 |                 if (messageEvents[i].Message.unstructuredReply) {
106 |                     message = messageEvents[i].Message;
107 |                     props.messageId = message.id;
108 |                     break;
109 |                 }
110 |             }
111 | 
112 |             const normalizedText = normalizeText(props.text);
113 | 
114 |             // check for special types of responses (commands, polls)
115 |             if (Commands[normalizedText]) {
116 |                 Commands[normalizedText](token, event, user);
117 | 
118 |             } else if (message && message.poll && props.text) {
119 |                 Controller.getUserResponsesToMessage(userId, message.id).then((responses) => {
120 |                     // don't let users vote more than once
121 |                     if (responses.length) {
122 |                         return;
123 |                     }
124 | 
125 |                     var pollData = JSON.parse(message.poll);
126 | 
127 |                     pollData[props.text] = (pollData[props.text] || 0) + 1;
128 |                     message.update({ poll: JSON.stringify(pollData) });
129 |                 });
130 |             }
131 | 
132 |             // persist the response
133 |             Controller.createResponse(userId, props).then(() => {
134 |                 console.log('PERSISTED RESPONSE');
135 |             });
136 | 
137 |             markSeen(token, userId);
138 | 
139 |             // trigger additional messages
140 |             if (message) {
141 |                 Controller.getMessagesForTriggerFromMessage(message).then((triggeredMessages) => {
142 |                     sendMessagesSequentially(token, userId, triggeredMessages);
143 |                 });
144 |             }
145 |         });
146 |     });
147 | }
148 | 
149 | function handlePostBack(token, event) {
150 |     var userId = event.sender.id,
151 |         payload = event.postback.payload;
152 | 
153 |     Controller.getOrCreateUser(userId).spread((user, createdUser) => {
154 |         var tagData = parseTag(payload);
155 | 
156 |         // check for new users, start conversation and ignore initial postback
157 |         if (createdUser) {
158 |             startInitialConversation(token, userId);
159 | 
160 |             return Controller.createResponse(userId, {
161 |                 text: tagData.tag
162 |             });
163 |         }
164 | 
165 |         // check for paused, until the user resumes postbacks should not be recorded
166 |         if (user.state === 'paused') {
167 |             return;
168 |         }
169 | 
170 |         // check for command postback
171 |         if (tagData.mid === 'command') {
172 |             const normalizedCommand = normalizeText(tagData.tag);
173 | 
174 |             if (Commands[normalizedCommand]) {
175 |                 Commands[normalizedCommand](token, event, user);
176 | 
177 |                 Controller.createResponse(userId, {
178 |                     text: tagData.tag
179 |                 });
180 |             }
181 | 
182 |             return;
183 |         }
184 | 
185 |         // otherwise, handle message postback
186 |         Controller.getTag({ messageId: tagData.mid, tag: tagData.tag }).then((tag) => {
187 |             user.addTag(tag);
188 | 
189 |             Controller.createResponse(userId, {
190 |                 text: tagData.tag,
191 |                 messageId: tagData.mid,
192 |                 tagId: tag.id
193 |             });
194 | 
195 |             markSeen(token, userId);
196 | 
197 |             // trigger additional messages
198 |             Controller.getMessagesForTriggerFromTag(tag).then((triggeredMessages) => {
199 |                 sendMessagesSequentially(token, userId, triggeredMessages);
200 |             });
201 |         });
202 |     });
203 | }
204 | 
205 | function startInitialConversation(token, userId) {
206 |     console.log('starting initial conversation with user:', userId);
207 | 
208 |     fetchUserInfo(token, userId);
209 | 
210 |     Controller.getInitialMessages().then((messages) => {
211 |         sendMessagesSequentially(token, userId, messages);
212 |     });
213 | }
214 | 
215 | // -------
216 | 
217 | // Routes -------
218 | 
219 | app.get('/health', function (req, res) {
220 |     db.Message.findOne({ where: {} }).then((user) => {
221 |         res.status(200).json({
222 |             api: 200,
223 |             db: 200
224 |         });
225 |     }).catch((err) => {
226 |         res.status(503).json({
227 |             api: 200,
228 |             db:503
229 |         });
230 |     });
231 | });
232 | 
233 | app.get('/hook/', function (req, res) {
234 |     if (req.query['hub.verify_token'] === config.verifyToken) {
235 |         console.log('success, verified hook!');
236 |         return res.send(req.query['hub.challenge']);
237 |     }
238 | 
239 |     console.log('ERROR: failed to verify hook...');
240 |     return res.send('Error, wrong validation token');
241 | });
242 | 
243 | app.post('/hook/', function (req, res) {
244 |     var status = 200;
245 | 
246 |     const entries = req.body.entry;
247 |     if (!entries) {
248 |         return res.sendStatus(400);
249 |     }
250 | 
251 |     for (var e = 0; e < entries.length; ++e) {
252 |         var messaging_events = entries[e].messaging;
253 | 
254 |         for (var i = 0; i < messaging_events.length; i++) {
255 |             var event = messaging_events[i];
256 | 
257 |             if (event.message) {
258 |                 handleIncomingMessage(config.pageToken, event);
259 |             } else if (event.postback) {
260 |                 handlePostBack(config.pageToken, event);
261 |             } else {
262 |                 console.log('unknown event type: ', event);
263 |             }
264 |         }
265 |     }
266 | 
267 |     res.sendStatus(status);
268 | });
269 | 
270 | app.post('/messages/', function (req, res) {
271 |     if (!req.body.message) {
272 |         return res.sendStatus(400);
273 |     }
274 | 
275 |     const messageData = req.body.message;
276 |     const metadata = req.body.metadata;
277 |     var unstructuredReply = req.body.unstructuredReply || false;
278 |     var poll = req.body.poll ? '{}' : undefined;
279 |     var surpriseMe = req.body.surpriseMe || false;
280 | 
281 |     if ((poll && !unstructuredReply) || (surpriseMe && !unstructuredReply)) {
282 |         console.log('WARNING: received request to create poll or "surprise me" message with unstructuredReply == false, setting it to true...');
283 |         unstructuredReply = true;
284 |     }
285 | 
286 |     Controller.createMessageAndTags(messageData, unstructuredReply, poll, surpriseMe, metadata).then((message) => {
287 |         console.log('CREATED MESSAGE:', message.get({plain: true}));
288 |         res.status(200).json(message.get({ plain: true }));
289 |     }).catch((err) => {
290 |         console.log('ERROR creating message: ', err);
291 |         res.status(500).json(err);
292 |     });
293 | });
294 | 
295 | app.post('/send/', function (req, res) {
296 |     if (!req.body.messageId) {
297 |         return res.status(400).json({ message: '`messageId` must be specified in request' });
298 |     }
299 | 
300 |     const requiredTags = req.body.tagIds.map((t) => +t);
301 | 
302 |     Controller.getAllActiveUserIds().then((users) => {
303 |         Controller.getMessage(req.body.messageId).then((message) => {
304 |             for (var i = 0; i < users.length; ++i) {
305 |                 const user = users[i];
306 |                 user.getTags().then((tags) => {
307 |                     if (requiredTags && !setContainsAll(new Set(tags.map((t) => t.id)), requiredTags)) {
308 |                         return;
309 |                     }
310 | 
311 |                     sendMessage(config.pageToken, user.id, message);
312 |                 });
313 |             }
314 | 
315 |             res.sendStatus(200);
316 |         });
317 |     }).catch((err) => {
318 |         console.log('ERROR sending message: ', err);
319 |         res.status(400).json(err);
320 |     });
321 | });
322 | 
323 | app.post('/triggers/', function (req, res) {
324 | 
325 |     const triggerTagId = req.body.triggerTagId,
326 |         triggerTag = req.body.triggerTag,
327 |         triggerMessageId = req.body.triggerMessageId,
328 |         messages = req.body.messages;
329 | 
330 |     if (!(triggerTagId || triggerMessageId || (triggerTag && triggerMessageId)) || !messages) {
331 |         return res.status(400).json({ message: '`triggerTagId` or `triggerMessageId` or `triggerTag` + `triggerMessageId` must be specified, along with `messages`' });
332 |     }
333 | 
334 |     if (triggerTagId || triggerTag) {
335 |         const tagData = {
336 |             id: req.body.triggerTagId,
337 |             messageId: req.body.triggerMessageId,
338 |             tag: req.body.triggerTag
339 |         }
340 | 
341 |         Controller.getTag(tagData).then((tag) => {
342 |             Controller.getOrCreateTriggerWithTag(tag.id, messages).then((trigger) => {
343 |                 console.log('CREATED TRIGGER: ', trigger.get({plain: true}));
344 |                 res.sendStatus(200);
345 |             });
346 |         }).catch((err) => {
347 |             console.log('ERROR creating trigger with tag: ', err);
348 |             res.status(500).json(err);
349 |         });
350 |     } else if (triggerMessageId) {
351 |         Controller.getOrCreateTriggerWithMessage(triggerMessageId, messages).then((trigger) => {
352 |             console.log('CREATED TRIGGER: ', trigger.get({plain: true}));
353 |             res.sendStatus(200);
354 |         }).catch((err) => {
355 |             console.log('ERROR creating trigger with message', err);
356 |             res.status(500).json(err);
357 |         });
358 |     }
359 | });
360 | 
361 | // -------
362 | 
363 | // Websockets -------
364 | 
365 | const server = require('http').Server(app);
366 | const io = require('socket.io')(server);
367 | 
368 | io.on('connection', function (socket) {
369 |     socket.on('get-responses', (options) => {
370 |         Controller.getResponses({
371 |             where: {},
372 |             limit: options.limit || 300,
373 |             order: '"updatedAt" DESC'
374 |         }).then((responses) => {
375 |             socket.emit('responses', responses.map((r) => r.get({ plain: true })));
376 |         });
377 |     });
378 | 
379 |     socket.on('get-messages', (options = {}) => {
380 |         Controller.getMessages(options.messageIds).then((messages) => {
381 |             socket.emit('messages', messages.map((m) => m.get({ plain: true })));
382 |         });
383 |     });
384 | 
385 |     socket.on('get-tags', (options) => {
386 |         Controller.getTags(options).then((tags) => {
387 |             socket.emit('tags', tags.map((t) => t.get({ plain: true })));
388 |         });
389 |     });
390 | 
391 |     socket.on('get-users', (options = {}) => {
392 |         Controller.getUsers(options.userIds).then((users) => {
393 |             socket.emit('users', users.map((u) => u.get({ plain: true })));
394 |         });
395 |     });
396 | 
397 |     socket.on('error', (err) => {
398 |         console.log('SOCKET ERROR: ', err);
399 |     });
400 | });
401 | 
402 | pg.connect(function(err) {
403 |     if(err) {
404 |         console.log('ERROR connecting to database with pg: ', err);
405 |     }
406 |     pg.on('notification', function(msg) {
407 |         const payloadData = msg.payload.split(',');
408 | 
409 |         if (msg.channel == 'responses') {
410 |             Controller.getResponse(payloadData[2]).then((response) => {
411 |                 io.emit('new-response', response.get({ plain: true }));
412 |             });
413 |         } else if (msg.channel == 'users') {
414 |             Controller.getUser(payloadData[2]).then((user) => {
415 |                 io.emit('users', [ user.get({ plain: true }) ]);
416 |             });
417 |         } else {
418 |             return console.log('UNKNOWN DB EVENT: ', msg);
419 |         }
420 |     });
421 |     var responsesQuery = pg.query("LISTEN responses");
422 |     var usersQuery = pg.query("LISTEN users");
423 | });
424 | 
425 | // -------
426 | 
427 | console.log('STARTING SERVER 🎉');
428 | console.log('env: ', config.env);
429 | console.log('port: ', config.port);
430 | console.log('-------');
431 | 
432 | 
433 | server.listen(config.port);
434 | 


--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
1 | index.min.js


--------------------------------------------------------------------------------
/client/css/base.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #fff;
 3 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 4 |   font-size: 15px;
 5 |   line-height: 1.7;
 6 |   margin: 0;
 7 |   padding: 30px;
 8 | }
 9 | 
10 | a {
11 |   color: #4183c4;
12 |   text-decoration: none;
13 | }
14 | 
15 | a:hover {
16 |   text-decoration: underline;
17 | }
18 | 
19 | code {
20 |   background-color: #f8f8f8;
21 |   border: 1px solid #ddd;
22 |   border-radius: 3px;
23 |   font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
24 |   font-size: 12px;
25 |   margin: 0 2px;
26 |   padding: 0 5px;
27 | }
28 | 
29 | h1, h2, h3, h4 {
30 |   font-weight: bold;
31 |   margin: 0 0 15px;
32 |   padding: 0;
33 | }
34 | 
35 | h1 {
36 |   border-bottom: 1px solid #ddd;
37 |   font-size: 2.5em;
38 |   font-weight: bold;
39 |   margin: 0 0 15px;
40 |   padding: 0;
41 | }
42 | 
43 | h2 {
44 |   border-bottom: 1px solid #eee;
45 |   font-size: 2em;
46 | }
47 | 
48 | h3 {
49 |   font-size: 1.5em;
50 | }
51 | 
52 | h4 {
53 |   font-size: 1.2em;
54 | }
55 | 
56 | p, ul {
57 |   margin: 15px 0;
58 | }
59 | 
60 | ul {
61 |   padding-left: 30px;
62 | }
63 | 


--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html lang="en">
 4 | 
 5 | <head>
 6 |   <meta charset="utf-8">
 7 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <meta name="description" content="">
10 |   <meta name="author" content="">
11 |   <title>BuzzBot</title>
12 |   <!-- Bootstrap Core CSS -->
13 |   <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/journal/bootstrap.min.css" rel="stylesheet">
14 | 
15 |   <!-- Custom Fonts -->
16 |   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
17 | </head>
18 | 
19 | <body>
20 |   <div id="app"></div>
21 |   <script src="/admin/index.min.js"></script>
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/client/js/CreateForm.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactBootstrap, { Row, Col } from 'react-bootstrap';
 3 | 
 4 | import MessageForm from './MessageForm';
 5 | import TriggerForm from './TriggerForm';
 6 | 
 7 | export default class CreateForm extends React.Component {
 8 |     constructor() {
 9 |         super();
10 |     }
11 | 
12 |     render() {
13 |         return (
14 |             <div>
15 |                 <MessageForm socket={this.props.route.socket} />
16 |                 <TriggerForm socket={this.props.route.socket} />
17 |             </div>
18 |         );
19 |     }
20 | }
21 | 


--------------------------------------------------------------------------------
/client/js/Dashboard.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import ReactBootstrap, { Row, Col } from 'react-bootstrap';
  3 | import update from 'react-addons-update';
  4 | 
  5 | import ResponseList from './ResponseList';
  6 | import PollView from './PollView';
  7 | 
  8 | export default class Dashboard extends React.Component {
  9 |     constructor() {
 10 |         super();
 11 | 
 12 |         this.state = {
 13 |             responses: {},
 14 |             responsesQueue: [],
 15 |             messages: {},
 16 |             users: {},
 17 |             usersQueue: [],
 18 |             renderCounter: 1
 19 |         }
 20 | 
 21 |         this.handleResponses = this.handleResponses.bind(this);
 22 |         this.handleMessages = this.handleMessages.bind(this);
 23 |         this.queueResponse = this.queueResponse.bind(this);
 24 |         this.queueUsers = this.queueUsers.bind(this);
 25 |     }
 26 | 
 27 |     componentWillMount() {
 28 |         const socket = this.props.route.socket;
 29 | 
 30 |         socket.on('responses', this.handleResponses);
 31 |         socket.on('new-response', this.queueResponse);
 32 |         socket.on('messages', this.handleMessages);
 33 |         socket.on('users', this.queueUsers);
 34 | 
 35 |         socket.emit('get-responses', { limit: 1000 });
 36 | 
 37 |         this.intervals = [
 38 |             setInterval(this.processResponseAndUserQueues.bind(this), 10000)
 39 |         ];
 40 |     }
 41 | 
 42 |     componentWillUnmount() {
 43 |         const socket = this.props.route.socket;
 44 | 
 45 |         socket.removeListener('responses', this.handleResponses);
 46 |         socket.removeListener('new-response', this.queueResponse);
 47 |         socket.removeListener('messages', this.handleMessages);
 48 |         socket.removeListener('users', this.queueUsers);
 49 | 
 50 |         this.intervals.forEach(clearInterval);
 51 |     }
 52 | 
 53 |     shouldComponentUpdate(nextProps, nextState) {
 54 |         if (this.state.renderCounter == nextState.renderCounter) {
 55 |             return false;
 56 |         }
 57 | 
 58 |         return true;
 59 |     }
 60 | 
 61 |     render() {
 62 |         console.log('RENDER DASHBOARD');
 63 | 
 64 |         const responseLists = Object.keys(this.state.responses).map((listKey) => {
 65 |             const message = this.state.messages[listKey];
 66 | 
 67 |             if (message && message.poll) {
 68 |                 return (
 69 |                     <Col sm={12} md={6} key={listKey}>
 70 |                         <PollView message={message} />
 71 |                     </Col>
 72 |                 );
 73 |             }
 74 | 
 75 |             return (
 76 |                 <Col sm={12} md={6} key={listKey}>
 77 |                     <ResponseList
 78 |                         responses={this.state.responses[listKey]}
 79 |                         message={message}
 80 |                         users={this.state.users}
 81 |                     />
 82 |                 </Col>
 83 |             );
 84 |         });
 85 | 
 86 |         // bump the unassociated column up to the top
 87 |         for (var i = 0; i < responseLists.length; ++i) {
 88 |             if (responseLists[i].key == 'none') {
 89 |                 const noneList = responseLists.splice(i, 1);
 90 |                 responseLists.splice(0, 0, ...noneList);
 91 |                 break;
 92 |             }
 93 |         }
 94 | 
 95 |         return (
 96 |            <div>
 97 |                 <Row>
 98 |                     {responseLists}
 99 |                 </Row>
100 |             </div>
101 |         );
102 |     }
103 | 
104 |     handleResponses(responses) {
105 |         const responseState = {},
106 |             mesageIds = [],
107 |             userIds = [];
108 | 
109 |         for (var i = 0; i < responses.length; ++i) {
110 |             const response = responses[i];
111 |             const messageId = response.messageId || 'none';
112 | 
113 |             if (!responseState[messageId]) {
114 |                 responseState[messageId] = [];
115 |             }
116 | 
117 |             if (messageId != 'none') {
118 |                 mesageIds.push(messageId);
119 |             }
120 | 
121 |             userIds.push(response.userId);
122 | 
123 |             responseState[messageId].push(response);
124 |         }
125 | 
126 |         // fetch the message data relevant to these responses
127 |         if (mesageIds.length) {
128 |             this.props.route.socket.emit('get-messages', {
129 |                 messageIds: [ ...new Set(mesageIds) ]
130 |             });
131 |         }
132 | 
133 |         // fetch the user data relevant to these responses
134 |         if (userIds.length) {
135 |             this.props.route.socket.emit('get-users', {
136 |                 userIds: [ ...new Set(userIds) ]
137 |             });
138 |         }
139 | 
140 |         this.setState(update(this.state, {
141 |             responses: {
142 |                 $set: responseState
143 |             },
144 |             renderCounter: {
145 |                 $set: this.state.renderCounter + 1
146 |             }
147 |         }));
148 |     }
149 | 
150 |     handleMessages(messages) {
151 |         const messageState = {};
152 | 
153 |         for (var i = 0; i < messages.length; ++i) {
154 |             const message = messages[i];
155 | 
156 |             messageState[message.id] = {
157 |                 $set: message
158 |             }
159 |         }
160 | 
161 |         this.setState(update(this.state, {
162 |             messages: messageState,
163 |             renderCounter: {
164 |                 $set: this.state.renderCounter + 1
165 |             }
166 |         }));
167 |     }
168 | 
169 |     queueUsers(users) {
170 |         const newState = update(this.state, {
171 |             usersQueue: {
172 |                 $push: users
173 |             }
174 |         });
175 | 
176 |         this.setState(newState);
177 |     }
178 | 
179 |     queueResponse(response) {
180 |         // if we don't have the data for this message, request it
181 |         if (response.messageId && !this.state.messages[response.messageId]) {
182 |             this.props.route.socket.emit('get-messages', {
183 |                 messageIds: [ response.messageId ]
184 |             });
185 |         }
186 | 
187 |         // queue the response
188 |         const newState = update(this.state, {
189 |             responsesQueue: {
190 |                 $push: [response]
191 |             }
192 |         });
193 | 
194 |         this.setState(newState);
195 |     }
196 | 
197 |     processResponseAndUserQueues() {
198 |         const responseState = {},
199 |             userState = {},
200 |             messagesToUpdate = [];
201 | 
202 |         console.log(this.state.responsesQueue.length, 'NEW RESPONSES');
203 |         console.log(this.state.usersQueue.length, 'NEW USERS');
204 | 
205 |         for (var i = 0; i < this.state.responsesQueue.length; ++i) {
206 |             const response = this.state.responsesQueue[i];
207 |             const messageId = response.messageId || 'none';
208 | 
209 |             var updateKey = this.state.responses[messageId] ? '$unshift' : '$set';
210 |             if (!responseState[messageId]) {
211 |                 responseState[messageId] = {
212 |                     [updateKey]: []
213 |                 };
214 |             }
215 | 
216 |             responseState[messageId][updateKey].unshift(response);
217 | 
218 |             // If this response was to a poll message, our message data is
219 |             // out of date. Re request it! Done while processing to avoid
220 |             // constant re-rendering.
221 |             if (this.state.messages[messageId] &&
222 |                 this.state.messages[messageId].poll) {
223 | 
224 |                 messagesToUpdate.push(messageId);
225 |             }
226 |         }
227 | 
228 |         for (var i = 0; i < this.state.usersQueue.length; ++i) {
229 |             const user = this.state.usersQueue[i];
230 | 
231 |             userState[user.id] = {
232 |                 $set: user
233 |             }
234 |         }
235 | 
236 |         // update messages
237 |         if (messagesToUpdate.length) {
238 |             this.props.route.socket.emit('get-messages', {
239 |                 messageIds: [ ...new Set(messagesToUpdate) ]
240 |             });
241 |         }
242 | 
243 |         this.setState(update(this.state, {
244 |             responses: responseState,
245 |             users: userState,
246 |             responsesQueue: { $set: [] },
247 |             usersQueue: { $set: [] },
248 |             renderCounter: {
249 |                 $set: this.state.renderCounter + 1
250 |             }
251 |         }));
252 |     }
253 | }
254 | 


--------------------------------------------------------------------------------
/client/js/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactBootstrap, { Row, Col } from 'react-bootstrap';
 3 | 
 4 | 
 5 | export default class Footer extends React.Component {
 6 |     constructor() {
 7 |         super();
 8 |     }
 9 | 
10 |     render() {
11 |         return (
12 |             <Row style={this.props.style}>
13 |                 <Col lg={12}>
14 |                     <p>This is an Open Lab project -- email <a href="mailto:WestleyArgentum@gmail.com" target="_top">WestleyArgentum@gmail.com</a> with any questions / feedback</p>
15 |                 </Col>
16 |             </Row>
17 |         );
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/client/js/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router";
 3 | import ReactBootstrap, { Row, Col } from 'react-bootstrap';
 4 | 
 5 | import Footer from "./Footer";
 6 | import Nav from "./Nav";
 7 | 
 8 | export default class Layout extends React.Component {
 9 |   render() {
10 |     const { location } = this.props;
11 |     const containerStyle = {
12 |       marginTop: "60px"
13 |     };
14 | 
15 |     return (
16 |       <div>
17 | 
18 |         <Nav location={location} />
19 | 
20 |         <div class="container" style={containerStyle}>
21 |           <Row>
22 |             <Col lg={12}>
23 |               {this.props.children}
24 | 
25 |             </Col>
26 |           </Row>
27 |           <Footer style={containerStyle}/>
28 |         </div>
29 |       </div>
30 | 
31 |     );
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/client/js/Message.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from "react";
 3 | import ReactBootstrap, {
 4 |     Row,
 5 |     Col,
 6 |     ListGroup,
 7 |     ListGroupItem,
 8 | } from 'react-bootstrap';
 9 | 
10 | export default class Message extends React.Component {
11 |     constructor() {
12 |         super();
13 |     }
14 | 
15 |     render() {
16 |         if (!this.props.message) {
17 |             return (
18 |                 <div>
19 |                 <Row>
20 |                     <Col md={12}>
21 |                         <h3>No Associated Message</h3>
22 |                     </Col>
23 |                 </Row>
24 |                 <Row>
25 |                     <Col md={12}>
26 |                         <h5 style={{ textAlign: 'left', marginTop: 8, marginBottom: 10.5 }}>
27 |                             The responses below are unprompted. People may be reaching out with something to share, or just saying hi.
28 |                         </h5>
29 |                     </Col>
30 |                 </Row>
31 |                 </div>
32 |             );
33 |         }
34 | 
35 |         const messageData = JSON.parse(this.props.message.data);
36 |         var messageText, buttonList;
37 | 
38 |         if (messageData.attachment && messageData.attachment.payload) {
39 |             const data = messageData.attachment.payload;
40 | 
41 |             messageText = data.text;
42 | 
43 |             if (data.buttons) {
44 |                 buttonList = (
45 |                     <h5 style={{ textAlign: 'left', marginTop: 8, marginBottom: 10.5 }}>
46 |                         {data.buttons.map((b) => b.title).join('  |  ')}
47 |                     </h5>
48 |                 );
49 |             }
50 | 
51 |         } else if (messageData.text) {
52 |             messageText = messageData.text;
53 |         } else {
54 |             console.log('WARNING unknown message type: ', messageData);
55 |         }
56 | 
57 |         if (this.props.message.metadata) {
58 |             messageText += ` [metadata: ${this.props.message.metadata}]`
59 |         }
60 | 
61 |         return (
62 |             <div style={this.props.style}>
63 |             <Row>
64 |                 <Col md={12}>
65 |                     <Row>
66 |                     <Col md={12}>
67 |                         <h3>{messageText}</h3>
68 |                     </Col>
69 |                     </Row>
70 |                     <Row>
71 |                     <Col sm={8} md={8}>
72 |                         {buttonList}
73 |                     </Col>
74 |                     <Col sm={4} md={4}>
75 |                         <h5 style={{ textAlign: 'right', marginTop: 8, marginBottom: 10.5 }}>
76 |                             Message Id: {this.props.message.id}
77 |                         </h5>
78 |                     </Col>
79 |                     </Row>
80 |                 </Col>
81 |             </Row>
82 |             </div>
83 |         );
84 |     }
85 | }
86 | 


--------------------------------------------------------------------------------
/client/js/MessageForm.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import update from 'react-addons-update';
  3 | import ReactBootstrap, {
  4 |     Row,
  5 |     Col,
  6 |     FormGroup,
  7 |     ControlLabel,
  8 |     FormControl,
  9 |     HelpBlock,
 10 |     Form,
 11 |     Checkbox,
 12 |     Button,
 13 |     Radio,
 14 |     InputGroup
 15 | } from 'react-bootstrap';
 16 | 
 17 | import request from 'axios';
 18 | 
 19 | 
 20 | export default class MessageForm extends React.Component {
 21 |     constructor() {
 22 |         super();
 23 | 
 24 |         this.submitMessage = this.submitMessage.bind(this);
 25 | 
 26 |         this.shouldDisableButtons = this.shouldDisableButtons.bind(this);
 27 |         this.validateMessageText = this.validateMessageText.bind(this);
 28 |         this.validateButton = this.validateButton.bind(this);
 29 |         this.validateAll = this.validateAll.bind(this);
 30 | 
 31 |         this.handleMessageTextChange = this.handleMessageTextChange.bind(this);
 32 |         this.handleMetadataTextChange = this.handleMetadataTextChange.bind(this);
 33 |         this.handleButtonChange = this.handleButtonChange.bind(this);
 34 |         this.handleUnstructuredChange = this.handleUnstructuredChange.bind(this);
 35 |         this.handlePollChange = this.handlePollChange.bind(this);
 36 |         this.handleSurpriseMeChange = this.handleSurpriseMeChange.bind(this);
 37 | 
 38 |         this.state = {
 39 |             messageText: '',
 40 |             mediaType: 'text',
 41 |             unstructuredReply: false,
 42 |             poll: false,
 43 |             surpriseMe: false,
 44 |             buttons: [
 45 |                 { text: '', tag: '' },
 46 |                 { text: '', tag: '' },
 47 |                 { text: '', tag: '' },
 48 |             ],
 49 |         };
 50 |     }
 51 | 
 52 |     render() {
 53 |         return (
 54 |             <Row>
 55 |             <Col md={12}>
 56 |             <form onSubmit={this.submitMessage}>
 57 |                 <h3>Create a Message</h3>
 58 |                 <FormGroup
 59 |                     controlId="formMessageText"
 60 |                     validationState={this.validateMessageText()}
 61 |                 >
 62 |                     <ControlLabel>Message text (or media url):</ControlLabel>
 63 |                     <FormControl
 64 |                         type="text"
 65 |                         value={this.state.messageText}
 66 |                         placeholder="message text (or media url)"
 67 |                         onChange={this.handleMessageTextChange}
 68 |                     />
 69 |                     <FormControl.Feedback />
 70 | 
 71 |                     <FormGroup>
 72 |                         <Radio 
 73 |                             name={'mediaType'}
 74 |                             checked={this.state.mediaType == 'text' }
 75 |                             onChange={this.handleMediaTypeChange.bind(this, 'text')}
 76 |                             inline
 77 |                         >
 78 |                             Text
 79 |                         </Radio>
 80 |                         {' '}
 81 |                         <Radio
 82 |                             name={'mediaType'}
 83 |                             checked={this.state.mediaType == 'image' }
 84 |                             onChange={this.handleMediaTypeChange.bind(this, 'image')}
 85 |                             inline
 86 |                         >
 87 |                             Image URL
 88 |                         </Radio>
 89 |                         {' '}
 90 |                         <Radio
 91 |                             name={'mediaType'}
 92 |                             checked={this.state.mediaType == 'video' }
 93 |                             onChange={this.handleMediaTypeChange.bind(this, 'video')}
 94 |                             inline
 95 |                         >
 96 |                             Video URL
 97 |                         </Radio>
 98 |                     </FormGroup>
 99 |                 </FormGroup>
100 | 
101 |                 <ControlLabel>Metadata (only visible in amdin interface):</ControlLabel>
102 |                 <FormControl
103 |                     type="text"
104 |                     value={this.state.metadata}
105 |                     placeholder="metadata text"
106 |                     onChange={this.handleMetadataTextChange}
107 |                 />
108 | 
109 |                 <Checkbox
110 |                     checked={this.state.unstructuredReply}
111 |                     onChange={this.handleUnstructuredChange}
112 |                 >
113 |                     Expect unstructured reply &nbsp;&nbsp;(users will be able to respond with arbitray text or media)
114 |                 </Checkbox>
115 | 
116 |                 <Checkbox
117 |                     checked={this.state.poll}
118 |                     onChange={this.handlePollChange}
119 |                 >
120 |                     Poll question &nbsp;&nbsp;(must expect unstructured reply)
121 |                 </Checkbox>
122 | 
123 |                 <Checkbox
124 |                     checked={this.state.surpriseMe}
125 |                     onChange={this.handleSurpriseMeChange}
126 |                 >
127 |                     "Surprise Me" Message &nbsp;&nbsp;(must expect unstructured reply)
128 |                 </Checkbox>
129 | 
130 |                 <Form componentClass="fieldset" inline>
131 |                     <FormGroup controlId="formButton1Text" validationState={this.validateButton(0)}>
132 |                         <ControlLabel>Button 1: </ControlLabel>
133 |                         {' '}
134 |                         <FormControl
135 |                             type="text"
136 |                             value={this.state.buttons[0].text}
137 |                             placeholder="button text"
138 |                             onChange={this.handleButtonChange.bind(this, 0, 'text')}
139 |                             disabled={this.shouldDisableButtons()}
140 |                         />
141 |                         <FormControl.Feedback />
142 |                         {' '}
143 |                         <FormControl
144 |                             type="text"
145 |                             value={this.state.buttons[0].tag}
146 |                             placeholder="button tag"
147 |                             onChange={this.handleButtonChange.bind(this, 0, 'tag')}
148 |                             disabled={this.shouldDisableButtons()}
149 |                         />
150 |                         <FormControl.Feedback />
151 |                     </FormGroup>
152 |                 </Form>
153 |                 <Form componentClass="fieldset" inline>
154 |                     <FormGroup controlId="formButton2Text" validationState={this.validateButton(1)}>
155 |                         <ControlLabel>Button 2: </ControlLabel>
156 |                         {' '}
157 |                         <FormControl
158 |                             type="text"
159 |                             value={this.state.buttons[1].text}
160 |                             placeholder="button text"
161 |                             onChange={this.handleButtonChange.bind(this, 1, 'text')}
162 |                             disabled={this.shouldDisableButtons()}
163 |                         />
164 |                         <FormControl.Feedback />
165 |                         {' '}
166 |                         <FormControl
167 |                             type="text"
168 |                             value={this.state.buttons[1].tag}
169 |                             placeholder="button tag"
170 |                             onChange={this.handleButtonChange.bind(this, 1, 'tag')}
171 |                             disabled={this.shouldDisableButtons()}
172 |                         />
173 |                         <FormControl.Feedback />
174 |                     </FormGroup>
175 |                 </Form>
176 |                 <Form componentClass="fieldset" inline>
177 |                     <FormGroup controlId="formButton3Text" validationState={this.validateButton(2)}>
178 |                         <ControlLabel>Button 3: </ControlLabel>
179 |                         {' '}
180 |                         <FormControl
181 |                             type="text"
182 |                             value={this.state.buttons[2].text}
183 |                             placeholder="button text"
184 |                             onChange={this.handleButtonChange.bind(this, 2, 'text')}
185 |                             disabled={this.shouldDisableButtons()}
186 |                         />
187 |                         <FormControl.Feedback />
188 |                         {' '}
189 |                         <FormControl
190 |                             type="text"
191 |                             value={this.state.buttons[2].tag}
192 |                             placeholder="button tag"
193 |                             onChange={this.handleButtonChange.bind(this, 2, 'tag')}
194 |                             disabled={this.shouldDisableButtons()}
195 |                         />
196 |                         <FormControl.Feedback />
197 |                     </FormGroup>
198 |                 </Form>
199 |                 <Button
200 |                     type="submit"
201 |                     disabled={this.validateAll() != 'success'}
202 |                 >
203 |                       Submit
204 |                 </Button>
205 |             </form>
206 |             </Col>
207 |             </Row>
208 |         );
209 |     }
210 | 
211 |     submitMessage() {
212 |         var buttonData = [];
213 |         for (var i = 0; i < this.state.buttons.length; ++i) {
214 |             if (this.state.buttons[i].text) {
215 |                 const button = this.state.buttons[i];
216 |                 buttonData.push({
217 |                     "title": button.text,
218 |                     "type": "postback",
219 |                     "payload": button.tag
220 |                 });
221 |             }
222 |         }
223 | 
224 |         var messageBody;
225 |         if (this.state.unstructuredReply || this.state.poll || !buttonData.length) {
226 |             const mediaType = this.state.mediaType;
227 |             if (mediaType == 'text') {
228 |                 messageBody = {
229 |                     "message": {
230 |                         "text": this.state.messageText
231 |                     },
232 |                 }
233 |             } else if (mediaType == 'image') {
234 |                 messageBody = {
235 |                     "message": {
236 |                         "attachment": {
237 |                             "type":"image",
238 |                             "payload": {
239 |                                 "url": this.state.messageText
240 |                             }
241 |                         }
242 |                     }
243 |                 }
244 |             } else if (mediaType == 'video') {
245 |                 messageBody = {
246 |                     "message": {
247 |                         "attachment": {
248 |                             "type":"video",
249 |                             "payload": {
250 |                                 "url": this.state.messageText
251 |                             }
252 |                         }
253 |                     }
254 |                 }
255 |             }
256 | 
257 |             messageBody.unstructuredReply = this.state.unstructuredReply;
258 |             messageBody.poll = this.state.poll;
259 |             messageBody.surpriseMe = this.state.surpriseMe;
260 | 
261 |         } else if (buttonData.length) {
262 |             messageBody = {
263 |                 "message": {
264 |                     "attachment": {
265 |                         "type":"template",
266 |                         "payload": {
267 |                             "template_type": "button",
268 |                             "text": this.state.messageText,
269 |                             "buttons": buttonData
270 |                         }
271 |                     }
272 |                 }
273 |             }
274 |         } else {
275 |             console.log('ERROR BUILDING MESSAGE DATA');
276 |         }
277 | 
278 |         if (this.state.metadata) {
279 |             messageBody.metadata = this.state.metadata;
280 |         }
281 | 
282 |         request.post('/messages', messageBody).then((response) => {
283 |             window.location.reload();
284 |         }).catch((response) => {
285 |             console.log('ERROR POSTING NEW MESSAGE: ', response);
286 |         });
287 |     }
288 | 
289 |     shouldDisableButtons() {
290 |         return this.state.unstructuredReply || this.state.poll || this.state.surpriseMe;
291 |     }
292 | 
293 |     validateMessageText() {
294 |         if (!this.state.messageText || !this.state.messageText.length) {
295 |             return 'error';
296 |         }
297 | 
298 |         return 'success';
299 |     }
300 | 
301 |     validateButton(index) {
302 |         const buttonState = this.state.buttons[index];
303 | 
304 |         if (!buttonState) {
305 |             return 'success';
306 |         }
307 | 
308 |         // if button text is set but tag isn't,
309 |         // or if button text is too long
310 |         if ((buttonState.text && !buttonState.tag) ||
311 |             (buttonState.text.length > 20)) {
312 |             return 'error';
313 |         }
314 | 
315 |         // if button tag is set but text isn't,
316 |         // or if button tag is too long
317 |         if ((buttonState.tag && !buttonState.text) ||
318 |             (buttonState.tag.length > 20)) {
319 |             return 'error';
320 |         }
321 | 
322 |         // if anything is set while expecting an unstructured reply
323 |         if ((buttonState.tag || buttonState.text) && this.state.unstructuredReply) {
324 |             return 'error';
325 |         }
326 | 
327 |         return 'success';
328 |     }
329 | 
330 |     validateAll() {
331 |         if (this.validateMessageText() == 'error') {
332 |             return 'error';
333 |         }
334 | 
335 |         if (!this.state.unstructuredReply &&
336 |             (this.validateButton(0) == 'error' ||
337 |              this.validateButton(1) == 'error' ||
338 |              this.validateButton(2) == 'error')) {
339 | 
340 |             return 'error';
341 |         }
342 | 
343 |         return 'success';
344 |     }
345 | 
346 |     handleMessageTextChange(e) {
347 |         const newState = update(this.state, {
348 |             messageText: {
349 |                 $set: e.target.value
350 |             }
351 |         });
352 | 
353 |         this.setState(newState);
354 |     }
355 | 
356 |     handleMediaTypeChange(type, e) {
357 |         const newState = update(this.state, {
358 |             mediaType: {
359 |                 $set: type
360 |             }
361 |         });
362 | 
363 |         this.setState(newState);
364 |     }
365 | 
366 |     handleMetadataTextChange(e) {
367 |         const newState = update(this.state, {
368 |             metadata: {
369 |                 $set: e.target.value
370 |             }
371 |         });
372 | 
373 |         this.setState(newState);
374 |     }
375 | 
376 |     handleButtonChange(index, field, e) {
377 |         const newState = update(this.state, {
378 |             buttons: {
379 |                 [index]: {
380 |                     [field]: {
381 |                         $set: e.target.value
382 |                     }
383 |                 }
384 |             }
385 |         });
386 | 
387 |         this.setState(newState);
388 |     }
389 | 
390 |     handleUnstructuredChange(e) {
391 |         const newState = update(this.state, {
392 |             unstructuredReply: {
393 |                 $set: e.target.checked
394 |             }
395 |         });
396 | 
397 |         this.setState(newState);
398 |     }
399 | 
400 |     handlePollChange(e) {
401 |         const newState = update(this.state, {
402 |             poll: {
403 |                 $set: e.target.checked
404 |             },
405 |             unstructuredReply: {
406 |                 $set: e.target.checked
407 |             }
408 |         });
409 | 
410 |         this.setState(newState);
411 |     }
412 | 
413 |     handleSurpriseMeChange(e) {
414 |         const newState = update(this.state, {
415 |             surpriseMe: {
416 |                 $set: e.target.checked
417 |             },
418 |             unstructuredReply: {
419 |                 $set: e.target.checked
420 |             }
421 |         });
422 | 
423 |         this.setState(newState);
424 |     }
425 | }


--------------------------------------------------------------------------------
/client/js/Nav.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { IndexLink, Link } from "react-router";
 3 | 
 4 | export default class Nav extends React.Component {
 5 |   constructor() {
 6 |     super()
 7 |     this.state = {
 8 |       collapsed: true,
 9 |     };
10 |   }
11 | 
12 |   toggleCollapse() {
13 |     const collapsed = !this.state.collapsed;
14 |     this.setState({collapsed});
15 |   }
16 | 
17 |   render() {
18 |     const { location } = this.props;
19 |     const { collapsed } = this.state;
20 |     const dashboardClass = location.pathname === "/" ? "active" : "";
21 |     const messageFormClass = location.pathname.match(/^\/create-messages/) ? "active" : "";
22 |     const sendFormClass = location.pathname.match(/^\/send-messages/) ? "active" : "";
23 |     const navClass = collapsed ? "collapse" : "";
24 | 
25 |     return (
26 |       <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
27 |         <div class="container">
28 |           <div class="navbar-header">
29 |             <button type="button" class="navbar-toggle" onClick={this.toggleCollapse.bind(this)} >
30 |               <span class="sr-only">Toggle navigation</span>
31 |               <span class="icon-bar"></span>
32 |               <span class="icon-bar"></span>
33 |               <span class="icon-bar"></span>
34 |             </button>
35 |           </div>
36 |           <div class={"navbar-collapse " + navClass} id="bs-example-navbar-collapse-1">
37 |             <ul class="nav navbar-nav">
38 |               <li class={dashboardClass}>
39 |                 <IndexLink to="/" onClick={this.toggleCollapse.bind(this)}>BuzzBot Dashboard</IndexLink>
40 |               </li>
41 |               <li class={messageFormClass}>
42 |                 <Link to="create-messages" onClick={this.toggleCollapse.bind(this)}>Create Messages</Link>
43 |               </li>
44 |               <li class={sendFormClass}>
45 |                 <Link to="send-messages" onClick={this.toggleCollapse.bind(this)}>Send Messages</Link>
46 |               </li>
47 |             </ul>
48 |           </div>
49 |         </div>
50 |       </nav>
51 |     );
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/client/js/PollView.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from "react";
 3 | import ReactList from 'react-list';
 4 | import update from 'react-addons-update';
 5 | import ReactBootstrap, {
 6 |     Row,
 7 |     Col,
 8 |     ListGroup,
 9 |     ListGroupItem,
10 | } from 'react-bootstrap';
11 | 
12 | import Message from './Message';
13 | 
14 | export default class PollView extends React.Component {
15 |     constructor() {
16 |         super();
17 | 
18 |         this.state = {
19 |             pollResults: []
20 |         }
21 | 
22 |         this.renderPollResults = this.renderPollResults.bind(this);
23 |     }
24 | 
25 |     componentWillMount() {
26 |         const pollData = JSON.parse(this.props.message.poll);
27 |         this.updatePollResults(pollData);
28 |     }
29 | 
30 |     componentWillReceiveProps(props) {
31 |         const pollData = JSON.parse(props.message.poll);
32 |         this.updatePollResults(pollData);
33 |     }
34 | 
35 |     render() {
36 |         const messageBoxStyle = {
37 |             minHeight: 100,
38 |         };
39 | 
40 |         const listBoxStyle = {
41 |             overflow: 'auto',
42 |             maxHeight: 512,
43 |         };
44 | 
45 |         return (
46 |             <div>
47 |                 <Message message={this.props.message} style={messageBoxStyle}/>
48 |                 <ListGroup style={listBoxStyle}>
49 |                     <ReactList
50 |                         itemRenderer={this.renderPollResults}
51 |                         length={this.state.pollResults.length}
52 |                         type='variable'
53 |                         updateWhenThisChanges={this.state.pollResults}
54 |                     />
55 |                 </ListGroup>
56 |             </div>
57 |         );
58 |     }
59 | 
60 |     updatePollResults(pollData) {
61 |         const pollResults = [];
62 | 
63 |         for (var result in pollData) {
64 |             pollResults.push({ result: result, count: pollData[result] });
65 |         }
66 | 
67 |         pollResults.sort((result1, result2) => {
68 |             return result2.count - result1.count;
69 |         });
70 | 
71 |         const newState = update(this.state, {
72 |             pollResults: {
73 |                 $set: pollResults
74 |             }
75 |         });
76 | 
77 |         this.setState(newState);
78 |     }
79 | 
80 |     renderPollResults(i, key) {
81 |         const result = this.state.pollResults[i];
82 | 
83 |         return (
84 |             <ListGroupItem key={result.result}>
85 |                 <Row>
86 |                 <Col sm={6} md={6}>
87 |                     <h3 style={{ textAlign: 'center' }}>{result.result}</h3>
88 |                 </Col>
89 |                 <Col sm={6} md={6}>
90 |                     <h3 style={{ textAlign: 'center' }}>{result.count}</h3>
91 |                 </Col>
92 |                 </Row>
93 |             </ListGroupItem>
94 |         );
95 |     }
96 | }
97 | 


--------------------------------------------------------------------------------
/client/js/Response.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react';
 3 | import {
 4 |     default as Video,
 5 |     Controls,
 6 |     Play,
 7 |     Mute,
 8 |     Seek,
 9 |     Fullscreen,
10 |     Time,
11 |     Overlay
12 | } from 'react-html5video';
13 | 
14 | import ReactBootstrap, { Row, Col } from 'react-bootstrap';
15 | 
16 | 
17 | export default class Response extends React.Component {
18 |     constructor() {
19 |         super();
20 |     }
21 | 
22 |     render() {
23 |         var textRow, attachmentRow;
24 | 
25 |         if (this.props.response.text) {
26 |             textRow = (
27 |                 <Row>
28 |                     <Col md={12}>
29 |                         <h4>{this.props.response.text}</h4>
30 |                     </Col>
31 |                 </Row>
32 |             );
33 |         }
34 | 
35 |         if (this.props.response.attachments) {
36 |             const attachmentViews = this.props.response.attachments.map((attachment) => {
37 |                 if (attachment.type == 'image') {
38 |                     return (
39 |                         <Col md={12} key={attachment.payload.url}>
40 |                             <img
41 |                                 src={attachment.payload.url}
42 |                                 style={{maxWidth: 400}}
43 |                             />
44 |                         </Col>
45 |                     );
46 |                 } else if (attachment.type == 'video') {
47 |                     return (
48 |                         <Col md={12} key={attachment.payload.url}>
49 |                             <Video controls autoPlay loop muted width={400}>
50 |                                 <source src={attachment.payload.url} type="video/webm" />
51 |                                 <Controls>
52 |                                     <Play />
53 |                                     <Seek />
54 |                                     <Time />
55 |                                     <Mute />
56 |                                     <Fullscreen />
57 |                                 </Controls>
58 |                             </Video>
59 |                         </Col>
60 |                     );
61 |                 }
62 |             });
63 |             attachmentRow = (
64 |                 <Row>
65 |                     {attachmentViews}
66 |                 </Row>
67 |             );
68 |         }
69 | 
70 |         var userLabel = this.props.response.userId;
71 |         if (this.props.user) {
72 |             userLabel = this.props.user.firstName + ' ' + this.props.user.lastName;
73 |         }
74 | 
75 |         return (
76 |             <div>
77 |                 <Row>
78 |                     <Col md={6}>
79 |                         Response id: {this.props.response.id}
80 |                     </Col>
81 |                     <Col md={6}>
82 |                         User: {userLabel}
83 |                     </Col>
84 |                 </Row>
85 |                 {textRow}
86 |                 {attachmentRow}
87 |                 <Row>
88 |                     <Col md={12}>
89 |                         {this.props.response.createdAt}
90 |                     </Col>
91 |                 </Row>
92 |             </div>
93 |         );
94 |     }
95 | }
96 | 


--------------------------------------------------------------------------------
/client/js/ResponseList.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from "react";
 3 | import ReactList from 'react-list';
 4 | import ReactBootstrap, {
 5 |     Row,
 6 |     Col,
 7 |     ListGroup,
 8 |     ListGroupItem,
 9 | } from 'react-bootstrap';
10 | 
11 | import Response from './Response';
12 | import Message from './Message';
13 | 
14 | export default class ResponseList extends React.Component {
15 |     constructor() {
16 |         super();
17 | 
18 |         this.renderResponse = this.renderResponse.bind(this);
19 |     }
20 | 
21 |     render() {
22 |         const messageBoxStyle = {
23 |             minHeight: 100,
24 |         };
25 | 
26 |         const listBoxStyle = {
27 |             overflow: 'auto',
28 |             maxHeight: 512,
29 |         };
30 | 
31 |         return (
32 |             <div>
33 |                 <Message message={this.props.message} style={messageBoxStyle}/>
34 |                 <ListGroup style={listBoxStyle}>
35 |                     <ReactList
36 |                         itemRenderer={this.renderResponse}
37 |                         length={this.props.responses.length}
38 |                         type='simple'
39 |                         updateWhenThisChanges={this.props.users}
40 |                     />
41 |                 </ListGroup>
42 |             </div>
43 |         );
44 |     }
45 | 
46 |     renderResponse(i, key) {
47 |         const response = this.props.responses[i];
48 | 
49 |         return (
50 |             <ListGroupItem key={key}>
51 |                 <Response
52 |                     response={response}
53 |                     user={this.props.users[response.userId]}
54 |                 />
55 |             </ListGroupItem>
56 |         );
57 |     }
58 | }
59 | 


--------------------------------------------------------------------------------
/client/js/SendForm.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import update from 'react-addons-update';
  3 | import request from 'axios';
  4 | import Select from 'react-select';
  5 | import ReactBootstrap, {
  6 |     Row,
  7 |     Col,
  8 |     FormGroup,
  9 |     ControlLabel,
 10 |     FormControl,
 11 |     HelpBlock,
 12 |     Form,
 13 |     Checkbox,
 14 |     Button,
 15 | } from 'react-bootstrap';
 16 | 
 17 | import {
 18 |     formatMessageInfo,
 19 |     getMessageText
 20 | } from './formatting';
 21 | 
 22 | 
 23 | export default class SendForm extends React.Component {
 24 |     constructor() {
 25 |         super();
 26 | 
 27 |         this.state = {
 28 |             messages: {},
 29 |             tags: {},
 30 |             selectedMessage: undefined,
 31 |             selectedTags: undefined
 32 |         };
 33 | 
 34 |         this.sendMessage = this.sendMessage.bind(this);
 35 |         this.handleMessages = this.handleMessages.bind(this);
 36 |         this.handleTags = this.handleTags.bind(this);
 37 |         this.handleMessageChange = this.handleMessageChange.bind(this);
 38 |         this.handleTagChange = this.handleTagChange.bind(this);
 39 |         this.validateAll = this.validateAll.bind(this);
 40 |     }
 41 | 
 42 |     componentWillMount() {
 43 |         const socket = this.props.route.socket;
 44 | 
 45 |         socket.on('messages', this.handleMessages);
 46 |         socket.on('tags', this.handleTags);
 47 | 
 48 |         socket.emit('get-messages');
 49 |         socket.emit('get-tags');
 50 |     }
 51 | 
 52 |     componentWillUnmount() {
 53 |         const socket = this.props.route.socket;
 54 | 
 55 |         socket.removeListener('messages', this.handleMessages);
 56 |         socket.removeListener('tags', this.handleTags);
 57 |     }
 58 | 
 59 |     render() {
 60 |         const midToText = {};
 61 |         const midToMetadata = {};
 62 |         for (var mid in this.state.messages) {
 63 |             const message = this.state.messages[mid];
 64 |             const messageText = getMessageText(message);
 65 | 
 66 |             midToText[mid] = messageText;
 67 |             midToMetadata[mid] = message.metadata;
 68 |         }
 69 | 
 70 |         const messageList = Object.keys(midToText).map((mid) => {
 71 |             return {
 72 |                 value: mid,
 73 |                 label: formatMessageInfo(mid, midToText[mid], midToMetadata[mid])
 74 |             }
 75 |         });
 76 | 
 77 |         const tagList = Object.keys(this.state.tags).map((tagid) => {
 78 |             const tag = this.state.tags[tagid];
 79 |             return {
 80 |                 value: tagid,
 81 |                 label: formatMessageInfo(tag.messageId, midToText[tag.messageId], midToMetadata[tag.messageId], tag.tag)
 82 |             };
 83 |         });
 84 | 
 85 |         return (
 86 |             <div>
 87 |                 <Row>
 88 |                     <Col md={12}>
 89 |                         <form onSubmit={this.sendMessage}>
 90 |                             <h3>Send a Message</h3>
 91 |                             <FormGroup controlId="formSendMessageSelect">
 92 |                                 <ControlLabel>Select Message to send</ControlLabel>
 93 |                                 <Select
 94 |                                     name="formSendMessageSelect"
 95 |                                     value={this.state.selectedMessage}
 96 |                                     options={messageList}
 97 |                                     onChange={this.handleMessageChange}
 98 |                                 />
 99 |                             </FormGroup>
100 |                             <FormGroup controlId="formSendTagsSelect">
101 |                                 <ControlLabel>Send only to users with ALL selected Tags</ControlLabel>
102 |                                 <Select
103 |                                     name="formSendTagsSelect"
104 |                                     multi={true}
105 |                                     value={this.state.selectedTags}
106 |                                     options={tagList}
107 |                                     onChange={this.handleTagChange}
108 |                                 />
109 |                             </FormGroup>
110 |                             <Button
111 |                                 type="submit"
112 |                                 disabled={this.validateAll() != 'success'}
113 |                             >
114 |                                   Send Message
115 |                             </Button>
116 |                         </form>
117 |                     </Col>
118 |                 </Row>
119 |             </div>
120 |         );
121 |     }
122 | 
123 |     sendMessage() {
124 |         var tagIds = [];
125 |         if (this.state.selectedTags) {
126 |             tagIds = this.state.selectedTags.map((t) => t.value)
127 |         }
128 | 
129 |         request.post('/send', {
130 |             messageId: this.state.selectedMessage.value,
131 |             tagIds: tagIds
132 |         }).then((response) => {
133 |             window.location.reload();
134 |         }).catch((response) => {
135 |             console.log('ERROR SENDING OUT MESSAGE: ', response);
136 |         });
137 |     }
138 | 
139 |     handleMessages(messages) {
140 |         const messageState = {};
141 | 
142 |         for (var i = 0; i < messages.length; ++i) {
143 |             const message = messages[i];
144 |             message.data = JSON.parse(message.data);
145 | 
146 |             messageState[message.id] = {
147 |                 $set: message
148 |             }
149 |         }
150 | 
151 |         const newState = update(this.state, {
152 |             messages: messageState
153 |         });
154 | 
155 |         this.setState(newState);
156 |     }
157 | 
158 |     handleTags(tags) {
159 |         const tagState = {};
160 | 
161 |         for (var i = 0; i < tags.length; ++i) {
162 |             const tag = tags[i];
163 | 
164 |             tagState[tag.id] = {
165 |                 $set: tag
166 |             }
167 |         }
168 | 
169 |         const newState = update(this.state, {
170 |             tags: tagState
171 |         });
172 | 
173 |         this.setState(newState);
174 |     }
175 | 
176 |     handleMessageChange(message) {
177 |         const newState = update(this.state, {
178 |             selectedMessage: {
179 |                 $set: message
180 |             }
181 |         });
182 | 
183 |         this.setState(newState);
184 |     }
185 | 
186 |     handleTagChange(tags) {
187 |         const newState = update(this.state, {
188 |             selectedTags: {
189 |                 $set: tags
190 |             }
191 |         });
192 |         this.setState(newState);
193 |     }
194 | 
195 |     validateAll() {
196 |         if (this.state.selectedMessage) {
197 |             return 'success';
198 |         }
199 | 
200 |         return 'error';
201 |     }
202 | }
203 | 


--------------------------------------------------------------------------------
/client/js/TriggerForm.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import update from 'react-addons-update';
  3 | import request from 'axios';
  4 | import Select from 'react-select';
  5 | import ReactBootstrap, {
  6 |     Row,
  7 |     Col,
  8 |     FormGroup,
  9 |     ControlLabel,
 10 |     FormControl,
 11 |     HelpBlock,
 12 |     Form,
 13 |     Checkbox,
 14 |     Button,
 15 | } from 'react-bootstrap';
 16 | 
 17 | import {
 18 |     formatMessageInfo,
 19 |     getMessageText
 20 | } from './formatting';
 21 | 
 22 | 
 23 | export default class TriggerForm extends React.Component {
 24 |     constructor() {
 25 |         super();
 26 | 
 27 |         this.state = {
 28 |             messages: {},
 29 |             tags: {},
 30 |             triggerTag: undefined,
 31 |             triggerMessage: undefined,
 32 |             triggeredMessage: undefined,
 33 |         };
 34 | 
 35 |         this.createTrigger = this.createTrigger.bind(this);
 36 |         this.handleTags = this.handleTags.bind(this);
 37 |         this.handleMessages = this.handleMessages.bind(this);
 38 |         this.handleTagChange = this.handleTagChange.bind(this);
 39 |         this.handleMessageChange = this.handleMessageChange.bind(this);
 40 |         this.handleTriggerMessageChange = this.handleTriggerMessageChange.bind(this);
 41 |         this.validateAll = this.validateAll.bind(this);
 42 |     }
 43 | 
 44 |     componentWillMount() {
 45 |         const socket = this.props.socket;
 46 | 
 47 |         socket.on('tags', this.handleTags);
 48 |         socket.on('messages', this.handleMessages);
 49 | 
 50 |         socket.emit('get-tags');
 51 |         socket.emit('get-messages');
 52 |     }
 53 | 
 54 |     componentWillUnmount() {
 55 |         const socket = this.props.socket;
 56 | 
 57 |         socket.removeListener('tags', this.handleTags);
 58 |         socket.removeListener('messages', this.handleMessages);
 59 |     }
 60 | 
 61 |     render() {
 62 |         const messages = this.state.messages;
 63 | 
 64 |         // message text can mean different things based on the type
 65 |         // of the message -- resolve the text once for use below
 66 |         const midToText = {};
 67 |         const midToMetadata = {};
 68 |         const triggerMids = [];
 69 |         for (var mid in messages) {
 70 |             const message = messages[mid];
 71 |             const messageText = getMessageText(message);
 72 | 
 73 |             midToText[mid] = messageText;
 74 |             midToMetadata[mid] = message.metadata;
 75 | 
 76 |             // if the message expects an unstructured reply, it can be
 77 |             // a trigger message
 78 |             if (message.unstructuredReply) {
 79 |                 triggerMids.push(mid);
 80 |             }
 81 |         }
 82 | 
 83 |         const tagList = Object.keys(this.state.tags).map((tagid) => {
 84 |             const tag = this.state.tags[tagid];
 85 | 
 86 |             return {
 87 |                 value: tagid,
 88 |                 label: formatMessageInfo(tag.messageId, midToText[tag.messageId], midToMetadata[tag.messageId], tag.tag)
 89 |             }
 90 |         });
 91 | 
 92 |         const messageList = Object.keys(midToText).map((mid) => {
 93 |             return {
 94 |                 value: mid,
 95 |                 label: formatMessageInfo(mid, midToText[mid], midToMetadata[mid])
 96 |             }
 97 |         });
 98 | 
 99 |         const triggerMessageList = triggerMids.map((mid) => {
100 |             return {
101 |                 value: mid,
102 |                 label: formatMessageInfo(mid, midToText[mid], midToMetadata[mid])
103 |             }
104 |         });
105 | 
106 |         return (
107 |             <Row>
108 |             <Col md={12}>
109 |                 <form onSubmit={this.createTrigger}>
110 |                     <Row>
111 |                         <Col md={12}>
112 |                             <h3>Create a Trigger</h3>
113 |                             <h5>When users respond to something, trigger a new message to be sent.</h5>
114 |                         </Col>
115 |                     </Row>
116 |                     <Row>
117 |                         <Col sm={12} md={6}>
118 |                             <FormGroup controlId="formCreateTriggerTagSelect">
119 |                                 <ControlLabel>Select a trigger Tag</ControlLabel>
120 |                                 <Select
121 |                                     name="formCreateTriggerTagSelect"
122 |                                     value={this.state.triggerTag}
123 |                                     options={tagList}
124 |                                     onChange={this.handleTagChange}
125 |                                 />
126 |                                 <ControlLabel>OR Select a trigger Message</ControlLabel>
127 |                                 <Select
128 |                                     name="formCreateTriggerMessageSelect"
129 |                                     value={this.state.triggerMessage}
130 |                                     options={triggerMessageList}
131 |                                     onChange={this.handleTriggerMessageChange}
132 |                                 />
133 |                             </FormGroup>
134 |                         </Col>
135 |                         <Col sm={12} md={6}>
136 |                             <FormGroup controlId="formCreateTriggeredMessageSelect">
137 |                                 <ControlLabel>Select a Message to trigger</ControlLabel>
138 |                                 <Select
139 |                                     name="formCreateTriggeredMessageSelect"
140 |                                     value={this.state.triggeredMessage}
141 |                                     options={messageList}
142 |                                     onChange={this.handleMessageChange}
143 |                                 />
144 |                             </FormGroup>
145 |                         </Col>
146 |                     </Row>
147 |                     <Row>
148 |                         <Col md={12}>
149 |                             <Button
150 |                                 type="submit"
151 |                                 disabled={this.validateAll() != 'success'}
152 |                             >
153 |                                   Create Trigger
154 |                             </Button>
155 |                         </Col>
156 |                     </Row>
157 |                 </form>
158 |             </Col>
159 |             </Row>
160 |         );
161 |     }
162 | 
163 |     createTrigger() {
164 |         const data = {
165 |             messages: [this.state.triggeredMessage.value]
166 |         }
167 | 
168 |         if (this.state.triggerTag) {
169 |             data.triggerTagId = this.state.triggerTag.value;
170 |         } else if (this.state.triggerMessage) {
171 |             data.triggerMessageId = this.state.triggerMessage.value;
172 |         }
173 | 
174 |         request.post('/triggers', data).then((response) => {
175 |             window.location.reload();
176 |         }).catch((response) => {
177 |             console.log('ERROR CREATING TRIGGER: ', response);
178 |         });
179 |     }
180 | 
181 |     handleTags(tags) {
182 |         const tagState = {};
183 | 
184 |         for (var i = 0; i < tags.length; ++i) {
185 |             const tag = tags[i];
186 | 
187 |             tagState[tag.id] = {
188 |                 $set: tag
189 |             }
190 |         }
191 | 
192 |         const newState = update(this.state, {
193 |             tags: tagState
194 |         });
195 | 
196 |         this.setState(newState);
197 |     }
198 | 
199 |     handleMessages(messages) {
200 |         const messageState = {};
201 | 
202 |         for (var i = 0; i < messages.length; ++i) {
203 |             const message = messages[i];
204 |             message.data = JSON.parse(message.data);
205 | 
206 |             messageState[message.id] = {
207 |                 $set: message
208 |             }
209 |         }
210 | 
211 |         const newState = update(this.state, {
212 |             messages: messageState
213 |         });
214 | 
215 |         this.setState(newState);
216 |     }
217 | 
218 |     handleTagChange(tag) {
219 |         const newState = update(this.state, {
220 |             triggerTag: {
221 |                 $set: tag
222 |             }
223 |         });
224 | 
225 |         this.setState(newState);
226 |     }
227 | 
228 |     handleMessageChange(message) {
229 |         const newState = update(this.state, {
230 |             triggeredMessage: {
231 |                 $set: message
232 |             }
233 |         });
234 | 
235 |         this.setState(newState);
236 |     }
237 | 
238 |     handleTriggerMessageChange(message) {
239 |         const newState = update(this.state, {
240 |             triggerMessage: {
241 |                 $set: message
242 |             }
243 |         });
244 | 
245 |         this.setState(newState);
246 |     }
247 | 
248 |     validateAll() {
249 |         if (((this.state.triggerTag && !this.state.triggerMessage) ||
250 |             (!this.state.triggerTag && this.state.triggerMessage)) &&
251 |             this.state.triggeredMessage) {
252 | 
253 |             return 'success';
254 |         }
255 | 
256 |         return 'error';
257 |     }
258 | }
259 | 


--------------------------------------------------------------------------------
/client/js/formatting.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export function formatMessageInfo(messageId, messageText, messageMetadata, tag) {
 3 |     var formattedText = `${messageId}: ${messageText}`;
 4 | 
 5 |     if (messageMetadata) {
 6 |         formattedText += ` [${messageMetadata}]`;
 7 |     }
 8 | 
 9 |     if (tag) {
10 |         formattedText += ` => ${tag}`;
11 |     }
12 | 
13 |     return formattedText;
14 | }
15 | 
16 | export function getMessageText(message) {
17 |     var messageText = message.data.text;
18 | 
19 |     if (!messageText && message.data.attachment) {
20 |         const attachment = message.data.attachment;
21 | 
22 |         if (attachment.type == 'template') {
23 |             messageText = attachment.payload.text;
24 |         } else if (attachment.type == 'image') {
25 |             messageText = '<image>';
26 |         } else if (attachment.type == 'video') {
27 |             messageText = '<video>';
28 |         } else {
29 |             messageText = '<unknown content>';
30 |         }
31 |     } else if (!messageText) {
32 |         messageText = '<unknown content>';
33 |     }
34 | 
35 |     return messageText;
36 | }
37 | 


--------------------------------------------------------------------------------
/client/js/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import { Router, Route, IndexRoute, hashHistory } from "react-router";
 4 | 
 5 | import Dashboard from "./Dashboard";
 6 | import CreateForm from "./CreateForm";
 7 | import SendForm from "./SendForm";
 8 | import Layout from "./Layout";
 9 | 
10 | import './../../node_modules/react-html5video/dist/ReactHtml5Video.css';
11 | import 'react-select/dist/react-select.css';
12 | 
13 | import io from 'socket.io-client/socket.io';
14 | 
15 | const socket = io.connect("wss://" + window.location.hostname + (location.port ? ':' + location.port : ''));
16 | 
17 | const app = document.getElementById('app');
18 | 
19 | ReactDOM.render(
20 |   <Router history={hashHistory}>
21 |     <Route path="/" component={Layout}>
22 |       <IndexRoute component={Dashboard} socket={socket}></IndexRoute>
23 |       <Route path="create-messages" name="create-messages" component={CreateForm} socket={socket}></Route>
24 |       <Route path="send-messages" name="send-messages" component={SendForm} socket={socket}></Route>
25 |     </Route>
26 |   </Router>,
27 | app);
28 | 


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = {
 3 |     env: process.env.NODE_ENV || "development",
 4 | 
 5 |     baseFbUrl: process.env.FB_URL || "https://graph.facebook.com/v2.6",
 6 |     pageToken: process.env.FB_PAGE_TOKEN,
 7 |     verifyToken: process.env.VERIFY_TOKEN,
 8 |     port: process.env.CB_PORT || 8080
 9 | };
10 | 


--------------------------------------------------------------------------------
/db/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/db/controller.js:
--------------------------------------------------------------------------------
  1 | 
  2 | export default (db) => {
  3 |     const controller = {
  4 |         getUser(id) {
  5 |             return db.User.findOne({ where: { id } });
  6 |         },
  7 | 
  8 |         getUsers(userIds) {
  9 |             if (userIds && userIds.length) {
 10 |                 return db.User.findAll({
 11 |                     where: {
 12 |                         id: {
 13 |                             $or: userIds
 14 |                         }
 15 |                     }
 16 |                 });
 17 |             }
 18 | 
 19 |             return db.User.findAll({ where: {} });
 20 |         },
 21 | 
 22 |         getAllActiveUserIds() {
 23 |             return db.User.findAll({
 24 |                 where: {
 25 |                     state: {
 26 |                         $not: 'paused'
 27 |                     }
 28 |                 },
 29 |                 attributes: ['id'],
 30 |             });
 31 |         },
 32 | 
 33 |         createUser(id) {
 34 |             return db.User.create({ id });
 35 |         },
 36 | 
 37 |         getOrCreateUser(id) {
 38 |             return db.User.findOrCreate({ where: { id } });
 39 |         },
 40 | 
 41 |         updateUser(id, props) {
 42 |             return db.User.findOne({ where: { id } }).then((user) => {
 43 |                 return user.update(props).then(() => {
 44 |                     return user;
 45 |                 });
 46 |             });
 47 |         },
 48 | 
 49 |         getResponse(id) {
 50 |             return db.Response.findOne({ where: { id } });
 51 |         },
 52 | 
 53 |         getResponses(options = { where: {} }) {
 54 |             return db.Response.findAll(options);
 55 |         },
 56 | 
 57 |         createResponse(userId, data) {
 58 |             const props = Object.assign({}, data, { userId });
 59 | 
 60 |             return db.Response.create(props);
 61 |         },
 62 | 
 63 |         getUserResponsesToMessage(userId, messageId) {
 64 |             return db.Response.findAll({
 65 |                 where: {
 66 |                     messageId,
 67 |                     userId
 68 |                 }
 69 |             });
 70 |         },
 71 | 
 72 |         createMessage(data, props) {
 73 |             return db.Message.create(Object.assign({ data: JSON.stringify(data) }, props));
 74 |         },
 75 | 
 76 |         createMessageAndTags(data, unstructuredReply = false, poll = undefined, surpriseMe = false, metadata = undefined) {
 77 |             var tags = [];
 78 |             if (data.attachment && data.attachment.payload && data.attachment.payload.buttons) {
 79 |                 var buttons = data.attachment.payload.buttons;
 80 |                 for (var i = 0; i < buttons.length; ++i) {
 81 |                     tags.push(buttons[i].payload);
 82 |                 }
 83 |             }
 84 | 
 85 |             return controller.createMessage(data, { unstructuredReply, poll, surpriseMe, metadata }).then((message) => {
 86 |                 for (var i = 0; i < tags.length; ++i) {
 87 |                     controller.createTag(message.id, tags[i]);
 88 |                 }
 89 | 
 90 |                 return message;
 91 |             });
 92 |         },
 93 | 
 94 |         getMessage(id) {
 95 |             return db.Message.findOne({ where: { id } });
 96 |         },
 97 | 
 98 |         getMessages(messageIds) {
 99 |             if (messageIds && messageIds.length) {
100 |                 return db.Message.findAll({
101 |                     where: {
102 |                         id: {
103 |                             $or: messageIds
104 |                         }
105 |                     }
106 |                 });
107 |             }
108 | 
109 |             return db.Message.findAll({ where: {} });
110 |         },
111 | 
112 |         getInitialMessages() {
113 |             return db.Message.findAll({
114 |                 where: {
115 |                     initialMessage: true
116 |                 }
117 |             });
118 |         },
119 | 
120 |         getAllSurpriseMeMessages() {
121 |             return db.Message.findAll({
122 |                 where: {
123 |                     surpriseMe: true
124 |                 }
125 |             });
126 |         },
127 | 
128 |         getOrCreateTriggerWithTag(tagId, messageIds) {
129 |             return db.Trigger.findOrCreate({
130 |                 where: { tagId }
131 |             }).spread((trigger) => {
132 |                 trigger.addMessages(messageIds);
133 |                 return trigger;
134 |             });
135 |         },
136 | 
137 |         getOrCreateTriggerWithMessage(triggerMessageId, messageIds) {
138 |             return db.Trigger.findOrCreate({
139 |                 where: { triggerMessageId }
140 |             }).spread((trigger) => {
141 |                 trigger.addMessages(messageIds);
142 |                 return trigger;
143 |             });
144 |         },
145 | 
146 |         getMessagesForTriggerFromTag(tag) {
147 |             return db.Trigger.findOne({ where: {
148 |                 tagId: tag.id
149 |             } }).then((trigger) => {
150 |                 return trigger ? trigger.getMessages() : [];
151 |             });
152 |         },
153 | 
154 |         getMessagesForTriggerFromMessage(message) {
155 |             return db.Trigger.findOne({ where: {
156 |                 triggerMessageId: message.id
157 |             } }).then((trigger) => {
158 |                 return trigger ? trigger.getMessages() : [];
159 |             });
160 |         },
161 | 
162 |         getTag(options) {
163 |             if (options.id) {
164 |                 return db.Tag.findOne({ where: {
165 |                     id: options.id
166 |                 }});
167 |             }
168 | 
169 |             return db.Tag.findOne({ where: {
170 |                 messageId: options.messageId,
171 |                 tag: options.tag
172 |             } });
173 |         },
174 | 
175 |         getTags() {
176 |             return db.Tag.findAll( { where: {} });
177 |         },
178 | 
179 |         createTag(messageId, tag) {
180 |             return db.Tag.create({ messageId, tag });
181 |         },
182 | 
183 |         countUsersWithTag(tagId) {
184 |             return db.Tag.findOne({
185 |                 where: { id: tagId }
186 |             }).then((tag) => {
187 |                 console.log(tagId, tag);
188 |                 return tag.getUsers().then((users) => {
189 |                     if (users && users.length) {
190 |                         return users.length;
191 |                     }
192 |                     return 0;
193 |                 });
194 |             });
195 |         },
196 | 
197 |         createMessageEvent(userId, messageId) {
198 |             return db.MessageEvent.create({
199 |                 userId,
200 |                 messageId
201 |             });
202 |         },
203 | 
204 |         getMessageEventsForUser(userId) {
205 |             return db.MessageEvent.findAll({
206 |                 where: {
207 |                     userId
208 |                 },
209 |                 order: '"createdAt" DESC',
210 |                 include: [db.Message]
211 |             });
212 |         },
213 | 
214 |         getMessageEventsForUserAndMessages(userId, messageIds) {
215 |             return db.MessageEvent.findAll({
216 |                 where: {
217 |                     userId: userId,
218 |                     messageId: {
219 |                         $in: messageIds
220 |                     }
221 |                 }
222 |             });
223 |         },
224 | 
225 |         getActiveMenuCommands() {
226 |             return db.MenuCommand.findAll({
227 |                 where: {
228 |                     active: true
229 |                 }
230 |             });
231 |         }
232 | 
233 |     }
234 | 
235 |     return controller;
236 | }
237 | 


--------------------------------------------------------------------------------
/db/fixtures/example-menu-commands.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = [
 3 |     {
 4 |         "model": "MenuCommand",
 5 |         "keys": ["id"],
 6 |         "data": {
 7 |             "id": 50,
 8 |             "data": `{
 9 |                 "type": "web_url",
10 |                 "title": "BuzzFeed News",
11 |                 "url": "https://www.buzzfeed.com/news"
12 |             }`,
13 |             "active": true,
14 |             "order": 3
15 |         }
16 |     },
17 |     {
18 |         "model": "MenuCommand",
19 |         "keys": ["id"],
20 |         "data": {
21 |             "id": 51,
22 |             "data": `{
23 |                 "type": "postback",
24 |                 "title": "Stop messaging me",
25 |                 "payload": "command:stop"
26 |             }`,
27 |             "active": true,
28 |             "order": 5
29 |         }
30 |     },
31 |     {
32 |         "model": "MenuCommand",
33 |         "keys": ["id"],
34 |         "data": {
35 |             "id": 52,
36 |             "data": `{
37 |                 "type": "postback",
38 |                 "title": "Surprise me!",
39 |                 "payload": "command:surprise"
40 |             }`,
41 |             "active": true,
42 |             "order": 1
43 |         }
44 |     },
45 | 
46 | ]
47 | 


--------------------------------------------------------------------------------
/db/fixtures/example-messages.js:
--------------------------------------------------------------------------------
  1 | 
  2 | module.exports = [
  3 |     {
  4 |         "model": "Message",
  5 |         "keys": ["id"],
  6 |         "data": {
  7 |             "id": 50,
  8 |             "data": `{
  9 |                 "text": "No problem! If you want to get in touch again, just say 'START' or 'RESUME'"
 10 |             }`,
 11 |             "unstructuredReply": true,
 12 |             "repeatable": true
 13 |         }
 14 |     },
 15 |     {
 16 |         "model": "Message",
 17 |         "keys": ["id"],
 18 |         "data": {
 19 |             "id": 51,
 20 |             "data": `{
 21 |                 "text": "Good to hear from you again! Remember you can always say 'STOP' or 'PAUSE'"
 22 |             }`,
 23 |             "unstructuredReply": true,
 24 |             "repeatable": true
 25 |         }
 26 |     },
 27 |     {
 28 |         "model": "Message",
 29 |         "keys": ["id"],
 30 |         "data": {
 31 |             "id": 52,
 32 |             "data": `{
 33 |                 "text": "Surprise, I'm out of surprises! :P\\n\\nBut check back later and maybe I'll have something new."
 34 |             }`,
 35 |             "unstructuredReply": true,
 36 |             "repeatable": true
 37 |         }
 38 |     },
 39 |     {
 40 |         "model": "Message",
 41 |         "keys": ["id"],
 42 |         "data": {
 43 |             "id": 53,
 44 |             "data": `{
 45 |                 "text": "This post will stay up to date: https://www.buzzfeed.com/buzzfeednews/dnc-day-1 And you can always get the latest by following BuzzFeed News on Facebook and Twitter."
 46 |             }`,
 47 |             "unstructuredReply": true,
 48 |             "repeatable": true
 49 |         }
 50 |     },
 51 | 
 52 |     // -------
 53 | 
 54 |     {
 55 |         model: "Message",
 56 |         keys: ["id"],
 57 |         data: {
 58 |             id: 110,
 59 |             data: `{
 60 |                 "attachment": {
 61 |                     "type": "template",
 62 |                     "payload": {
 63 |                         "template_type": "button",
 64 |                         "text": "Hi 👋 My name is BuzzBot.\\n\\nWhat would you like to see an example of?",
 65 |                         "buttons": [
 66 |                             {
 67 |                                 "title": "text",
 68 |                                 "type": "postback",
 69 |                                 "payload": "wants-text"
 70 |                             },
 71 |                             {
 72 |                                 "title": "gif",
 73 |                                 "type": "postback",
 74 |                                 "payload": "wants-gif"
 75 |                             },
 76 |                             {
 77 |                                 "title": "poll",
 78 |                                 "type": "postback",
 79 |                                 "payload": "wants-poll"
 80 |                             }
 81 |                         ]
 82 |                     }
 83 |                 }
 84 |             }`,
 85 |             initialMessage: true
 86 |         }
 87 |     },
 88 |     {
 89 |         model: "Message",
 90 |         keys: ["id"],
 91 |         data: {
 92 |             id: 120,
 93 |             data: `{
 94 |                 "text": "This message is marked 'unstructuredReply: true'. You can write back using text, emoji, gifs, video, etc. You can even send multiple replies and they'll end up together."
 95 |             }`,
 96 |             unstructuredReply: true,
 97 |             metadata: "wants-text"
 98 |         }
 99 |     },
100 |     {
101 |         model: "Message",
102 |         keys: ["id"],
103 |         data: {
104 |             id: 130,
105 |             data: `{
106 |                 "attachment": {
107 |                     "type": "image",
108 |                     "payload":{
109 |                         "url":"https://img.buzzfeed.com/buzzfeed-static/static/2014-07/18/8/enhanced/webdr09/anigif_enhanced-buzz-32587-1405685331-4.gif"
110 |                     }
111 |                 }
112 |             }`,
113 |             metadata: "puppy-gif,wants-gif"
114 |         }
115 |     },
116 |     {
117 |         model: "Message",
118 |         keys: ["id"],
119 |         data: {
120 |             id: 140,
121 |             data: `{
122 |                 "text": "Tell me how you feel about puppies using emoji! Though you can use text to. Only the first response by a user is counted towards the poll. The other responses are recorded but not shown, so you can't sway the poll by sending a million poop emoji."
123 |             }`,
124 |             unstructuredReply: true,
125 |             poll: "{}",
126 |             metadata: "wants-poll",
127 |             repeatable: true
128 |         }
129 |     }
130 | 
131 | ]
132 | 


--------------------------------------------------------------------------------
/db/fixtures/example-tags.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = [
 3 |     {
 4 |         model: 'Tag',
 5 |         data: {
 6 |             id: 110,
 7 |             tag: 'wants-text',
 8 |             messageId: 110
 9 |         }
10 |     },
11 |     {
12 |         model: 'Tag',
13 |         data: {
14 |             id: 111,
15 |             tag: 'wants-gif',
16 |             messageId: 110
17 |         }
18 |     },
19 |     {
20 |         model: 'Tag',
21 |         data: {
22 |             id: 112,
23 |             tag: 'wants-poll',
24 |             messageId: 110
25 |         }
26 |     },
27 | 
28 | ]
29 | 


--------------------------------------------------------------------------------
/db/fixtures/example-triggers.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = [
 3 |     {
 4 |         model: 'Trigger',
 5 |         data: {
 6 |             id: 110,
 7 |             tagId: 110,
 8 |             messages: [120]
 9 |         }
10 |     },
11 |     {
12 |         model: 'Trigger',
13 |         data: {
14 |             id: 111,
15 |             tagId: 111,
16 |             messages: [130]
17 |         }
18 |     },
19 |     {
20 |         model: 'Trigger',
21 |         data: {
22 |             id: 112,
23 |             tagId: 112,
24 |             messages: [140]
25 |         }
26 |     },
27 | ]
28 | 


--------------------------------------------------------------------------------
/db/index.js:
--------------------------------------------------------------------------------
 1 | import fs from 'fs';
 2 | import path from 'path';
 3 | import pg from 'pg';
 4 | import Sequelize from 'sequelize';
 5 | import Controller from './controller';
 6 | import config from '../config.js';
 7 | import dbConfigs from './sequelize_config.js';
 8 | 
 9 | const dbConfig = dbConfigs[config.env],
10 |       basename = path.basename(module.filename),
11 |       modelDir = path.join(__dirname, 'models');
12 | 
13 | const db = {
14 |     Sequelize,
15 | };
16 | 
17 | var dbUrl = process.env[dbConfig.useEnvVar];
18 | if (dbUrl) {
19 |     db.sequelize = new Sequelize(dbUrl);
20 |     db.pg = new pg.Client(dbUrl);
21 | } else {
22 |     db.sequelize = new Sequelize(dbConfig.database, dbConfig.username, dbConfig.password, dbConfig);
23 | 
24 |     dbUrl = 'postgres://' + dbConfig.username + ':' + dbConfig.password + '@' + dbConfig.host + '/' + dbConfig.database;
25 |     db.pg = new pg.Client(dbUrl);
26 | }
27 | 
28 | fs.readdirSync(modelDir)
29 |     .filter((file) =>
30 |         (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js')
31 |     )
32 |     .forEach((file) => {
33 |         const model = db.sequelize.import(path.join(modelDir, file));
34 |         db[model.name] = model;
35 |     });
36 | 
37 | Object.keys(db).forEach((modelName) => {
38 |     if (db[modelName].associate) {
39 |         db[modelName].associate(db);
40 |     }
41 | });
42 | 
43 | db.Controller = Controller(db);
44 | 
45 | module.exports = db;
46 | 


--------------------------------------------------------------------------------
/db/init.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import fs from 'fs';
 3 | import db from './index';
 4 | 
 5 | const sequelize_fixtures = require('sequelize-fixtures');
 6 | 
 7 | db.sequelize.sync().then(() => {
 8 |     sequelize_fixtures.loadFiles([
 9 |         './db/fixtures/example-messages.js',
10 |         './db/fixtures/example-tags.js',
11 |         './db/fixtures/example-triggers.js',
12 |         './db/fixtures/example-menu-commands.js'
13 |     ], db).then(function() {
14 |         const seqScript = fs.readFileSync('./db/scripts/init-seq-ids.sql').toString();
15 |         const triggerScript = fs.readFileSync('./db/scripts/init-triggers.sql').toString();
16 | 
17 |         db.sequelize.query(seqScript).spread((results, metadata) => {
18 |         db.sequelize.query(triggerScript).spread((results, metadata) => {
19 |             console.log('CREATED FIXTURES!');
20 |         }); });
21 |     });
22 | });
23 | 


--------------------------------------------------------------------------------
/db/models/menu-command.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default (sequelize, DataTypes) => {
 3 |     var MenuCommand = sequelize.define('MenuCommand', {
 4 |         id: {
 5 |             type: DataTypes.INTEGER,
 6 |             primaryKey: true,
 7 |             autoIncrement: true,
 8 |         },
 9 |         data: {
10 |             type: DataTypes.JSON,
11 |         },
12 |         active: {
13 |             type: DataTypes.BOOLEAN,
14 |             defaultValue: false
15 |         },
16 |         order: {
17 |             type: DataTypes.INTEGER,
18 |         }
19 |     }, {
20 |         classMethods: {
21 |             associate: function(models) {
22 |             }
23 |         }
24 |     });
25 |     return MenuCommand;
26 | };
27 | 


--------------------------------------------------------------------------------
/db/models/message-event.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default (sequelize, DataTypes) => {
 3 |     var MessageEvent = sequelize.define('MessageEvent', {
 4 |         id: {
 5 |             type: DataTypes.INTEGER,
 6 |             primaryKey: true,
 7 |             autoIncrement: true
 8 |         }
 9 |     }, {
10 |         classMethods: {
11 |             associate: function(models) {
12 |                 MessageEvent.belongsTo(models.Message, {
13 |                     foreignKey: 'messageId'
14 |                 });
15 |                 MessageEvent.belongsTo(models.User, {
16 |                     foreignKey: 'userId'
17 |                 });
18 |             }
19 |         }
20 |     });
21 | 
22 |     return MessageEvent;
23 | };
24 | 


--------------------------------------------------------------------------------
/db/models/message.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default (sequelize, DataTypes) => {
 3 |     var Message = sequelize.define('Message', {
 4 |         id: {
 5 |             type: DataTypes.INTEGER,
 6 |             primaryKey: true,
 7 |             autoIncrement: true
 8 |         },
 9 |         data: DataTypes.JSON,
10 |         metadata: {
11 |             type: DataTypes.TEXT
12 |         },
13 |         unstructuredReply: {
14 |             type: DataTypes.BOOLEAN,
15 |             defaultValue: false
16 |         },
17 |         initialMessage: {
18 |             type: DataTypes.BOOLEAN,
19 |             defaultValue: false
20 |         },
21 |         surpriseMe: {
22 |             type: DataTypes.BOOLEAN,
23 |             defaultValue: false
24 |         },
25 |         repeatable: {
26 |             type: DataTypes.BOOLEAN,
27 |             defaultValue: false
28 |         },
29 |         poll: {
30 |             type: DataTypes.JSON
31 |         }
32 | 
33 |     }, {
34 |         classMethods: {
35 |             associate: function(models) {
36 |                 Message.hasMany(models.Tag, {
37 |                     as: 'Tags',
38 |                     foreignKey: 'messageId'
39 |                 });
40 |                 Message.hasMany(models.Response, {
41 |                     as: 'Responses',
42 |                     foreignKey: 'messageId'
43 |                 });
44 |                 Message.belongsToMany(models.Trigger, {
45 |                     through: 'MessageTrigger',
46 |                     foreignKey: 'messageId',
47 |                     as: 'triggers'
48 |                 });
49 |             }
50 |         }
51 |     });
52 |     return Message;
53 | };
54 | 


--------------------------------------------------------------------------------
/db/models/responses.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default (sequelize, DataTypes) => {
 3 |     const Response = sequelize.define('Response', {
 4 |         id: {
 5 |             type: DataTypes.INTEGER,
 6 |             primaryKey: true,
 7 |             autoIncrement: true
 8 |         },
 9 |         text: DataTypes.TEXT,
10 |         attachments: DataTypes.ARRAY(DataTypes.JSON),
11 |     }, {
12 |         classMethods: {
13 |             associate(models) {
14 |                 Response.belongsTo(models.User, {
15 |                     foreignKey: 'userId'
16 |                 });
17 |                 Response.belongsTo(models.Message, {
18 |                     foreignKey: 'messageId'
19 |                 });
20 |                 Response.belongsTo(models.Tag, {
21 |                     foreignKey: 'tagId'
22 |                 });
23 |             }
24 |         }
25 |     });
26 | 
27 |     return Response;
28 | }
29 | 


--------------------------------------------------------------------------------
/db/models/tag.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default (sequelize, DataTypes) => {
 3 |     var Tag = sequelize.define('Tag', {
 4 |         id: {
 5 |             type: DataTypes.INTEGER,
 6 |             primaryKey: true,
 7 |             autoIncrement: true
 8 |         },
 9 |         tag: {
10 |             type: DataTypes.STRING,
11 |             allowNull: false,
12 |             unique: 'messageTag',
13 |         },
14 |         messageId: {
15 |             type: DataTypes.INTEGER,
16 |             unique: 'messageTag'
17 |         }
18 |     }, {
19 |         classMethods: {
20 |             associate: function(models) {
21 |                 Tag.belongsToMany(models.User, {
22 |                     through: 'UserTag',
23 |                     foreignKey: 'tagId',
24 |                     as: 'users'
25 |                 });
26 |                 Tag.belongsTo(models.Message, {
27 |                     foreignKey: 'messageId'
28 |                 });
29 |                 Tag.hasMany(models.Response, {
30 |                     as: 'Responses',
31 |                     foreignKey: 'tagId'
32 |                 });
33 |             }
34 |         }
35 |     });
36 |     return Tag;
37 | };
38 | 


--------------------------------------------------------------------------------
/db/models/trigger.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default (sequelize, DataTypes) => {
 3 |     var Trigger = sequelize.define('Trigger', {
 4 |         id: {
 5 |             type: DataTypes.INTEGER,
 6 |             primaryKey: true,
 7 |             autoIncrement: true
 8 |         }
 9 |     }, {
10 |         classMethods: {
11 |             associate: function(models) {
12 |                 Trigger.belongsTo(models.Tag, {
13 |                     foreignKey: 'tagId'
14 |                 });
15 |                 Trigger.belongsTo(models.Message, {
16 |                     as: 'triggerMessage',
17 |                     foreignKey: 'triggerMessageId'
18 |                 });
19 |                 Trigger.belongsToMany(models.Message, {
20 |                     through: 'MessageTrigger',
21 |                     foreignKey: 'triggerId',
22 |                     as: 'messages'
23 |                 });
24 |             }
25 |         }
26 |     });
27 |     return Trigger;
28 | };
29 | 


--------------------------------------------------------------------------------
/db/models/users.js:
--------------------------------------------------------------------------------
 1 | 
 2 | export default (sequelize, DataTypes) => {
 3 |     const User = sequelize.define('User', {
 4 |         id: {
 5 |             type: DataTypes.STRING,
 6 |             allowNull: false,
 7 |             primaryKey: true
 8 |         },
 9 |         firstName: {
10 |             type: DataTypes.STRING
11 |         },
12 |         lastName: {
13 |             type: DataTypes.STRING
14 |         },
15 |         profilePic: {
16 |             type: DataTypes.TEXT
17 |         },
18 |         locale: {
19 |             type: DataTypes.STRING
20 |         },
21 |         timezone: {
22 |             type: DataTypes.INTEGER
23 |         },
24 |         gender: {
25 |             type: DataTypes.STRING
26 |         },
27 |         state: {
28 |             type: DataTypes.STRING,
29 |             defaultValue: 'active'
30 |         }
31 |     }, {
32 |         classMethods: {
33 |             associate(models) {
34 |                 User.hasMany(models.Response, {
35 |                     as: 'Responses',
36 |                     foreignKey: 'userId'
37 |                 });
38 |                 User.belongsToMany(models.Tag, {
39 |                     through: 'UserTag',
40 |                     foreignKey: 'userId',
41 |                     as: 'tags'
42 |                 });
43 |             }
44 |         },
45 |         instanceMethods: {
46 |             toJSON() {
47 |                 return {
48 |                     id: this.id,
49 |                 };
50 |             }
51 |         }
52 |     });
53 | 
54 |     return User;
55 | };
56 | 


--------------------------------------------------------------------------------
/db/nuke.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import db from './index';
 3 | 
 4 | db.sequelize.query(`
 5 |     DROP FUNCTION IF EXISTS response_trigger() CASCADE;
 6 |     DROP FUNCTION IF EXISTS user_trigger() CASCADE;
 7 | `).spread((results, metadata) => {
 8 | 
 9 |     db.sequelize.drop().then(() => {
10 |         console.log('NUKED!!!');
11 |     });
12 | 
13 | });
14 | 


--------------------------------------------------------------------------------
/db/scripts/init-seq-ids.sql:
--------------------------------------------------------------------------------
1 | ALTER SEQUENCE "Messages_id_seq" RESTART WITH 1000;
2 | ALTER SEQUENCE "Tags_id_seq" RESTART WITH 1000;
3 | ALTER SEQUENCE "Triggers_id_seq" RESTART WITH 1000;
4 | ALTER SEQUENCE "MenuCommands_id_seq" RESTART WITH 1000;
5 | 


--------------------------------------------------------------------------------
/db/scripts/init-triggers.sql:
--------------------------------------------------------------------------------
 1 | 
 2 | CREATE FUNCTION response_trigger() RETURNS trigger AS $$
 3 | DECLARE
 4 | BEGIN
 5 |   PERFORM pg_notify('responses', TG_TABLE_NAME || ',id,' || NEW.id );
 6 |   RETURN new;
 7 | END;
 8 | $$ LANGUAGE plpgsql;
 9 |  
10 | CREATE TRIGGER response_table_trigger AFTER INSERT ON "Responses"
11 | FOR EACH ROW EXECUTE PROCEDURE response_trigger();
12 | 
13 | -------
14 | 
15 | CREATE FUNCTION user_trigger() RETURNS trigger AS $$
16 | DECLARE
17 | BEGIN
18 |   PERFORM pg_notify('users', TG_TABLE_NAME || ',id,' || NEW.id );
19 |   RETURN new;
20 | END;
21 | $$ LANGUAGE plpgsql;
22 | 
23 | CREATE TRIGGER user_table_trigger AFTER UPDATE OF "firstName", "lastName" ON "Users"
24 | FOR EACH ROW EXECUTE PROCEDURE user_trigger();
25 | 


--------------------------------------------------------------------------------
/db/sequelize_config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   development: {
 3 |     username: process.env.PGUSER || 'buzzbot',
 4 |     password: process.env.PGPASSWORD || null,
 5 |     database: process.env.PGDB || 'buzzbot_development',
 6 |     host: process.env.PGHOST || '127.0.0.1',
 7 |     dialect: 'postgres'
 8 |   },
 9 |   test: {
10 |     username: process.env.PGUSER || 'buzzbot',
11 |     password: process.env.PGPASSWORD || null,
12 |     database: process.env.PGDB || 'buzzbot_test',
13 |     host: process.env.PGHOST || '127.0.0.1',
14 |     dialect: 'postgres'
15 |   },
16 |   production: {
17 |     use_env_variable: 'POSTGRES_DB_URL',
18 |     username: process.env.PGUSER || 'buzzbot',
19 |     password: process.env.PGPASSWORD,
20 |     database: process.env.PGDB || 'buzzbot_production',
21 |     host: process.env.PGHOST,
22 |     dialect: 'postgres',
23 |     logging: false
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/docs/architecture.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ## Architecture overview
 3 | 
 4 | ### Server (Node JS)
 5 | 
 6 | - Provides a webhook that Facebook posts messages to
 7 | - Serves up the admin dashboard (static react app)
 8 | - Provides a basic http api for creating messages and triggers, as well as sending messages
 9 | - Provides a websocket api for streaming messages, responses, and other data
10 | 
11 | ### DB (Postgres)
12 | 
13 | - Stores all bot state
14 | - Sends notifications to server when new responses are created
15 | 
16 | ### Admin dashboard (React)
17 | 
18 | - Maintains continuous connection to server over websockets
19 | - Posts over http to create new messages and triggers
20 | 


--------------------------------------------------------------------------------
/docs/assets/buzzbot-cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buzzfeed-openlab/buzzbot/288d4f2d89c13fcffa9638e7c431776c71935ea8/docs/assets/buzzbot-cover.png


--------------------------------------------------------------------------------
/docs/assets/buzzbot-messages-back.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buzzfeed-openlab/buzzbot/288d4f2d89c13fcffa9638e7c431776c71935ea8/docs/assets/buzzbot-messages-back.jpg


--------------------------------------------------------------------------------
/docs/assets/create-message-view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buzzfeed-openlab/buzzbot/288d4f2d89c13fcffa9638e7c431776c71935ea8/docs/assets/create-message-view.png


--------------------------------------------------------------------------------
/docs/assets/dashboard-view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buzzfeed-openlab/buzzbot/288d4f2d89c13fcffa9638e7c431776c71935ea8/docs/assets/dashboard-view.png


--------------------------------------------------------------------------------
/docs/assets/open-lab-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buzzfeed-openlab/buzzbot/288d4f2d89c13fcffa9638e7c431776c71935ea8/docs/assets/open-lab-logo.png


--------------------------------------------------------------------------------
/docs/assets/scan-fb-page-code.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buzzfeed-openlab/buzzbot/288d4f2d89c13fcffa9638e7c431776c71935ea8/docs/assets/scan-fb-page-code.jpg


--------------------------------------------------------------------------------
/docs/assets/search-for-fb-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buzzfeed-openlab/buzzbot/288d4f2d89c13fcffa9638e7c431776c71935ea8/docs/assets/search-for-fb-page.png


--------------------------------------------------------------------------------
/docs/assets/send-message-to-buzzbot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buzzfeed-openlab/buzzbot/288d4f2d89c13fcffa9638e7c431776c71935ea8/docs/assets/send-message-to-buzzbot.jpg


--------------------------------------------------------------------------------
/docs/assets/send-message-view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buzzfeed-openlab/buzzbot/288d4f2d89c13fcffa9638e7c431776c71935ea8/docs/assets/send-message-view.png


--------------------------------------------------------------------------------
/docs/database-structure.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ## Models
 3 | This is a work in progress, you can find the database models in `buzzbot/db/models`.
 4 | 
 5 | ### User
 6 | 
 7 | ### Message
 8 | 
 9 | ### Tag
10 | 
11 | ### Trigger
12 | 
13 | ### MessageEvent
14 | 
15 | ### Response
16 | 
17 | ### MenuCommand
18 | 


--------------------------------------------------------------------------------
/docs/installation.md:
--------------------------------------------------------------------------------
 1 | ## Development quickstart for OSX
 2 | 
 3 | ### Prereqs
 4 | 
 5 | - Postgres DB (`brew install postgres`, `initdb /usr/local/var/postgres`)
 6 | - Node JS ([see install instructions](https://nodejs.org/en/download/package-manager/#osx))
 7 | - Forward, or another https forwarding service ([try forward here](https://forwardhq.com/))
 8 | 
 9 | ### Setup BuzzBot
10 | 
11 | 1. `git clone git@github.com:buzzfeed-openlab/buzzbot.git && cd buzzbot`
12 | 2. `npm install`
13 | 
14 | ### Create a database
15 | 
16 | 1. `createuser --no-password buzzbot` (for development only!)
17 | 2. `createdb -O buzzbot buzzbot_development`
18 | 3. `postgres -D /usr/local/var/postgres`
19 | 
20 | ### Create a Facebook App and Page
21 | 
22 | 1. Instructions can be found here: https://developers.facebook.com/docs/messenger-platform/implementation#create_app_page
23 | 
24 | ### Config and run
25 | 
26 | 1. `export FB_PAGE_TOKEN=XXX` using the token for your Facebook page
27 | 2. `export VERIFY_TOKEN=XXX` using a secret string that only your app and Facebook will know (I recommend generating a UUID or something similar)
28 | 3. Make sure the user and database inside `./db/sequelize_config.js` match the user and database you created
29 | 4. `npm run db:init` (Creates fixtures and populates db. Done only once, manually!)
30 | 5. `npm run init` (Webpack build. While developing this will be done automatically whenever the client code changes, but in production this needs to be run for every build.)
31 | 6. `npm start`
32 | 
33 | ### Verify Facebook webhook
34 | 
35 | 1. Start Forward (or your https forwarding service) and create a url that forwards to `localhost:8000`
36 | 2. Go to your Facebook app dashboard (https://developers.facebook.com/apps/)
37 | 3. Configure a webhook with url from your forwarding service + `/hook/` and the `verifyToken` specified in `./config.js`
38 | 4. Verify and save
39 | 
40 | 
41 | ### Interact with the bot!
42 | 
43 | 1. Pull up the admin dashboard at `localhost:8000/admin`
44 | 2. Start a conversation with your bot by visiting your Facebook page and clicking "message" in the top right
45 | 
46 | 
47 | ## Overview of npm commands
48 | 
49 | - `npm start`: Run buzzbot
50 | - `npm run init`: Do a Webpack build of the admin dashboard code.
51 | - `npm run db:nuke`: Drop all tables and data in the db
52 | - `npm run db:init`: Initialize db using the models in `./db/models` and create fixtures specified in `./db/fixtures`
53 | - `npm run migrate`: Run all migrations
54 | - `npm run migration:create`: Create a new migration
55 | - `npm run migration:undo`: Undo just the last migration
56 | - `npm run migration:undo:all`: Undo all migrations
57 | 
58 | Note that there are commands for creating and running migrations, but that the existing migrations are no longer used. All models and relations are created using `sequelize.sync()`. See [here](https://stackoverflow.com/questions/21105748/sequelize-js-how-to-use-migrations-and-sync) for how that could change, but it hasn't happened yet.
59 | 


--------------------------------------------------------------------------------
/docs/overview.md:
--------------------------------------------------------------------------------
 1 | # BuzzBot
 2 | 
 3 | BuzzBot is an experiment, designed to help journalists connect with people on the ground at events. It acts as a Facebook Messenger bot plus a dashboard that journalists can use to send messages to groups of users and view aggregated responses.
 4 | 
 5 | 
 6 | ## Facebook Messenger bot
 7 | 
 8 | The user facing side of BuzzBot is a Facebook Messenger bot that plugs into a Facebook Page. Users search for the page:
 9 | 
10 | <img src="./assets/search-for-fb-page.png" alt="Search for FB Page" width="256"></img>
11 | 
12 | Or scan the page's Messenger Code:
13 | 
14 | <img src="./assets/scan-fb-page-code.jpg" alt="Scan FB Page Code" width="256"></img>
15 | 
16 | And then start a conversation with BuzzBot by pressing "Get Started" or by sending a message:
17 | 
18 | <img src="./assets/send-message-to-buzzbot.jpg" alt="Send message to BuzzBot" width="256"></img>
19 | 
20 | BuzzBot will then message them back and start a conversation!
21 | 
22 | <img src="./assets/buzzbot-messages-back.jpg" alt="BuzzBot messages back" width="256"></img>
23 | 
24 | 
25 | ## Admin interface
26 | 
27 | The admin interface for BuzzBot is broken up into 3 sections: the dashboard, the interface for creating messages, and the interface for sending messages.
28 | 
29 | ### Dashboard
30 | 
31 | <img src="./assets/dashboard-view.png" alt="Dashboard view" width="512"></img>
32 | 
33 | The dashboard is where you can view all of the incoming responses from users. Lists of responses are grouped together and images + video content are rendered as you'd expect.
34 | 
35 | 
36 | ### Create Messages
37 | 
38 | <img src="./assets/create-message-view.png" alt="Create message view" width="512"></img>
39 | 
40 | The create message screen is where you can create messages to send out to users, and link messages together using triggers.
41 | 
42 | ### Send Messages
43 | 
44 | <img src="./assets/send-message-view.png" alt="Send message view" width="512"></img>
45 | 
46 | The send message screen is where you can send out messages to groups of users who responded with specific tags.
47 | 


--------------------------------------------------------------------------------
/etc/init/buzzbot.conf:
--------------------------------------------------------------------------------
 1 | description "BuzzBot"
 2 | author "@WestleyArgentum"
 3 | 
 4 | start on started mountall
 5 | stop on shutdown
 6 | 
 7 | # automatically respawn:
 8 | respawn
 9 | respawn limit 99 5
10 | 
11 | script
12 | 
13 |     export HOME="/root"
14 |     cd /opt/buzzfeed/buzzbot/
15 |     exec npm start >> /var/log/buzzfeed/buzzbot.log 2>&1
16 | 
17 | end script
18 | 
19 | post-start script
20 | 
21 |    # optionally put a script here that will notifiy you node has (re)started
22 |    # /root/bin/hoptoad.sh "node.js has started!"
23 | 
24 | end script
25 | 
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "buzzbot",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "buzzbot.js",
 6 |   "scripts": {
 7 |     "start": "npm run babel-node -- ./buzzbot.js",
 8 |     "babel-node": "babel-node --presets es2015 --ignore node_modules",
 9 |     "init": "webpack",
10 |     "db:init": "npm run babel-node -- ./db/init.js",
11 |     "db:nuke": "npm run babel-node -- ./db/nuke.js",
12 |     "sequelize": "sequelize",
13 |     "migrate": "npm run sequelize -- db:migrate",
14 |     "migration:create": "npm run sequelize -- migration:create",
15 |     "migrate:undo": "npm run sequelize -- db:migrate:undo",
16 |     "migrate:undo:all": "npm run sequelize -- db:migrate:undo:all",
17 |     "test": "echo \"Error: no test specified\" && exit 1"
18 |   },
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git+https://github.com/buzzfeed-openlab/buzzbot.git"
22 |   },
23 |   "author": "Westley Argentum Hennigh-Palermo",
24 |   "license": "MIT",
25 |   "bugs": {
26 |     "url": "https://github.com/buzzfeed-openlab/buzzbot/issues"
27 |   },
28 |   "homepage": "https://github.com/buzzfeed-openlab/buzzbot#readme",
29 |   "dependencies": {
30 |     "axios": "^0.12.0",
31 |     "basic-auth": "^1.0.4",
32 |     "body-parser": "^1.15.0",
33 |     "express": "^4.13.4",
34 |     "node-uuid": "^1.4.7",
35 |     "pg": "^4.5.5",
36 |     "pg-hstore": "^2.3.2",
37 |     "react-addons-update": "^15.1.0",
38 |     "react-bootstrap": "^0.29.4",
39 |     "react-html5video": "^1.2.9",
40 |     "react-list": "^0.7.18",
41 |     "react-select": "^1.0.0-beta13",
42 |     "request": "^2.72.0",
43 |     "sequelize": "^3.23.1",
44 |     "sequelize-cli": "^2.4.0",
45 |     "sequelize-fixtures": "^0.5.3",
46 |     "socket.io": "^1.4.6",
47 |     "socket.io-client": "^1.4.8"
48 |   },
49 |   "devDependencies": {
50 |     "babel-cli": "^6.8.0",
51 |     "babel-loader": "^6.2.4",
52 |     "babel-plugin-add-module-exports": "^0.2.1",
53 |     "babel-plugin-react-html-attrs": "^2.0.0",
54 |     "babel-plugin-transform-class-properties": "^6.9.0",
55 |     "babel-plugin-transform-decorators-legacy": "^1.3.4",
56 |     "babel-preset-es2015": "^6.9.0",
57 |     "babel-preset-react": "^6.5.0",
58 |     "babel-preset-stage-0": "^6.5.0",
59 |     "css-loader": "^0.23.1",
60 |     "react": "^15.1.0",
61 |     "react-dom": "^15.1.0",
62 |     "react-router": "^2.4.1",
63 |     "style-loader": "^0.13.1",
64 |     "webpack": "^1.13.1",
65 |     "webpack-dev-server": "^1.14.1",
66 |     "webpack-hot-middleware": "^2.10.0"
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/commands.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Controller } from '../db';
 3 | import { sendMessage } from './messenger-interface';
 4 | 
 5 | function pauseForUser(token, event, user) {
 6 |     Controller.updateUser(user.id, { state: 'paused' }).then((user) => {
 7 |         // the pause message has id 50
 8 |         Controller.getMessage(50).then((message) => {
 9 |             sendMessage(token, user.id, message);
10 |         });
11 |     });
12 | }
13 | 
14 | function resumeForUser(token, event, user) {
15 |     Controller.updateUser(user.id, { state: 'active' }).then((user) => {
16 |         // the resume message has id 51
17 |         Controller.getMessage(51).then((message) => {
18 |             sendMessage(token, user.id, message);
19 |         });
20 |     });
21 | }
22 | 
23 | function getTheLatest(token, event, user) {
24 |     Controller.getMessage(53).then((message) => {
25 |         sendMessage(token, user.id, message);
26 |     });
27 | }
28 | 
29 | function surpriseForUser(token, event, user) {
30 |     Controller.getAllSurpriseMeMessages().then((messages) => {
31 |         var messageIds = messages.map((m) => m.id);
32 | 
33 |         Controller.getMessageEventsForUserAndMessages(user.id, messageIds).then((messageEvents) => {
34 |             const messageEventIds = new Set(messageEvents.map((m) => m.messageId));
35 | 
36 |             // filter messages so that it doesn't contain ones the user has seen
37 |             messages = messages.filter((message) => !messageEventIds.has(message.id));
38 | 
39 |             if (messages.length) {
40 |                 // pick any of these messages to send
41 |                 const randomMessage = messages[Math.floor(Math.random() * messages.length)];
42 |                 sendMessage(token, user.id, randomMessage);
43 | 
44 |             } else {
45 |                 Controller.getMessage(52).then((message) => {
46 |                     sendMessage(token, user.id, message);
47 |                 });
48 |             }
49 |         });
50 |     });
51 | }
52 | 
53 | export default {
54 |     'PAUSE': pauseForUser,
55 |     'STOP': pauseForUser,
56 |     'UNSUBSCRIBE': pauseForUser,
57 |     'QUIT': pauseForUser,
58 |     'STOP MESSAGING ME': pauseForUser,
59 |     'PLEASE STOP MESSAGING ME': pauseForUser,
60 |     'PLEASE STOP': pauseForUser,
61 | 
62 |     'RESUME': resumeForUser,
63 |     'START': resumeForUser,
64 | 
65 |     'WHAT\'S THE LATEST?': getTheLatest,
66 |     'WHATS THE LATEST?': getTheLatest,
67 |     'WHAT\'S THE LATEST': getTheLatest,
68 |     'WHATS THE LATEST': getTheLatest,
69 |     'UPDATE': getTheLatest,
70 |     'WHAT\'S UP?': getTheLatest,
71 |     'WHATS UP?': getTheLatest,
72 |     'WHAT\'S UP': getTheLatest,
73 |     'WHATS UP': getTheLatest,
74 |     'LATEST': getTheLatest,
75 |     'LATEST?': getTheLatest,
76 | 
77 |     'SURPRISE': surpriseForUser,
78 |     'SURPRISE ME': surpriseForUser,
79 |     'SURPRISE!': surpriseForUser,
80 |     'SURPRISE ME!': surpriseForUser,
81 |     'SURPRISE ME': surpriseForUser,
82 |     'SUPRISE': surpriseForUser,
83 |     'SUPRISE ME': surpriseForUser,
84 |     'SUPRISE!': surpriseForUser,
85 |     'SUPRISE ME!': surpriseForUser,
86 | };
87 | 


--------------------------------------------------------------------------------
/src/messenger-interface.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import request from 'request';
  3 | import { Controller } from '../db';
  4 | 
  5 | import config from '../config.js';
  6 | 
  7 | export function sendMessage(token, recipient, message, cb) {
  8 |     var messageData = JSON.parse(message.data);
  9 | 
 10 |     // special case for template messages so that we have more info when we get
 11 |     // a postback from facebook
 12 |     if (messageData.attachment && messageData.attachment.payload && messageData.attachment.payload.buttons) {
 13 |         var buttons = messageData.attachment.payload.buttons;
 14 |         for (var i = 0; i < buttons.length; ++i) {
 15 |             buttons[i].payload = message.id + ':' + buttons[i].payload;
 16 |         }
 17 |     }
 18 | 
 19 |     return sendMessageData(token, recipient, message.id, messageData, message.repeatable, cb);
 20 | }
 21 | 
 22 | export function sendMessageData(token, recipient, messageId, messageData, repeatable, cb) {
 23 | 
 24 |     function internalSend() {
 25 |         request({
 26 |             url: config.baseFbUrl + '/me/messages',
 27 |             qs: { access_token: token },
 28 |             method: 'POST',
 29 |             json: {
 30 |                 recipient: { id: recipient },
 31 |                 message: messageData,
 32 |             }
 33 | 
 34 |         }, function(error, response, body) {
 35 |             if (error) {
 36 |                 console.log('ERROR sending message: ', error);
 37 |             } else if (body && body.error) {
 38 |                 console.log('ERROR: ', body.error);
 39 |             } else {
 40 |                 console.log('INFO: send message response code', response.statusCode)
 41 |                 // record that we sent the user this message
 42 |                 Controller.createMessageEvent(recipient, messageId);
 43 |             }
 44 | 
 45 |             cb && cb(error, response, body);
 46 |         });
 47 |     }
 48 | 
 49 |     if (repeatable) {
 50 |         internalSend();
 51 | 
 52 |     } else {
 53 |         Controller.getMessageEventsForUserAndMessages(recipient, [ messageId ]).then((messageEvents) => {
 54 |             if (messageEvents.length) {
 55 |                 return console.log('NOT SENDING because user: ' + recipient + ' has already received: ' + messageId);
 56 |             }
 57 | 
 58 |             internalSend();
 59 |         });
 60 |     }
 61 | }
 62 | 
 63 | export function sendMessagesSequentially(token, recipient, messages) {
 64 |     if (!messages.length) {
 65 |         return;
 66 |     }
 67 | 
 68 |     const message = messages.shift();
 69 | 
 70 |     sendMessage(
 71 |         token,
 72 |         recipient,
 73 |         message,
 74 |         sendMessagesSequentially.bind(null, token, recipient, messages)
 75 |     );
 76 | }
 77 | 
 78 | export function fetchUserInfo(token, userId, attemptsToMake = 5) {
 79 |     const userInfoUrl = `${config.baseFbUrl}/${userId}?fields=first_name,last_name,profile_pic,locale,timezone,gender&access_token=${token}`
 80 | 
 81 |     request(userInfoUrl, function(err, response, body) {
 82 |         if (err) {
 83 |             console.log('ERROR fetching user info for ' + userId + ', attemptsRemaining ' + attemptsToMake + ': ', err);
 84 |             if (attemptsToMake >= 1) {
 85 |                 fetchUserInfo(token, userId, attemptsToMake - 1);
 86 |             }
 87 |             return;
 88 |         }
 89 | 
 90 |         if (!body) {
 91 |             console.log('ERROR no body when fetching user info for ' + userId + ', attemptsRemaining ' + attemptsToMake);
 92 | 
 93 |             if (attemptsToMake >= 1) {
 94 |                 fetchUserInfo(token, userId, attemptsToMake - 1);
 95 |             }
 96 |             return;
 97 |         }
 98 | 
 99 |         try {
100 |             body = JSON.parse(body);
101 | 
102 |             const props = {
103 |                 firstName: body.first_name,
104 |                 lastName: body.last_name,
105 |                 profilePic: body.profile_pic,
106 |                 locale: body.locale,
107 |                 timezone: body.timezone,
108 |                 gender: body.gender
109 |             };
110 | 
111 |             Controller.updateUser(userId, props);
112 | 
113 |         } catch(err) {
114 |             console.log('ERROR json parse error fetching info for ' + userId + ', attemptsRemaining ' + attemptsToMake + ': ', err);
115 | 
116 |             if (attemptsToMake >= 1) {
117 |                 fetchUserInfo(token, userId, attemptsToMake - 1);
118 |             }
119 |             return;
120 |         }
121 |     });
122 | }
123 | 
124 | export function markSeen(token, userId) {
125 |     request({
126 |             url: config.baseFbUrl + '/me/messages',
127 |             qs: { access_token: token },
128 |             method: 'POST',
129 |             json: {
130 |                 recipient: { id: userId },
131 |                 sender_action: 'mark_seen'
132 |             }
133 | 
134 |         }, function(error, response, body) {
135 |             if (error) {
136 |                 console.log('ERROR marking seen: ', error);
137 |             } else if (body && body.error) {
138 |                 console.log('ERROR marking seen: ', body.error);
139 |             } else {
140 |                 console.log('INFO: mark seen response code ', response.statusCode);
141 |             }
142 |         });
143 | }
144 | 
145 | export function updatePersistentMenu(token) {
146 |     Controller.getActiveMenuCommands().then((commands) => {
147 |         // sort the commands acording to their order
148 |         commands.sort((c1, c2) => {
149 |             return c1.order - c2.order;
150 |         });
151 | 
152 |         const callToActions = commands.map((c) => JSON.parse(c.data));
153 | 
154 |         request({
155 |             url: config.baseFbUrl + '/me/thread_settings',
156 |             qs: { access_token: token },
157 |             method: 'POST',
158 |             json: {
159 |                 setting_type: 'call_to_actions',
160 |                 thread_state: 'existing_thread',
161 |                 call_to_actions: callToActions
162 |             }
163 |         }, function(error, response, body) {
164 |             if (error) {
165 |                 console.log('ERROR marking seen: ', error);
166 |             } else if (body && body.error) {
167 |                 console.log('ERROR: ', body.error);
168 |             }
169 | 
170 |             console.log(body);
171 |         });
172 |     });
173 | }
174 | 
175 | export function turnOnGetStartedButton(token) {
176 |     request({
177 |         url: config.baseFbUrl + '/me/thread_settings',
178 |         qs: { access_token: token },
179 |         method: 'POST',
180 |         json: {
181 |             setting_type: 'call_to_actions',
182 |             thread_state: 'new_thread',
183 |             call_to_actions: [
184 |                 {
185 |                     "payload":"command:get-started"
186 |                 }
187 |             ]
188 |         }
189 |     }, function(error, response, body) {
190 |         if (error) {
191 |             console.log('ERROR turning on "get started" button: ', error);
192 |         } else if (body && body.error) {
193 |             console.log('ERROR: ', body.error);
194 |         }
195 | 
196 |         console.log(body);
197 |     });
198 | }
199 | 


--------------------------------------------------------------------------------
/test/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | artillery_report_*
3 | 


--------------------------------------------------------------------------------
/test/README.md:
--------------------------------------------------------------------------------
 1 | ## Load Testing
 2 | 
 3 | There are 3 main pieces:
 4 | 
 5 | 1. The deployment your testing (the load balancer, node servers, and pg db)
 6 | 2. The mock FB server (`buzzbot/test/test-server.js`)
 7 | 3. The load test script (`buzzbot/test/load-test.json`)
 8 | 
 9 | 
10 | ### Initial setup
11 | 
12 | #### Start the mock FB server
13 | 
14 | - clone `buzzbot`, `cd buzzbot`, `npm install`
15 | - `sudo node ./test/test-server.js` (it listens on 80 by default)
16 | - make note of the mock FB url
17 | 
18 | #### Configure the buzzbot deployment
19 | 
20 | - make sure `FB_URL` is set to the mock FB url
21 | 
22 | #### Prepare to run the load test script (on your local machine)
23 | 
24 | - `npm install -g artillery`
25 | - configure env variables `PGUSER`, `PGPASSWORD`, `PGDB`, `PGHOST` (you'll need to reset data in the db, having these set makes that easy)
26 | - change the `target` at the top of `buzzbot/test/load-test.json` to be the deployment
27 | 
28 | 
29 | ### Run the test
30 | 
31 | - `cd buzzbot`
32 | - `npm run db:nuke`
33 | - `npm run db:init`
34 | - `artillery run ./test/load-test.json`
35 | 


--------------------------------------------------------------------------------
/test/load-test.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "config": {
  3 |     "target": "BUZZBOT_URL",
  4 |     "phases": [
  5 |       {"duration": 30, "arrivalRate": 50},
  6 |       {"duration": 30, "arrivalRate": 50, "rampTo": 500},
  7 |       {"duration": 60, "arrivalRate": 500}
  8 |     ],
  9 |     "payload": {
 10 |       "path": "./users.csv",
 11 |       "fields": ["userId"],
 12 |       "order": "sequence"
 13 |     }
 14 |   },
 15 |   "scenarios": [
 16 |     {
 17 |       "name": "send a message",
 18 |       "flow": [
 19 |         {
 20 |           "post": {
 21 |             "url": "/hook",
 22 |             "json": {
 23 |               "object": "page",
 24 |               "entry": [
 25 |                 {
 26 |                   "id": "253345735019636",
 27 |                   "messaging": [
 28 |                     {
 29 |                       "sender": { "id": "{{ userId }}" },
 30 |                       "recipient": { "id": "253345735019636" },
 31 |                       "postback": { "payload": "command:get-started" }
 32 |                     }
 33 |                   ]
 34 |                 }
 35 |               ]
 36 |             }
 37 |           }
 38 |         },
 39 |         { "think": 8 },
 40 |         {
 41 |           "post": {
 42 |             "url": "/hook",
 43 |             "json": {
 44 |               "object": "page",
 45 |               "entry": [
 46 |                 {
 47 |                   "id": "253345735019636",
 48 |                   "messaging": [
 49 |                     {
 50 |                       "sender": { "id": "{{ userId }}" },
 51 |                       "recipient": { "id": "253345735019636" },
 52 |                       "message": {
 53 |                         "text": "HIIIIIIII from {{ userId }}"
 54 |                       }
 55 |                     }
 56 |                   ]
 57 |                 }
 58 |               ]
 59 |             }
 60 |           }
 61 |         }
 62 |       ]
 63 |     },
 64 | 
 65 | 
 66 |     {
 67 |       "name": "surprise me twice",
 68 |       "flow": [
 69 |         {
 70 |           "post": {
 71 |             "url": "/hook",
 72 |             "json": {
 73 |               "object": "page",
 74 |               "entry": [
 75 |                 {
 76 |                   "id": "253345735019636",
 77 |                   "messaging": [
 78 |                     {
 79 |                       "sender": { "id": "{{ userId }}" },
 80 |                       "recipient": { "id": "253345735019636" },
 81 |                       "postback": { "payload": "command:get-started" }
 82 |                     }
 83 |                   ]
 84 |                 }
 85 |               ]
 86 |             }
 87 |           }
 88 |         },
 89 |         { "think": 8 },
 90 |         {
 91 |           "post": {
 92 |             "url": "/hook",
 93 |             "json": {
 94 |               "object": "page",
 95 |               "entry": [
 96 |                 {
 97 |                   "id": "253345735019636",
 98 |                   "messaging": [
 99 |                     {
100 |                       "sender": { "id": "{{ userId }}" },
101 |                       "recipient": { "id": "253345735019636" },
102 |                       "postback": { "payload": "command:surprise" }
103 |                     }
104 |                   ]
105 |                 }
106 |               ]
107 |             }
108 |           }
109 |         },
110 |         { "think": 8 },
111 |         {
112 |           "post": {
113 |             "url": "/hook",
114 |             "json": {
115 |               "object": "page",
116 |               "entry": [
117 |                 {
118 |                   "id": "253345735019636",
119 |                   "messaging": [
120 |                     {
121 |                       "sender": { "id": "{{ userId }}" },
122 |                       "recipient": { "id": "253345735019636" },
123 |                       "message": {
124 |                         "text": "surprise me!"
125 |                       }
126 |                     }
127 |                   ]
128 |                 }
129 |               ]
130 |             }
131 |           }
132 |         }
133 |       ]
134 |     },
135 | 
136 | 
137 |     {
138 |       "name": "answer intro questions and poll",
139 |       "flow": [
140 |         {
141 |           "post": {
142 |             "url": "/hook",
143 |             "json": {
144 |               "object": "page",
145 |               "entry": [
146 |                 {
147 |                   "id": "253345735019636",
148 |                   "messaging": [
149 |                     {
150 |                       "sender": { "id": "{{ userId }}" },
151 |                       "recipient": { "id": "253345735019636" },
152 |                       "postback": { "payload": "command:get-started" }
153 |                     }
154 |                   ]
155 |                 }
156 |               ]
157 |             }
158 |           }
159 |         },
160 |         { "think": 8 },
161 |         {
162 |           "post": {
163 |             "url": "/hook",
164 |             "json": {
165 |               "object": "page",
166 |               "entry": [
167 |                 {
168 |                   "id": "253345735019636",
169 |                   "messaging": [
170 |                     {
171 |                       "sender": { "id": "{{ userId }}" },
172 |                       "recipient": { "id": "253345735019636" },
173 |                       "postback": { "payload": "301:at-convention" }
174 |                     }
175 |                   ]
176 |                 }
177 |               ]
178 |             }
179 |           }
180 |         },
181 |         { "think": 8 },
182 |         {
183 |           "post": {
184 |             "url": "/hook",
185 |             "json": {
186 |               "object": "page",
187 |               "entry": [
188 |                 {
189 |                   "id": "253345735019636",
190 |                   "messaging": [
191 |                     {
192 |                       "sender": { "id": "{{ userId }}" },
193 |                       "recipient": { "id": "253345735019636" },
194 |                       "postback": { "payload": "110:following-from-cleveland" }
195 |                     }
196 |                   ]
197 |                 }
198 |               ]
199 |             }
200 |           }
201 |         },
202 |         { "think": 8 },
203 |         {
204 |           "post": {
205 |             "url": "/hook",
206 |             "json": {
207 |               "object": "page",
208 |               "entry": [
209 |                 {
210 |                   "id": "253345735019636",
211 |                   "messaging": [
212 |                     {
213 |                       "sender": { "id": "{{ userId }}" },
214 |                       "recipient": { "id": "253345735019636" },
215 |                       "postback": { "payload": "121:protesting-convention" }
216 |                     }
217 |                   ]
218 |                 }
219 |               ]
220 |             }
221 |           }
222 |         },
223 |         { "think": 8 },
224 |         {
225 |           "post": {
226 |             "url": "/hook",
227 |             "json": {
228 |               "object": "page",
229 |               "entry": [
230 |                 {
231 |                   "id": "253345735019636",
232 |                   "messaging": [
233 |                     {
234 |                       "sender": { "id": "{{ userId }}" },
235 |                       "recipient": { "id": "253345735019636" },
236 |                       "postback": { "payload": "141:protesting-wont-send-media" }
237 |                     }
238 |                   ]
239 |                 }
240 |               ]
241 |             }
242 |           }
243 |         },
244 |         { "think": 18 },
245 |         {
246 |           "post": {
247 |             "url": "/hook",
248 |             "json": {
249 |               "object": "page",
250 |               "entry": [
251 |                 {
252 |                   "id": "253345735019636",
253 |                   "messaging": [
254 |                     {
255 |                       "sender": { "id": "{{ userId }}" },
256 |                       "recipient": { "id": "253345735019636" },
257 |                       "message": {
258 |                         "text": "🐯"
259 |                       }
260 |                     }
261 |                   ]
262 |                 }
263 |               ]
264 |             }
265 |           }
266 |         }
267 |       ]
268 |     }
269 | 
270 | 
271 | 
272 |   ]
273 | }
274 | 


--------------------------------------------------------------------------------
/test/test-server.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var path = require('path'),
 3 |     express = require('express'),
 4 |     bodyParser = require('body-parser');
 5 | 
 6 | 
 7 | var app = express();
 8 | 
 9 | // Middleware -------
10 | 
11 | // body parsing
12 | app.use(bodyParser.json());
13 | app.use(bodyParser.urlencoded({ extended: false }));
14 | 
15 | // error handling
16 | app.use(function (error, req, res, next) {
17 |     if (error) {
18 |         console.log('ERROR: ', error);
19 |     } else {
20 |         next();
21 |     }
22 | });
23 | 
24 | // -------
25 | 
26 | // Routes -------
27 | 
28 | app.get('/:userId', function (req, res) {
29 |     var userId = req.params.userId;
30 | 
31 |     console.log('USER INFO REQUEST', userId);
32 |     return res.status(200).json({
33 |         first_name: 'user',
34 |         last_name: userId,
35 |         profile_pic: 'https://i.imgur.com/5tCHDqml.jpg',
36 |         locale: 'earth',
37 |         timezone: 1,
38 |         gender: 'n/a'
39 |     });
40 | });
41 | 
42 | app.all('*', function (req, res) {
43 |     console.log(req.body);
44 |     return res.sendStatus(200);
45 | });
46 | 
47 | // -------
48 | 
49 | console.log('listening...');
50 | app.listen(9000);
51 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var debug = process.env.NODE_ENV !== "production";
 2 | var webpack = require('webpack');
 3 | var path = require('path');
 4 | 
 5 | module.exports = {
 6 |   context: path.join(__dirname, "client"),
 7 |   devtool: debug ? "inline-sourcemap" : null,
 8 |   entry: "./js/index.js",
 9 |   module: {
10 |     loaders: [
11 |       {
12 |         test: /\.jsx?$/,
13 |         exclude: /node_modules/,
14 |         loader: 'babel-loader',
15 |         query: {
16 |           presets: ['react', 'es2015', 'stage-0'],
17 |           plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
18 |         }
19 |       },
20 |       { test: /\.css$/, loader: "style-loader!css-loader" }
21 |     ]
22 |   },
23 |   output: {
24 |     path: __dirname + "/client/",
25 |     filename: "index.min.js",
26 |     publicPath: '/admin'
27 |   },
28 |   plugins: debug ? [] : [
29 |     new webpack.optimize.DedupePlugin(),
30 |     new webpack.optimize.OccurenceOrderPlugin(),
31 |     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
32 |   ],
33 | };


--------------------------------------------------------------------------------