Lessons 30-33

app/components/App/index.js

@@ -0,0 +1,19 @@
+import React from "react"
+import { connect } from "react-redux"
+import Actions from "../../redux/actions"
+
+export class App extends React.Component {
+  componentDidMount() {
+    this.props.dispatch(Actions.userAuth())
+  }
+
+  render() {
+    return (
+      <div>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+export default connect()(App)

app/components/App/spec.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import expect from 'expect'
+import { shallow, mount } from 'enzyme'
+
+import Actions from '../../redux/actions'
+
+import { App } from './'
+
+const props = {}
+
+describe('<App />', () => {
+  it('should render', () => {
+    const renderedComponent = shallow(
+      <App {...props} />
+    )
+    expect(renderedComponent.is('div')).toEqual(true)
+  })
+  it('calls dispatch on componentDidMount', () => {
+    const spy = expect.createSpy()
+    const renderedComponent = mount(
+      <App dispatch={spy} />
+    )
+    expect(spy).toHaveBeenCalled()
+  })
+  it('calls dispatch with Actions.userAuth', () => {
+    const spy = expect.createSpy()
+    const renderedComponent = mount(
+      <App dispatch={spy} />
+    )
+    expect(spy).toHaveBeenCalledWith(Actions.userAuth())
+  })
+})

app/components/Chat/index.js

@@ -0,0 +1,138 @@
+import React from "react"
+import cssModules from "react-css-modules"
+import { Socket, Presence } from "phoenix"
+import { connect } from "react-redux"
+import style from "./style.css"
+
+import { default as Sidebar } from "../Sidebar"
+import { default as ChatRoom } from "../ChatRoom"
+
+export class Chat extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      presences: {},
+      messages: [],
+      currentRoom: null,
+      input: "",
+      lobbyList: [],
+      mountChildren: false
+    }
+
+    this.changeChatroom = this.changeChatroom.bind(this)
+    this.handleMessageSubmit = this.handleMessageSubmit.bind(this)
+    this.handleChange = this.handleChange.bind(this)
+  }
+
+  componentDidMount() {
+    const params = this.props.user
+    this.socket = new Socket(process.env.SOCKET_HOST, { params })
+    this.socket.connect()
+    this.configureAdminChannel()
+  }
+
+  componentWillUnmount() {
+    if (this.channel) this.channel.leave()
+    this.adminChannel.leave()
+  }
+
+  configureAdminChannel() {
+    this.adminChannel = this.socket.channel("admin:active_users")
+
+    this.adminChannel.on("presence_state", state => {
+      const presences = Presence.syncState(this.state.presences, state)
+      // added clearer logging to track presences
+      console.log('Presences after sync: ', presences)
+      this.setState({ presences })
+    })
+
+    this.adminChannel.on("presence_diff", state => {
+      const presences = Presence.syncDiff(this.state.presences, state)
+      // added clearer logging to track presences
+      console.log('Presences after diff: ', presences)
+      this.setState({ presences })
+    })
+
+    this.adminChannel.on("lobby_list", (user) => {
+      const userInLobbyList = this.state.lobbyList.find((lobbyUser) => user.id === lobbyUser.id)
+      if (!userInLobbyList) {
+        this.setState({ lobbyList: this.state.lobbyList.concat([user]) })
+      }
+    })
+
+    this.adminChannel.join()
+      .receive("ok", ({ id, lobby_list }) => {
+        // added clearer logging to track when a user joins a topic
+        console.log(`${id} succesfully joined the active_users topic.`)
+        this.setState({ lobbyList: lobby_list, mountChildren: true })
+      })
+  }
+
+  changeChatroom(room) {
+    this.channel = this.socket.channel(`room:${room}`)
+    this.setState({
+      messages: []
+    })
+    this.configureRoomChannel(room)
+  }
+
+  configureRoomChannel(room) {
+    this.channel.join()
+      .receive("ok", ({ messages }) => {
+        console.log(`Succesfully joined the ${room} chat room.`, messages)
+        this.setState({
+          messages,
+          currentRoom: room
+        })
+      })
+      .receive("error", () => { console.log(`Unable to join the ${room} chat room.`) })
+
+    this.channel.on("message", payload => {
+      this.setState({
+        messages: this.state.messages.concat([payload])
+      })
+    })
+  }
+
+  handleChange(e) {
+    this.setState({ input: e.target.value })
+  }
+
+  handleMessageSubmit(e) {
+    if (e.keyCode === 13 && this.state.currentRoom && this.state.input) {
+      this.channel.push("message", {
+        room: this.state.currentRoom,
+        body: this.state.input,
+        timestamp: new Date().getTime()
+      })
+      this.setState({ input: "" })
+    }
+  }
+
+  // We use a ChatRoom stateless functional component(mouthful!) to replace the
+  // code for rendering a chat room and its messages.
+  render() {
+    return (
+      <div>
+        <Sidebar
+          presences={this.state.presences}
+          lobbyList={this.state.lobbyList}
+          onRoomClick={this.changeChatroom} />
+        <ChatRoom
+          input={this.state.input}
+          handleChange={this.handleChange}
+          handleMessageSubmit={this.handleMessageSubmit}
+          currentRoom={this.state.currentRoom}
+          messages={this.state.messages} />
+        { this.state.mountChildren ? this.props.children : null }
+      </div>
+    )
+  }
+}
+
+
+const mapStateToProps = state => ({
+  user: state.user
+})
+
+export default connect(mapStateToProps)(cssModules(Chat, style))

