Skip to content

Commit

Permalink
Initial import of flux chat from flux repo
Browse files Browse the repository at this point in the history
  • Loading branch information
goatslacker committed Dec 27, 2014
1 parent 036f97f commit 1a54de1
Show file tree
Hide file tree
Showing 24 changed files with 1,258 additions and 0 deletions.
2 changes: 2 additions & 0 deletions examples/chat/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/js/bundle.js
/js/bundle.min.js
29 changes: 29 additions & 0 deletions examples/chat/README.md
Original file line number Diff line number Diff line change
@@ -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.

96 changes: 96 additions & 0 deletions examples/chat/css/chatapp.css
Original file line number Diff line number Diff line change
@@ -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;
}
13 changes: 13 additions & 0 deletions examples/chat/index.html
Original file line number Diff line number Diff line change
@@ -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>
77 changes: 77 additions & 0 deletions examples/chat/js/ChatExampleData.js
Original file line number Diff line number Diff line change
@@ -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
}
]));
}

};
31 changes: 31 additions & 0 deletions examples/chat/js/actions/ChatMessageActionCreators.js
Original file line number Diff line number Diff line change
@@ -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);
}

};
34 changes: 34 additions & 0 deletions examples/chat/js/actions/ChatServerActionCreators.js
Original file line number Diff line number Diff line change
@@ -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
});
}

};
27 changes: 27 additions & 0 deletions examples/chat/js/actions/ChatThreadActionCreators.js
Original file line number Diff line number Diff line change
@@ -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
});
}

};
29 changes: 29 additions & 0 deletions examples/chat/js/app.js
Original file line number Diff line number Diff line change
@@ -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')
);
32 changes: 32 additions & 0 deletions examples/chat/js/components/ChatApp.react.js
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 1a54de1

Please sign in to comment.