     # make a request to /subject_set_first_pages?group_id={{ group_id }}
     # using the incoming query param, and use the results of that query to define the first page array
     # as well as the available institutions and playwrights that users can select
-    API.type("subject_set_first_pages").get(group_id: @props.params.group_id).then (first_pages_json) =>
+    API.type('subject_set_first_pages').get(group_id: @props.params.group_id).then (first_pages_json) =>
       all_institutions = []
       all_playwrights = []
       author_surnames = {}

                </div>
              </div>
            </div>

            <div className="collection-mark-transcribe-container">
              <a href="/#/Mark">
                <div className="collection-button mark-button">MARK</div>
              </a>
              <a href="/#/Transcribe">
                <div className="collection-button transcribe-button">TRANSCRIBE</div>
              </a>
            </div>

            <div className="collection-progressbar-container">
              <div className="collection-progressbar"
                   aria-valuenow={parseInt((@state.group.stats?.completeness ? 0) * 100)}
                   aria-valuemin="0" aria-valuemax="100"
                   style={{width: parseInt((@state.group.stats?.completeness ? 0) * 100) + "%"}}></div>
            </div>

            <div className="collection-browse-controls-content">
              <div className="collection-progress-details">
                <div className="collection-progress-overall">
                  <div className="collection-progress-overall-label">Completed Playbills:</div>
                  <div className="collection-progress-overall-value">{@state.group_stats.total_completed}</div>
                </div>

                <div className="collection-progress-box-container">
                  <div className="collection-progress-box">
                    <div className="collection-progress-top">{@state.group_stats.total_marks}</div>
                    <div className="collection-progress-bottom">Marked Fields</div>
                  </div>

                  <div className="collection-progress-box collection-progress-box-right">
                    <div className="collection-completed-top">{@state.group_stats.total_transcriptions}</div>
                    <div className="collection-completed-bottom">Transcribed Fields</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

    max_year: 1940
    start_year: 1920
    end_year: 1940
    group_name: ''
    group_description: ''

  componentDidMount: ->
    # make a request to /groups/{{ group_id }},
    # fetch metadata that describes the group name and description, and pass those values into
    # the application state
    API.type('groups').get(@props.params.group_id).then (group_json) =>
      @setState
        group_name: group_json.name,
        group_description: group_json.description

    # make a request to /group_stats?group_id={{ group_id }}
    # using the incoming data to set completion stats
    API.type('group_stats').get(group_id: @props.params.group_id).then (stats_json) =>
      @setState
        group_stats: stats_json[0]

