Anchor revert

src/components/Article/FullArticle.tsx

@@ -90,7 +90,6 @@ export const FullArticle = (props: ArticleProps) => {
   })
 
   const commentsRef: { current: HTMLDivElement } = { current: null }
-
   const scrollToComments = () => {
     window.scrollTo({
       top: commentsRef.current.offsetTop - 96,
@@ -98,12 +97,20 @@ export const FullArticle = (props: ArticleProps) => {
       behavior: 'smooth'
     })
   }
+  const { searchParams } = useRouter()
 
   createEffect(() => {
     if (props.scrollToComments) {
       scrollToComments()
     }
   })
+  const { changeSearchParam } = useRouter()
+  createEffect(() => {
+    if (searchParams()?.scrollTo === 'comments' && commentsRef.current) {
+      scrollToComments()
+      changeSearchParam('scrollTo', null)
+    }
+  })
 
   const {
     actions: { loadReactionsBy }

src/components/Feed/Card.tsx

@@ -12,6 +12,8 @@ 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'
 
 interface ArticleCardProps {
   settings?: {
@@ -35,6 +37,7 @@ interface ArticleCardProps {
     isBeside?: boolean
   }
   article: Shout
+  scrollTo: 'comments'
 }
 
 const getTitleAndSubtitle = (article: Shout): { title: string; subtitle: string } => {
@@ -75,6 +78,13 @@ export const ArticleCard = (props: ArticleCardProps) => {
 
   const { cover, layout, slug, authors, stat, body } = props.article
 
+  const { changeSearchParam } = useRouter()
+  const scrollToComments = (event) => {
+    event.preventDefault()
+    openPage(router, 'article', { slug: slug })
+    changeSearchParam('scrollTo', 'comments')
+  }
+
   return (
     <section
       class={clsx(styles.shoutCard, `${props.settings?.additionalClass || ''}`)}
@@ -172,7 +182,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
               </div>
 
               <div class={clsx(styles.shoutCardDetailsItem, styles.shoutCardComments)}>
-                <a href={`/${slug + '#comments'}`}>
+                <a href="#" onClick={(event) => scrollToComments(event)}>
                   <Icon name="comment" class={clsx(styles.icon, styles.feedControlIcon)} />
                   {stat?.commented || t('Add comment')}
                 </a>

src/components/Nav/Header.tsx

@@ -80,7 +80,8 @@ export const Header = (props: Props) => {
     })
   })
 
-  const scrollToComments = (value) => {
+  const scrollToComments = (event, value) => {
+    event.preventDefault()
     props.scrollToComments(value)
   }
 
@@ -110,7 +111,6 @@ export const Header = (props: Props) => {
             <Show when={props.title}>
               <div class={styles.articleHeader}>{props.title}</div>
             </Show>
-
             <ul
               class={clsx(styles.mainNavigation, 'col text-xl inline-flex')}
               classList={{ fixed: fixed() }}
@@ -144,7 +144,7 @@ export const Header = (props: Props) => {
                 containerCssClass={styles.control}
                 trigger={<Icon name="share-outline" class={styles.icon} />}
               />
-              <div onClick={() => scrollToComments(true)} class={styles.control}>
+              <div onClick={(event) => scrollToComments(event, true)} class={styles.control}>
                 <Icon name="comments-outline" class={styles.icon} />
               </div>
               <a href={getPagePath(router, 'create')} class={styles.control}>

src/components/Views/Author.tsx

@@ -35,24 +35,12 @@ const LOAD_MORE_PAGE_SIZE = 9
 
 export const AuthorView = (props: AuthorProps) => {
   const { t } = useLocalize()
-  const { sortedArticles } = useArticlesStore({
-    shouts: props.shouts
-  })
-  const { authorEntities } = useAuthorsStore({ authors: [props.author] })
-  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
-
-  const author = createMemo(() => authorEntities()[props.authorSlug])
-  const [followers, setFollowers] = createSignal<Author[]>([])
-  onMount(async () => {
-    try {
-      const authorSubscribers = await apiClient.getAuthorFollowers({ slug: props.author.slug })
-      setFollowers(authorSubscribers)
-    } catch (error) {
-      console.log('[getAuthorSubscribers]', error)
-    }
-  })
-
+  const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
   const { searchParams, changeSearchParam } = useRouter<AuthorPageSearchParams>()
+  const { authorEntities } = useAuthorsStore({ authors: [props.author] })
+  const author = authorEntities()[props.authorSlug]
+  const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
+  const [followers, setFollowers] = createSignal<Author[]>([])
 
   onMount(() => {
     if (!searchParams().by) {
@@ -63,7 +51,7 @@ export const AuthorView = (props: AuthorProps) => {
   const loadMore = async () => {
     saveScrollPosition()
     const { hasMore } = await loadShouts({
-      filters: { author: author().slug },
+      filters: { author: props.authorSlug },
       limit: LOAD_MORE_PAGE_SIZE,
       offset: sortedArticles().length
     })
@@ -73,7 +61,7 @@ export const AuthorView = (props: AuthorProps) => {
 
   onMount(async () => {
     if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
-      loadMore()
+      await loadMore()
     }
   })
 
@@ -91,6 +79,16 @@ export const AuthorView = (props: AuthorProps) => {
   )
 
   const [commented, setCommented] = createSignal([])
+
+  onMount(async () => {
+    try {
+      const authorSubscribers = await apiClient.getAuthorFollowers({ slug: props.authorSlug })
+      setFollowers(authorSubscribers)
+    } catch (error) {
+      console.log('[getAuthorSubscribers]', error)
+    }
+  })
+
   createEffect(async () => {
     if (searchParams().by === 'commented') {
       try {
@@ -107,7 +105,7 @@ export const AuthorView = (props: AuthorProps) => {
   return (
     <div class="author-page">
       <div class="wide-container">
-        <AuthorFull author={author()} />
+        <AuthorFull author={author} />
         <div class="row group__controls">
           <div class="col-md-16">
             <ul class="view-switcher">
@@ -197,9 +195,7 @@ export const AuthorView = (props: AuthorProps) => {
       >
         <Match when={searchParams().by === 'about'}>
           <div class="wide-container">
-            <Show when={author().bio}>
-              <p>{author().bio}</p>
-            </Show>
+            <p>{author.bio}</p>
           </div>
         </Match>
         <Match when={searchParams().by === 'commented'}>

src/stores/router.ts

@@ -2,7 +2,6 @@ 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: '/',
@@ -103,33 +102,9 @@ const handleClientRouteLinkClick = async (event) => {
       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)
-  })
+  scrollToHash(url.hash)
 }
 
 export const initRouter = (pathname: string, search: Record<string, string>) => {

src/stores/zine/common.ts

@@ -2,7 +2,6 @@ import type { FollowingEntity } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
 
 export const follow = async ({ what, slug }: { what: FollowingEntity; slug: string }) => {
-  console.log('!!! follow:')
   await apiClient.follow({ what, slug })
 }
 export const unfollow = async ({ what, slug }: { what: FollowingEntity; slug: string }) => {