From 982df78cc4f93c1b4abee7e63ee0dca8fa16834f Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Fri, 26 May 2023 14:30:27 +0300
Subject: [PATCH] [212] Scroll to comment in article from user profile (#103)

* [212] Scroll to comment in article from user profile

* [212] Scroll to comment from feed

* Resolve conversation
---
 src/components/Article/Comment.tsx        |  7 +++-
 src/components/Article/FullArticle.tsx    | 42 +++++++++++++++++------
 src/components/Author/Userpic.module.scss |  2 ++
 src/components/Nav/Header.module.scss     |  2 +-
 src/components/Views/Feed.tsx             |  9 ++++-
 5 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx
index e27766dc..254a32ba 100644
--- a/src/components/Article/Comment.tsx
+++ b/src/components/Article/Comment.tsx
@@ -103,6 +103,7 @@ export const Comment = (props: Props) => {
 
   return (
     <li
+      id={`comment_${comment().id}`}
       class={clsx(styles.comment, props.class, {
         [styles.isNew]: !isCommentAuthor() && createdAt > props.lastSeen
       })}
@@ -144,7 +145,11 @@ export const Comment = (props: Props) => {
               <Show when={props.showArticleLink}>
                 <div class={styles.articleLink}>
                   <Icon name="arrow-right" class={styles.articleLinkIcon} />
-                  <a href={getPagePath(router, 'article', { slug: comment().shout.slug })}>
+                  <a
+                    href={`${getPagePath(router, 'article', { slug: comment().shout.slug })}?commentId=${
+                      comment().id
+                    }`}
+                  >
                     {comment().shout.title}
                   </a>
                 </div>
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 7559fee4..08105677 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -1,7 +1,17 @@
 import { capitalize, formatDate } from '../../utils'
 import { Icon } from '../_shared/Icon'
 import { AuthorCard } from '../Author/AuthorCard'
-import { createEffect, createMemo, createSignal, For, Match, onMount, Show, Switch } from 'solid-js'
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  Match,
+  onCleanup,
+  onMount,
+  Show,
+  Switch
+} from 'solid-js'
 import type { Author, Shout } from '../../graphql/types.gen'
 import MD from './MD'
 import { SharePopup } from './SharePopup'
@@ -99,6 +109,7 @@ export const FullArticle = (props: ArticleProps) => {
       behavior: 'smooth'
     })
   }
+
   const { searchParams, changeSearchParam } = useRouter()
 
   createEffect(() => {
@@ -114,6 +125,15 @@ export const FullArticle = (props: ArticleProps) => {
     }
   })
 
+  createEffect(() => {
+    if (searchParams().commentId && isReactionsLoaded()) {
+      const commentElement = document.querySelector(`[id='comment_${searchParams().commentId}']`)
+      if (commentElement) {
+        commentElement.scrollIntoView({ behavior: 'smooth' })
+      }
+    }
+  })
+
   const {
     actions: { loadReactionsBy }
   } = useReactions()
@@ -277,15 +297,17 @@ export const FullArticle = (props: ArticleProps) => {
               </Show>
             </div>
 
-            <div class={styles.topicsList}>
-              <For each={props.article.topics}>
-                {(topic) => (
-                  <div class={styles.shoutTopic}>
-                    <a href={getPagePath(router, 'topic', { slug: topic.slug })}>{topic.title}</a>
-                  </div>
-                )}
-              </For>
-            </div>
+            <Show when={props.article.topics.length}>
+              <div class={styles.topicsList}>
+                <For each={props.article.topics}>
+                  {(topic) => (
+                    <div class={styles.shoutTopic}>
+                      <a href={getPagePath(router, 'topic', { slug: topic.slug })}>{topic.title}</a>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </Show>
 
             <div class={styles.shoutAuthorsList}>
               <Show when={props.article.authors.length > 1}>
diff --git a/src/components/Author/Userpic.module.scss b/src/components/Author/Userpic.module.scss
index 1095b6d0..e974842f 100644
--- a/src/components/Author/Userpic.module.scss
+++ b/src/components/Author/Userpic.module.scss
@@ -24,6 +24,8 @@
     background-color: white;
     text-align: center;
     line-height: 28px;
+    min-width: 32px;
+    max-width: 32px;
   }
 
   .anonymous {
diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index a2a47713..e383b4c7 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -277,7 +277,7 @@
   position: absolute;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 100%;
+  width: calc(100% - 180px);
 
   @include media-breakpoint-down(md) {
     display: none;
diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx
index 7fe0003a..6513463a 100644
--- a/src/components/Views/Feed.tsx
+++ b/src/components/Views/Feed.tsx
@@ -148,7 +148,14 @@ export const FeedView = () => {
                 {(comment) => {
                   return (
                     <div class={styles.comment}>
-                      <div class={clsx('text-truncate', styles.commentBody)} innerHTML={comment.body} />
+                      <div class={clsx('text-truncate', styles.commentBody)}>
+                        <a
+                          href={`${getPagePath(router, 'article', {
+                            slug: comment.shout.slug
+                          })}?commentId=${comment.id}`}
+                          innerHTML={comment.body}
+                        />
+                      </div>
                       <AuthorCard
                         author={comment.createdBy as Author}
                         isFeedMode={true}