Merge branch 'develop'

bstavroulakis · Sep 14, 2017 · e467235 · e467235
2 parents 10c0960 + 5830eba
commit e467235
Show file tree

Hide file tree

Showing 12 changed files with 83 additions and 94 deletions.
diff --git a/src/components/vwpPaging.vue b/src/components/vwpPaging.vue
@@ -2,8 +2,10 @@
   <div id="vwpPaging">
     <div class="paging-wrapper">
       <div class="columns paging-wrapper-inner">
-        <div v-for="(item, index) in pages" class="column paging-link">
-          <router-link v-if="(item != '...')"  v-bind:class="{ 'is-active': item == page }" :to="path + '/page/' + item + '/'">{{item}}</router-link>
+        <div v-for="(item, index) in pages" class="column paging-link" v-bind:key="item">
+          <router-link v-if="(item != '...')"  
+            v-bind:class="{ 'is-active': ((page == null && item === 1) || (item === page)) }" 
+            :to="path + '/page/' + item + '/'">{{item}}</router-link>
           <div v-if="(item == '...')">{{item}}</div>
         </div>
       </div>
@@ -21,6 +23,12 @@ export default {
       page: 1
     }
   },
+  watch: {
+    '$route' (to, from) {
+      this.page = to.params.page
+      this.refreshPages(this.page)
+    }
+  },
   methods: {
     refreshPages: function (page) {
       if (!page) {

diff --git a/src/components/vwpPostCard.vue b/src/components/vwpPostCard.vue
@@ -9,25 +9,27 @@
         <div class="content">
           <div v-if="isNew(post.date)" class="is-new">new</div>
           <div class="post-title">
-            <router-link :to="'/category/' + category.slug + '/' + post.slug" v-html="post.title.rendered"></router-link>
+            <div v-if="post.slug && categorySlug">
+              <router-link :to="'/category/' + categorySlug + '/' + post.slug"><span v-html="post.title.rendered"></span></router-link>
+            </div>
           </div>
           <p class="is-clearfix"></p>
           <div v-html="post.excerpt.rendered"></div>
-          <span v-for="tag in post.tags">#{{tag}}</span>
+          <span v-for="tag in post.tags" v-bind:key="tag.id">>#{{tag}}</span>
           <br>
           <small>{{post.date}}</small>
         </div>
       </div>
       <footer class="card-footer">
-        <router-link :to="'/category/' + category.slug + '/' + post.slug" class="card-footer-item">Read More</router-link>
+        <router-link :to="'/category/' + categorySlug + '/' + post.slug" class="card-footer-item">Read More</router-link>
       </footer>
     </div>
 </template>
 
 <script>
 export default {
   name: 'vwp-post-card',
-  props: ['post', 'category', 'newFlag'],
+  props: ['post', 'categorySlug', 'newFlag'],
   methods: {
     cdnUrl: function (url) {
       return url.replace('https://api.fullstackweekly.com', 'https://fullstackweekly.azureedge.net')

diff --git a/src/components/vwpSingle.vue b/src/components/vwpSingle.vue
@@ -13,7 +13,7 @@
       <div class="single-content card">
         <div class="is-pulled-left" v-if="single.tags && single.tags.length > 0">
           <i class="icon-tags" aria-hidden="true"></i>
-          <span class="tag" v-for="tag in single.pure_taxonomies.tags">
+          <span class="tag" v-for="tag in single.pure_taxonomies.tags" v-bind:key="tag.id">
             {{tag.name}}
           </span>
         </div>

diff --git a/src/components/vwpSubcategory.vue b/src/components/vwpSubcategory.vue
@@ -1,9 +1,11 @@
 <template>
   <div>
     <div v-if="categories && categories.length > 0">
-      <div v-for="category in categories">
+      <div v-for="category in categories" v-bind:key="category.id">
         <h2>
-          {{category.name}}
+          <router-link :to="'/category/' + category.slug + '/'">
+            <span>{{category.name}}</span>
+          </router-link>
         </h2>
         <div class="columns category-posts" v-if="!category.posts || category.posts.length === 0">
           <div class="column is-one-third"><div class="card fake-card"><div class="card-content">&nbsp;</div></div></div>
@@ -14,13 +16,15 @@
           <div class="column is-one-third"><div class="card fake-card"><div class="card-content">&nbsp;</div></div></div>
         </div>
         <div class="columns category-posts">
-          <div class="column is-one-third" v-for="(item, index) in category.posts">
-            <vwp-post-card :post="item" :newFlag="newFlag" :category="category"></vwp-post-card>
+          <div class="column is-one-third" v-for="(item, index) in category.posts" v-bind:key="item.id">
+            <vwp-post-card :post="item" :newFlag="newFlag" :categorySlug="category.slug"></vwp-post-card>
           </div>
         </div>
         <div v-if="!hidePagination">
           <div class="columns"><div class="column"></div></div>
-          <vwp-paging v-if="category.totalPages > 0" :totalPages="category.totalPages" :path="'/category/' + category.slug"></vwp-paging>
+          <vwp-paging v-if="category.totalPages > 0" 
+            :totalPages="category.totalPages" 
+            :path="'/category/' + category.slug"></vwp-paging>
         </div>
         <div class="columns"><div class="column"></div></div>
       </div>
@@ -29,20 +33,14 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import VwpPostCard from './vwpPostCard'
+import VwpPostCard from './vwpPostCard.vue'
 import VwpPaging from './vwpPaging.vue'
 export default {
   name: 'vwp-subcategory',
   components: {
     'vwp-post-card': VwpPostCard,
     'vwp-paging': VwpPaging
   },
-  props: ['hidePagination', 'newFlag'],
-  computed: {
-    ...mapGetters('category', [
-      'categories'
-    ])
-  }
+  props: ['hidePagination', 'newFlag', 'categories']
 }
 </script>
diff --git a/src/theme/Category-LearningPaths.vue b/src/theme/Category-LearningPaths.vue
@@ -36,7 +36,6 @@
 <script>
 import { mapGetters } from 'vuex'
 const fetchInitialData = (store, route) => {
-  store.state.learningPaths.paths = []
   return store.dispatch(`learningPaths/getPaths`, {categoryId: 27})
 }
 export default {

diff --git a/src/theme/Category-Newsletter.vue b/src/theme/Category-Newsletter.vue
@@ -6,15 +6,15 @@
       <p>This newsletter is all of the links and material that raise my eyebrow each week as a full stack developer.</p>
     </div>
     <div class="columns"><div class="column"></div></div>
-    <vwp-subcategory hidePagination="true" newFlag="true"></vwp-subcategory>
+    <vwp-subcategory :categories="categories" hidePagination="true" newFlag="true"></vwp-subcategory>
   </div>
 </template>
 <script>
 import AppNewsletter from './AppNewsletter.vue'
 import { mapGetters, mapActions } from 'vuex'
 import VwpSubcategory from 'components/vwpSubcategory.vue'
-const fetchInitialData = (store) => {
-  store.state.category.categories = []
+const fetchInitialData = (store, route) => {
+  route.params.page = route.params.page || 1
   return store.dispatch(`category/getCategory`, {parentId: 28})
 }
 export default {
@@ -43,9 +43,7 @@ export default {
   },
   prefetch: fetchInitialData,
   created () {
-    if (this.categories && this.categories.length <= 1) {
-      fetchInitialData(this.$store)
-    }
+    this.loadData()
   }
 }
 </script>

diff --git a/src/theme/Category.vue b/src/theme/Category.vue
@@ -1,15 +1,18 @@
 <template>
   <section>
-    <div class="columns personal-card card" v-if="categories && categories.length === 1 && categories[0].slug === 'blog'">
-      <div class="column personal-img"><img src="https://fullstackweekly.azureedge.net/wp-content/uploads/2017/03/bill-100x100.jpg" alt="Bill Stavroulakis" width="100"></div>
-      <div class="column is-three-quarters personal-desc">
-        Hi, I’m <a href="https://twitter.com/bstavroulakis" rel="noopener" target="_blank">Bill Stavroulakis</a>, many years ago my journey started on this thing called Web Development.<br/><br/>
-        <span class="is-pulled-left">Over here you can find all of the interesting things I find on my way.&nbsp;</span>
-        <span class="is-pulled-left">This website is part of the <a href="https://github.com/bstavroulakis/vue-wordpress-pwa">vue-wordpress-pwa</a> project.</span>
-        <div class="is-clearfix"></div>
+    <div class="card personal-card" v-if="categories && categories.length === 1 && categories[0].slug === 'blog'">
+      <div class="columns">
+        <div class="column personal-img"><img src="https://fullstackweekly.azureedge.net/wp-content/uploads/2017/03/bill-100x100.jpg" alt="Bill Stavroulakis" width="100"></div>
+        <div class="column is-three-quarters personal-desc">
+          Hi, I’m <a href="https://twitter.com/bstavroulakis" rel="noopener" target="_blank">Bill Stavroulakis</a>, many years ago my journey started on this thing called Web Development.<br/><br/>
+          <span class="is-pulled-left">Over here you can find all of the interesting things I find on my way.&nbsp;</span>
+          <span class="is-pulled-left">This website is part of the <a href="https://github.com/bstavroulakis/vue-wordpress-pwa">vue-wordpress-pwa</a> project.</span>
+          <div class="is-clearfix"></div>
+        </div>
       </div>
     </div>
-    <vwp-subcategory></vwp-subcategory>
+    <div class="clearfix"></div>
+    <vwp-subcategory :categories="categories" ></vwp-subcategory>
   </section>
 </template>
 
@@ -56,30 +59,23 @@ export default {
 </script>
 
 <style lang="scss">
-  #ThemeCategory{
-    .personal-card{
-      background-color: #ffffff;
-      margin-right: 0;
-      margin-left: 0;
-      .github-star{
-        float:left;
-        margin-left:10px;
-        margin-top:3px;
-      }
-      .personal-img{
-        text-align: center;
-        align-self: center;
-        margin-bottom:0;
-      }
-      .personal-desc{
-        align-self: center;
-      }
-    }
-    .category-posts{
-      flex-wrap:wrap;
-    }
-   .hero-body{
-      padding-top: 0;
-    }
+  .personal-card{
+    display: flex;
+    padding: 10px;
+    margin-bottom: 20px;
+  }
+  .personal-img{
+    text-align: center;
+    align-self: center;
+    margin-bottom:0;
+  }
+  .personal-desc{
+    align-self: center;
+  }
+  .category-posts{
+    flex-wrap:wrap;
+  }
+  .hero-body{
+    padding-top: 0;
   }
 </style>
diff --git a/src/theme/Page.vue b/src/theme/Page.vue
@@ -15,7 +15,6 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 const fetchInitialData = (store, route) => {
-  store.state.page.single = {}
   return store.dispatch(`page/getPage`, route.params.id)
 }
 export default {

diff --git a/src/theme/Single.vue b/src/theme/Single.vue
@@ -14,7 +14,6 @@ import { mapGetters, mapActions } from 'vuex'
 import VwpSingle from 'components/vwpSingle.vue'
 import VwpComment from 'components/vwpComment.vue'
 const fetchInitialData = (store, route) => {
-  store.state.category.single = {}
   return store.dispatch(`category/getPost`, route.params.id)
 }
 export default {
@@ -46,9 +45,7 @@ export default {
   },
   prefetch: fetchInitialData,
   created () {
-    if (!this.single || !this.single.slug || (this.single.slug)) {
-      fetchInitialData(this.$store, this.$route)
-    }
+    this.loadData()
   }
 }
 </script>
diff --git a/src/vuex/modules/category/actions.js b/src/vuex/modules/category/actions.js
@@ -4,17 +4,26 @@ const getCategory = ({commit, state, dispatch}, params) => {
     if (!params.categorySlug && !params.parentId) {
       params.categorySlug = state.categories[0].slug
     }
-    wordpressService.getCategory(null, params.categorySlug, params.parentId).then((categories) => {
-      commit('CATEGORY_UPDATED', categories)
+    wordpressService.getCategory(null, params.categorySlug, params.parentId).then((responseCategories) => {
       var postPromises = []
       if (!params.page) {
         params.page = 1
       }
       state.page = params.page
-      for (var i = 0; i < categories.length; i++) {
-        postPromises.push(getCategoryPosts({commit, state}, {categoryId: categories[i].id, page: params.page}))
+
+      for (var i = 0; i < responseCategories.length; i++) {
+        const responseCategory = responseCategories[i]
+        const category = {
+          id: responseCategory.id,
+          name: responseCategory.name,
+          title: responseCategory.name,
+          slug: responseCategory.slug,
+          better_featured_image: responseCategory.better_featured_image
+        }
+        postPromises.push(getCategoryPosts({commit, state}, {category, page: params.page}))
       }
-      Promise.all(postPromises).then(() => {
+      Promise.all(postPromises).then(resolveCategories => {
+        state.categories = resolveCategories
         resolve()
       })
     }).catch(error => {
@@ -25,9 +34,10 @@ const getCategory = ({commit, state, dispatch}, params) => {
 
 const getCategoryPosts = ({commit, state}, params) => {
   return new Promise((resolve, reject) => {
-    wordpressService.getPosts(params.categoryId, params.page, 6).then((category) => {
-      commit('CATEGORY_POSTS_UPDATED', {categoryId: params.categoryId, posts: category.posts, totalPages: category.totalPages})
-      resolve()
+    wordpressService.getPosts(params.category.id, params.page, 6).then((category) => {
+      params.category.posts = category.posts
+      params.category.totalPages = category.totalPages
+      resolve(params.category)
     }).catch(error => {
       reject(new Error(error))
     })

diff --git a/src/vuex/modules/category/mutations.js b/src/vuex/modules/category/mutations.js
@@ -1,25 +1,7 @@
-import Vue from 'vue'
-
-const CATEGORY_UPDATED = (state, categories) => {
-  state.categories = categories
-}
-
-const CATEGORY_POSTS_UPDATED = (state, {categoryId, posts, totalPages}) => {
-  for (var i = 0; i < state.categories.length; i++) {
-    if (state.categories[i].id === categoryId) {
-      Vue.set(state.categories[i], 'posts', posts)
-      Vue.set(state.categories[i], 'totalPages', totalPages)
-      break
-    }
-  }
-}
-
 const POST_UPDATED = (state, post) => {
   state.single = post
 }
 
 export {
-  CATEGORY_UPDATED,
-  CATEGORY_POSTS_UPDATED,
   POST_UPDATED
 }
diff --git a/src/vuex/modules/learning-paths/actions.js b/src/vuex/modules/learning-paths/actions.js
@@ -1,3 +1,5 @@
+import Vue from 'vue'
+
 import wordpressService from '../../../app.service'
 const getPaths = ({commit, state}, params) => {
   return new Promise((resolve, reject) => {
@@ -24,7 +26,7 @@ const getFirstPost = ({commit, state}, params) => {
     wordpressService.getPosts(params.categoryId, 1, 1, 'asc').then((data) => {
       for (var j = 0; j < state.paths.length; j++) {
         if (state.paths[j].id === params.categoryId) {
-          state.paths[j].firstPostSlug = '/category/learning-paths/' + state.paths[j].slug + '/' + data.posts[0].slug
+          Vue.set(state.paths[j], 'firstPostSlug', '/category/learning-paths/' + state.paths[j].slug + '/' + data.posts[0].slug)
         }
       }
       resolve()
@@ -35,8 +37,6 @@ const getFirstPost = ({commit, state}, params) => {
 }
 
 const getPath = ({commit, state}, params) => {
-  state.paths = null
-  state.single = null
   return new Promise((resolve, reject) => {
     wordpressService.getCategory(null, params.categorySlug, null).then((categories) => {
       wordpressService.getPosts(categories[0].id, 1, 50, 'asc').then((data) => {