Merge branch 'dev' into editor

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'
 
@@ -110,7 +109,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>
@@ -166,7 +165,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

@@ -1,7 +1,7 @@
 import { capitalize, formatDate } from '../../utils'
 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'
@@ -13,7 +13,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'
@@ -65,19 +65,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 }
@@ -104,14 +91,6 @@ export const FullArticle = (props: ArticleProps) => {
     actions: { loadReactionsBy }
   } = useReactions()
 
-  let commentsRef: HTMLDivElement | undefined
-  const scrollToComments = () => {
-    if (!isReactionsLoaded()) {
-      return
-    }
-    commentsRef.scrollIntoView({ behavior: 'smooth' })
-  }
-
   return (
     <>
       <Title>{props.article.title}</Title>
@@ -205,12 +184,10 @@ export const FullArticle = (props: ArticleProps) => {
                 </div>
               </Show>
 
-              <div class={styles.shoutStatsItem} onClick={() => scrollToComments()}>
-                <div class={styles.shoutStatsItemInner}>
-                  <Icon name="comment" class={styles.icon} />
-                  {/*{props.article.stat?.commented || ''}*/}
-                </div>
-              </div>
+              <a href="#comments" class={styles.shoutStatsItem}>
+                <Icon name="comment" class={styles.icon} />
+                {props.article.stat?.commented ?? ''}
+              </a>
 
               <div class={styles.shoutStatsItem}>
                 <SharePopup
@@ -277,7 +254,7 @@ export const FullArticle = (props: ArticleProps) => {
                 )}
               </For>
             </div>
-            <div ref={commentsRef}>
+            <div id="comments">
               <Show when={isReactionsLoaded()}>
                 <CommentsTree
                   shoutId={props.article.id}

src/components/Feed/Card.tsx

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

src/components/Nav/ProfilePopup.tsx

@@ -29,7 +29,9 @@ export const ProfilePopup = (props: ProfilePopupProps) => {
           <a href="#">{t('Subscriptions')}</a>
         </li>
         <li>
-          <a href="#">{t('Comments')}</a>
+          <a href={`${getPagePath(router, 'author', { slug: userSlug() })}/?by=commented`}>
+            {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'
 }
 
@@ -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()
@@ -131,7 +135,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/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/graphql/query/articles-load-by.ts

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

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,43 +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.hash) {
-        let selector = url.hash
+const scrollToHash = (hash: string) => {
+  let selector = hash
 
-        if (/^#\d+/.test(selector)) {
-          // id="1" fix
-          // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
-          selector = `[id="${selector.replace('#', '')}"]`
-        }
+  if (/^#\d+/.test(selector)) {
+    // id="1" fix
+    // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
+    selector = `[id="${selector.replace('#', '')}"]`
+  }
 
-        const anchor = document.querySelector(selector)
-        const headerOffset = 80 // 80px for header
-        const elementPosition = anchor ? anchor.getBoundingClientRect().top : 0
-        const newScrollTop = elementPosition + window.scrollY - headerOffset
+  const anchor = document.querySelector(selector)
+  const headerOffset = 80 // 80px for header
+  const elementPosition = anchor ? anchor.getBoundingClientRect().top : 0
+  const newScrollTop = elementPosition + window.scrollY - headerOffset
 
-        window.scrollTo({
-          top: newScrollTop,
-          behavior: 'smooth'
-        })
+  window.scrollTo({
+    top: newScrollTop,
+    behavior: 'smooth'
+  })
+}
 
-        return
-      }
+const handleClientRouteLinkClick = async (event) => {
+  const link = event.target.closest('a')
 
-      routerStore.open(url.pathname)
-      const params = Object.fromEntries(new URLSearchParams(url.search))
-      searchParamsStore.open(params)
+  if (!checkOpenOnClient(link, event)) {
+    return
+  }
 
-      window.scrollTo({
-        top: 0,
-        left: 0
-      })
+  const url = new URL(link.href)
+  if (url.origin !== location.origin) {
+    return
+  }
+
+  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>) => {
@@ -129,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
+}