From 66a14fb6b637901a3304579926b6f4b12629ce4b Mon Sep 17 00:00:00 2001
From: Rui Sousa <contact@ruisousa.me>
Date: Tue, 8 Oct 2024 11:26:24 +0100
Subject: [PATCH 1/3] implement highlight error handling

- component wasn't handling null/undefined highglights;
---
 src/app/(pages)/[slug]/page.tsx              |  7 +-
 src/app/_blocks/HubHead/Highlights/index.tsx | 75 +++++++++++++-------
 src/app/_utilities/fetcher.ts                |  1 +
 3 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/app/(pages)/[slug]/page.tsx b/src/app/(pages)/[slug]/page.tsx
index b854bbc..7de06e1 100644
--- a/src/app/(pages)/[slug]/page.tsx
+++ b/src/app/(pages)/[slug]/page.tsx
@@ -24,11 +24,14 @@ export const dynamic = 'force-dynamic'
 
 export default async function Page({ params: { slug = 'home' } }) {
   const articles = await fetcher({ query: ALL_CONTENT })
-  const highglights = await fetchSettings()
+  const highlights = await fetchSettings()
+
+  console.log(articles)
+  console.log(highlights);
 
   return (
     <>
-      <HubHead highlights={highglights} />
+      <HubHead highlights={highlights} />
 
       {/* Search Bar */}
       <SearchBar />
diff --git a/src/app/_blocks/HubHead/Highlights/index.tsx b/src/app/_blocks/HubHead/Highlights/index.tsx
index 05d1c6c..83866ae 100644
--- a/src/app/_blocks/HubHead/Highlights/index.tsx
+++ b/src/app/_blocks/HubHead/Highlights/index.tsx
@@ -1,37 +1,58 @@
-import AuthorPill from '../../../_components/AuthorPill'
-import CategoryPill from '../../../_components/CategoryPill'
-import { SpectaclesIcon } from '../../../_icons/icons'
-import { estimateReadTime } from '../../../_utilities/estimateReadTime'
-import { formatDateTime } from '../../../_utilities/formatDateTime'
-import styles from './styles.module.css'
+import AuthorPill from "../../../_components/AuthorPill";
+import CategoryPill from "../../../_components/CategoryPill";
+import { SpectaclesIcon } from "../../../_icons/icons";
+import { estimateReadTime } from "../../../_utilities/estimateReadTime";
+import { formatDateTime } from "../../../_utilities/formatDateTime";
+import styles from "./styles.module.css";
+
+const placeholder = {
+  title: "Placeholder",
+  publishedAt: "Placeholder",
+  categories: "Placeholder",
+  authors: "Placeholder",
+};
 
 export function Highlights({ content, main }) {
-  const { title, publisedAt, categories, authors } = content
+  if (!content) {
+    content = placeholder;
+  }
+
+  const { title, publishedAt, categories, authors } = content;
 
+  console.log(content === placeholder);
   return (
-    <div
-      className={`${styles.highlights} ${main ? styles.mainHighlight : styles.secondaryHighlight}`}
-    >
-      <p className={styles.overline}> HIGHLIGHTS </p>
-      <h6> {title} </h6>
-      <div className={styles.metadataContainer}>
-        {/* TODO: is this a good approach for multi category items? */}
-        {categories.length > 5 ? (
-          <CategoryPill title={categories[0].title} />
-        ) : (
-          categories.map((category, i) => <CategoryPill key={i} title={category.title} />)
-        )}
+    <>
 
-        <span className={styles.publishedDate}>{formatDateTime(publisedAt)}</span>
-        <span className={styles.readTime}>
+      <div
+        className={`${styles.highlights} ${main ? styles.mainHighlight : styles.secondaryHighlight}`}
+      >
+        <p className={styles.overline}> HIGHLIGHTS </p>
+        <h6> {title} </h6>
+        {content === placeholder ? (<h5>Please setup the highlights</h5>) : (
+          <>
+            <div className={styles.metadataContainer}>
+              {/* TODO: is this a good approach for multi category items? */}
+              {categories.length > 5 ? (
+                <CategoryPill title={categories[0].title} />
+              ) : (
+                categories.map((category, i) => <CategoryPill key={i} title={category.title} />)
+              )}
+
+              <span className={styles.publishedDate}>{formatDateTime(publishedAt)}</span>
+              <span className={styles.readTime}>
           <SpectaclesIcon
-            width={'32'}
-            color={main ? 'var(--soft-white-100)' : 'var(--dark-rock-800)'}
+            width={"32"}
+            color={main ? "var(--soft-white-100)" : "var(--dark-rock-800)"}
           />
-          {estimateReadTime('Placeholder')}
+                {estimateReadTime("Placeholder")}
         </span>
+            </div>
+            <AuthorPill author={authors[0]} />
+          </>
+        )
+        }
       </div>
-      <AuthorPill author={authors[0]} />
-    </div>
-  )
+
+    </>
+  );
 }
diff --git a/src/app/_utilities/fetcher.ts b/src/app/_utilities/fetcher.ts
index 97d189a..85cd450 100644
--- a/src/app/_utilities/fetcher.ts
+++ b/src/app/_utilities/fetcher.ts
@@ -15,6 +15,7 @@ export async function fetcher(args: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
+        cache: 'no-store',
         query: query,
         ...(variables && { variables: variables }),
       }),

From 13d3d6a45593798db6e34db88e916330c559be8c Mon Sep 17 00:00:00 2001
From: Rui Sousa <149320958+rccsousa@users.noreply.github.com>
Date: Tue, 8 Oct 2024 11:55:15 +0100
Subject: [PATCH 2/3] Update fetcher.ts

---
 src/app/_utilities/fetcher.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/_utilities/fetcher.ts b/src/app/_utilities/fetcher.ts
index 85cd450..7db2ad5 100644
--- a/src/app/_utilities/fetcher.ts
+++ b/src/app/_utilities/fetcher.ts
@@ -14,8 +14,8 @@ export async function fetcher(args: {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
-        cache: 'no-store',
+      cache: 'no-store',
+      body: JSON.stringify({        
         query: query,
         ...(variables && { variables: variables }),
       }),

From d41e044604fd080ad413650608baefe39f68e05d Mon Sep 17 00:00:00 2001
From: Rui Sousa <contact@ruisousa.me>
Date: Tue, 8 Oct 2024 12:09:42 +0100
Subject: [PATCH 3/3] linting

---
 src/app/_utilities/fetcher.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/_utilities/fetcher.ts b/src/app/_utilities/fetcher.ts
index 7db2ad5..6f8ecd2 100644
--- a/src/app/_utilities/fetcher.ts
+++ b/src/app/_utilities/fetcher.ts
@@ -15,7 +15,7 @@ export async function fetcher(args: {
         'Content-Type': 'application/json',
       },
       cache: 'no-store',
-      body: JSON.stringify({        
+      body: JSON.stringify({
         query: query,
         ...(variables && { variables: variables }),
       }),