webapp/src/components/Views/AllAuthors/AllAuthors.tsx
2024-07-03 10:02:46 +03:00

183 lines
7.1 KiB
TypeScript

import { Meta } from '@solidjs/meta'
import { clsx } from 'clsx'
import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
import { type SortFunction, useAuthors } from '../../../context/authors'
import { useLocalize } from '../../../context/localize'
import type { Author } from '../../../graphql/schema/core.gen'
import { getImageUrl } from '../../../utils/getImageUrl'
import { scrollHandler } from '../../../utils/scroll'
import { authorLetterReduce, translateAuthor } from '../../../utils/translate'
import { AuthorsList } from '../../AuthorsList'
import { Loading } from '../../_shared/Loading'
import { SearchField } from '../../_shared/SearchField'
import { useSearchParams } from '@solidjs/router'
import { byFirstChar, byStat } from '~/utils/sortby'
import styles from './AllAuthors.module.scss'
type Props = {
authors: Author[]
topFollowedAuthors?: Author[]
topWritingAuthors?: Author[]
isLoaded: boolean
}
export const AUTHORS_PER_PAGE = 20
export const ABC = {
ru: 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ#',
en: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'
}
export const AllAuthors = (props: Props) => {
const { t, lang } = useLocalize()
const [searchQuery, setSearchQuery] = createSignal('')
const alphabet = createMemo(() => ABC[lang()] || ABC['ru'])
const [searchParams] = useSearchParams<{ by?: string }>()
const { authorsSorted, addAuthors, setSortBy } = useAuthors()
onMount(() => {
addAuthors([...props.authors])
const sortStat: string = searchParams?.by || 'name'
const sortfn = sortStat
? (byStat(sortStat) as SortFunction<Author>)
: (byFirstChar as SortFunction<Author>)
setSortBy(sortfn)
})
const filteredAuthors = createMemo(() => {
const query = searchQuery().toLowerCase()
return authorsSorted?.().filter((a: Author) => a?.name?.toLowerCase().includes(query))
})
const byLetterFiltered = createMemo<{ [letter: string]: Author[] }>(() => {
return filteredAuthors().reduce(
(acc, author: Author) => authorLetterReduce(acc, author, lang()),
{} as { [letter: string]: Author[] }
)
})
const sortedKeys = createMemo<string[]>(() => {
const keys = Object.keys(byLetterFiltered())
keys.sort()
const fk = keys.shift() || ''
fk && keys.push(fk)
return keys
})
const ogImage = createMemo(() => getImageUrl('production/image/logo_image.png'))
const ogTitle = createMemo(() => t('Authors'))
const description = createMemo(() => t('List of authors of the open editorial community'))
return (
<div class={clsx(styles.allAuthorsPage, 'wide-container')}>
<Meta name="descprition" content={description()} />
<Meta name="keywords" content={t('keywords')} />
<Meta name="og:type" content="article" />
<Meta name="og:title" content={ogTitle()} />
<Meta name="og:image" content={ogImage()} />
<Meta name="twitter:image" content={ogImage()} />
<Meta name="og:description" content={description()} />
<Meta name="twitter:card" content="summary_large_image" />
<Meta name="twitter:title" content={ogTitle()} />
<Meta name="twitter:description" content={description()} />
<Show when={props.isLoaded} fallback={<Loading />}>
<div class="offset-md-5">
<div class="row">
<div class="col-lg-20 col-xl-18">
<h1>{t('Authors')}</h1>
<p>{t('Subscribe who you like to tune your personal feed')}</p>
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li
class={clsx({
['view-switcher__item--selected']: !searchParams?.by || searchParams?.by === 'shouts'
})}
>
<a href="/authors?by=shouts">{t('By shouts')}</a>
</li>
<li
class={clsx({
['view-switcher__item--selected']: searchParams?.by === 'followers'
})}
>
<a href="/authors?by=followers">{t('By popularity')}</a>
</li>
<li
class={clsx({
['view-switcher__item--selected']: searchParams?.by === 'name'
})}
>
<a href="/authors?by=name">{t('By name')}</a>
</li>
<Show when={searchParams?.by === 'name'}>
<li class="view-switcher__search">
<SearchField onChange={(value) => setSearchQuery(value)} />
</li>
</Show>
</ul>
</div>
</div>
<Show when={searchParams?.by === 'name'}>
<div class="row">
<div class="col-lg-20 col-xl-18">
<ul class={clsx('nodash', styles.alphabet)}>
<For each={[...alphabet()]}>
{(letter, index) => (
<li>
<Show when={letter in byLetterFiltered()} fallback={letter}>
<a
href={`/authors?by=name#letter-${index()}`}
onClick={(event) => {
event.preventDefault()
scrollHandler(`letter-${index()}`)
}}
>
{letter}
</a>
</Show>
</li>
)}
</For>
</ul>
</div>
</div>
<For each={sortedKeys()}>
{(letter) => (
<div class={clsx(styles.group, 'group')}>
<h2 id={`letter-${alphabet().indexOf(letter)}`}>{letter}</h2>
<div class="container">
<div class="row">
<div class="col-lg-20">
<div class="row">
<For each={byLetterFiltered()[letter]}>
{(author) => (
<div class={clsx(styles.topic, 'topic col-sm-12 col-md-8')}>
<div class="topic-title">
<a href={`/author/${author.slug}`}>{translateAuthor(author, lang())}</a>
<Show when={author.stat?.shouts || 0}>
<span class={styles.articlesCounter}>{author.stat?.shouts || 0}</span>
</Show>
</div>
</div>
)}
</For>
</div>
</div>
</div>
</div>
</div>
)}
</For>
</Show>
<Show when={searchParams?.by !== 'name' && props.isLoaded}>
<AuthorsList
allAuthorsLength={authorsSorted()?.length || 0}
searchQuery={searchQuery()}
query={searchParams?.by === 'followers' ? 'followers' : 'shouts'}
/>
</Show>
</div>
</Show>
</div>
)
}