diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index 3819ae21..14544302 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -1,6 +1,6 @@ import { A, useLocation, useParams } from '@solidjs/router' import { clsx } from 'clsx' -import { For, Match, Show, Switch, createEffect, createMemo, createSignal, on } from 'solid-js' +import { For, Match, Show, Switch, createEffect, createMemo, createSignal } from 'solid-js' import { Loading } from '~/components/_shared/Loading' import { coreApiUrl } from '~/config' import { useAuthors } from '~/context/authors' @@ -12,7 +12,6 @@ import getAuthorFollowersQuery from '~/graphql/query/core/author-followers' import getAuthorFollowsQuery from '~/graphql/query/core/author-follows' import type { Author, Reaction, Shout, Topic } from '~/graphql/schema/core.gen' import { byCreated } from '~/lib/sort' -import { paginate } from '~/utils/paginate' import stylesArticle from '../../Article/Article.module.scss' import { Comment } from '../../Article/Comment' import { AuthorCard } from '../../Author/AuthorCard' @@ -25,20 +24,19 @@ import styles from './Author.module.scss' type AuthorViewProps = { authorSlug: string - selectedTab: string - shouts?: Shout[] + shouts: Shout[] author?: Author } export const PRERENDERED_ARTICLES_COUNT = 12 -const LOAD_MORE_PAGE_SIZE = 9 +// const LOAD_MORE_PAGE_SIZE = 9 export const AuthorView = (props: AuthorViewProps) => { // contexts const { t } = useLocalize() const loc = useLocation() const params = useParams() - const [currentTab, setCurrentTab] = createSignal(props.selectedTab) + const [currentTab, setCurrentTab] = createSignal(params.tab) const { session } = useSession() const client = createMemo(() => graphqlClientCreate(coreApiUrl, session()?.access_token)) @@ -56,21 +54,11 @@ export const AuthorView = (props: AuthorViewProps) => { // derivatives const me = createMemo(() => session()?.user?.app_data?.profile as Author) - const pages = createMemo(() => - paginate((props.shouts || []).slice(1), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE) - ) // Переход по табам - createEffect( - on( - () => params.tab, - (tab: string) => { - // Обновляем текущую вкладку - setCurrentTab(tab || '') - }, - {} - ) - ) + createEffect(() => { + setCurrentTab(params.tab) + }) // Объединенный эффект для загрузки автора и его подписок createEffect(async () => { @@ -171,7 +159,6 @@ export const AuthorView = (props: AuthorViewProps) => { -
@@ -198,7 +185,6 @@ export const AuthorView = (props: AuthorViewProps) => { -
@@ -232,36 +218,29 @@ export const AuthorView = (props: AuthorViewProps) => {
- 0 && props.shouts[0]}> - - - 1}> - - - - - - - - 3}> - - {(page) => ( - <> - - - - - - - - )} - - - - + 0}> + i % 3 === 0)}> + {(_shout, index) => { + const articles = props.shouts.slice(index() * 3, index() * 3 + 3); + return ( + <> + + + + + + + + + + + + + ); + }} +
-
) diff --git a/src/components/Views/Topic.tsx b/src/components/Views/Topic.tsx index 468a7ad5..13d567bc 100644 --- a/src/components/Views/Topic.tsx +++ b/src/components/Views/Topic.tsx @@ -1,6 +1,6 @@ import { useSearchParams } from '@solidjs/router' import { clsx } from 'clsx' -import { For, Show, Suspense, createEffect, createMemo, createSignal, on } from 'solid-js' +import { For, Match, Show, Suspense, Switch, createEffect, createSignal, on } from 'solid-js' import { useAuthors } from '~/context/authors' import { useFeed } from '~/context/feed' import { useLocalize } from '~/context/localize' @@ -9,7 +9,6 @@ import { loadAuthors, loadFollowersByTopic, loadShouts } from '~/graphql/api/pub import { Author, AuthorsBy, LoadShoutsOptions, Shout, Topic } from '~/graphql/schema/core.gen' import { SHOUTS_PER_PAGE } from '~/routes/(main)' import { getUnixtime } from '~/utils/date' -import { paginate } from '~/utils/paginate' import { restoreScrollPosition, saveScrollPosition } from '~/utils/scroll' import styles from '../../styles/Topic.module.scss' import { Beside } from '../Feed/Beside' @@ -21,7 +20,6 @@ import { LoadMoreItems, LoadMoreWrapper } from '../_shared/LoadMoreWrapper' import { Loading } from '../_shared/Loading' import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper' -// FIXME: should be 'last_comment' and 'comments_stat' or just one? export type TopicFeedSortBy = 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'last_comment' interface Props { @@ -33,7 +31,7 @@ interface Props { } export const PRERENDERED_ARTICLES_COUNT = 28 -const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3 +// const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3 export const TopicView = (props: Props) => { const { t } = useLocalize() @@ -49,13 +47,13 @@ export const TopicView = (props: Props) => { // TODO: filter + sort const [sortedFeed, setSortedFeed] = createSignal([] as Shout[]) createEffect(on(([feedByTopic, () => props.topicSlug, topicEntities]), ([feed, slug, ttt]) => { - if (Object.values(ttt).length === 0) return - const sss = (feed[slug] || []) as Shout[] - sss && setSortedFeed(sss) - console.debug('topic slug loaded', slug) - const tpc = ttt[slug] - console.debug('topics loaded', ttt) - tpc && setTopic(tpc) + if (Object.values(ttt).length === 0) return + const sss = (feed[slug] || []) as Shout[] + sss && setSortedFeed(sss) + console.debug('topic slug loaded', slug) + const tpc = ttt[slug] + console.debug('topics loaded', ttt) + tpc && setTopic(tpc) }, {})) const loadTopicFollowers = async () => { @@ -104,12 +102,12 @@ export const TopicView = (props: Props) => { // второй этап начальной загрузки данных createEffect(on(topic, (tpc) => { - console.debug('topic loaded', tpc) - if (!tpc) return - loadFavoriteTopArticles() - loadReactedTopMonthArticles() - loadTopicAuthors() - loadTopicFollowers() + console.debug('topic loaded', tpc) + if (!tpc) return + loadFavoriteTopArticles() + loadReactedTopMonthArticles() + loadTopicAuthors() + loadTopicFollowers() }, { defer: true })) // дозагрузка @@ -137,9 +135,6 @@ export const TopicView = (props: Props) => { }) */ - const pages = createMemo(() => - paginate(sortedFeed(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE) - ) return (
}> @@ -223,15 +218,26 @@ export const TopicView = (props: Props) => { - - {(page) => ( + i % 3 === 0)}> + {(_shout, index) => { + const articles = sortedFeed().slice(19).slice(index() * 3, index() * 3 + 3); + return ( <> - - - + + + + + + + + + + + - )} - + ); + }} +
diff --git a/src/routes/author/[slug]/[...tab].tsx b/src/routes/author/[slug]/[...tab].tsx index a05d3539..ad8accdb 100644 --- a/src/routes/author/[slug]/[...tab].tsx +++ b/src/routes/author/[slug]/[...tab].tsx @@ -138,9 +138,8 @@ export default function AuthorPage(props: RouteSectionProps) { > diff --git a/src/routes/topic/[slug]/[...tab].tsx b/src/routes/topic/[slug]/[...tab].tsx index 3348de8c..85eed590 100644 --- a/src/routes/topic/[slug]/[...tab].tsx +++ b/src/routes/topic/[slug]/[...tab].tsx @@ -62,34 +62,38 @@ export default function TopicPage(props: RouteSectionProps) { const [desc, setDesc] = createSignal('') const [cover, setCover] = createSignal('') const [viewed, setViewed] = createSignal(false) - createEffect(on([topics, () => window], ([ttt, win]) => { - if (ttt && win) { - // console.debug('all topics:', ttt) - ttt && addTopics(ttt) - const tpc = ttt.find((x) => x.slug === props.params.slug) - if (!tpc) return - setTopic(tpc) - setTitle(() => `${t('Discours')}${topic()?.title ? ` :: ${topic()?.title}` : ''}`) - setDesc(() => - topic()?.body - ? descFromBody(topic()?.body || '') - : t('The most interesting publications on the topic', { topicName: title() }) - ) - setCover(() => - topic()?.pic ? getImageUrl(topic()?.pic || '', { width: 1200 }) : '/logo.png' - ) + createEffect( + on( + [topics, () => window], + ([ttt, win]) => { + if (ttt && win) { + // console.debug('all topics:', ttt) + ttt && addTopics(ttt) + const tpc = ttt.find((x) => x.slug === props.params.slug) + if (!tpc) return + setTopic(tpc) + setTitle(() => `${t('Discours')}${topic()?.title ? ` :: ${topic()?.title}` : ''}`) + setDesc(() => + topic()?.body + ? descFromBody(topic()?.body || '') + : t('The most interesting publications on the topic', { topicName: title() }) + ) + setCover(() => (topic()?.pic ? getImageUrl(topic()?.pic || '', { width: 1200 }) : '/logo.png')) - // views google counter increment - if (viewed()) { - window?.gtag?.('event', 'page_view', { - page_title: tpc.title, - page_location: window?.location.href, - page_path: window?.location.pathname - }) - setViewed(true) - } - } - }, {})) + // views google counter increment + if (!viewed()) { + window?.gtag?.('event', 'page_view', { + page_title: tpc.title, + page_location: window?.location.href, + page_path: window?.location.pathname + }) + setViewed(true) + } + } + }, + {} + ) + ) return (