Initial commit

frontend/src/pages/chat.jsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import Page from './page';
+import { connect } from 'react-redux';
+import { fetchMessages, sendMessage, streamEvents } from '../actions/chat';
+
+export class ChatPage extends React.Component {
+    
+    constructor(props) {
+        super(props);
+        this.state = {
+            message: ''
+        }
+        this.handleSendMessage = this.handleSendMessage.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+    }
+    
+    render() {
+        const channel = "default";
+        const { chat } = this.props;
+        const messages = channel in chat.messagesByChannel ? chat.messagesByChannel[channel] : [];
+        const users = [];
+        return (
+            <Page>
+                <div className="columns">
+                    <div className="column is-8 is-offset-2">
+                        <div className="box">
+                            <div className="tile">
+                                <div className="tile is-parent is-vertical is-10">
+                                    <div className="tile is-child">
+                                        <b>Chat</b>
+                                        <ul>
+                                            {
+                                                messages.map(msg => {
+                                                    return (
+                                                        <li key={msg.ID}><span className="is-uppercase">[{msg.Username}]</span> <span>{msg.Text}</span></li>
+                                                    )
+                                                })
+                                            }
+                                        </ul>
+                                        <div className="field">
+                                            <div className="control">
+                                                <input className="input" type="text" placeholder="Hello everyone !"
+                                                    value={this.state.message}
+                                                    onChange={this.handleSendMessage}
+                                                    onKeyDown={this.handleKeyDown} />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="tile is-parent is-2">
+                                    <b>Utilisateurs</b>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Page>
+        );
+    }
+
+    componentDidMount() {
+        this.props.dispatch(fetchMessages("default"));
+        this.props.dispatch(streamEvents("default"));
+    }
+
+    handleSendMessage(evt) {
+        this.setState({ message: evt.target.value });
+    }
+
+    handleKeyDown(evt) {
+        if (evt.keyCode !== 13) return;
+        this.props.dispatch(sendMessage("default", this.state.message));
+        this.setState({message: ""});
+    }
+    
+}
+    
+export default connect(state => {
+    return {
+        chat: state.chat
+    }
+})(ChatPage)

frontend/src/pages/login.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import Page from './page';
+import { connect } from 'react-redux';
+import { login } from '../actions/login';
+
+export class LoginPage extends React.Component {
+    
+    constructor(props) {
+        super(props);
+        this.login = this.login.bind(this);
+    }
+    
+    render() {
+        return (
+            <Page>
+            <div className="columns">
+            <div className="column is-4 is-offset-4">
+            <div className="box">
+            <div className="field">
+            <label className="label">Login</label>
+            <div className="control">
+            <input type="text" className="input" placeholder="My login..." />
+            </div>
+            </div>
+            <div className="field">
+            <label className="label">Password</label>
+            <div className="control">
+            <input className="input" type="password" />
+            </div>
+            </div>
+            <button className="button is-primary" onClick={this.login}>Login</button>
+            </div>
+            </div>
+            </div>
+            </Page>
+            );
+        }
+        
+        componentDidUpdate() {
+            if (this.props.user.isLoggedIn) this.props.history.push("/chat");
+        }
+        
+        login() {
+            this.props.dispatch(login("foo", "bar"))
+        }
+        
+    }
+    
+    export default connect(state => {
+        return {
+            user: state.user
+        }
+    })(LoginPage)

frontend/src/pages/page.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default class Page extends React.PureComponent {
+  render() {
+    return (
+        <div className="container-fluid">
+            { this.props.children }
+        </div>
+    );
+  }
+}