tunes list (after).js

/// <reference path="../../mithril.d.ts"/>
module Components {
  interface ViewArgs {
    sortBy?: any
    getTracks?: (sort: string) => Model.Track[]
    selectTrack?: (track: {}) => void
    isSortedOn?: (sort: string) => string
    tracks?: Model.Track[]
  }

  const view = (_, {
    sortBy = m.prop(''),
    getTracks,
    selectTrack
  }: ViewArgs) => {
    const tracks = getTracks(sortBy())
    const isSortedOn = sort => sortBy() === sort ? '*' : ''

    return tracks.length
      ? m('table.pure-table.pure-table-bordered', [
        head({ sortBy, isSortedOn }),
        body({ tracks, selectTrack, sortBy, isSortedOn })])
      : m('')
  }

  const head = ({
    sortBy,
    isSortedOn
  }: ViewArgs) => m('thead', [
    m('tr', {
      style: 'cursor: pointer',
      onclick: e => sortBy(e.target.id)
    }, [
      m('th[id="trackName"]', `Name ${isSortedOn('trackName')}`),
      m('th[id="artistName"]', `Artist ${isSortedOn('artistName')}`),
      m('th[id="collectionName"]', `Collection ${isSortedOn('collectionName')}`),
      m('th[id="trackPrice"]', `Price ${isSortedOn('trackPrice')}`)
    ])
  ])

  const body = (args: ViewArgs) => m('tbody', [
    args.tracks.map(track => row(track, args))
  ])

  const row = (track: Model.Track, { selectTrack }: ViewArgs) => m('tr', [
    m('td', name(track, selectTrack)),
    m('td', track.artistName),
    m('td', track.collectionName),
    m('td', track.trackPrice)
  ])

  const name = (track: Model.Track, selectTrack) => m('div', [
    m('img', {
      alt: 'artwork cover',
      src: track.artworkUrl100,
      style: 'vertical-align: middle; margin: .2em; border: solid black; cursor: pointer',
      onclick: () => selectTrack(track)
    }),

    m('span', { style: 'font-size: larger' }, track.trackName)
  ])
  
  export const TunesList = { view }
}

tunes list (before).js

/// <reference path="../../mithril.d.ts"/>
module Components {
  export class TunesList implements Mithril.Component<any> {
    sortBy = '';
    selectTrack: (track) => void;

    controller(args) {
      this.selectTrack = (track) => args.selectTrack(track);
    }

    view(_, args) {
      const tracks = args.getTracks(this.sortBy);
      return tracks.length
        ? m('table.pure-table.pure-table-bordered', [
          this.head(),
          this.body(tracks)])
        : m('');
    }

    head() {
      return m('thead', [
        m('tr', {
          style: 'cursor: pointer',
          onclick: e => this.updateSort(e.target.id)
        }, [
            m('th[id="trackName"]', `Name ${this.isSortedOn('trackName')}`),
            m('th[id="artistName"]', `Artist ${this.isSortedOn('artistName')}`),
            m('th[id="collectionName"]', `Collection ${this.isSortedOn('collectionName')}`),
            m('th[id="trackPrice"]', `Price ${this.isSortedOn('trackPrice')}`)
          ])
      ]);
    }

    body(tracks) {
      return m('tbody', [
        tracks.map(track => this.row(track))
      ]);
    }

    row(track: Model.Track) {
      return m('tr', [
        m('td', this.name(track)),
        m('td', track.artistName),
        m('td', track.collectionName),
        m('td', track.trackPrice)
      ]);
    }

    name(track: Model.Track) {
      return m('div', [
        m('img', {
          alt: 'artwork cover',
          src: track.artworkUrl100,
          style: 'vertical-align: middle; margin: .2em; border: solid black; cursor: pointer',
          onclick: () => this.selectTrack(track)
        }),
        m('span', { style: 'font-size: larger' }, track.trackName)
      ]);
    }

    updateSort(field: string) {
      this.sortBy = field;
    }

    isSortedOn(field: string) {
      return this.sortBy === field ? '*' : '';
    }
  }
}