fix blank article page on navigation from search

src/context/searchbar.context.tsx

@@ -1,6 +1,7 @@
 // context for searchbar
 import { SearchbarProps } from '@/components/Searchbar/Searchbar'
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
 
 type SearchBarContext = SearchbarProps & {
   resultsNumber: number | null
@@ -21,11 +22,25 @@ const SearchBarContext = createContext<SearchBarContext>({
 })
 
 export const SearchBarProvider = ({ children }: any) => {
+  const router = useRouter()
   const [resultsNumber, setResultsNumber] = useState<number | null>(null)
   const [resultsHelperText, setResultsHelperText] = useState<string | null>(
     null,
   )
   const [tags, setTags] = useState<string[]>([])
+
+  useEffect(() => {
+    router.events.on('routeChangeStart', resetResults)
+    return () => {
+      router.events.off('routeChangeStart', resetResults)
+    }
+  }, [router])
+
+  const resetResults = () => {
+    setResultsNumber(null)
+    setResultsHelperText(null)
+  }
+
   return (
     <SearchBarContext.Provider
       value={{

src/pages/article/[slug].tsx

@@ -42,6 +42,7 @@ export async function getStaticPaths() {
 
 export const getStaticProps = async ({ params }: GetStaticPropsContext) => {
   const { slug } = params!
+  console.log('rendering', slug)
 
   if (!slug) {
     return {

src/services/unbody.service.ts

@@ -287,7 +287,8 @@ class UnbodyService extends UnbodyClient {
 
     return this.request<UnbodyGraphQlResponseGoogleDoc>(query)
       .then(({ data }) => {
-        if (!data) return this.handleResponse([], 'No data')
+        if (!data)
+          return this.handleResponse([], 'No data for related articles')
         return this.handleResponse(data.Get.GoogleDoc.map(enhanceGoogleDoc))
       })
       .catch((e) => this.handleResponse([], e))
@@ -312,7 +313,7 @@ class UnbodyService extends UnbodyClient {
     return this.request<UnbodyGraphQlResponseGoogleDoc>(query)
       .then(({ data }) => {
         if (!data || !data.Get || !data.Get.GoogleDoc)
-          return this.handleResponse([], 'No data')
+          return this.handleResponse([], 'No data for same authors')
         return this.handleResponse(data.Get.GoogleDoc.map(enhanceGoogleDoc))
       })
       .catch((e) => this.handleResponse([], e))
@@ -355,7 +356,7 @@ class UnbodyService extends UnbodyClient {
     return this.request<UnbodyGraphQlResponseBlocks>(query)
       .then(({ data }) => {
         if (!data || !(data.Get.ImageBlock || data.Get.TextBlock))
-          return this.handleResponse([], 'No data')
+          return this.handleResponse([], 'No data for search blocks')
 
         const blocks = [
           ...(data.Get.ImageBlock || []),
@@ -415,7 +416,7 @@ class UnbodyService extends UnbodyClient {
     return this.request<UnbodyGraphQlResponseBlocks>(query)
       .then(({ data }) => {
         if (!data || !(data.Get.ImageBlock || data.Get.TextBlock))
-          return this.handleResponse([], 'No data')
+          return this.handleResponse([], 'No data for search blocks')
 
         const blocks = [
           ...(data.Get.ImageBlock || []),