From a7f3ee54c17b3fbf277d386f0c45ae077fa87cb8 Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:44:21 +0300
Subject: [PATCH] fix scroll to comments by search params (#416)

* fix scroll to comments by search params

* CommentsTree sort

* Cancel cleanup search params in link to comment
---
 src/components/Article/CommentsTree.tsx |  3 ---
 src/components/Article/FullArticle.tsx  | 25 ++++++++++---------------
 src/stores/router.ts                    |  2 +-
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx
index 3057ffb6..03a39287 100644
--- a/src/components/Article/CommentsTree.tsx
+++ b/src/components/Article/CommentsTree.tsx
@@ -66,9 +66,6 @@ export const CommentsTree = (props: Props) => {
     if (commentsOrder() === 'rating') {
       newSortedComments = newSortedComments.sort(sortCommentsByRating)
     }
-
-    newSortedComments.reverse()
-
     return newSortedComments
   })
 
diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx
index 46177b8c..1bb30930 100644
--- a/src/components/Article/FullArticle.tsx
+++ b/src/components/Article/FullArticle.tsx
@@ -58,9 +58,8 @@ export type ArticlePageSearchParams = {
 
 const scrollTo = (el: HTMLElement) => {
   const { top } = el.getBoundingClientRect()
-
   window.scrollTo({
-    top: top + window.scrollY - DEFAULT_HEADER_OFFSET,
+    top: top - DEFAULT_HEADER_OFFSET,
     left: 0,
     behavior: 'smooth',
   })
@@ -152,22 +151,16 @@ export const FullArticle = (props: Props) => {
     current: HTMLDivElement
   } = { current: null }
 
-  const scrollToComments = () => {
-    scrollTo(commentsRef.current)
-  }
-
   createEffect(() => {
     if (props.scrollToComments) {
-      scrollToComments()
+      scrollTo(commentsRef.current)
     }
   })
 
   createEffect(() => {
     if (searchParams()?.scrollTo === 'comments' && commentsRef.current) {
-      scrollToComments()
-      changeSearchParams({
-        scrollTo: null,
-      })
+      requestAnimationFrame(() => scrollTo(commentsRef.current))
+      changeSearchParams({ scrollTo: null })
     }
   })
 
@@ -177,10 +170,8 @@ export const FullArticle = (props: Props) => {
         `[id='comment_${searchParams().commentId}']`,
       )
 
-      changeSearchParams({ commentId: null })
-
       if (commentElement) {
-        scrollTo(commentElement)
+        requestAnimationFrame(() => scrollTo(commentElement))
       }
     }
   })
@@ -473,7 +464,11 @@ export const FullArticle = (props: Props) => {
 
               <Popover content={t('Comment')} disabled={isActionPopupActive()}>
                 {(triggerRef: (el) => void) => (
-                  <div class={clsx(styles.shoutStatsItem)} ref={triggerRef} onClick={scrollToComments}>
+                  <div
+                    class={clsx(styles.shoutStatsItem)}
+                    ref={triggerRef}
+                    onClick={() => scrollTo(commentsRef.current)}
+                  >
                     <Icon name="comment" class={styles.icon} />
                     <Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
                     <Show
diff --git a/src/stores/router.ts b/src/stores/router.ts
index be197bd1..2533b252 100644
--- a/src/stores/router.ts
+++ b/src/stores/router.ts
@@ -153,7 +153,7 @@ export const useRouter = <TSearchParams extends Record<string, string> = Record<
   }
 
   const clearSearchParams = (replace = false) => {
-    searchParamsStore.open({}, replace)
+    // searchParamsStore.open({}, replace)
   }
 
   return {