<template>
  <div class="columns">
    <div class="column is-one-third" v-for="(post, title) in posts" v-bind:key="post.id">
      <app-post>
        <h3 slot="title">{{ post.title }}</h3>
        <span slot="content">{{ post.content }}</span>
        <a slot="link" class="card-footer-item" :href="post.link" target="_blank">Read More</a>
      </app-post>
    </div>
  </div>
</template>
<script>
  import Post from './Post.vue'
  export default {
    components: {
      'app-post': Post
    },
    // whey are we doing it like this?
    data () {
      return {
        // Vuejs exposes the router through the $route object. With this you can
        // actually use the object to navigate by doing something like this.$route.push('/')
        // or obtain data like we are below
        id: this.$route.params.id,
        postsFrontEnd: [
          { id: 1, title: 'PWA Stats', content: 'A community-driven list of stats and news related to Progressive Web Apps', link: 'https://www.pwastats.com/' },
          { id: 2, title: 'A Comprehensive Guide To HTTP/2 Server Push', content: 'No longer is HTTP/2 a feature we pine for. It has arrived, and with it comes server push!', link: 'https://www.smashingmagazine.com/2017/04/guide-http2-server-push/' },
          { id: 3, title: 'So what’s this GraphQL thing I keep hearing about?', content: 'Why now is the perfect time to learn what exactly this GraphQL thing you keep hearing about really is.', link: 'https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf' }
        ],
        postsMobile: [
          { id: 4, title: 'State of The Mobile Gap Between Native and Web', content: 'Clearly PhoneGap, and Cordova are still required today in the mobile world, but when is it really needed? Did the web ever catch up?', link: 'https://remysharp.com/2016/05/28/state-of-the-gap' },
          { id: 5, title: 'Learning JavaScript Design Patterns', content: 'Design patterns are reusable solutions to commonly occurring problems in software design.', link: 'https://addyosmani.com/resources/essentialjsdesignpatterns/book/' },
          { id: 6, title: 'The Power of Custom Directives in Vue', content: 'The beautiful thing about Vue is that it\'s incredibly feature-rich.', link: 'https://css-tricks.com/power-custom-directives-vue/' }
        ],
        posts: []
      }
    },
    methods: {
      loadPosts () {
        if (this.id === 'front-end') {
          this.posts = this.postsFrontEnd
        } else {
          this.posts = this.postsMobile
        }
      }
    },
    watch: {
      '$route' (to, from) {
        this.id = to.params.id
        this.loadPosts()
      }
    },
    created () {
      this.loadPosts()
      console.log(this.$route.query.page) // This is to show you how easy it is to access the ?page= query param.
    }

  }
</script>
