[161] scroll to comments

src/components/Article/FullArticle.tsx

@@ -2,7 +2,7 @@ import { capitalize, formatDate } from '../../utils'
 import './Full.scss'
 import { Icon } from '../_shared/Icon'
 import { AuthorCard } from '../Author/Card'
-import { createMemo, createSignal, For, Match, onMount, Show, Switch } from 'solid-js'
+import { createEffect, createMemo, createSignal, For, Match, onMount, Show, Switch } from 'solid-js'
 import type { Author, Shout } from '../../graphql/types.gen'
 import MD from './MD'
 import { SharePopup } from './SharePopup'
@@ -16,7 +16,7 @@ import { useSession } from '../../context/session'
 import VideoPlayer from './VideoPlayer'
 import Slider from '../_shared/Slider'
 import { getPagePath } from '@nanostores/router'
-import { router } from '../../stores/router'
+import { router, useRouter } from '../../stores/router'
 import { useReactions } from '../../context/reactions'
 import { Title } from '@solidjs/meta'
 import { useLocalize } from '../../context/localize'
@@ -112,6 +112,12 @@ export const FullArticle = (props: ArticleProps) => {
     }
     commentsRef.scrollIntoView({ behavior: 'smooth' })
   }
+  const { searchParams } = useRouter()
+  createEffect(() => {
+    if (searchParams()?.scrollTo === 'comments') {
+      scrollToComments()
+    }
+  })
 
   return (
     <>

src/components/Feed/Card.tsx

@@ -12,7 +12,12 @@ import stylesHeader from '../Nav/Header.module.scss'
 import { getDescription } from '../../utils/meta'
 import { FeedArticlePopup } from './FeedArticlePopup'
 import { useLocalize } from '../../context/localize'
+import { openPage } from '@nanostores/router'
+import { router, useRouter } from '../../stores/router'
 
+type ArticleSearchParams = {
+  scrollTo: 'comments'
+}
 interface ArticleCardProps {
   settings?: {
     noicon?: boolean
@@ -75,6 +80,12 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   const { cover, layout, slug, authors, stat, body } = props.article
 
+  const { changeSearchParam } = useRouter<ArticleSearchParams>()
+  const scrollToComments = () => {
+    openPage(router, 'article', { slug: slug })
+    changeSearchParam('scrollTo', 'comments')
+  }
+
   return (
     <section
       class={clsx(styles.shoutCard, `${props.settings?.additionalClass || ''}`)}
@@ -173,10 +184,10 @@ export const ArticleCard = (props: ArticleCardProps) => {
               </div>
 
               <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardComments)}>
-                <a href={`/${slug + '#comments' || ''}`}>
+                <button type="button" onClick={scrollToComments}>
                   <Icon name="comment" class={clsx(styles.icon, styles.feedControlIcon)} />
                   {stat?.commented || t('Add comment')}
-                </a>
+                </button>
               </div>
             </div>
 

src/components/Nav/ProfilePopup.tsx

@@ -2,9 +2,10 @@ import { useSession } from '../../context/session'
 import type { PopupProps } from '../_shared/Popup'
 import { Popup } from '../_shared/Popup'
 import styles from '../_shared/Popup/Popup.module.scss'
-import { getPagePath } from '@nanostores/router'
+import { getPagePath, openPage } from '@nanostores/router'
-import { router } from '../../stores/router'
+import { router, useRouter } from '../../stores/router'
 import { useLocalize } from '../../context/localize'
+import type { AuthorPageSearchParams } from '../Views/Author'
 
 type ProfilePopupProps = Omit<PopupProps, 'children'>
 
@@ -15,6 +16,12 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
   } = useSession()
 
   const { t } = useLocalize()
+  const { changeSearchParam } = useRouter<AuthorPageSearchParams>()
+
+  const openAuthorComments = () => {
+    openPage(router, 'author', { slug: userSlug() })
+    changeSearchParam('by', 'commented')
+  }
 
   return (
     <Popup {...props} horizontalAnchor="right" variant="bordered">
@@ -29,7 +36,15 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
           <a href="#">{t('Subscriptions')}</a>
         </li>
         <li>
-          <a href="#">{t('Comments')}</a>
+          <a
+            href="#"
+            onClick={(event) => {
+              event.preventDefault()
+              openAuthorComments()
+            }}
+          >
+            {t('Comments')}
+          </a>
         </li>
         <li>
           <a href="#">{t('Bookmarks')}</a>

src/components/Views/Author.tsx

@@ -26,7 +26,7 @@ type AuthorProps = {
   authorSlug: string
 }
 
-type AuthorPageSearchParams = {
+export type AuthorPageSearchParams = {
   by: '' | 'viewed' | 'rating' | 'commented' | 'recent' | 'followed' | 'about' | 'popular'
 }
 
@@ -131,7 +131,7 @@ export const AuthorView = (props: AuthorProps) => {
                 */}
               <li classList={{ selected: searchParams().by === 'about' }}>
                 <button type="button" onClick={() => changeSearchParam('by', 'about')}>
-                  О себе
+                  {t('About myself')}
                 </button>
               </li>
             </ul>

src/graphql/query/articles-load-by.ts

@@ -37,6 +37,7 @@ export default gql`
         viewed
         reacted
         rating
+        commented
       }
     }
   }