init

Author: justadudewhohacks

Diff for: .babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ]
+}

Diff for: .eslintrc

@@ -0,0 +1,21 @@
+{
+  "extends": ["eslint:recommended", "airbnb"],
+  "rules": {
+    "linebreak-style": [
+      "error",
+      "windows"
+    ],
+    "comma-dangle": ["error", {"functions": "never"}],
+    "no-underscore-dangle": 0,
+    "no-nested-ternary": 0,
+    "radix": 0,
+    "semi": 0,
+    "react/prop-types": 0,
+    "jsx-a11y/anchor-is-valid": 0
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  }
+}

Diff for: .gitignore

@@ -0,0 +1 @@
+node_modules

Diff for: client/Root.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import injectTapEventPlugin from 'react-tap-event-plugin';
+import { BrowserRouter, Route, Switch, Redirect, Link } from 'react-router-dom';
+
+import UserSelection from './UserSelection';
+import socket from './socket'
+
+injectTapEventPlugin()
+
+const Navbar = () => (
+  <ul>
+    <li> <Link to="/"> { 'Home' } </Link> </li>
+    <li> <Link to="/1"> { 'Chatroom 1' } </Link> </li>
+    <li> <Link to="/2"> { 'Chatroom 2' } </Link> </li>
+  </ul>
+)
+
+const Home = () => <h1> { 'Home' } </h1>
+const Chatroom = props => <h1> { `$Chatroom ${props.id} ${props.name}`} </h1>
+
+export default class Root extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+    this.state = {
+      name: '',
+      isRegisterInProcess: false,
+      client: socket()
+    }
+
+    this.register = this.register.bind(this)
+    this.renderChatroomOrRedirect = this.renderChatroomOrRedirect.bind(this)
+    this.onRegisterResponse = this.onRegisterResponse.bind(this)
+    this.onEnterUserSelection = this.onEnterUserSelection.bind(this)
+  }
+
+  onRegisterResponse(name) {
+    this.setState({ isRegisterInProcess: false, name })
+  }
+
+  onEnterUserSelection(renderUserSelection) {
+    if (this.state.name) {
+      return <Redirect to="/" />
+    }
+
+    return this.state.isRegisterInProcess
+      ? <h1> Loading </h1>
+      : renderUserSelection()
+  }
+
+  register(name) {
+    this.setState({ isRegisterInProcess: true })
+    this.state.client.register(name, (err) => {
+      if (err) return this.onRegisterResponse('')
+      return this.onRegisterResponse(name)
+    })
+  }
+
+  renderChatroomOrRedirect(renderChatroom) {
+    return !this.state.name
+      ? <Redirect to="/register" />
+      : renderChatroom()
+  }
+
+  render() {
+    return (
+      <BrowserRouter>
+        <MuiThemeProvider>
+          <div>
+            <Navbar />
+            <Switch>
+              <Route
+                exact
+                path="/"
+                component={Home}
+              />
+              <Route
+                exact
+                path="/register"
+                render={
+                  (props) => {
+                    const toHome = () => props.history.push('/')
+                    return this.onEnterUserSelection(() => (
+                      <UserSelection
+                        close={toHome}
+                        register={name => this.register(name, toHome)}
+                      />
+                    ))
+                  }
+                }
+              />
+              <Route
+                exact
+                path="/1"
+                render={() => this.renderChatroomOrRedirect(() => <Chatroom id="1" />)}
+              />
+              <Route
+                exact
+                path="/2"
+                render={() => this.renderChatroomOrRedirect(() => <Chatroom id="2" />)}
+              />
+            </Switch>
+          </div>
+        </MuiThemeProvider>
+      </BrowserRouter>
+    )
+  }
+}

Diff for: client/UserSelection.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import TextField from 'material-ui/TextField';
+
+export default class UserSelection extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      input: ''
+    }
+
+    this.handleInput = this.handleInput.bind(this)
+    this.handleOk = this.handleOk.bind(this)
+  }
+
+  handleInput(e) {
+    this.setState({ input: e.target.value })
+  }
+
+
+  handleOk() {
+    this.props.register(this.state.input)
+  }
+
+  render() {
+    const actions = [
+      <FlatButton
+        label="Cancel"
+        primary
+        onClick={this.props.close}
+      />,
+      <FlatButton
+        label="Submit"
+        primary
+        keyboardFocused
+        onClick={this.handleOk}
+      />
+    ]
+
+    return (
+      <Dialog
+        title="What's your name?"
+        actions={actions}
+        modal={false}
+        open
+        onRequestClose={this.props.close}
+      >
+        <TextField
+          hintText="Enter your name."
+          floatingLabelText="Enter your name."
+          value={this.state.input}
+          onChange={this.handleInput}
+        />
+      </Dialog>
+    )
+  }
+}

Diff for: client/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Root from './Root';
+
+ReactDOM.render(
+  <Root />,
+  document.getElementById('root')
+)
+
+if (module.hot) {
+  module.hot.accept('./Root', () => {
+    // eslint-disable-next-line
+    const NextRoot = require('./Root').default
+    ReactDOM.render(
+      <NextRoot />,
+      document.getElementById('root')
+    )
+  })
+}

Diff for: client/socket.js

@@ -0,0 +1,49 @@
+const io = require('socket.io-client')
+
+export default function(args) {
+  const socket = io.connect('http://localhost:3000')
+
+  let connected = function() {}
+  let userJoined = function() {}
+  let userLeft = function() {}
+
+  function setConnectedCb(cb) {
+    connected = cb
+  }
+
+  function setUserJoinedCb(cb) {
+    userJoined = cb
+  }
+
+  function setUserLeftCb(cb) {
+    userLeft = cb
+  }
+
+  socket.on('connected', connected)
+  socket.on('userJoined', userJoined)
+  socket.on('userLeft', userLeft)
+
+  socket.on('error', function(err) {
+    console.log('received socket error:')
+    console.log(err)
+  })
+
+  function register(name, cb) {
+    socket.emit('register', name, cb)
+  }
+
+  function join(chatroomId, cb) {
+    socket.emit('join', chatroomId, cb)
+  }
+
+  function leave(chatroomId, cb) {
+      socket.emit('leave', chatroomId, cb)
+  }
+
+  function message(chatroomId, message, cb) {
+      socket.emit('message', { chatroomId, message }, cb)
+  }
+
+  return { register, join, leave, message, setConnectedCb, setUserJoinedCb, setUserLeftCb }
+}
+