import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js' import type { Author } from '../../graphql/types.gen' import { setAuthorsSort, useAuthorsStore } from '../../stores/zine/authors' import { useRouter } from '../../stores/router' import { AuthorCard } from '../Author/AuthorCard' import { clsx } from 'clsx' import { useSession } from '../../context/session' import { SearchField } from '../_shared/SearchField' import { scrollHandler } from '../../utils/scroll' import { useLocalize } from '../../context/localize' import { dummyFilter } from '../../utils/dummyFilter' import styles from './AllAuthors.module.scss' type AllAuthorsPageSearchParams = { by: '' | 'name' | 'shouts' | 'followers' } type AllAuthorsViewProps = { authors: Author[] } const PAGE_SIZE = 20 const ALPHABET = [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ@'] export const AllAuthorsView = (props: AllAuthorsViewProps) => { const { t, lang } = useLocalize() const [limit, setLimit] = createSignal(PAGE_SIZE) const { searchParams, changeSearchParam } = useRouter() const { sortedAuthors } = useAuthorsStore({ authors: props.authors, sortBy: searchParams().by || 'shouts' }) const [searchQuery, setSearchQuery] = createSignal('') const { session, subscriptions } = useSession() onMount(() => { if (!searchParams().by) { changeSearchParam({ by: 'shouts' }) } }) createEffect(() => { setAuthorsSort(searchParams().by || 'shouts') }) const byLetter = createMemo<{ [letter: string]: Author[] }>(() => { return sortedAuthors().reduce( (acc, author) => { let letter = author.name.trim().split(' ').pop().at(0).toUpperCase() if (/[^ËА-яё]/.test(letter) && lang() === 'ru') letter = '@' if (!acc[letter]) acc[letter] = [] acc[letter].push(author) return acc }, {} as { [letter: string]: Author[] } ) }) const sortedKeys = createMemo(() => { const keys = Object.keys(byLetter()) keys.sort() keys.push(keys.shift()) return keys }) const subscribed = (authorSlug: string) => subscriptions().authors.some((author) => author.slug === authorSlug) const filteredAuthors = createMemo(() => { return dummyFilter(sortedAuthors(), searchQuery(), lang()) }) const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE) const AllAuthorsHead = () => (

{t('Authors')}

{t('Subscribe who you like to tune your personal feed')}

) return (
0}>
{(letter) => (

{letter}

{(author) => (
{author.name} {author.stat.shouts}
)}
)}
{(author) => (
)}
limit() && searchParams().by !== 'name'}>
) }