Initial import of flux chat from flux repo

goatslacker · Dec 27, 2014 · 1a54de1 · 1a54de1
1 parent 036f97f
commit 1a54de1
Show file tree

Hide file tree

Showing 24 changed files with 1,258 additions and 0 deletions.
diff --git a/examples/chat/.gitignore b/examples/chat/.gitignore
@@ -0,0 +1,2 @@
+/js/bundle.js
+/js/bundle.min.js
diff --git a/examples/chat/README.md b/examples/chat/README.md
@@ -0,0 +1,29 @@
+## Flux Chat Example
+
+This is an example application we've created to show an example of how a Flux
+app is structured, and how you might use waitFor to make sure the Stores'
+registered callbacks are called in the correct order.
+
+## Running
+
+You must have [npm](https://www.npmjs.org/) installed on your computer.
+From the root project directory run these commands from the command line:
+
+`npm install`
+
+This will install all dependencies.
+
+To build the project, first run this command:
+
+`npm start`
+
+This will perform an initial build and start a watcher process that will
+update build.js with any changes you wish to make.  This watcher is
+based on [Browserify](http://browserify.org/) and
+[Watchify](https://github.com/substack/watchify), and it transforms
+React's JSX syntax into standard JavaScript with
+[Reactify](https://github.com/andreypopp/reactify).
+
+After starting the watcher, you can open `index.html` in your browser to
+open the app.
+
diff --git a/examples/chat/css/chatapp.css b/examples/chat/css/chatapp.css
@@ -0,0 +1,96 @@
+/**
+ * This file is provided by Facebook for testing and evaluation purposes
+ * only. Facebook reserves all rights not expressly granted.
+ *
+ * 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
+ * FACEBOOK 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.
+ */
+
+.chatapp {
+  font-family: 'Muli', 'Helvetica Neue', helvetica, arial;
+  max-width: 760px;
+  margin: 20px auto;
+  overflow: hidden;
+}
+
+.message-list, .thread-list {
+  border: 1px solid #ccf;
+  font-size: 16px;
+  height: 400px;
+  margin: 0;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.message-section {
+  float: right;
+  width: 65%;
+}
+
+.thread-section {
+  float: left;
+  width: 32.5%;
+}
+
+.message-thread-heading,
+.thread-count {
+  height: 40px;
+  margin: 0;
+}
+
+.message-list-item, .thread-list-item {
+  list-style: none;
+  padding: 12px 14px 14px;
+}
+
+.thread-list-item {
+  border-bottom: 1px solid #ccc;
+}
+
+.thread-list:hover .thread-list-item:hover {
+  background-color: #f8f8ff;
+}
+
+.thread-list:hover .thread-list-item {
+  background-color: #fff;
+}
+
+.thread-list-item.active,
+.thread-list:hover .thread-list-item.active,
+.thread-list:hover .thread-list-item.active:hover {
+  background-color: #efefff;
+}
+
+.message-author-name,
+.thread-name {
+  color: #66c;
+  float: left;
+  font-size: 13px;
+  margin: 0;
+}
+
+.message-time, .thread-time {
+  color: #aad;
+  float: right;
+  font-size: 12px;
+}
+
+.message-text, .thread-last-message {
+  clear: both;
+  font-size: 14px;
+  padding-top: 10px;
+}
+
+.message-composer {
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 14px;
+  height: 5em;
+  width: 100%;
+  margin: 20px 0 0;
+  padding: 10px;
+}
diff --git a/examples/chat/index.html b/examples/chat/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Flux • Chat</title>
+    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/chatapp.css">
+  </head>
+  <body>
+    <section id="react"></section>
+    <script src="js/bundle.min.js"></script>
+  </body>
+</html>
diff --git a/examples/chat/js/ChatExampleData.js b/examples/chat/js/ChatExampleData.js
@@ -0,0 +1,77 @@
+/**
+ * This file is provided by Facebook for testing and evaluation purposes
+ * only. Facebook reserves all rights not expressly granted.
+ *
+ * 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
+ * FACEBOOK 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.
+ */
+
+module.exports = {
+
+  init: function() {
+    localStorage.clear();
+    localStorage.setItem('messages', JSON.stringify([
+      {
+        id: 'm_1',
+        threadID: 't_1',
+        threadName: 'Jing and Bill',
+        authorName: 'Bill',
+        text: 'Hey Jing, want to give a Flux talk at ForwardJS?',
+        timestamp: Date.now() - 99999
+      },
+      {
+        id: 'm_2',
+        threadID: 't_1',
+        threadName: 'Jing and Bill',
+        authorName: 'Bill',
+        text: 'Seems like a pretty cool conference.',
+        timestamp: Date.now() - 89999
+      },
+      {
+        id: 'm_3',
+        threadID: 't_1',
+        threadName: 'Jing and Bill',
+        authorName: 'Jing',
+        text: 'Sounds good.  Will they be serving dessert?',
+        timestamp: Date.now() - 79999
+      },
+      {
+        id: 'm_4',
+        threadID: 't_2',
+        threadName: 'Dave and Bill',
+        authorName: 'Bill',
+        text: 'Hey Dave, want to get a beer after the conference?',
+        timestamp: Date.now() - 69999
+      },
+      {
+        id: 'm_5',
+        threadID: 't_2',
+        threadName: 'Dave and Bill',
+        authorName: 'Dave',
+        text: 'Totally!  Meet you at the hotel bar.',
+        timestamp: Date.now() - 59999
+      },
+      {
+        id: 'm_6',
+        threadID: 't_3',
+        threadName: 'Functional Heads',
+        authorName: 'Bill',
+        text: 'Hey Brian, are you going to be talking about functional stuff?',
+        timestamp: Date.now() - 49999
+      },
+      {
+        id: 'm_7',
+        threadID: 't_3',
+        threadName: 'Bill and Brian',
+        authorName: 'Brian',
+        text: 'At ForwardJS?  Yeah, of course.  See you there!',
+        timestamp: Date.now() - 39999
+      }
+    ]));
+  }
+
+};
diff --git a/examples/chat/js/actions/ChatMessageActionCreators.js b/examples/chat/js/actions/ChatMessageActionCreators.js
@@ -0,0 +1,31 @@
+/**
+ * This file is provided by Facebook for testing and evaluation purposes
+ * only. Facebook reserves all rights not expressly granted.
+ *
+ * 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
+ * FACEBOOK 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.
+ */
+
+var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
+var ChatConstants = require('../constants/ChatConstants');
+var ChatWebAPIUtils = require('../utils/ChatWebAPIUtils');
+var MessageStore = require('../stores/MessageStore');
+
+var ActionTypes = ChatConstants.ActionTypes;
+
+module.exports = {
+
+  createMessage: function(text) {
+    ChatAppDispatcher.handleViewAction({
+      type: ActionTypes.CREATE_MESSAGE,
+      text: text
+    });
+    var message = MessageStore.getCreatedMessageData(text);
+    ChatWebAPIUtils.createMessage(message);
+  }
+
+};
diff --git a/examples/chat/js/actions/ChatServerActionCreators.js b/examples/chat/js/actions/ChatServerActionCreators.js
@@ -0,0 +1,34 @@
+/**
+ * This file is provided by Facebook for testing and evaluation purposes
+ * only. Facebook reserves all rights not expressly granted.
+ *
+ * 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
+ * FACEBOOK 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.
+ */
+
+var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
+var ChatConstants = require('../constants/ChatConstants');
+
+var ActionTypes = ChatConstants.ActionTypes;
+
+module.exports = {
+
+  receiveAll: function(rawMessages) {
+    ChatAppDispatcher.handleServerAction({
+      type: ActionTypes.RECEIVE_RAW_MESSAGES,
+      rawMessages: rawMessages
+    });
+  },
+
+  receiveCreatedMessage: function(createdMessage) {
+    ChatAppDispatcher.handleServerAction({
+      type: ActionTypes.RECEIVE_RAW_CREATED_MESSAGE,
+      rawMessage: createdMessage
+    });
+  }
+
+};
diff --git a/examples/chat/js/actions/ChatThreadActionCreators.js b/examples/chat/js/actions/ChatThreadActionCreators.js
@@ -0,0 +1,27 @@
+/**
+ * This file is provided by Facebook for testing and evaluation purposes
+ * only. Facebook reserves all rights not expressly granted.
+ *
+ * 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
+ * FACEBOOK 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.
+ */
+
+var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
+var ChatConstants = require('../constants/ChatConstants');
+
+var ActionTypes = ChatConstants.ActionTypes;
+
+module.exports = {
+
+  clickThread: function(threadID) {
+    ChatAppDispatcher.handleViewAction({
+      type: ActionTypes.CLICK_THREAD,
+      threadID: threadID
+    });
+  }
+
+};
diff --git a/examples/chat/js/app.js b/examples/chat/js/app.js
@@ -0,0 +1,29 @@
+/**
+ * This file is provided by Facebook for testing and evaluation purposes
+ * only. Facebook reserves all rights not expressly granted.
+ *
+ * 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
+ * FACEBOOK 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.
+ *
+ * @jsx React.DOM
+ */
+
+// This file bootstraps the entire application.
+
+var ChatApp = require('./components/ChatApp.react');
+var ChatExampleData = require('./ChatExampleData');
+var ChatWebAPIUtils = require('./utils/ChatWebAPIUtils');
+var React = require('react');
+
+ChatExampleData.init(); // load example data into localstorage
+
+ChatWebAPIUtils.getAllMessages();
+
+React.renderComponent(
+    <ChatApp />,
+    document.getElementById('react')
+);
diff --git a/examples/chat/js/components/ChatApp.react.js b/examples/chat/js/components/ChatApp.react.js
@@ -0,0 +1,32 @@
+/**
+ * This file is provided by Facebook for testing and evaluation purposes
+ * only. Facebook reserves all rights not expressly granted.
+ *
+ * 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
+ * FACEBOOK 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.
+ *
+ * @jsx React.DOM
+ */
+
+var MessageSection = require('./MessageSection.react');
+var React = require('react');
+var ThreadSection = require('./ThreadSection.react');
+
+var ChatApp = React.createClass({
+
+  render: function() {
+    return (
+      <div className="chatapp">
+        <ThreadSection />
+        <MessageSection />
+      </div>
+    );
+  }
+
+});
+
+module.exports = ChatApp;