gistfile1.coffee

goog.provide 'app.rooms.react.Create'

goog.require 'app.rooms.Room'

class app.rooms.react.Create

  ###*
    @param {app.Actions} actions
    @param {app.Routes} routes
    @param {app.labs.react.Validation} validation
    @param {app.rooms.Store} roomsStore
    @param {app.users.Store} usersStore
    @param {este.react.Element} element
    @constructor
  ###
  constructor: (actions, routes, validation, roomsStore, usersStore, element) ->
    {div, Button, form, input, GrowingTextarea, p,
     SubmitButton, DismissButton} = element

    @component = React.createFactory React.createClass
      mixins: [validation.mixin]

      getInitialState: ->
        # State is stored in store, because state is persisted only for shown
        # component.
        roomsStore.createRoomState

      render: ->
        disabled = actions.isPending app.Actions.CREATE_ROOM

        div className: 'create-room',
          Button
            className: element.className 'active': @state.flipped
            onTap: @flip
          , Create.MSG_CREATE_ROOM

          if @state.flipped
            form onSubmit: @onFormSubmit, onKeyUp: @onFormKeyUp,
              input
                autoFocus: true
                disabled: disabled
                name: 'name'
                onChange: @onFieldChange
                placeholder: Create.MSG_NAME_PLACEHOLDER
                value: @state.room.name
              GrowingTextarea
                disabled: disabled
                name: 'description'
                onChange: @onFieldChange
                placeholder: Create.MSG_DESCRIPTION_PLACEHOLDER
                value: @state.room.description
              p {}, Create.MSG_CALL_TO_ACTION
              # TODO: isPrivate checkbox, or maybe custom select with by default
              # selected isPrivate or iPhone like switcher or...
              SubmitButton disabled: disabled, Create.MSG_CREATE
              DismissButton disabled: disabled, onTap: @flip

      flip: ->
        @state.flipped = !@state.flipped
        @forceUpdate()

      onFormSubmit: (e) ->
        e.preventDefault()
        roomId = @state.room.id
        actions.createRoom()
          .then -> routes.room.redirect id: roomId
          .thenCatch @showValidationError

      onFormKeyUp: (e) ->
        if e.key == 'Escape'
          @flip()

      onFieldChange: (e) ->
        @state.room[e.target.name] = e.target.value
        @state.room.computeProps()
        @forceUpdate()

  @MSG_CALL_TO_ACTION: goog.getMsg "A new public room that anyone can join."
  @MSG_CREATE: goog.getMsg 'Create'
  @MSG_CREATE_ROOM: goog.getMsg 'Create Room'
  @MSG_DESCRIPTION_PLACEHOLDER: goog.getMsg "description, not required"
  @MSG_NAME_PLACEHOLDER: goog.getMsg 'room name'
  # TODO: For private rooms: If you need this conversation to be private, you should create a new Private Group instead.