…trix-js-sdk

examples/flux-chat/css/chatapp.css

@@ -12,7 +12,7 @@
 
 .chatapp {
   font-family: 'Muli', 'Helvetica Neue', helvetica, arial;
-  max-width: 760px;
+  max-width: 1000px;
   margin: 20px auto;
   overflow: hidden;
 }

examples/flux-chat/js/app.js

@@ -18,9 +18,11 @@ var ChatWebAPIUtils = require('./utils/ChatWebAPIUtils');
 var React = require('react');
 window.React = React; // export for http://fb.me/react-devtools
 
-ChatExampleData.init(); // load example data into localstorage
+//ChatExampleData.init(); // load example data into localstorage
 
-ChatWebAPIUtils.getAllMessages();
+ChatWebAPIUtils.init(function () {
+  ChatWebAPIUtils.getAllMessages();
+});
 
 React.render(
     <ChatApp />,

examples/flux-chat/js/components/MessageSection.react.js

@@ -51,6 +51,7 @@ var MessageSection = React.createClass({
 
   render: function() {
     var messageListItems = this.state.messages.map(getMessageListItem);
+    if (!this.state.thread) return (<div className="message-section"/>);
     return (
       <div className="message-section">
         <h3 className="message-thread-heading">{this.state.thread.name}</h3>
@@ -67,6 +68,7 @@ var MessageSection = React.createClass({
   },
 
   _scrollToBottom: function() {
+    if (!this.state.thread) return;
     var ul = this.refs.messageList.getDOMNode();
     ul.scrollTop = ul.scrollHeight;
   },

examples/flux-chat/js/components/ThreadListItem.react.js

@@ -38,7 +38,7 @@ var ThreadListItem = React.createClass({
           {lastMessage.date.toLocaleTimeString()}
         </div>
         <div className="thread-last-message">
-          {lastMessage.text}
+          &lt;{lastMessage.authorName}&gt; {lastMessage.text}
         </div>
       </li>
     );

examples/flux-chat/js/stores/ThreadStore.js

@@ -40,7 +40,7 @@ var ThreadStore = assign({}, EventEmitter.prototype, {
 
     if (!_currentID) {
       var allChrono = this.getAllChrono();
-      _currentID = allChrono[allChrono.length - 1].id;
+      _currentID = allChrono[0].id;
     }
 
     _threads[_currentID].lastMessage.isRead = true;
@@ -83,9 +83,9 @@ var ThreadStore = assign({}, EventEmitter.prototype, {
     }
     orderedThreads.sort(function(a, b) {
       if (a.lastMessage.date < b.lastMessage.date) {
-        return -1;
-      } else if (a.lastMessage.date > b.lastMessage.date) {
         return 1;
+      } else if (a.lastMessage.date > b.lastMessage.date) {
+        return -1;
       }
       return 0;
     });
@@ -112,6 +112,11 @@ ThreadStore.dispatchToken = ChatAppDispatcher.register(function(action) {
       ThreadStore.emitChange();
       break;
 
+    case ActionTypes.RECEIVE_RAW_CREATED_MESSAGE:
+      ThreadStore.init([ action.rawMessage ]);
+      ThreadStore.emitChange();
+      break;
+    
     case ActionTypes.RECEIVE_RAW_MESSAGES:
       ThreadStore.init(action.rawMessages);
       ThreadStore.emitChange();

examples/flux-chat/js/utils/ChatMessageUtils.js

@@ -10,6 +10,8 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+var ChatWebAPIUtils = require('./ChatWebAPIUtils');
+
 module.exports = {
 
   convertRawMessage: function(rawMessage, currentThreadID) {
@@ -28,7 +30,7 @@ module.exports = {
     return {
       id: 'm_' + timestamp,
       threadID: currentThreadID,
-      authorName: 'Bill', // hard coded for the example
+      authorName: ChatWebAPIUtils.getUserId(),
       date: new Date(timestamp),
       text: text,
       isRead: true

examples/flux-chat/js/utils/ChatWebAPIUtils.js

@@ -12,44 +12,95 @@
 
 var ChatServerActionCreators = require('../actions/ChatServerActionCreators');
 
-// !!! Please Note !!!
-// We are using localStorage as an example, but in a real-world scenario, this
-// would involve XMLHttpRequest, or perhaps a newer client-server protocol.
-// The function signatures below might be similar to what you would build, but
-// the contents of the functions are just trying to simulate client-server
-// communication and server-side processing.
+var sdk;
+var client;
+var homeserverUrl = "https://matrix.org";
+
+function _getBody(event) {
+    if (event.content.msgtype === "m.emote") {
+      return ("* " + client.getFriendlyDisplayName(event.user_id, event.room_id) + " " + event.content.body);
+    }
+    else {
+      return event.content.body;
+    }    
+}
 
 module.exports = {
 
-  getAllMessages: function() {
-    // simulate retrieving data from a database
-    var rawMessages = JSON.parse(localStorage.getItem('messages'));
+  init: function(callback) {
+    sdk = require("matrix-js-sdk");
+    sdk.request(require("browser-request"));
 
-    // simulate success callback
-    ChatServerActionCreators.receiveAll(rawMessages);
+    client = sdk.createClient(homeserverUrl, {}, new sdk.MatrixInMemoryStore());
+    var credentials = JSON.parse(localStorage.getItem('credentials'));
+    if (!credentials || !credentials.accessToken) {
+      var userId = prompt("Enter your matrix user id");
+      var password = prompt("Enter your matrix password (WARNING: your typing will be visible)");
+      client.loginWithPassword(userId, password, function(err, data) {
+        if (err) {
+          alert(JSON.stringify(err));
+        }
+        client.credentials.accessToken = data.access_token;
+        client.credentials.userId = data.user_id;
+        localStorage.setItem('credentials', JSON.stringify(client.credentials));
+        callback();
+      });
+    } else {
+      client.credentials.accessToken = credentials.accessToken;
+      client.credentials.userId = credentials.userId;
+      callback();
+    }
   },
 
-  createMessage: function(message, threadName) {
-    // simulate writing to a database
-    var rawMessages = JSON.parse(localStorage.getItem('messages'));
+  getAllMessages: function() {
+    client.startClient(function(err, events, live) {
+      var rawMessages = [];
+      if (err) {
+        console.error("err %s", JSON.stringify(err));
+      } else {
+        for (var i = 0; i < events.length; i++) {
+          var event = events[i].event;
+          if (event.type !== "m.room.message") continue;
+          if (live && event.user_id === client.credentials.userId) continue; // XXX: local echo hack
+          var message = {
+            id: event.event_id,
+            threadID: event.room_id,
+            // XXX: should these be event.getHelper() methods instead?
+            threadName: client.getFriendlyRoomName(event.room_id),
+            authorName: client.getFriendlyDisplayName(event.user_id, event.room_id),
+            text: _getBody(event),
+            timestamp: event.origin_server_ts,
+          };
+          rawMessages.push(message);
+        }
+      }
+      ChatServerActionCreators.receiveAll(rawMessages);
+    }, 12);
+  },
+
+  getUserId: function() {
+    return client.credentials.userId;
+  },
+  
+  createMessage: function(message) {
     var timestamp = Date.now();
     var id = 'm_' + timestamp;
     var threadID = message.threadID || ('t_' + Date.now());
     var createdMessage = {
       id: id,
       threadID: threadID,
-      threadName: threadName,
+      threadName: client.getFriendlyRoomName(threadID),
       authorName: message.authorName,
       text: message.text,
       timestamp: timestamp
     };
-    rawMessages.push(createdMessage);
-    localStorage.setItem('messages', JSON.stringify(rawMessages));
+    
+    client.sendTextMessage(threadID, message.text, function (err,data) {
+      if (err) {
+        console.error("err %s", JSON.stringify(err));
+      }
+    });
 
-    // simulate success callback
-    setTimeout(function() {
-      ChatServerActionCreators.receiveCreatedMessage(createdMessage);
-    }, 0);
+    ChatServerActionCreators.receiveCreatedMessage(createdMessage);
   }
-
 };

examples/flux-chat/package.json

@@ -11,9 +11,11 @@
     "react": "^0.12.0"
   },
   "devDependencies": {
+    "browser-request": "^0.3.3",
     "browserify": "^6.2.0",
     "envify": "^3.0.0",
     "jest-cli": "~0.1.17",
+    "matrix-js-sdk": "0.0.2",
     "reactify": "^0.15.2",
     "uglify-js": "~2.4.15",
     "watchify": "^2.1.1"