diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx index 1c259677..a67b7205 100644 --- a/src/components/Views/AllAuthors.tsx +++ b/src/components/Views/AllAuthors.tsx @@ -6,7 +6,7 @@ import { createEffect, createMemo, createSignal, For, Show } from 'solid-js' import { useLocalize } from '../../context/localize' import { useRouter } from '../../stores/router' -import { setAuthorsSort, useAuthorsStore } from '../../stores/zine/authors' +import { loadAllAuthors, loadAuthors, setAuthorsSort, useAuthorsStore } from '../../stores/zine/authors' import { dummyFilter } from '../../utils/dummyFilter' import { getImageUrl } from '../../utils/getImageUrl' import { scrollHandler } from '../../utils/scroll' @@ -30,7 +30,7 @@ const ALPHABET = [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫ export const AllAuthorsView = (props: Props) => { const { t, lang } = useLocalize() - const [limit, setLimit] = createSignal(PAGE_SIZE) + const [offset, setOffset] = createSignal(0) const { searchParams, changeSearchParams } = useRouter() const { sortedAuthors } = useAuthorsStore({ authors: props.authors, @@ -40,17 +40,33 @@ export const AllAuthorsView = (props: Props) => { const [searchQuery, setSearchQuery] = createSignal('') createEffect(() => { - if (!searchParams().by) { - changeSearchParams({ - by: 'name', - }) + let by = searchParams().by + if (by) { + setAuthorsSort(by) + } else { + by = 'name' + changeSearchParams({ by }) } }) - createEffect(() => { - setAuthorsSort(searchParams().by || 'name') + const loadMore = async (by: AllAuthorsPageSearchParams['by'] = '') => { + await loadAuthors({ by: { stat: by }, limit: PAGE_SIZE, offset: offset() }) + setOffset((o) => o + PAGE_SIZE) + } + + const isStatsLoaded = createMemo(() => sortedAuthors() && sortedAuthors().some((author) => author.stat)) + + createEffect(async () => { + if (!isStatsLoaded()) { + await loadMore('shouts') + await loadMore('followers') + } }) + const showMore = async () => { + await loadMore(searchParams().by) + } + const byLetter = createMemo<{ [letter: string]: Author[] }>(() => { return sortedAuthors().reduce( (acc, author) => { @@ -85,8 +101,6 @@ export const AllAuthorsView = (props: Props) => { return dummyFilter(sortedAuthors(), searchQuery(), lang()) }) - const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE) - const ogImage = getImageUrl('production/image/logo_image.png') const ogTitle = t('Authors') const description = t('List of authors of the open editorial community') @@ -105,32 +119,34 @@ export const AllAuthorsView = (props: Props) => { }>
-
-
-

{t('Authors')}

-

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

- +
-
+
0}> @@ -188,7 +204,7 @@ export const AllAuthorsView = (props: Props) => { - + {(author) => (
@@ -199,7 +215,7 @@ export const AllAuthorsView = (props: Props) => { - limit() && searchParams().by !== 'name'}> + PAGE_SIZE + offset() && searchParams().by !== 'name'}>