First commit

.gitignore

@@ -0,0 +1,3 @@
+*.swp
+node_modules
+npm-debug.log

.jshintrc

@@ -0,0 +1,5 @@
+{
+  "esnext": true,
+  "node": true,
+  "unused": true
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Mauro Pompilio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,21 @@
+# Gitter React
+
+A mobile Gitter client using isomorphic React.
+
+## WIP
+
+I'm building this as an exercise to learn some React. Feel free to contribute tho :+1:
+
+## Getting Started
+
+You'll need to create an app at https://developer.gitter.im and expose your credentials through env vars:
+
+- `export OAUTH_KEY=<your_app_key>`
+- `export OAUTH_SECRET=<your_app_secret>`
+
+- Start the server: `npm start`
+- Build the app+css: `npm run webpack`
+
+## License
+
+MIT

lib/faye.js

@@ -0,0 +1,74 @@
+/* jshint node:true, unused:true */
+
+var Faye = require('gitter-faye');
+//var EventEmitter = require('eventemitter3');
+
+// Authentication extension for Faye
+var ClientAuthExt = function(opts) {
+  this.token = opts.token;
+  this.clientType = opts.clientType;
+};
+
+ClientAuthExt.prototype.outgoing = function(message, callback) {
+  if (message.channel == '/meta/handshake') {
+    if (!message.ext) message.ext = {};
+    if (this.clientType) message.ext.client = this.clientType;
+    message.ext.token = this.token;
+  }
+
+  callback(message);
+};
+
+// Snapshot extension for Faye
+var SnapshotExt = function(opts) {
+  this.subscriptions = opts.subscriptions;
+};
+
+SnapshotExt.prototype.incoming = function(message, callback) {
+  if(message.channel == '/meta/subscribe' && message.ext && message.ext.snapshot) {
+    var sub = this.subscriptions[message.subscription];
+    if (sub) sub.emitter.emit('snapshot', message.ext.snapshot);
+  }
+
+  callback(message);
+};
+
+// Client wrapper
+var FayeClient = function(token, opts) {
+  opts = opts || {};
+  var host = opts.host || 'https://ws.gitter.im/faye';
+
+  this.subscriptions = {};
+
+  this.client = new Faye.Client(host, {timeout: 60, retry: 5, interval: 1});
+  this.client.addExtension(new ClientAuthExt({token: token, clientType: opts.clientType}));
+  this.client.addExtension(new SnapshotExt({subscriptions: this.subscriptions}));
+};
+
+//FayeClient.prototype.subscribeTo = function(resource, eventName) {
+//  if (this.subscriptions[resource]) return this.subscriptions[resource].emitter;
+//
+//  var emitter = new EventEmitter();
+//  var subscription = this.client.subscribe(resource, function(msg) {
+//    emitter.emit(eventName, msg);
+//  });
+//
+//  this.subscriptions[resource] = {
+//    eventName:      eventName,
+//    emitter:        emitter,
+//    subscription:   subscription
+//  };
+//
+//  return emitter;
+//};
+
+FayeClient.prototype.disconnect = function() {
+  var self = this;
+
+  Object.keys(this.subscriptions).forEach(function(sub) {
+    self.subscriptions[sub].subscription.cancel();
+    self.subscriptions[sub].emitter.removeAllListeners();
+  });
+};
+
+module.exports = FayeClient;

lib/gitter.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var debug = require('debug')('gitter');
+var https = require('https');
+var qs    = require('qs');
+
+var Client = function(token) {
+  this.token = token;
+};
+
+['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].forEach(function(method) {
+  Client.prototype[method.toLowerCase()] = function(path, query, body) {
+    return this.request(method, path, query, body);
+  };
+});
+
+Client.prototype.request = function(method, path, query, body) {
+  debug(method, path, query, body);
+
+  path = encodeURI(path);
+
+  var headers = {
+    'User-Agent': 'Gitter Client',
+    'Accept'    : 'application/json'
+  };
+
+  if (this.token) {
+    headers.Authorization = `Bearer ${this.token}`;
+  } else {
+    query = query || {};
+    query.client_id = process.env.GHCLIENT;
+    query.client_secret = process.env.GHSECRET;
+  }
+
+  if (body) headers['Content-Type'] = 'application/json';
+
+  var options = {
+    hostname: 'api.gitter.im',
+    port:     443,
+    method:   method,
+    path:     query ? path + '?' + qs.stringify(query) : path,
+    headers:  headers
+  };
+
+  return new Promise(function(resolve, reject) {
+    var responseHandler = function(res) {
+      res.setEncoding('utf8');
+
+      var data = '';
+      res.on('data', chunk => data += chunk );
+
+      res.on('end', () => {
+        debug(res.statusCode + ' ' + method + ' ' + options.path);
+        try { resolve(JSON.parse(data)); } catch(err) { reject('Invalid JSON'); }
+      });
+
+
+      if ([200,201].indexOf(res.statusCode) === -1) {
+        return reject(new Error(res.statusCode));
+      }
+    };
+
+    var req = https.request(options, responseHandler);
+    req.on('error', reject);
+    if (body) req.write(JSON.stringify(body));
+    req.end();
+  });
+};
+
+module.exports = Client;

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "gitter-react",
+  "version": "0.1.0",
+  "description": "Isomorphic React Gitter Client",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "webpack": "webpack --progress --colors --watch -d",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "babel": "^5.2.16",
+    "body-parser": "^1.12.3",
+    "compression": "^1.4.3",
+    "cookie-session": "^1.1.0",
+    "css-loader": "^0.12.0",
+    "debug": "^2.1.3",
+    "ejs": "^2.3.1",
+    "express": "^4.12.3",
+    "extract-text-webpack-plugin": "^0.8.0",
+    "gitter-faye": "^1.1.0-h",
+    "jsx-loader": "^0.13.2",
+    "less": "^2.5.0",
+    "less-loader": "^2.2.0",
+    "oauth": "^0.9.12",
+    "oauth2": "0.0.1",
+    "qs": "^2.4.1",
+    "react": "^0.13.2",
+    "react-tools": "^0.13.2",
+    "serve-static": "^1.9.2",
+    "style-loader": "^0.12.1",
+    "superagent": "^1.2.0",
+    "underscore": "^1.8.3"
+  },
+  "devDependencies": {
+    "nodemon": "^1.3.7",
+    "webpack": "^1.9.4"
+  }
+}

