meteor.cljs

{ createClass } = React
{ render } = ReactDOM

Tasks = new Mongo.Collection('tasks')

if Meteor.isClient
  Accounts.ui.config(passwordSignupFields: "USERNAME_ONLY")

  Meteor.subscribe('tasks')

  Meteor.startup(->
    render(<App />, document.getElementById('root')))

if Meteor.isServer
  Meteor.publish('tasks', ->
    Tasks.find())

Meteor.methods(
  addTask: (text) ->
    unless Meteor.userId
      throw new Meteor.Error("not-authorized")

    Tasks.insert(
      text: text
      createdAt: new Date()
      owner: Meteor.userId()
      username: Meteor.user().username
    )

  removeTask: (taskId) ->
    Tasks.remove(taskId)

  setChecked: (taskId, setChecked) ->
    Tasks.update(taskId, $set: checked: setChecked)
)

App = createClass(
  mixins: [ReactMeteorData]

  getInitialState: ->
    hideCompleted: false

  getMeteorData: ->
    tasks: Tasks.find({}).fetch()
    incompleteCount: Tasks.find(checked: $ne: true).count()

  renderTasks: ->
    @data.tasks.map(
      (task) ->
        <Task key={ task._id } task={ task } />)

  handleSubmit: (event) ->
    event.preventDefault()
    text = @refs.textInput.value.trim()
    Meteor.call('addTask', text)
    @refs.textInput.value = ''

  getMeteorData: ->
    query = if @state.hideCompleted then checked: $ne: true else {}
    tasks: Tasks.find(query, sort: createdAt: -1).fetch()
    incompleteCount: Tasks.find(checked: $ne: true).count()
    currentUser: Meteor.user()

  toggleHideCompleted: ->
    this.setState(hideCompleted: [email protected])

  render: -> <div>
    <header>
      <h1>Todo List ({ @data.incompleteCount })</h1>

      <label>
        <input type="checkbox" readOnly={ true }
         checked={ @state.hideCompleted } onClick={ @toggleHideCompleted } />
      </label>

      <AccountsUIWrapper />

      {if @data.currentUser
        <form onSubmit={ @handleSubmit }>
          <input ref="textInput" type="text" placeholder="Type to add new tasks" />
        </form>}

    </header>

    <ul>
      { @renderTasks() }
    </ul>
  </div>
)

Task = createClass(
  toggleChecked: ->
    Meteor.call('setChecked', @props.task._id, not @props.task.checked)

  deleteThisTask: ->
    Meteor.call('removeTask', @props.task._id)

  render: ->
    taskClassName = if @props.task.checked then 'checked' else ''
    <li className={ taskClassName }>
      <button className="delete" onClick={ @deleteThisTask }>
        &times;
      </button>

      <input type="checkbox" readOnly={ true }
       checked={ @props.task.checked } onClick={ @toggleChecked } />

      <span className="text">
        <strong>{ @props.task.username }</strong>: { @props.task.text }
      </span>
    </li>
)

AccountsUIWrapper = createClass(
  componentDidMount: ->
    @view = Blaze.render(Template.loginButtons, @refs.container)

  componentWillUnmount: ->
    Blaze.remove(@view)

  render: ->
    <span ref="container" />
)