Skip to content

Commit 1a54de1

Browse files
goatslackergoatslacker
committed
Initial import of flux chat from flux repo
1 parent 036f97f commit 1a54de1

24 files changed

+1258
-0
lines changed

‎examples/chat/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/js/bundle.js
2+
/js/bundle.min.js

‎examples/chat/README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
## Flux Chat Example
2+
3+
This is an example application we've created to show an example of how a Flux
4+
app is structured, and how you might use waitFor to make sure the Stores'
5+
registered callbacks are called in the correct order.
6+
7+
## Running
8+
9+
You must have [npm](https://www.npmjs.org/) installed on your computer.
10+
From the root project directory run these commands from the command line:
11+
12+
`npm install`
13+
14+
This will install all dependencies.
15+
16+
To build the project, first run this command:
17+
18+
`npm start`
19+
20+
This will perform an initial build and start a watcher process that will
21+
update build.js with any changes you wish to make. This watcher is
22+
based on [Browserify](http://browserify.org/) and
23+
[Watchify](https://github.com/substack/watchify), and it transforms
24+
React's JSX syntax into standard JavaScript with
25+
[Reactify](https://github.com/andreypopp/reactify).
26+
27+
After starting the watcher, you can open `index.html` in your browser to
28+
open the app.
29+

‎examples/chat/css/chatapp.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**
2+
* This file is provided by Facebook for testing and evaluation purposes
3+
* only. Facebook reserves all rights not expressly granted.
4+
*
5+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
9+
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11+
*/
12+
13+
.chatapp {
14+
font-family: 'Muli', 'Helvetica Neue', helvetica, arial;
15+
max-width: 760px;
16+
margin: 20px auto;
17+
overflow: hidden;
18+
}
19+
20+
.message-list, .thread-list {
21+
border: 1px solid #ccf;
22+
font-size: 16px;
23+
height: 400px;
24+
margin: 0;
25+
overflow-y: auto;
26+
padding: 0;
27+
}
28+
29+
.message-section {
30+
float: right;
31+
width: 65%;
32+
}
33+
34+
.thread-section {
35+
float: left;
36+
width: 32.5%;
37+
}
38+
39+
.message-thread-heading,
40+
.thread-count {
41+
height: 40px;
42+
margin: 0;
43+
}
44+
45+
.message-list-item, .thread-list-item {
46+
list-style: none;
47+
padding: 12px 14px 14px;
48+
}
49+
50+
.thread-list-item {
51+
border-bottom: 1px solid #ccc;
52+
}
53+
54+
.thread-list:hover .thread-list-item:hover {
55+
background-color: #f8f8ff;
56+
}
57+
58+
.thread-list:hover .thread-list-item {
59+
background-color: #fff;
60+
}
61+
62+
.thread-list-item.active,
63+
.thread-list:hover .thread-list-item.active,
64+
.thread-list:hover .thread-list-item.active:hover {
65+
background-color: #efefff;
66+
}
67+
68+
.message-author-name,
69+
.thread-name {
70+
color: #66c;
71+
float: left;
72+
font-size: 13px;
73+
margin: 0;
74+
}
75+
76+
.message-time, .thread-time {
77+
color: #aad;
78+
float: right;
79+
font-size: 12px;
80+
}
81+
82+
.message-text, .thread-last-message {
83+
clear: both;
84+
font-size: 14px;
85+
padding-top: 10px;
86+
}
87+
88+
.message-composer {
89+
box-sizing: border-box;
90+
font-family: inherit;
91+
font-size: 14px;
92+
height: 5em;
93+
width: 100%;
94+
margin: 20px 0 0;
95+
padding: 10px;
96+
}

‎examples/chat/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Flux • Chat</title>
6+
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="css/chatapp.css">
8+
</head>
9+
<body>
10+
<section id="react"></section>
11+
<script src="js/bundle.min.js"></script>
12+
</body>
13+
</html>

‎examples/chat/js/ChatExampleData.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* This file is provided by Facebook for testing and evaluation purposes
3+
* only. Facebook reserves all rights not expressly granted.
4+
*
5+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
9+
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11+
*/
12+
13+
module.exports = {
14+
15+
init: function() {
16+
localStorage.clear();
17+
localStorage.setItem('messages', JSON.stringify([
18+
{
19+
id: 'm_1',
20+
threadID: 't_1',
21+
threadName: 'Jing and Bill',
22+
authorName: 'Bill',
23+
text: 'Hey Jing, want to give a Flux talk at ForwardJS?',
24+
timestamp: Date.now() - 99999
25+
},
26+
{
27+
id: 'm_2',
28+
threadID: 't_1',
29+
threadName: 'Jing and Bill',
30+
authorName: 'Bill',
31+
text: 'Seems like a pretty cool conference.',
32+
timestamp: Date.now() - 89999
33+
},
34+
{
35+
id: 'm_3',
36+
threadID: 't_1',
37+
threadName: 'Jing and Bill',
38+
authorName: 'Jing',
39+
text: 'Sounds good. Will they be serving dessert?',
40+
timestamp: Date.now() - 79999
41+
},
42+
{
43+
id: 'm_4',
44+
threadID: 't_2',
45+
threadName: 'Dave and Bill',
46+
authorName: 'Bill',
47+
text: 'Hey Dave, want to get a beer after the conference?',
48+
timestamp: Date.now() - 69999
49+
},
50+
{
51+
id: 'm_5',
52+
threadID: 't_2',
53+
threadName: 'Dave and Bill',
54+
authorName: 'Dave',
55+
text: 'Totally! Meet you at the hotel bar.',
56+
timestamp: Date.now() - 59999
57+
},
58+
{
59+
id: 'm_6',
60+
threadID: 't_3',
61+
threadName: 'Functional Heads',
62+
authorName: 'Bill',
63+
text: 'Hey Brian, are you going to be talking about functional stuff?',
64+
timestamp: Date.now() - 49999
65+
},
66+
{
67+
id: 'm_7',
68+
threadID: 't_3',
69+
threadName: 'Bill and Brian',
70+
authorName: 'Brian',
71+
text: 'At ForwardJS? Yeah, of course. See you there!',
72+
timestamp: Date.now() - 39999
73+
}
74+
]));
75+
}
76+
77+
};

‎examples/chat/js/actions/ChatMessageActionCreators.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* This file is provided by Facebook for testing and evaluation purposes
3+
* only. Facebook reserves all rights not expressly granted.
4+
*
5+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
9+
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11+
*/
12+
13+
var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
14+
var ChatConstants = require('../constants/ChatConstants');
15+
var ChatWebAPIUtils = require('../utils/ChatWebAPIUtils');
16+
var MessageStore = require('../stores/MessageStore');
17+
18+
var ActionTypes = ChatConstants.ActionTypes;
19+
20+
module.exports = {
21+
22+
createMessage: function(text) {
23+
ChatAppDispatcher.handleViewAction({
24+
type: ActionTypes.CREATE_MESSAGE,
25+
text: text
26+
});
27+
var message = MessageStore.getCreatedMessageData(text);
28+
ChatWebAPIUtils.createMessage(message);
29+
}
30+
31+
};

‎examples/chat/js/actions/ChatServerActionCreators.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* This file is provided by Facebook for testing and evaluation purposes
3+
* only. Facebook reserves all rights not expressly granted.
4+
*
5+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
9+
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11+
*/
12+
13+
var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
14+
var ChatConstants = require('../constants/ChatConstants');
15+
16+
var ActionTypes = ChatConstants.ActionTypes;
17+
18+
module.exports = {
19+
20+
receiveAll: function(rawMessages) {
21+
ChatAppDispatcher.handleServerAction({
22+
type: ActionTypes.RECEIVE_RAW_MESSAGES,
23+
rawMessages: rawMessages
24+
});
25+
},
26+
27+
receiveCreatedMessage: function(createdMessage) {
28+
ChatAppDispatcher.handleServerAction({
29+
type: ActionTypes.RECEIVE_RAW_CREATED_MESSAGE,
30+
rawMessage: createdMessage
31+
});
32+
}
33+
34+
};

‎examples/chat/js/actions/ChatThreadActionCreators.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* This file is provided by Facebook for testing and evaluation purposes
3+
* only. Facebook reserves all rights not expressly granted.
4+
*
5+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
9+
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11+
*/
12+
13+
var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
14+
var ChatConstants = require('../constants/ChatConstants');
15+
16+
var ActionTypes = ChatConstants.ActionTypes;
17+
18+
module.exports = {
19+
20+
clickThread: function(threadID) {
21+
ChatAppDispatcher.handleViewAction({
22+
type: ActionTypes.CLICK_THREAD,
23+
threadID: threadID
24+
});
25+
}
26+
27+
};

‎examples/chat/js/app.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* This file is provided by Facebook for testing and evaluation purposes
3+
* only. Facebook reserves all rights not expressly granted.
4+
*
5+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
9+
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11+
*
12+
* @jsx React.DOM
13+
*/
14+
15+
// This file bootstraps the entire application.
16+
17+
var ChatApp = require('./components/ChatApp.react');
18+
var ChatExampleData = require('./ChatExampleData');
19+
var ChatWebAPIUtils = require('./utils/ChatWebAPIUtils');
20+
var React = require('react');
21+
22+
ChatExampleData.init(); // load example data into localstorage
23+
24+
ChatWebAPIUtils.getAllMessages();
25+
26+
React.renderComponent(
27+
<ChatApp />,
28+
document.getElementById('react')
29+
);

‎examples/chat/js/components/ChatApp.react.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* This file is provided by Facebook for testing and evaluation purposes
3+
* only. Facebook reserves all rights not expressly granted.
4+
*
5+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8+
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
9+
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10+
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11+
*
12+
* @jsx React.DOM
13+
*/
14+
15+
var MessageSection = require('./MessageSection.react');
16+
var React = require('react');
17+
var ThreadSection = require('./ThreadSection.react');
18+
19+
var ChatApp = React.createClass({
20+
21+
render: function() {
22+
return (
23+
<div className="chatapp">
24+
<ThreadSection />
25+
<MessageSection />
26+
</div>
27+
);
28+
}
29+
30+
});
31+
32+
module.exports = ChatApp;

0 commit comments

Comments
 (0)