From 3549e575062c387de8c67d62cfaf7bc4d7543761 Mon Sep 17 00:00:00 2001 From: bniwredyc Date: Mon, 3 Apr 2023 14:55:00 +0200 Subject: [PATCH 1/5] scroll to anchor fixes, profile comments link fix --- src/components/Article/CommentsTree.tsx | 4 +- src/components/Article/FullArticle.tsx | 29 +------- src/components/Feed/Card.tsx | 15 +--- src/components/Nav/ProfilePopup.tsx | 19 +---- src/components/Views/Author.tsx | 6 +- src/stores/router.ts | 96 +++++++++++++------------ 6 files changed, 65 insertions(+), 104 deletions(-) diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx index a6ac5449..9d61e3d1 100644 --- a/src/components/Article/CommentsTree.tsx +++ b/src/components/Article/CommentsTree.tsx @@ -108,7 +108,7 @@ export const CommentsTree = (props: Props) => { return ( <>
-

+

{t('Comments')} {comments().length.toString() || ''} 0}>  +{newReactions().length} @@ -161,7 +161,7 @@ export const CommentsTree = (props: Props) => { +
{t('To write a comment, you must')}{' '} {t('sign up')} diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 628d2b3f..d057aa91 100644 --- a/src/components/Article/FullArticle.tsx +++ b/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 ( <> {props.article.title} @@ -276,7 +249,7 @@ export const FullArticle = (props: ArticleProps) => { )}
- diff --git a/src/components/Nav/ProfilePopup.tsx b/src/components/Nav/ProfilePopup.tsx index 1d5bfd5b..b19ae5ff 100644 --- a/src/components/Nav/ProfilePopup.tsx +++ b/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 @@ -16,12 +15,6 @@ export const ProfilePopup = (props: ProfilePopupProps) => { } = useSession() const { t } = useLocalize() - const { changeSearchParam } = useRouter() - - const openAuthorComments = () => { - openPage(router, 'author', { slug: userSlug() }) - changeSearchParam('by', 'commented') - } return ( @@ -36,13 +29,7 @@ export const ProfilePopup = (props: ProfilePopupProps) => { {t('Subscriptions')}
  • - { - event.preventDefault() - openAuthorComments() - }} - > + {t('Comments')}
    • diff --git a/src/components/Views/Author.tsx b/src/components/Views/Author.tsx index 535c915a..b4e94de5 100644 --- a/src/components/Views/Author.tsx +++ b/src/components/Views/Author.tsx @@ -54,7 +54,11 @@ export const AuthorView = (props: AuthorProps) => { const { searchParams, changeSearchParam } = useRouter() - changeSearchParam('by', 'rating') + onMount(() => { + if (!searchParams().by) { + changeSearchParam('by', 'rating') + } + }) const loadMore = async () => { saveScrollPosition() diff --git a/src/stores/router.ts b/src/stores/router.ts index ad7afc8d..c21d25b8 100644 --- a/src/stores/router.ts +++ b/src/stores/router.ts @@ -40,9 +40,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 +51,58 @@ 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 handleClientRouteLinkClick = (event) => { + const link = event.target.closest('a') - if (url.search) { - const params = Object.fromEntries(new URLSearchParams(url.search)) - searchParamsStore.open(params) - } - - if (url.hash) { - let selector = url.hash - - 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 // 100px for header - const elementPosition = anchor ? anchor.getBoundingClientRect().top : 0 - const newScrollTop = elementPosition + window.scrollY - headerOffset - - window.scrollTo({ - top: newScrollTop, - behavior: 'smooth' - }) - - return - } - - window.scrollTo({ - top: 0, - left: 0 - }) - } + if (!checkOpenOnClient(link, event)) { + return } + + 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) { + let selector = url.hash + + 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 // 100px for header + const elementPosition = anchor ? anchor.getBoundingClientRect().top : 0 + const newScrollTop = elementPosition + window.scrollY - headerOffset + + window.scrollTo({ + top: newScrollTop, + behavior: 'smooth' + }) + + return + } + + window.scrollTo({ + top: 0, + left: 0 + }) } export const initRouter = (pathname: string, search: Record) => { @@ -134,7 +143,6 @@ export const useRouter = = Record< return { page, searchParams, - changeSearchParam, - handleClientRouteLinkClick + changeSearchParam } } From 71fb5c52765ff6f7d33ad9e95840cef2ffe421da Mon Sep 17 00:00:00 2001 From: bniwredyc Date: Mon, 3 Apr 2023 15:11:02 +0200 Subject: [PATCH 2/5] build fix --- src/components/Article/FullArticle.tsx | 4 ++-- src/components/Views/Search.tsx | 10 +++------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index d057aa91..4d9a5a6f 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -185,10 +185,10 @@ export const FullArticle = (props: ArticleProps) => {

    -
    scrollToComments()}> + {/*{props.article.stat?.commented || ''}*/} -
    +
    { const [query, setQuery] = createSignal(props.query) const [offset, setOffset] = createSignal(0) - const { searchParams, handleClientRouteLinkClick } = useRouter() + const { searchParams } = useRouter() let searchEl: HTMLInputElement const handleQueryChange = (_ev) => { setQuery(searchEl.value) @@ -72,18 +72,14 @@ export const SearchView = (props: Props) => { selected: searchParams().by === 'relevance' }} > - - {t('By relevance')} - + {t('By relevance')}
  • - - {t('Top rated')} - + {t('Top rated')}
    • From 4a8c2bea779d28c9e6010e0feb088509a583b3a2 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Mon, 3 Apr 2023 16:38:44 +0300 Subject: [PATCH 3/5] perfectionism mode --- src/components/Article/CommentsTree.tsx | 3 +-- src/components/Article/FullArticle.tsx | 2 +- src/components/Feed/Card.tsx | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/Article/CommentsTree.tsx b/src/components/Article/CommentsTree.tsx index 9d61e3d1..f809c0a4 100644 --- a/src/components/Article/CommentsTree.tsx +++ b/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' @@ -148,7 +147,7 @@ export const CommentsTree = (props: Props) => {