all-authors-load

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<AllAuthorsPageSearchParams>()
   const { sortedAuthors } = useAuthorsStore({
     authors: props.authors,
@@ -40,17 +40,33 @@ export const AllAuthorsView = (props: Props) => {
   const [searchQuery, setSearchQuery] = createSignal('')
 
   createEffect(() => {
-    if (!searchParams().by) {
+    let by = searchParams().by
-      changeSearchParams({
+    if (by) {
-        by: 'name',
+      setAuthorsSort(by)
-      })
+    } else {
+      by = 'name'
+      changeSearchParams({ by })
     }
   })
 
-  createEffect(() => {
+  const loadMore = async (by: AllAuthorsPageSearchParams['by'] = '') => {
-    setAuthorsSort(searchParams().by || 'name')
+    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,6 +119,7 @@ export const AllAuthorsView = (props: Props) => {
       <Meta name="twitter:description" content={description} />
       <Show when={props.isLoaded} fallback={<Loading />}>
         <div class="offset-md-5">
+          <Show when={isStatsLoaded()}>
             <div class="row">
               <div class="col-lg-20 col-xl-18">
                 <h1>{t('Authors')}</h1>
@@ -131,6 +146,7 @@ export const AllAuthorsView = (props: Props) => {
                 </ul>
               </div>
             </div>
+          </Show>
 
           <Show when={sortedAuthors().length > 0}>
             <Show when={searchParams().by === 'name'}>
@@ -188,7 +204,7 @@ export const AllAuthorsView = (props: Props) => {
             </Show>
 
             <Show when={searchParams().by && searchParams().by !== 'name'}>
-              <For each={filteredAuthors().slice(0, limit())}>
+              <For each={filteredAuthors().slice(0, PAGE_SIZE)}>
                 {(author) => (
                   <div class="row">
                     <div class="col-lg-20 col-xl-18">
@@ -199,7 +215,7 @@ export const AllAuthorsView = (props: Props) => {
               </For>
             </Show>
 
-            <Show when={filteredAuthors().length > limit() && searchParams().by !== 'name'}>
+            <Show when={filteredAuthors().length > PAGE_SIZE + offset() && searchParams().by !== 'name'}>
               <div class="row">
                 <div class={clsx(styles.loadMoreContainer, 'col-24 col-md-20')}>
                   <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>

src/stores/zine/authors.ts

@@ -2,7 +2,7 @@ import { createLazyMemo } from '@solid-primitives/memo'
 import { createSignal } from 'solid-js'
 
 import { apiClient } from '../../graphql/client/core'
-import { Author } from '../../graphql/schema/core.gen'
+import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen'
 import { byStat } from '../../utils/sortby'
 
 export type AuthorsSortBy = 'shouts' | 'name' | 'followers'
@@ -93,8 +93,8 @@ type InitialState = {
   sortBy?: AuthorsSortBy
 }
 
-export const loadAuthors = async (by = {}, limit: number = 50, offset = 0): Promise<void> => {
+export const loadAuthors = async (args: QueryLoad_Authors_ByArgs): Promise<void> => {
-  const authors = await apiClient.loadAuthorsBy({ by, limit, offset })
+  const authors = await apiClient.loadAuthorsBy(args)
   addAuthors(authors)
 }