2-lit-element/solutions/10-template-function.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <script type="module">
    import {LitElement, html, css} from 'https://unpkg.com/lit-element@2.0.0-rc.5?module';
    import 'https://unpkg.com/@polymer/paper-button/paper-button.js?module';

    function filterStories(stories, filter){
      return stories.filter((article) => {
        if (filter === 'read') return article.read;
        if (filter === 'unread') return !article.read;
        if (filter === 'all') return true;
      });
    }

    function filterButtonsTemplate(stories, setFilter) {
      return html`
        <paper-button raised @click=${() => setFilter('all')}>
          all
        </paper-button>

        <paper-button raised @click=${() => setFilter('read')}>
          read (${filterStories('read').length})
        </paper-button>

        <paper-button raised @click=${() => setFilter('unread')}>
          unread (${filterStories('unread').length})
        </paper-button>
      `;
    }

    function articleTemplate(article, read, onClick) {
      return html`
        <li>
          <paper-button @click=${onClick}>
            ${read ? 'read' : 'unread'}
          </paper-button>

          <h2>${article.title}</h2>
          <p>${article.description}</p>
        </li>
      `;
    }

    class MyElement extends LitElement {
      static get styles() {
        return css`
          :host {
            display: block;
          }
        `;
      }

      static get properties() {
        return {
          articles: { type: Array },
          filter: { type: String }
        };
      }

      constructor() {
        super();
        this.articles = [];
        // add a filter
        this.filter = 'all';
      }

      connectedCallback() {
        super.connectedCallback();
        fetch('https://newsapi.org/v2/everything?q=tech&apiKey=<your-api-key>')
          .then(response => response.json())
          .then(response => {
            this.articles = response.articles.map((article, i) => ({...article, id: i, read: false}));
          })
      }

      _toggleReadStatus(e) {
        this.articles[e.detail].read = !this.articles[e.detail].read;
        this.requestUpdate();
      }

      render() {
        const filteredArticles = filterStories(this.stories, this.filter);

        return html`
          ${filterButtonsTemplate(this.stories, (filter) => this.filter = filter)}

          <ul>
            <!-- apply filter to the array -->
            ${filteredArticles.map(article => html`
              <my-article
                .title=${article.title}
                .description=${article.description}
                .read=${article.read}
                .id=${article.id}
                @toggled=${this._toggleReadStatus}
              ></my-article>
            `)}
          </ul>
        `;
      }
    }

    customElements.define('my-element', MyElement);

    class MyArticle extends LitElement {
      static get styles() {
        return css`
          :host {
            display: block;
          }
        `;
      }

      static get properties() {
        return {
          title: { type: String },
          description: { type: String },
          read: { type: Boolean },
          id: { type: Number }
        }
      }

      // dispatch an event to the parent element
      _toggleRead() {
        this.dispatchEvent(new CustomEvent('toggled', { detail: this.id }));
      }

      render() {
        return articleTemplate(this.article, this.read, this._toggleRead);
      }
    }
    customElements.define('my-article', MyArticle);
  </script>
</head>

<body>
  <my-element></my-element>
</body>
</html>