feat: 404 page for categories and posts

Author: KristofersOzolinsMagebit

CHANGELOG.md

@@ -2,6 +2,16 @@
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+#### [1.2.0] - 2020-10-09
+
+##### Added
+- Redirect to 404 page if post or category not found
+
+#### [1.1.1] - 2020-10-09
+
+##### Added
+- Removed moment.js - replaced with day.js
+
 #### [1.1.0] - 2020-08-20
 
 ##### Added

helpers/index.ts

@@ -0,0 +1,15 @@
+import { AsyncDataLoader } from "@vue-storefront/core/lib/async-data-loader"
+
+export async function getContext(ctx) {
+  if (ctx) {
+    return ctx
+  }
+
+  return new Promise(resolve => {
+    AsyncDataLoader.push({
+      execute: async (app) => {
+        resolve(app.context)
+      }
+    })
+  })
+}

pages/BlogCategory.vue

@@ -102,6 +102,7 @@ import { Logger } from '@vue-storefront/core/lib/logger'
 import { isServer } from '@vue-storefront/core/helpers'
 import { htmlDecode } from '@vue-storefront/core/filters/html-decode'
 import { mapGetters } from 'vuex'
+import { getContext } from '../helpers'
 
 // Components
 import Breadcrumbs from 'theme/components/core/Breadcrumbs'
@@ -110,7 +111,7 @@ import BlogListing from '../components/BlogListing'
 
 const POSTS_PER_PAGE = 10
 
-const composeInitialPageState = async (store, route, forceLoad = false) => {
+const composeInitialPageState = async (store, route, context = null) => {
   try {
     await store.dispatch('aheadworks-blog/loadCategories', {
       size: 200
@@ -120,6 +121,12 @@ const composeInitialPageState = async (store, route, forceLoad = false) => {
 
     if (route.params.slug) {
       currentCategory = await store.getters['aheadworks-blog/getCurrentCategory']
+
+      if (!currentCategory && isServer) {
+        const ctx = await getContext(context)
+        ctx.server.response.redirect('/page-not-found', 302)
+      }
+
       await store.dispatch('aheadworks-blog/loadCategoryPosts', {
         category: currentCategory,
         perPage: POSTS_PER_PAGE
@@ -199,14 +206,14 @@ export default {
     }
   },
   async asyncData ({ store, route, context }) { // this is for SSR purposes to prefetch data - and it's always executed before parent component methods
-    await composeInitialPageState(store, route)
+    await composeInitialPageState(store, route, context)
   },
   async beforeRouteEnter (to, from, next) {
     if (isServer) next() // SSR no need to invoke SW caching here
     else if (!from.name) { // SSR but client side invocation, we need to cache products and invoke requests from asyncData for offline support
       next(async vm => {
         vm.loading = true
-        await composeInitialPageState(vm.$store, to, true)
+        await composeInitialPageState(vm.$store, to)
         vm.loading = false
       })
     } else {

pages/BlogPost.vue

@@ -107,20 +107,26 @@ import config from 'config'
 import { htmlDecode } from '@vue-storefront/core/filters/html-decode'
 import { mapGetters } from 'vuex'
 import dayjs from 'dayjs'
+import { getContext } from '../helpers'
 
-const composeInitialPageState = async (store, route, force = false) => {
+const composeInitialPageState = async (store, route, context = null) => {
   try {
     await store.dispatch('aheadworks-blog/loadCategories', {
       size: 200
     })
 
     const cached = store.getters['aheadworks-blog/getCurrentPost']
     if (!cached && route.params.slug) {
-      await store.dispatch('aheadworks-blog/loadPost', {
+      const post = await store.dispatch('aheadworks-blog/loadPost', {
         filters: {
           url_key: route.params.slug
         }
       })
+
+      if (!post && isServer) {
+        const ctx = await getContext(context)
+        ctx.server.response.redirect('/page-not-found', 302)
+      }
     }
 
     await store.dispatch('aheadworks-blog/loadRecentPosts')
@@ -176,14 +182,14 @@ export default {
     }
   },
   async asyncData ({ store, route, context }) { // this is for SSR purposes to prefetch data - and it's always executed before parent component methods
-    await composeInitialPageState(store, route)
+    await composeInitialPageState(store, route, context)
   },
   async beforeRouteEnter (to, from, next) {
     if (isServer) next() // SSR no need to invoke SW caching here
     else if (!from.name) { // SSR but client side invocation, we need to cache products and invoke requests from asyncData for offline support
       next(async vm => {
         vm.loading = true
-        await composeInitialPageState(vm.$store, to, true)
+        await composeInitialPageState(vm.$store, to)
         vm.loading = false
       })
     } else {

state/actions.ts

@@ -3,6 +3,7 @@ import RootState from '@vue-storefront/core/types/RootState'
 import { BlogCategory, BlogState, BlogCategorySearchOptions, BlogPost, BlogPostSearchOptions } from '../types'
 import { BlogCategoryService, BlogPostService } from '../data-resolver'
 import { BLOG_ADD_CATEGORY, BLOG_SET_SEARCH_POSTS_STATS, BLOG_SET_CATEGORY_POSTS, BLOG_SET_RECENT_POSTS, BLOG_ADD_CATEGORIES, BLOG_ADD_POST } from './mutation-types'
+import { Logger } from '@vue-storefront/core/lib/logger'
 
 const actions: ActionTree<BlogState, RootState> = {
   async loadCategories ({ commit }, categorySearchOptions: BlogCategorySearchOptions): Promise<BlogCategory[]> {
@@ -24,7 +25,11 @@ const actions: ActionTree<BlogState, RootState> = {
     const { items } = await BlogCategoryService.getBlogCategories(categorySearchOptions)
     const category: BlogCategory = items && items.length ? items[0] : null
 
-    commit(BLOG_ADD_CATEGORY, category)
+    if (category) {
+      commit(BLOG_ADD_CATEGORY, category)
+    } else {
+      Logger.warn('Blog category not found', 'aheadworks-blog')()
+    }
 
     return category
   },
@@ -40,7 +45,11 @@ const actions: ActionTree<BlogState, RootState> = {
     const { items } = await BlogPostService.getBlogPosts(postSearchOptions)
     const post: BlogPost = items && items.length ? items[0] : null
 
-    commit(BLOG_ADD_POST, post)
+    if (post) {
+      commit(BLOG_ADD_POST, post)
+    } else {
+      Logger.warn('Blog post not found', 'aheadworks-blog')()
+    }
 
     return post
   },