import type { Shout, Topic } from '../../graphql/schema/core.gen' import { Meta } from '@solidjs/meta' import { clsx } from 'clsx' import { For, Show, createEffect, createMemo, createSignal, onMount } from 'solid-js' import { useLocalize } from '../../context/localize' import { useRouter } from '../../stores/router' import { loadShouts, useArticlesStore } from '../../stores/zine/articles' import { useAuthorsStore } from '../../stores/zine/authors' import { useTopicsStore } from '../../stores/zine/topics' import { capitalize } from '../../utils/capitalize' import { getImageUrl } from '../../utils/getImageUrl' import { getDescription } from '../../utils/meta' import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll' import { splitToPages } from '../../utils/splitToPages' import { Beside } from '../Feed/Beside' import { Row1 } from '../Feed/Row1' import { Row2 } from '../Feed/Row2' import { Row3 } from '../Feed/Row3' import { FullTopic } from '../Topic/Full' import { ArticleCardSwiper } from '../_shared/SolidSwiper/ArticleCardSwiper' import styles from '../../styles/Topic.module.scss' type TopicsPageSearchParams = { by: 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'commented' } interface Props { topic: Topic shouts: Shout[] topicSlug: string } export const PRERENDERED_ARTICLES_COUNT = 28 const LOAD_MORE_PAGE_SIZE = 9 // Row3 + Row3 + Row3 export const TopicView = (props: Props) => { const { t, lang } = useLocalize() const { searchParams, changeSearchParams } = useRouter() const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) const { sortedArticles } = useArticlesStore({ shouts: props.shouts }) const { topicEntities } = useTopicsStore({ topics: [props.topic] }) const { authorsByTopic } = useAuthorsStore() const [topic, setTopic] = createSignal() createEffect(() => { const topics = topicEntities() if (props.topicSlug && !topic() && topics) { setTopic(topics[props.topicSlug]) } }) const title = createMemo( () => `#${capitalize( lang() === 'en' ? topic()?.slug.replace(/-/, ' ') : topic()?.title || topic()?.slug.replace(/-/, ' '), true, )}`, ) const loadMore = async () => { saveScrollPosition() const { hasMore } = await loadShouts({ filters: { topic: topic()?.slug }, limit: LOAD_MORE_PAGE_SIZE, offset: sortedArticles().length, }) setIsLoadMoreButtonVisible(hasMore) restoreScrollPosition() } onMount(() => { if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) { loadMore() } }) /* const selectionTitle = createMemo(() => { const m = searchParams().by if (m === 'viewed') return t('Top viewed') if (m === 'rating') return t('Top rated') if (m === 'commented') return t('Top discussed') return t('Top recent') }) */ const pages = createMemo(() => splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE), ) const ogImage = () => topic()?.pic ? getImageUrl(topic().pic, { width: 1200 }) : getImageUrl('production/image/logo_image.png') const description = () => topic()?.body ? getDescription(topic().body) : t('The most interesting publications on the topic', { topicName: title() }) return (
  • {/*TODO: server sort*/} {/*
  • */} {/* */} {/*
  • */} {/*
  • */} {/* */} {/*
  • */} {/*
  • */} {/* */} {/*
  • */}
{`${t('Show')} `} {t('All posts')}
15}> {(page) => ( <> )}

) }