     return
 
   render: ->
-    selectedReadingList =
-      <ul className="selected-reading-list">
-        <li><strong>Currently selected sections in this reading</strong></li>
-        {_.map(@props.selected, @renderTopics)}
-      </ul> if @props.selected.length && TocStore.isLoaded()
+    if (@props.selected.length and TocStore.isLoaded())
+      selectedReadingList =
+        <ul className="selected-reading-list">
+          <li><strong>Currently selected sections in this reading</strong></li>
+          {_.map(@props.selected, @renderTopics)}
+        </ul>
 
     <div>
       <label>Select Readings</label>

      id = TaskPlanStore.freshLocalId()
      plan = TaskPlanActions.create(id, due_at: new Date())

    {id, plan}

  componentWillMount: -> TaskPlanStore.addChangeListener(@update)
  componentWillUnmount: -> TaskPlanStore.removeChangeListener(@update)

  update: () ->
    plan = TaskPlanStore.get(@state.id)
    @setState {plan}

  setDueAt: (value) ->
    TaskPlanActions.updateDueAt(@state.id, value)

  setTitle: ->
    value = @refs.title.getDOMNode().value
    TaskPlanActions.updateTitle(@state.id, value)

  publishPlan: ->
    {id} = TaskPlanStore.get(@state.id)
    TaskPlanActions.publish(id)
    @transitionTo('editReading', {id})

  deletePlan: () ->
    id = @getParams().id
    @transitionTo('dashboard')
    TaskPlanActions.delete(id)
    {}

  render: ->
    id = @getParams().id

    isEnabled = @state.plan?.title and @state.plan?.due_at and @state.plan?.settings.page_ids.length > 0

    headerText = if id then 'Edit Reading' else 'Add Reading'
    topics = TaskPlanStore.getTopics(@state.id)
    
    footer= <ReadingFooter enabled={isEnabled} onPublish={@publishPlan} onDelete={@deletePlan}/>


      <h1>{headerText}</h1>
      <div>
        <label htmlFor="title">Name</label>
        <input ref="title" id="title" type="text" onChange={@setTitle} value={plan?.title}/>
      </div>
      <div>
        <label htmlFor="due-date">Due Date</label>