app/components/Chat/spec.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import expect from 'expect'
+import { shallow } from 'enzyme'
+
+import { Chat } from './'
+
+const props = {}
+
+describe('<Chat />', () => {
+  it('should render', () => {
+    const renderedComponent = shallow(
+      <Chat {...props} />
+    )
+    expect(renderedComponent.is('div')).toEqual(true)
+  })
+})

app/components/ChatRoom/index.js

@@ -0,0 +1,50 @@
+import React from "react"
+import cssModules from "react-css-modules"
+import style from "./style.css"
+
+// This used to be in the Chat component
+const renderMessages = (props) => {
+  if (!props.currentRoom) {
+    return (
+      <div className={style.empty}>
+        No chat selected
+      </div>
+    )
+  }
+
+  return props.messages.map(({ body, id, user_id, anonymous_user_id }) => {
+    // Basic labels so admin knows who sent which messages
+    const from = user_id ? 'Me' : anonymous_user_id.substring(0, 10)
+    const msg = `${from}: ${body}`
+
+    return (
+      <div className={style.message} key={id}>
+        { msg }
+      </div>
+    )
+  })
+}
+
+// This used to be in the Chat component
+const renderInput = (props) => {
+  if (!props.currentRoom) { return null }
+  return (
+    <input
+      value={props.input}
+      onKeyDown={props.handleMessageSubmit}
+      onChange={props.handleChange}
+      className={style.input} />
+  )
+}
+
+export const ChatRoom = props => {
+  return (
+    <div className={style.chatWrapper}>
+      { renderMessages(props) }
+      { renderInput(props) }
+    </div>
+  )
+}
+
+export default cssModules(ChatRoom, style)
+

app/components/ChatRoom/style.css

@@ -0,0 +1,32 @@
+.chatWrapper {
+  margin-left: 300px;
+}
+
+.input {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  width: calc(100% - 40px);
+  line-height: 40px;
+  font-size: 20px;
+  outline: none;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding-left: 10px;
+  color: #333;
+}
+
+.message {
+  padding-left: 20px;
+  line-height: 1.3;
+  padding-bottom: 10px;
+}
+
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80%;
+  color: #ccc;
+  font-size: 2em;
+}

app/components/Home/index.js

@@ -1,17 +1,74 @@
 import React from "react"
 import cssModules from "react-css-modules"
+import { connect } from "react-redux"
+import PhoenixChat from "phoenix-chat"
 import style from "./style.css"
 
 import { default as Signup } from "../Signup"
+import { default as Login } from "../Login"
+import { default as Chat } from "../Chat"
 
 export class Home extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      formState: "login"
+    }
+    this.setFormState = this.setFormState.bind(this)
+  }
+
+  setFormState(formState) {
+    this.setState({ formState })
+  }
+
+  renderToggleContent() {
+    switch (this.state.formState) {
+      case "login":
+        return (
+          <div
+            className={style.changeLink}
+            onClick={() => this.setFormState("signup")}>
+            Need an account? Signup.
+          </div>
+        )
+      case "signup":
+        return (
+          <div
+            className={style.changeLink}
+            onClick={() => this.setFormState("login")}>
+            Have an account? Login.
+          </div>
+        )
+      default: return null
+    }
+  }
+
   render() {
+    if (this.props.user.email) {
+      return (
+        <Chat>
+          <PhoenixChat />
+        </Chat>
+      )
+    }
     return (
-      <div>
-        <Signup />
+      <div className={style.leader}>
+        <h1 className={style.title}>Phoenix Chat</h1>
+        { this.state.formState === "signup" ? <Signup /> : null }
+        { this.state.formState === "login" ? <Login /> : null }
+        { this.renderToggleContent() }
+        <img
+          role="presentation"
+          className={style.circles}
+          src="https://s3.amazonaws.com/learnphoenix-static-assets/images/circles-full.png" />
+        <PhoenixChat />
       </div>
     )
   }
 }
 
-export default cssModules(Home, style)
+const mapStateToProps = state => ({
+  user: state.user
+})
+
+export default connect(mapStateToProps)(cssModules(Home, style))