117 lines
4.2 KiB
TypeScript
117 lines
4.2 KiB
TypeScript
import { Show, createMemo } from 'solid-js'
|
|
import type { Author, Shout } from '../../graphql/types.gen'
|
|
import Row2 from '../Feed/Row2'
|
|
import Row3 from '../Feed/Row3'
|
|
// import Beside from '../Feed/Beside'
|
|
import AuthorFull from '../Author/Full'
|
|
import { t } from '../../utils/intl'
|
|
import { useAuthorsStore } from '../../stores/zine/authors'
|
|
import { useArticlesStore } from '../../stores/zine/articles'
|
|
|
|
import '../../styles/Topic.scss'
|
|
import { useTopicsStore } from '../../stores/zine/topics'
|
|
import { useRouter } from '../../stores/router'
|
|
import Beside from '../Feed/Beside'
|
|
|
|
// TODO: load reactions on client
|
|
type AuthorProps = {
|
|
authorArticles: Shout[]
|
|
author: Author
|
|
authorSlug: string
|
|
// FIXME author topics fro server
|
|
// topics: Topic[]
|
|
}
|
|
|
|
type AuthorPageSearchParams = {
|
|
by: '' | 'viewed' | 'rating' | 'commented' | 'recent'
|
|
}
|
|
|
|
export const AuthorView = (props: AuthorProps) => {
|
|
const { sortedArticles } = useArticlesStore({
|
|
sortedArticles: props.authorArticles
|
|
})
|
|
const { authorEntities } = useAuthorsStore({ authors: [props.author] })
|
|
const { topicsByAuthor } = useTopicsStore()
|
|
|
|
const author = createMemo(() => authorEntities()[props.authorSlug])
|
|
const { getSearchParams, changeSearchParam } = useRouter<AuthorPageSearchParams>()
|
|
|
|
const title = createMemo(() => {
|
|
const m = getSearchParams().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')
|
|
})
|
|
|
|
return (
|
|
<div class="container author-page">
|
|
<Show when={author()} fallback={<div class="center">{t('Loading')}</div>}>
|
|
<AuthorFull author={author()} />
|
|
<div class="row group__controls">
|
|
<div class="col-md-8">
|
|
<ul class="view-switcher">
|
|
<li classList={{ selected: !getSearchParams().by || getSearchParams().by === 'recent' }}>
|
|
<button type="button" onClick={() => changeSearchParam('by', 'recent')}>
|
|
{t('Recent')}
|
|
</button>
|
|
</li>
|
|
{/*TODO: server sort*/}
|
|
{/*<li classList={{ selected: getSearchParams().by === 'rating' }}>*/}
|
|
{/* <button type="button" onClick={() => changeSearchParam('by', 'rating')}>*/}
|
|
{/* {t('Popular')}*/}
|
|
{/* </button>*/}
|
|
{/*</li>*/}
|
|
{/*<li classList={{ selected: getSearchParams().by === 'viewed' }}>*/}
|
|
{/* <button type="button" onClick={() => changeSearchParam('by', 'viewed')}>*/}
|
|
{/* {t('Views')}*/}
|
|
{/* </button>*/}
|
|
{/*</li>*/}
|
|
{/*<li classList={{ selected: getSearchParams().by === 'commented' }}>*/}
|
|
{/* <button type="button" onClick={() => changeSearchParam('by', 'commented')}>*/}
|
|
{/* {t('Discussing')}*/}
|
|
{/* </button>*/}
|
|
{/*</li>*/}
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mode-switcher">
|
|
{`${t('Show')} `}
|
|
<span class="mode-switcher__control">{t('All posts')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="col-12">{title()}</h3>
|
|
<div class="row">
|
|
<Show when={sortedArticles().length > 0}>
|
|
<Beside
|
|
title={t('Topics which supported by author')}
|
|
values={topicsByAuthor()[author().slug].slice(0, 5)}
|
|
beside={sortedArticles()[0]}
|
|
wrapper={'topic'}
|
|
topicShortDescription={true}
|
|
isTopicCompact={true}
|
|
isTopicInRow={true}
|
|
iconButton={true}
|
|
/>
|
|
<Row3 articles={sortedArticles().slice(1, 4)} />
|
|
|
|
<Show when={sortedArticles().length > 4}>
|
|
<Row2 articles={sortedArticles().slice(4, 6)} />
|
|
</Show>
|
|
|
|
<Show when={sortedArticles().length > 6}>
|
|
<Row3 articles={sortedArticles().slice(6, 9)} />
|
|
</Show>
|
|
|
|
<Show when={sortedArticles().length > 9}>
|
|
<Row3 articles={sortedArticles().slice(9, 12)} />
|
|
</Show>
|
|
</Show>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
)
|
|
}
|