license import { LitElement , html , css , property } from 'lit-element' ; import { repeat } from 'lit-html/directives/repeat.js' ; import { unsafeHTML } from 'lit-html/directives/unsafe-html.js' ; import { connect , updateMetadata } from 'pwa-helpers' ; import { fetchItem , fetchItemIfNeeded } from '../actions/items.js' ; import items , { currentItemSelector , 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' ; import './hn-comment.js' ; store . addReducers ( { items } ) ; export class HnItemElement extends connect ( store ) ( LitElement ) { static get styles ( ) { return [ sharedStyles , css `
      hn-summary {
        padding-bottom: 16px;
        border-bottom: 1px solid #e5e5e5;
      }` ] ; } render ( ) { const item = this . _item || { } ; const comments = item . comments || [ ] ; return html `
    <hn-loading-button .loading="${ item . isFetching }" @click="${ this . _reload }">
    </hn-loading-button>
    <div ?hidden="${ item . failure }">
      <hn-summary .item="${ item }"></hn-summary>
      <div ?hidden="${ ! item . content }">${ unsafeHTML ( item . content ) }</div>
      ${ repeat ( comments , ( comment ) => html `
        <hn-comment .comment="${ comment }"></hn-comment>
      ` ) }
    </div>
    ${ item . failure ? html `<p>Item not found</p>` : null }` ; } @ property ( ) private _item ? : ItemState ; _reload ( ) { store . dispatch ( fetchItem ( this . _item ) ) ; } stateChanged ( state ) { const item = currentItemSelector ( state ) ; if ( item ) { updateMetadata ( { title : item . title } ) ; this . _item = item ; } } } customElements . define ( 'hn-item' , HnItemElement ) ; export { currentItemSelector , fetchItemIfNeeded } ;