Merge branch 'scroll-to-links-fix' into 'dev'

scroll to anchor fixes, profile comments link fix

See merge request discoursio/discoursio-webapp!47

src/components/Article/CommentsTree.tsx

@@ -10,7 +10,6 @@ import { useReactions } from '../../context/reactions'
 import { byCreated } from '../../utils/sortby'
 import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated'
 import { useLocalize } from '../../context/localize'
-import Cookie from 'js-cookie'
 
 type CommentsOrder = 'createdAt' | 'rating' | 'newOnly'
 
@@ -108,7 +107,7 @@ export const CommentsTree = (props: Props) => {
   return (
     <>
       <div class={styles.commentsHeaderWrapper}>
-        <h2 id="comments" class={styles.commentsHeader}>
+        <h2 class={styles.commentsHeader}>
           {t('Comments')} {comments().length.toString() || ''}
           <Show when={newReactions().length > 0}>
             <span class={styles.newReactions}>&nbsp;+{newReactions().length}</span>
@@ -161,7 +160,7 @@ export const CommentsTree = (props: Props) => {
       </ul>
       <ShowIfAuthenticated
         fallback={
-          <div class={styles.signInMessage} id="comments">
+          <div class={styles.signInMessage}>
             {t('To write a comment, you must')}{' '}
             <a href="?modal=auth&mode=register" class={styles.link}>
               {t('sign up')}

src/components/Article/FullArticle.tsx

@@ -66,19 +66,6 @@ export const FullArticle = (props: ArticleProps) => {
       props.article.topics[0]
   )
 
-  onMount(() => {
-    const windowHash = window.location.hash
-    if (windowHash?.length > 0) {
-      const comments = document.querySelector(windowHash)
-      if (comments) {
-        window.scrollTo({
-          top: comments.getBoundingClientRect().top,
-          behavior: 'smooth'
-        })
-      }
-    }
-  })
-
   onMount(async () => {
     await loadReactionsBy({
       by: { shout: props.article.slug }
@@ -105,20 +92,6 @@ export const FullArticle = (props: ArticleProps) => {
     actions: { loadReactionsBy }
   } = useReactions()
 
-  let commentsRef: HTMLDivElement | undefined
-  const scrollToComments = () => {
-    if (!isReactionsLoaded()) {
-      return
-    }
-    commentsRef.scrollIntoView({ behavior: 'smooth' })
-  }
-  const { searchParams } = useRouter()
-  createEffect(() => {
-    if (searchParams()?.scrollTo === 'comments') {
-      scrollToComments()
-    }
-  })
-
   return (
     <>
       <Title>{props.article.title}</Title>
@@ -212,10 +185,10 @@ export const FullArticle = (props: ArticleProps) => {
                 </div>
               </Show>
 
-              <div class={styles.shoutStatsItem} onClick={() => scrollToComments()}>
+              <a href="#comments" class={styles.shoutStatsItem}>
                 <Icon name="comment" class={styles.icon} />
-                {/*{props.article.stat?.commented || ''}*/}
-              </div>
+                {props.article.stat?.commented ?? ''}
+              </a>
 
               <div class={styles.shoutStatsItem}>
                 <SharePopup
@@ -276,7 +249,7 @@ export const FullArticle = (props: ArticleProps) => {
                 )}
               </For>
             </div>
-            <div>
+            <div id="comments">
               <Show when={isReactionsLoaded()}>
                 <CommentsTree
                   shoutId={props.article.id}

src/components/Feed/Card.tsx

@@ -12,12 +12,7 @@ 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
@@ -80,12 +75,6 @@ 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 || ''}`)}
@@ -166,7 +155,6 @@ export const ArticleCard = (props: ArticleCardProps) => {
                 </For>
               </div>
             </Show>
-
             <Show when={!props.settings?.nodate}>
               <div class={styles.shoutDate}>{formattedDate()}</div>
             </Show>
@@ -184,10 +172,10 @@ export const ArticleCard = (props: ArticleCardProps) => {
               </div>
 
               <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardComments)}>
-                <button type="button" onClick={scrollToComments}>
+                <a href={`/${slug + '#comments'}`}>
                   <Icon name="comment" class={clsx(styles.icon, styles.feedControlIcon)} />
                   {stat?.commented || t('Add comment')}
-                </button>
+                </a>
               </div>
             </div>
 

src/components/Nav/ProfilePopup.tsx

@@ -2,10 +2,9 @@ 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, openPage } from '@nanostores/router'
-import { router, useRouter } from '../../stores/router'
+import { getPagePath } from '@nanostores/router'
+import { router } from '../../stores/router'
 import { useLocalize } from '../../context/localize'
-import type { AuthorPageSearchParams } from '../Views/Author'
 
 type ProfilePopupProps = Omit<PopupProps, 'children'>
 
@@ -16,12 +15,6 @@ 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">
@@ -36,13 +29,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
           <a href="#">{t('Subscriptions')}</a>
         </li>
         <li>
-          <a
-            href="#"
-            onClick={(event) => {
-              event.preventDefault()
-              openAuthorComments()
-            }}
-          >
+          <a href={`${getPagePath(router, 'author', { slug: userSlug() })}/?by=commented`}>
             {t('Comments')}
           </a>
         </li>

src/components/Views/Author.tsx

@@ -54,7 +54,11 @@ export const AuthorView = (props: AuthorProps) => {
 
   const { searchParams, changeSearchParam } = useRouter<AuthorPageSearchParams>()
 
-  changeSearchParam('by', 'rating')
+  onMount(() => {
+    if (!searchParams().by) {
+      changeSearchParam('by', 'rating')
+    }
+  })
 
   const loadMore = async () => {
     saveScrollPosition()

src/components/Views/Search.tsx

@@ -26,7 +26,7 @@ export const SearchView = (props: Props) => {
   const [query, setQuery] = createSignal(props.query)
   const [offset, setOffset] = createSignal(0)
 
-  const { searchParams, handleClientRouteLinkClick } = useRouter<SearchPageSearchParams>()
+  const { searchParams } = useRouter<SearchPageSearchParams>()
   let searchEl: HTMLInputElement
   const handleQueryChange = (_ev) => {
     setQuery(searchEl.value)
@@ -72,18 +72,14 @@ export const SearchView = (props: Props) => {
             selected: searchParams().by === 'relevance'
           }}
         >
-          <a href="?by=relevance" onClick={handleClientRouteLinkClick}>
-            {t('By relevance')}
-          </a>
+          <a href="?by=relevance">{t('By relevance')}</a>
         </li>
         <li
           classList={{
             selected: searchParams().by === 'rating'
           }}
         >
-          <a href="?by=rating" onClick={handleClientRouteLinkClick}>
-            {t('Top rated')}
-          </a>
+          <a href="?by=rating">{t('Top rated')}</a>
         </li>
       </ul>
 

src/pages/article.page.tsx

@@ -7,6 +7,7 @@ import { useRouter } from '../stores/router'
 import { Loading } from '../components/_shared/Loading'
 import { ReactionsProvider } from '../context/reactions'
 import { FullArticle } from '../components/Article/FullArticle'
+import { setPageLoadManagerPromise } from '../utils/pageLoadManager'
 
 export const ArticlePage = (props: PageProps) => {
   const shouts = props.article ? [props.article] : []
@@ -33,7 +34,9 @@ export const ArticlePage = (props: PageProps) => {
     const articleValue = articleEntities()[slug()]
 
     if (!articleValue || !articleValue.body) {
-      await loadShout(slug())
+      const loadShoutPromise = loadShout(slug())
+      setPageLoadManagerPromise(loadShoutPromise)
+      await loadShoutPromise
     }
   })
 

src/stores/router.ts

@@ -2,6 +2,7 @@ import type { Accessor } from 'solid-js'
 import { createRouter, createSearchParams } from '@nanostores/router'
 import { isServer } from 'solid-js/web'
 import { useStore } from '@nanostores/solid'
+import { getPageLoadManagerPromise } from '../utils/pageLoadManager'
 
 export const ROUTES = {
   home: '/',
@@ -40,9 +41,8 @@ const routerStore = createRouter(ROUTES, {
 
 export const router = routerStore
 
-const handleClientRouteLinkClick = (event) => {
-  const link = event.target.closest('a')
-  if (
+const checkOpenOnClient = (link: HTMLAnchorElement, event) => {
+  return (
     link &&
     event.button === 0 &&
     link.target !== '_blank' &&
@@ -52,48 +52,84 @@ const handleClientRouteLinkClick = (event) => {
     !event.ctrlKey &&
     !event.shiftKey &&
     !event.altKey
-  ) {
-    const url = new URL(link.href)
-    if (url.origin === location.origin) {
-      event.preventDefault()
+  )
+}
 
-      if (url.pathname) {
-        routerStore.open(url.pathname)
-      }
+const scrollToHash = (hash: string) => {
+  let selector = hash
 
-      if (url.search) {
-        const params = Object.fromEntries(new URLSearchParams(url.search))
-        searchParamsStore.open(params)
-      }
+  if (/^#\d+/.test(selector)) {
+    // id="1" fix
+    // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
+    selector = `[id="${selector.replace('#', '')}"]`
+  }
 
-      if (url.hash) {
-        let selector = url.hash
+  const anchor = document.querySelector(selector)
+  const headerOffset = 80 // 100px for header
+  const elementPosition = anchor ? anchor.getBoundingClientRect().top : 0
+  const newScrollTop = elementPosition + window.scrollY - headerOffset
 
-        if (/^#\d+/.test(selector)) {
-          // id="1" fix
-          // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
-          selector = `[id="${selector.replace('#', '')}"]`
-        }
+  window.scrollTo({
+    top: newScrollTop,
+    behavior: 'smooth'
+  })
+}
 
-        const anchor = document.querySelector(selector)
-        const headerOffset = 80 // 100px for header
-        const elementPosition = anchor ? anchor.getBoundingClientRect().top : 0
-        const newScrollTop = elementPosition + window.scrollY - headerOffset
+const handleClientRouteLinkClick = async (event) => {
+  const link = event.target.closest('a')
 
-        window.scrollTo({
-          top: newScrollTop,
-          behavior: 'smooth'
-        })
+  if (!checkOpenOnClient(link, event)) {
+    return
+  }
 
-        return
-      }
+  const url = new URL(link.href)
+  if (url.origin !== location.origin) {
+    return
+  }
 
-      window.scrollTo({
-        top: 0,
-        left: 0
-      })
+  event.preventDefault()
+
+  if (url.pathname) {
+    routerStore.open(url.pathname)
+  }
+
+  if (url.search) {
+    const params = Object.fromEntries(new URLSearchParams(url.search))
+    searchParamsStore.open(params)
+  }
+
+  if (!url.hash) {
+    window.scrollTo({
+      top: 0,
+      left: 0
+    })
+
+    return
+  }
+
+  await getPageLoadManagerPromise()
+
+  const images = document.querySelectorAll('img')
+
+  let imagesLoaded = 0
+
+  const imageLoadEventHandler = () => {
+    imagesLoaded++
+    if (imagesLoaded === images.length) {
+      scrollToHash(url.hash)
+      images.forEach((image) => image.removeEventListener('load', imageLoadEventHandler))
+      images.forEach((image) => image.removeEventListener('error', imageLoadEventHandler))
     }
   }
+
+  images.forEach((image) => {
+    if (image.complete) {
+      imagesLoaded++
+    }
+
+    image.addEventListener('load', imageLoadEventHandler)
+    image.addEventListener('error', imageLoadEventHandler)
+  })
 }
 
 export const initRouter = (pathname: string, search: Record<string, string>) => {
@@ -134,7 +170,6 @@ export const useRouter = <TSearchParams extends Record<string, string> = Record<
   return {
     page,
     searchParams,
-    changeSearchParam,
-    handleClientRouteLinkClick
+    changeSearchParam
   }
 }

src/utils/pageLoadManager.ts

@@ -0,0 +1,11 @@
+const pageLoadManager: {
+  promise: Promise<any>
+} = { promise: Promise.resolve() }
+
+export const getPageLoadManagerPromise = () => {
+  return pageLoadManager.promise
+}
+
+export const setPageLoadManagerPromise = (promise: Promise<any>) => {
+  pageLoadManager.promise = promise
+}