Permalink
Browse files

Initial import of flux chat from flux repo

  • Loading branch information...
goatslacker committed Dec 26, 2014
1 parent 036f97f commit 1a54de1064fe5bd252979380e47b0409d1306773
View
@@ -0,0 +1,2 @@
/js/bundle.js
/js/bundle.min.js
View
@@ -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.
@@ -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;
}
View
@@ -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>
@@ -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
}
]));
}
};
@@ -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);
}
};
@@ -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
});
}
};
@@ -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
});
}
};
View
@@ -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')
);
@@ -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;
Oops, something went wrong.

0 comments on commit 1a54de1

Please sign in to comment.