Bugfix remove path query from all media pages use query params (#398)

next.config.js

@@ -10,6 +10,7 @@ const purgeCSS = [
     defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
   },
 ]
+
 const postCSSFlexBugsFixes = [
   'postcss-flexbugs-fixes',
   [

package.json

@@ -34,6 +34,10 @@
     "slick-carousel": "1.8.1",
     "xml2js": "0.4.23"
   },
+  "engines": {
+    "node": ">=14.0.0 <=16.15.0",
+    "npm": ">=8.0.0"
+  },
   "license": "MIT",
   "scripts": {
     "format": "pretty-quick --staged",
@@ -48,8 +52,7 @@
     "export": "next export",
     "storybook": "start-storybook -p 6006 -s ./public",
     "build-storybook": "build-storybook -s public",
-    "prepare": "husky install",
-    "preinstall": "node ./scripts/node-engine-check.js"
+    "prepare": "husky install"
   },
   "devDependencies": {
     "@babel/core": "7.16.0",

src/components/Nav/Nav.js

@@ -230,14 +230,14 @@ function Nav() {
               </a>
               <ul className="dropdown-menu">
                 <li role="menuitem" className="nav media-dropdown-item" onClick={resetNavigation}>
-                  <Link href="/blog/1">
+                  <Link href="/blog">
                     <a>
                       <span>Blog</span>
                     </a>
                   </Link>
                 </li>
                 <li role="menuitem" className="nav media-dropdown-item" onClick={resetNavigation}>
-                  <Link href="/podcast/1">
+                  <Link href="/podcast">
                     <a>
                       <span>Podcast</span>
                     </a>

src/components/Pagination/Pagination.js

@@ -40,7 +40,7 @@ function Pagination({
           <ul className="pagination m-20">
             {!isFirstPage && (
               <li>
-                <Link href={`${prevPage}`} rel="prev">
+                <Link href={`${prevPage === '/blog?page=1' ? '' : prevPage}`} rel="prev">
                   <a>
                     <span aria-hidden="true">Previous</span>
                   </a>
@@ -50,7 +50,7 @@ function Pagination({
             {totalPages > 1 &&
               Array.from({ length: totalPages }, (_, index) => (
                 <li key={eachPage++}>
-                  <Link href={`/${path}/${index + 1}`}>
+                  <Link href={`/${path}?page=${index + 1}`}>
                     <a>{index + 1}</a>
                   </Link>
                 </li>

src/pages/blog/[page].js → src/pages/blog/index.js

@@ -102,7 +102,7 @@ const Blog = ({ totalPages, isFirstPage, isLastPage, blogPostCollection, nextPag
         <div className="container">
           <div className="row">
             <div className="col-xs-12">
-              {blogPostCollection.map(post => (
+              {blogPostCollection?.map(post => (
                 <BlogPostLink
                   key={post.fields.slug}
                   title={post.fields.title}
@@ -143,40 +143,24 @@ const Blog = ({ totalPages, isFirstPage, isLastPage, blogPostCollection, nextPag
   )
 }
 
-export async function getStaticPaths() {
-  const response = await setupContentfulClient().getEntries({
-    // eslint-disable-next-line
-    content_type: 'blogPost',
-  })
-
-  const { items } = response
-  const paths = Array.from({ length: items.length })
-    .fill({ params: { page: null } })
-    .map((_, i) => ({ params: { page: String(i + 1) } }))
-
-  return {
-    paths,
-    fallback: false,
-  }
-}
-
-export async function getStaticProps({ params }) {
+export async function getServerSideProps(ctx) {
   const postPerPage = 3
+  const currentPage = ctx?.query?.page ?? '1'
+
   const response = await setupContentfulClient().getEntries({
     // eslint-disable-next-line
     content_type: 'blogPost',
     // order by published date
     order: '-fields.publishedDate',
     // use skip and limit for Pagination
-    skip: Number(params.page) * 3 - 3,
+    skip: Number(currentPage) * 3 - 3,
     limit: postPerPage,
   })
   const { items, total } = response
 
   const totalPages = Math.ceil(total / postPerPage)
-  const currentPage = params?.page ?? '1'
-  const nextPage = `/blog/${String(Number(currentPage) + 1)}`
-  const prevPage = currentPage === '1' ? '/blog/1' : `/blog/${String(Number(currentPage) - 1)}`
+  const nextPage = `/blog?page=${String(Number(currentPage) + 1)}`
+  const prevPage = currentPage === '1' ? '/blog' : `/blog?page=${String(Number(currentPage) - 1)}`
   const isFirstPage = currentPage === '1'
   const isLastPage = currentPage === String(totalPages)
 

src/pages/podcast/[page].js → src/pages/podcast/index.js

@@ -150,40 +150,25 @@ const Podcast = ({
   )
 }
 
-export async function getStaticPaths() {
-  const { items } = await setupContentfulClient().getEntries({
-    // eslint-disable-next-line
-    content_type: 'podcast',
-  })
-
-  const paths = Array.from({ length: items.length })
-    .fill({ params: { page: null } })
-    .map((_, i) => ({ params: { page: String(i + 1) } }))
-
-  return {
-    paths,
-    fallback: false,
-  }
-}
-
-export async function getStaticProps({ params }) {
-  const currentPage = params?.page || '1'
+export async function getServerSideProps(ctx) {
   const postPerPage = 3
+  const currentPage = ctx?.query?.page ?? '1'
 
-  const { items, total } = await setupContentfulClient().getEntries({
+  const response = await setupContentfulClient().getEntries({
     // eslint-disable-next-line
     content_type: 'podcast',
     // order by published date
     order: '-fields.publishedDate',
     // use skip and limit for Pagination
-    skip: Number(params.page) * 3 - 3,
+    skip: Number(currentPage) * 3 - 3,
     limit: postPerPage,
   })
+  const { items, total } = response
 
   const totalPages = Math.ceil(total / postPerPage)
-  const nextPage = `/podcast/${String(Number(currentPage) + 1)}`
+  const nextPage = `/podcast?page=${String(Number(currentPage) + 1)}`
   const prevPage =
-    currentPage === '1' ? '/podcast/1' : `/podcast/${String(Number(currentPage) - 1)}`
+    currentPage === '1' ? '/podcast' : `/podcast?page=${String(Number(currentPage) - 1)}`
   const isFirstPage = currentPage === '1'
   const isLastPage = currentPage === String(totalPages)
 
@@ -195,7 +180,6 @@ export async function getStaticProps({ params }) {
       totalPages,
       isFirstPage,
       isLastPage,
-      currentPage,
     },
   }
 }

tests/components/__snapshots__/Layout.test.js.snap

@@ -213,7 +213,7 @@ exports[`<Layout /> should render correctly 1`] = `
                   role="menuitem"
                 >
                   <a
-                    href="/blog/1"
+                    href="/blog"
                   >
                     <span>
                       Blog
@@ -225,7 +225,7 @@ exports[`<Layout /> should render correctly 1`] = `
                   role="menuitem"
                 >
                   <a
-                    href="/podcast/1"
+                    href="/podcast"
                   >
                     <span>
                       Podcast

tests/components/__snapshots__/Nav.test.js.snap

@@ -206,7 +206,7 @@ exports[`<Nav /> should render correctly 1`] = `
               role="menuitem"
             >
               <a
-                href="/blog/1"
+                href="/blog"
               >
                 <span>
                   Blog
@@ -218,7 +218,7 @@ exports[`<Nav /> should render correctly 1`] = `
               role="menuitem"
             >
               <a
-                href="/podcast/1"
+                href="/podcast"
               >
                 <span>
                   Podcast

tests/setup-test-env.js

@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom/extend-expect'
+import { mswServer } from '../mocks/msw-server'
 
 global.MutationObserver = class {
   constructor() {}
@@ -12,14 +13,12 @@ jest.mock('next/image', () => ({
   __esModule: true,
   default: props => {
     // eslint-disable-next-line
-    const { blurDataURL, ...rest } = props  // blurDataURL is not used in this mock
+    const { blurDataURL, ...rest } = props // blurDataURL is not used in this mock
     // eslint-disable-next-line
     return <img {...rest} />
   },
 }))
 
-import { mswServer } from '../mocks/msw-server'
-
 beforeAll(() => mswServer.listen())
 afterEach(() => mswServer.resetHandlers())
 afterAll(() => mswServer.close())