4 files changed, 117 insertions, 0 deletions
diff --git a/frontend/src/containers/App/actions.js b/frontend/src/containers/App/actions.js
new file mode 100644
index 00000000..cfb617d5
--- /dev/null
+++ b/frontend/src/containers/App/actions.js
@@ -0,0 +1,5 @@
+import { INITIALIZE_WS } from "./constants"
+
+export const initializeWs = () => ({
+  type: INITIALIZE_WS
+})
diff --git a/frontend/src/containers/App/constants.js b/frontend/src/containers/App/constants.js
new file mode 100644
index 00000000..be31f8cc
--- /dev/null
+++ b/frontend/src/containers/App/constants.js
@@ -0,0 +1 @@
+export const INITIALIZE_WS = 'app/INITIALIZE_WS'
diff --git a/frontend/src/containers/App/index.js b/frontend/src/containers/App/index.js
new file mode 100644
index 00000000..70f99b6b
--- /dev/null
+++ b/frontend/src/containers/App/index.js
@@ -0,0 +1,83 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import {
+  Banner,
+  Heading,
+  Space,
+  Button,
+  InlineForm,
+  Text
+} from 'rebass'
+import { Flex } from 'reflexbox'
+import Modal from '../../components/modals/username'
+import GameBrowser from '../GameBrowser'
+
+class App extends Component {
+  state = {
+    usernameModal: false,
+  }
+
+  componentDidMount() {
+
+  }
+
+  toggleModal = (key) => {
+    return (e) => {
+      const val = !this.state[key]
+      this.setState({ [key]: val })
+    }
+  }
+
+  createGame = (e) => {
+    e.preventDefault()
+    if (this._gameName !== undefined) {
+      this.props.createGame(this._gameName)
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <Banner
+          align="center"
+          style={{minHeight: '30vh'}}
+          backgroundImage="https://images.unsplash.com/photo-1431207446535-a9296cf995b1?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="
+        >
+          <Heading level={1}>Seven Wonders</Heading>
+        </Banner>
+        <Flex align="center" p={1}>
+          <InlineForm
+            buttonLabel="Create Game"
+            label="Game name"
+            name="game_name"
+            onChange={(e) => this._gameName = e.target.value}
+            onClick={this.createGame}
+          >
+
+          </InlineForm>
+          <Space auto />
+          <Text><b>Username:</b> Cesar92</Text>
+          <Space x={1} />
+          <Button
+            onClick={this.toggleModal('usernameModal')}
+            children="Change"/>
+        </Flex>
+        <GameBrowser />
+        <Modal toggleModal={this.toggleModal} modalOpen={this.state.usernameModal} />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = (state) => ({
+
+})
+
+import { initializeWs } from "./actions";
+import { createGame } from '../GameBrowser/actions'
+const mapDispatchToProps = {
+  initializeWs,
+  createGame
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/frontend/src/containers/App/saga.js b/frontend/src/containers/App/saga.js
new file mode 100644
index 00000000..0c212142
--- /dev/null
+++ b/frontend/src/containers/App/saga.js
@@ -0,0 +1,28 @@
+import { put, take } from 'redux-saga/effects'
+import { eventChannel } from 'redux-saga'
+
+function createSocketChannel(socket) {
+  return eventChannel(emit => {
+    const errorHandler = event => emit(JSON.parse(event.body))
+
+    const userErrors = socket.subscribe('/user/queue/errors', errorHandler)
+
+    const unsubscribe = () => {
+      userErrors.unsubscribe()
+    }
+
+    return unsubscribe
+  })
+}
+
+export function* watchOnErrors(socketConnection) {
+  const { socket } = socketConnection
+  const socketChannel = createSocketChannel(socket)
+
+  while (true) {
+    const payload = yield take(socketChannel)
+    yield put({ type: 'USER_ERROR', payload })
+  }
+}
+
+export default watchOnErrors