license import { LitElement , html , css , property } from 'lit-element' ; import { repeat } from 'lit-html/directives/repeat.js' ; import { connect , updateMetadata } from 'pwa-helpers' ; import { fetchList , fetchListIfNeeded } from '../actions/lists.js' ; import lists , { currentItemsSelector , currentListSelector , ListState } from '../reducers/lists.js' ; import items , { ItemState } from '../reducers/items.js' ; import { store , RootState } from '../store.js' ; import { sharedStyles } from './shared-styles.js' ; import './hn-loading-button.js' ; import './hn-summary.js' ; store . addReducers ( { lists , items } ) ; export class HnListElement extends connect ( store ) ( LitElement ) { static get styles ( ) { return [ sharedStyles , css `
      :host > a {
        display: inline-block;
        margin: 0 8px 8px 0;
      }` ] ; } render ( ) { const pathname = window . location . pathname ; const items = this . _items || [ ] ; const list = this . _list || { } ; const pageNumber = this . _page || 0 ; const pageStr = '' + pageNumber ; const pages = list . pages ; const loading = pages && pages [ pageStr ] && pages [ pageStr ] . isFetching ; return html `
    ${ list . id !== 'favorites' ? html `
      <hn-loading-button .loading="${ loading }" @click="${ this . _reload }">
      </hn-loading-button>
    ` : null }
    ${ repeat ( items , ( item ) => html `
      <hn-summary .item="${ item }"></hn-summary>
    ` ) }
    ${ list . id !== 'favorites' && items . length ? html `
      <a href="${ `${ pathname }?page=${ Math . max ( pageNumber - 1 , 1 ) }` }">Previous Page</a>
      <a href="${ `${ pathname }?page=${ pageNumber + 1 }` }">Next Page</a>
    ` : null }` ; } @ property ( ) private _list ? : ListState ; @ property ( ) private _items ? : Array < ItemState > ; @ property ( ) private _page ? : number ; _reload ( ) { store . dispatch ( fetchList ( this . _list , this . _page ) ) ; } stateChanged ( state ) { const list = currentListSelector ( state ) ; if ( list ) { updateMetadata ( { title : list . id } ) ; document . body . setAttribute ( 'list' , list . id || '' ) ; this . _list = list ; this . _page = state . app . page ; const items = currentItemsSelector ( state ) ; if ( items ) { this . _items = items ; } } } } customElements . define ( 'hn-list' , HnListElement ) ; export { currentListSelector , fetchListIfNeeded } ;