scrollto+shoutreaction

src/components/Article/Comment/Comment.tsx

@@ -47,7 +47,7 @@ export const Comment = (props: Props) => {
   const [editedBody, setEditedBody] = createSignal<string>()
   const { session } = useSession()
   const author = createMemo<Author>(() => session()?.user?.app_data?.profile as Author)
-  const { createReaction, updateReaction } = useReactions()
+  const { createShoutReaction, updateShoutReaction } = useReactions()
   const { showConfirm } = useUI()
   const { showSnackbar } = useSnackbar()
   const client = createMemo(() => graphqlClientCreate(coreApiUrl, session()?.access_token))
@@ -99,7 +99,7 @@ export const Comment = (props: Props) => {
   const handleCreate = async (value: string) => {
     try {
       setLoading(true)
-      await createReaction({
+      await createShoutReaction({
         reaction: {
           kind: ReactionKind.Comment,
           reply_to: props.comment.id,
@@ -123,7 +123,7 @@ export const Comment = (props: Props) => {
   const handleUpdate = async (value: string) => {
     setLoading(true)
     try {
-      const reaction = await updateReaction({
+      const reaction = await updateShoutReaction({
         reaction: {
           id: props.comment.id || 0,
           kind: ReactionKind.Comment,

src/components/Article/CommentRatingControl.tsx

@@ -22,7 +22,7 @@ export const CommentRatingControl = (props: Props) => {
   const { session } = useSession()
   const uid = createMemo<number>(() => session()?.user?.app_data?.profile?.id || 0)
   const { showSnackbar } = useSnackbar()
-  const { reactionEntities, createReaction, deleteReaction, loadReactionsBy } = useReactions()
+  const { reactionEntities, createShoutReaction, deleteShoutReaction, loadReactionsBy } = useReactions()
 
   const checkReaction = (reactionKind: ReactionKind) =>
     Object.values(reactionEntities).some(
@@ -53,7 +53,7 @@ export const CommentRatingControl = (props: Props) => {
         r.shout.id === props.comment.shout.id &&
         r.reply_to === props.comment.id
     )
-    if (reactionToDelete) return deleteReaction(reactionToDelete.id)
+    if (reactionToDelete) return deleteShoutReaction(reactionToDelete.id)
   }
 
   const handleRatingChange = async (isUpvote: boolean) => {
@@ -63,7 +63,7 @@ export const CommentRatingControl = (props: Props) => {
       } else if (isDownvoted()) {
         await deleteCommentReaction(ReactionKind.Dislike)
       } else {
-        await createReaction({
+        await createShoutReaction({
           reaction: {
             kind: isUpvote ? ReactionKind.Like : ReactionKind.Dislike,
             shout: props.comment.shout.id,

src/components/Article/CommentsTree.tsx

@@ -29,7 +29,7 @@ export const CommentsTree = (props: Props) => {
   const [newReactions, setNewReactions] = createSignal<Reaction[]>([])
   const [clearEditor, setClearEditor] = createSignal(false)
   const [clickedReplyId, setClickedReplyId] = createSignal<number>()
-  const { reactionEntities, createReaction, loadReactionsBy } = useReactions()
+  const { reactionEntities, createShoutReaction, loadReactionsBy } = useReactions()
 
   const comments = createMemo(() =>
     Object.values(reactionEntities).filter((reaction) => reaction.kind === 'COMMENT')
@@ -74,7 +74,7 @@ export const CommentsTree = (props: Props) => {
   const handleSubmitComment = async (value: string) => {
     setPosting(true)
     try {
-      await createReaction({
+      await createShoutReaction({
         reaction: {
           kind: ReactionKind.Comment,
           body: value,

src/components/Article/FullArticle.tsx

@@ -38,7 +38,6 @@ import { ShoutRatingControl } from './ShoutRatingControl'
 
 type Props = {
   article: Shout
-  scrollToComments?: boolean
 }
 
 type IframeSize = {
@@ -47,8 +46,7 @@ type IframeSize = {
 }
 
 export type ArticlePageSearchParams = {
-  scrollTo: 'comments'
+  commentId?: string
-  commentId: string
   slide?: string
 }
 
@@ -67,7 +65,7 @@ export const COMMENTS_PER_PAGE = 30
 const VOTES_PER_PAGE = 50
 
 export const FullArticle = (props: Props) => {
-  const [searchParams, changeSearchParams] = useSearchParams<ArticlePageSearchParams>()
+  const [searchParams] = useSearchParams<ArticlePageSearchParams>()
   const { showModal } = useUI()
   const { loadReactionsBy } = useReactions()
   const [selectedImage, setSelectedImage] = createSignal('')
@@ -83,18 +81,20 @@ export const FullArticle = (props: Props) => {
   createEffect(
     on(
       pages,
-      async (p: Record<string, number>) => {
+      (p: Record<string, number>) => {
-        await loadReactionsBy({
+        console.debug('content paginated')
+        loadReactionsBy({
           by: { shout: props.article.slug, comment: true },
           limit: COMMENTS_PER_PAGE,
           offset: COMMENTS_PER_PAGE * p.comments || 0
         })
-        await loadReactionsBy({
+        loadReactionsBy({
           by: { shout: props.article.slug, rating: true },
           limit: VOTES_PER_PAGE,
           offset: VOTES_PER_PAGE * p.rating || 0
         })
         setIsReactionsLoaded(true)
+        console.debug('reactions paginated')
       },
       { defer: true }
     )
@@ -165,15 +165,16 @@ export const FullArticle = (props: Props) => {
   const media = createMemo<MediaItem[]>(() => JSON.parse(props.article.media || '[]'))
 
   let commentsRef: HTMLDivElement | undefined
-
   createEffect(() => {
     if (searchParams?.commentId && isReactionsLoaded()) {
-      const commentElement = document.querySelector<HTMLElement>(
+      console.debug('comment id is in link, scroll to')
-        `[id='comment_${searchParams?.commentId}']`
+      const scrollToElement =
-      )
+        document.querySelector<HTMLElement>(`[id='comment_${searchParams?.commentId}']`) ||
+        commentsRef ||
+        document.body
 
-      if (commentElement) {
+      if (scrollToElement) {
-        requestAnimationFrame(() => scrollTo(commentElement))
+        requestAnimationFrame(() => scrollTo(scrollToElement))
       }
     }
   })
@@ -316,14 +317,6 @@ export const FullArticle = (props: Props) => {
     onCleanup(() => window.removeEventListener('resize', updateIframeSizes))
   })
 
-  createEffect(() => props.scrollToComments && commentsRef && scrollTo(commentsRef))
-  createEffect(() => {
-    if (searchParams?.scrollTo === 'comments' && commentsRef) {
-      requestAnimationFrame(() => commentsRef && scrollTo(commentsRef))
-      changeSearchParams({ scrollTo: undefined })
-    }
-  })
-
   const shareUrl = createMemo(() => getShareUrl({ pathname: `/${props.article.slug || ''}` }))
   const getAuthorName = (a: Author) =>
     lang() === 'en' && isCyrillic(a.name || '') ? capitalize(a.slug.replace(/-/, ' ')) : a.name

src/components/Article/ShoutRatingControl.tsx

@@ -22,7 +22,7 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
   const { loadShout } = useFeed()
   const { requireAuthentication, session } = useSession()
   const author = createMemo<Author>(() => session()?.user?.app_data?.profile as Author)
-  const { reactionEntities, createReaction, deleteReaction, loadReactionsBy } = useReactions()
+  const { reactionEntities, createShoutReaction, deleteShoutReaction, loadReactionsBy } = useReactions()
   const [isLoading, setIsLoading] = createSignal(false)
 
   const checkReaction = (reactionKind: ReactionKind) =>
@@ -43,7 +43,7 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
     )
   )
 
-  const deleteShoutReaction = async (reactionKind: ReactionKind) => {
+  const removeReaction = async (reactionKind: ReactionKind) => {
     const reactionToDelete = Object.values(reactionEntities).find(
       (r) =>
         r.kind === reactionKind &&
@@ -51,18 +51,18 @@ export const ShoutRatingControl = (props: ShoutRatingControlProps) => {
         r.shout.id === props.shout.id &&
         !r.reply_to
     )
-    if (reactionToDelete) return deleteReaction(reactionToDelete.id)
+    if (reactionToDelete) return deleteShoutReaction(reactionToDelete.id)
   }
 
   const handleRatingChange = (isUpvote: boolean) => {
     requireAuthentication(async () => {
       setIsLoading(true)
       if (isUpvoted()) {
-        await deleteShoutReaction(ReactionKind.Like)
+        await removeReaction(ReactionKind.Like)
       } else if (isDownvoted()) {
-        await deleteShoutReaction(ReactionKind.Dislike)
+        await removeReaction(ReactionKind.Dislike)
       } else {
-        await createReaction({
+        await createShoutReaction({
           reaction: {
             kind: isUpvote ? ReactionKind.Like : ReactionKind.Dislike,
             shout: props.shout.id

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -1,4 +1,4 @@
-import { A, useNavigate, useSearchParams } from '@solidjs/router'
+import { A, useNavigate } from '@solidjs/router'
 import { clsx } from 'clsx'
 import { Accessor, For, Show, createMemo, createSignal } from 'solid-js'
 import { Icon } from '~/components/_shared/Icon'
@@ -105,7 +105,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
   const { t, lang, formatDate } = useLocalize()
   const { session } = useSession()
   const author = createMemo<Author>(() => session()?.user?.app_data?.profile as Author)
-  const [, changeSearchParams] = useSearchParams()
   const [isActionPopupActive, setIsActionPopupActive] = createSignal(false)
   const [isCoverImageLoadError, setIsCoverImageLoadError] = createSignal(false)
   const [isCoverImageLoading, setIsCoverImageLoading] = createSignal(true)
@@ -129,10 +128,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   const scrollToComments = (event: MouseEvent & { currentTarget: HTMLAnchorElement; target: Element }) => {
     event.preventDefault()
-    changeSearchParams({
+    navigate(`/${props.article.slug}?commentId=0`)
-      scrollTo: 'comments'
-    })
-    navigate(`/${props.article.slug}`)
   }
 
   const onInvite = () => {

src/components/HeaderNav/Header.tsx

@@ -23,7 +23,6 @@ type Props = {
   isHeaderFixed?: boolean
   desc?: string
   cover?: string
-  scrollToComments?: (value: boolean) => void
 }
 
 type HeaderSearchParams = {
@@ -38,7 +37,7 @@ export const Header = (props: Props) => {
   const { t, lang } = useLocalize()
   const { modal } = useUI()
   const { requireAuthentication } = useSession()
-  const [searchParams] = useSearchParams<HeaderSearchParams>()
+  const [searchParams, changeSearchParams] = useSearchParams<HeaderSearchParams>()
   const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
   const [getIsScrolled, setIsScrolled] = createSignal(false)
   const [fixed, setFixed] = createSignal(false)
@@ -85,14 +84,6 @@ export const Header = (props: Props) => {
     })
   })
 
-  const scrollToComments = (
-    event: MouseEvent & { currentTarget: HTMLDivElement; target: Element },
-    value: boolean
-  ) => {
-    event.preventDefault()
-    props.scrollToComments?.(value)
-  }
-
   const handleBookmarkButtonClick = (ev: { preventDefault: () => void }) => {
     requireAuthentication(() => {
       // TODO: implement bookmark clicked
@@ -320,7 +311,7 @@ export const Header = (props: Props) => {
                   </>
                 }
               />
-              <div onClick={(event) => scrollToComments(event, true)} class={styles.control}>
+              <div onClick={() => changeSearchParams({ commentId: 0 })} class={styles.control}>
                 <Icon name="comment" class={styles.icon} />
                 <Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
               </div>

src/components/Views/Author/Author.tsx

@@ -175,7 +175,7 @@ export const AuthorView = (props: AuthorViewProps) => {
   const [loadMoreCommentsHidden, setLoadMoreCommentsHidden] = createSignal(
     Boolean(props.author?.stat && props.author?.stat?.comments === 0)
   )
-  const { commentsByAuthor, addReactions } = useReactions()
+  const { commentsByAuthor, addShoutReactions } = useReactions()
   const loadMoreComments = async () => {
     if (!author()) return [] as LoadMoreItems
     saveScrollPosition()
@@ -189,7 +189,7 @@ export const AuthorView = (props: AuthorViewProps) => {
       offset: commentsByAuthor()[aid]?.length || 0
     })
     const result = await authorCommentsFetcher()
-    result && addReactions(result)
+    result && addShoutReactions(result)
     restoreScrollPosition()
     return result as LoadMoreItems
   }

src/components/_shared/PageLayout.tsx

@@ -2,7 +2,7 @@ import { Meta, Title } from '@solidjs/meta'
 import { useLocation } from '@solidjs/router'
 import { clsx } from 'clsx'
 import type { JSX } from 'solid-js'
-import { Show, createEffect, createMemo, createSignal } from 'solid-js'
+import { Show, createMemo } from 'solid-js'
 import { useLocalize } from '~/context/localize'
 import { Shout } from '~/graphql/schema/core.gen'
 import enKeywords from '~/intl/locales/en/keywords.json'
@@ -27,7 +27,6 @@ type PageLayoutProps = {
   class?: string
   withPadding?: boolean
   zeroBottomPadding?: boolean
-  scrollToComments?: (value: boolean) => void
   key?: string
 }
 
@@ -48,12 +47,10 @@ export const PageLayout = (props: PageLayoutProps) => {
       : imageUrl
   )
   const description = createMemo(() => props.desc || (props.article && descFromBody(props.article.body)))
-  const keypath = createMemo(() => (props.key || loc?.pathname.split('/')[0]) as keyof typeof ruKeywords)
+  const keywords = createMemo(() => {
-  const keywords = createMemo(
+    const keypath = (props.key || loc?.pathname.split('/')[0]) as keyof typeof ruKeywords
-    () => props.keywords || (lang() === 'ru' ? ruKeywords[keypath()] : enKeywords[keypath()])
+    return props.keywords || lang() === 'ru' ? ruKeywords[keypath] : enKeywords[keypath]
-  )
+  })
-  const [scrollToComments, setScrollToComments] = createSignal<boolean>(false)
-  createEffect(() => props.scrollToComments?.(scrollToComments()))
   return (
     <>
       <Title>{props.article?.title || t(props.title)}</Title>
@@ -63,7 +60,6 @@ export const PageLayout = (props: PageLayoutProps) => {
         desc={props.desc}
         cover={imageUrl}
         isHeaderFixed={isHeaderFixed}
-        scrollToComments={(value) => setScrollToComments(value)}
       />
       <Meta name="descprition" content={description() || ''} />
       <Meta name="keywords" content={keywords()} />

src/context/reactions.tsx

@@ -24,10 +24,10 @@ type ReactionsContextType = {
   reactionsByShout: Record<number, Reaction[]>
   commentsByAuthor: Accessor<Record<number, Reaction[]>>
   loadReactionsBy: (args: QueryLoad_Reactions_ByArgs) => Promise<Reaction[]>
-  createReaction: (reaction: MutationCreate_ReactionArgs) => Promise<void>
+  createShoutReaction: (reaction: MutationCreate_ReactionArgs) => Promise<void>
-  updateReaction: (reaction: MutationUpdate_ReactionArgs) => Promise<Reaction>
+  updateShoutReaction: (reaction: MutationUpdate_ReactionArgs) => Promise<Reaction>
-  deleteReaction: (id: number) => Promise<{ error: string } | null>
+  deleteShoutReaction: (id: number) => Promise<{ error: string } | null>
-  addReactions: (rrr: Reaction[]) => void
+  addShoutReactions: (rrr: Reaction[]) => void
 }
 
 const ReactionsContext = createContext<ReactionsContextType>({} as ReactionsContextType)
@@ -46,7 +46,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
   const { session } = useSession()
   const client = createMemo(() => graphqlClientCreate(coreApiUrl, session()?.access_token))
 
-  const addReactions = (rrr: Reaction[]) => {
+  const addShoutReactions = (rrr: Reaction[]) => {
     const newReactionsByShout: Record<number, Reaction[]> = { ...reactionsByShout }
     const newReactionsByAuthor: Record<number, Reaction[]> = { ...reactionsByAuthor }
     const newReactionEntities = rrr.reduce(
@@ -80,18 +80,16 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
     const fetcher = await loadReactions(opts)
     const result = (await fetcher()) || []
     console.debug('[context.reactions] loaded', result)
-    result && addReactions(result)
+    result && addShoutReactions(result)
     return result
   }
 
-  const createReaction = async (input: MutationCreate_ReactionArgs): Promise<void> => {
+  const createShoutReaction = async (input: MutationCreate_ReactionArgs): Promise<void> => {
     const resp = await client()?.mutation(createReactionMutation, input).toPromise()
     const { error, reaction } = resp?.data?.create_reaction || {}
     if (error) await showSnackbar({ type: 'error', body: t(error) })
     if (!reaction) return
-    const changes = {
+    const changes = { [reaction.id]: reaction }
-      [reaction.id]: reaction
-    }
 
     if ([ReactionKind.Like, ReactionKind.Dislike].includes(reaction.kind)) {
       const oppositeReactionKind =
@@ -110,10 +108,11 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
       }
     }
 
-    setReactionEntities(changes)
+    addShoutReactions([reaction])
+    return reaction
   }
 
-  const deleteReaction = async (
+  const deleteShoutReaction = async (
     reaction_id: number
   ): Promise<{ error: string; reaction?: string } | null> => {
     if (reaction_id) {
@@ -129,7 +128,7 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
     return null
   }
 
-  const updateReaction = async (input: MutationUpdate_ReactionArgs): Promise<Reaction> => {
+  const updateShoutReaction = async (input: MutationUpdate_ReactionArgs): Promise<Reaction> => {
     const resp = await client()?.mutation(updateReactionMutation, input).toPromise()
     const result = resp?.data?.update_reaction
     if (!result) throw new Error('cannot update reaction')
@@ -143,10 +142,10 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
 
   const actions = {
     loadReactionsBy,
-    createReaction,
+    createShoutReaction,
-    updateReaction,
+    updateShoutReaction,
-    deleteReaction,
+    deleteShoutReaction,
-    addReactions
+    addShoutReactions
   }
 
   const value: ReactionsContextType = { reactionEntities, reactionsByShout, commentsByAuthor, ...actions }

src/routes/[slug]/[...tab].tsx

@@ -28,7 +28,12 @@ export const route: RouteDefinition = {
   })
 }
 
-export type ArticlePageProps = { article?: Shout; comments?: Reaction[]; votes?: Reaction[]; author?: Author }
+export type ArticlePageProps = {
+  article?: Shout
+  comments?: Reaction[]
+  votes?: Reaction[]
+  author?: Author
+}
 
 export type SlugPageProps = {
   article?: Shout
@@ -125,4 +130,3 @@ export default function ArticlePage(props: RouteSectionProps<SlugPageProps>) {
   }
   return <ArticlePage {...props} />
 }
-

src/routes/articles/[topic]/[slug].tsx

@@ -1,3 +1,3 @@
-import ArticlePage from "~/routes/[slug]/[...tab]"
+import ArticlePage from '~/routes/[slug]/[...tab]'
 
 export default ArticlePage