public/app.less

@@ -0,0 +1,120 @@
+body {
+  font-family: 'Source Sans Pro', sans-serif !important;
+  font-size: 16px !important;
+  color: #333;
+}
+
+img { 
+  max-width: 100%;
+}
+
+
+.nav {
+  .btn {
+    background: white;
+    padding: 10px;
+    border-radius: 50px;
+    cursor: pointer;
+    font-size: 1.5em;
+  }
+
+  .menu {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+  }
+
+  h1 {
+    position: fixed;
+    top: 10px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    padding: 10px;
+    width: 150px; 
+    color: white;
+    font-weight: bold;
+    background: #333;
+    border-radius: 5px;
+    text-align: center;
+  }
+}
+
+.messages {
+  padding-bottom: 60px;
+}
+
+.message {
+  margin-bottom: 10px;
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50px;
+    margin: 0px 10px;
+    float: left;
+  }
+
+  .html {
+    float: left;
+    margin-top: 10px;
+    max-width: 80%;
+    word-wrap: break-word;
+  }
+
+  .clear {
+    clear: both;
+  }
+}
+
+.hidden-menu, .hidden {
+  display: none;
+}
+
+.visible {
+  display: block;
+}
+
+.visible-menu {
+  cursor: pointer;
+  position: fixed;
+  background: #333;
+  opacity: 0.95;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  z-index: 2;
+}
+
+.roster-item {
+  margin: 20px 10px;
+  a {
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 1.2em;
+    color: white;
+  }
+}
+
+.input-textarea {
+  position: fixed;
+  bottom: 10px;
+  left: 10px;
+  width: 250px;
+  border: 1px solid #CCC;
+  border-radius: 5px;
+  font-size: 1em;
+  box-shadow: none !important;
+  -webkit-appearance: none;
+}
+
+.input-submit {
+  position: fixed;
+  bottom: 5px;
+  right: 10px;
+  font-size: 1.5em;
+  padding: 15px;
+  cursor: pointer;
+}