From 5c6a93c24158bc95cfd95451d883f6f59e9afacb Mon Sep 17 00:00:00 2001
From: Igor Lobanov <igor.lobanov@onetwotrip.com>
Date: Wed, 7 Dec 2022 19:38:05 +0100
Subject: [PATCH] anchors and mainTopic fixes

---
 src/components/Article/FullArticle.tsx | 14 ++++++++------
 src/components/Feed/Card.tsx           |  6 +++---
 src/stores/router.ts                   | 14 ++++++++++++++
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 2783e112..edc5086b 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -52,11 +52,13 @@ export const FullArticle = (props: ArticleProps) => {
   const { session } = useSession()
   const formattedDate = createMemo(() => formatDate(new Date(props.article.createdAt)))
 
-  const mainTopic = () =>
-    (props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic)?.title || '').replace(
-      ' ',
-      '&nbsp;'
-    )
+  const mainTopic = createMemo(
+    () =>
+      props.article.topics?.find((topic) => topic?.slug === props.article.mainTopic) ||
+      props.article.topics[0]
+  )
+
+  const mainTopicTitle = createMemo(() => mainTopic().title.replace(' ', '&nbsp;'))
 
   onMount(() => {
     const windowHash = window.location.hash
@@ -90,7 +92,7 @@ export const FullArticle = (props: ArticleProps) => {
       <article class="col-md-6 shift-content">
         <div class={styles.shoutHeader}>
           <div class={styles.shoutTopic}>
-            <a href={`/topic/${props.article.mainTopic}`} innerHTML={mainTopic() || ''} />
+            <a href={`/topic/${props.article.mainTopic}`} innerHTML={mainTopicTitle() || ''} />
           </div>
 
           <h1>{props.article.title}</h1>
diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx
index f521c136..018c3965 100644
--- a/src/components/Feed/Card.tsx
+++ b/src/components/Feed/Card.tsx
@@ -56,9 +56,9 @@ const getTitleAndSubtitle = (article: Shout): { title: string; subtitle: string
 }
 
 export const ArticleCard = (props: ArticleCardProps) => {
-  const mainTopic = props.article.topics.find(
-    (articleTopic) => articleTopic.slug === props.article.mainTopic
-  )
+  const mainTopic =
+    props.article.topics.find((articleTopic) => articleTopic.slug === props.article.mainTopic) ||
+    props.article.topics[0]
 
   const formattedDate = createMemo<string>(() => {
     return new Date(props.article.createdAt)
diff --git a/src/stores/router.ts b/src/stores/router.ts
index ae17520d..9f5c9cad 100644
--- a/src/stores/router.ts
+++ b/src/stores/router.ts
@@ -86,6 +86,20 @@ const handleClientRouteLinkClick = (event) => {
     if (url.origin === location.origin) {
       event.preventDefault()
 
+      if (url.hash) {
+        const anchor = document.querySelector(url.hash)
+        const headerOffset = 80 // 100px for header
+        const elementPosition = anchor.getBoundingClientRect().top
+        const newScrollTop = elementPosition + window.scrollY - headerOffset
+
+        window.scrollTo({
+          top: newScrollTop,
+          behavior: 'smooth'
+        })
+
+        return
+      }
+
       routerStore.open(url.pathname)
       const params = Object.fromEntries(new URLSearchParams(url.search))
       searchParamsStore.open(params)