feat: page AllAuthors show sorted list and ABC nav is working. But pagination not yet

src/components/Views/AllAuthors/AllAuthors.tsx

@@ -18,8 +18,6 @@ import stylesAuthorList from './AuthorsList.module.scss'
 
 type Props = {
   authors: Author[]
-  authorsByFollowers?: Author[]
-  authorsByShouts?: Author[]
   isLoaded: boolean
 }
 
@@ -35,48 +33,44 @@ export const AllAuthors = (props: Props) => {
   const [searchParams, changeSearchParams] = useSearchParams<{ by?: string }>()
   const { authorsSorted, setAuthorsSort, loadAuthors } = useAuthors()
   const [loading, setLoading] = createSignal<boolean>(false)
-  const [_currentAuthors, setCurrentAuthors] = createSignal<Author[]>([])
+  const [searchQuery, setSearchQuery] = createSignal('')
+  const [filteredAuthors, setFilteredAuthors] = createSignal<Author[]>([])
 
-  // UPDATE Fetch authors initially and when searchParams.by changes
   createEffect(() => {
-    fetchAuthors(searchParams.by || 'name', 0)
+      // Load all authors initially
+      fetchAuthors(searchParams.by || 'name', 0)
   })
 
-  const authors = createMemo(() => {
+/*   const authors = createMemo(() => {
-    let sortedAuthors = [...(props.authors || authorsSorted())] // Clone the array to avoid mutating the original
+    let sortedAuthors = [...props.authors]
-    console.log('Before Sorting:', sortedAuthors.slice(0, 5)) // Log the first 5 authors for comparison
+    sortedAuthors = authorsSorted()
-    if (searchParams.by === 'name') {
+    if (!searchParams.by || searchParams.by === 'name') {
       sortedAuthors = sortedAuthors.sort(byFirstChar)
-      console.log('Sorted by Name:', sortedAuthors.slice(0, 5))
     } else if (searchParams.by === 'shouts') {
       sortedAuthors = sortedAuthors.sort(byStat('shouts'))
-      console.log('Sorted by Shouts:', sortedAuthors.slice(0, 5))
     } else if (searchParams.by === 'followers') {
       sortedAuthors = sortedAuthors.sort(byStat('followers'))
-      console.log('Sorted by Followers:', sortedAuthors.slice(0, 5))
     }
-    console.log('After Sorting:', sortedAuthors.slice(0, 5))
+    return sortedAuthors
+  }) */
+
+  const authors = createMemo(() => {
+    let sortedAuthors: Author[] = []
+    if (!searchParams.by || searchParams.by === 'name') {
+      sortedAuthors = [...props.authors].sort(byFirstChar)
+    } else {
+      sortedAuthors = authorsSorted().sort(byStat(searchParams.by || 'shouts'))
+    }
     return sortedAuthors
   })
 
-  // Log authors data and searchParams for debugging
   createEffect(() => {
-    console.log('Authors:', props.authors.slice(0, 5)) // Log the first 5 authors
+    setFilteredAuthors(dummyFilter(authors(), searchQuery(), lang()) as Author[])
-    console.log('Sorted Authors:', authors().slice(0, 5)) // Log the first 5 sorted authors
-    console.log('Search Params "by":', searchParams.by)
   })
 
-  // filter
-  const [searchQuery, setSearchQuery] = createSignal('')
-  const [filteredAuthors, setFilteredAuthors] = createSignal<Author[]>([])
-  createEffect(
-    () => authors() && setFilteredAuthors(dummyFilter(authors(), searchQuery(), lang()) as Author[])
-  )
 
-  // store by first char
   const byLetterFiltered = createMemo<{ [letter: string]: Author[] }>(() => {
     if (!(filteredAuthors()?.length > 0)) return {}
-    console.debug('[components.AllAuthors] update byLetterFiltered', filteredAuthors()?.length)
     return filteredAuthors().reduce(
       (acc, author: Author) => authorLetterReduce(acc, author, lang()),
       {} as { [letter: string]: Author[] }
@@ -93,7 +87,6 @@ export const AllAuthors = (props: Props) => {
 
   const fetchAuthors = async (queryType: string, page: number) => {
     try {
-      console.debug('[components.AuthorsList] fetching authors...')
       setLoading(true)
       setAuthorsSort?.(queryType)
       const offset = AUTHORS_PER_PAGE * page
@@ -102,8 +95,6 @@ export const AllAuthors = (props: Props) => {
         limit: AUTHORS_PER_PAGE,
         offset
       })
-      // UPDATE authors to currentAuthors state
-      setCurrentAuthors((prev) => [...prev, ...authorsSorted()])
     } catch (error) {
       console.error('[components.AuthorsList] error fetching authors:', error)
     } finally {
@@ -123,6 +114,7 @@ export const AllAuthors = (props: Props) => {
     fetchAuthors(by, nextPage).then(() => setCurrentPage({ ...currentPage(), [by]: nextPage }))
   }
 
+
   const TabNavigator = () => (
     <div class="row">
       <div class="col-lg-20 col-xl-18">
@@ -131,7 +123,7 @@ export const AllAuthors = (props: Props) => {
         <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
           <li
             class={clsx({
-              ['view-switcher__item--selected']: !searchParams?.by || searchParams?.by === 'shouts'
+              ['view-switcher__item--selected']: searchParams?.by === 'shouts'
             })}
           >
             <a href="#" onClick={() => changeSearchParams({ by: 'shouts' })}>
@@ -149,7 +141,7 @@ export const AllAuthors = (props: Props) => {
           </li>
           <li
             class={clsx({
-              ['view-switcher__item--selected']: searchParams?.by === 'name'
+              ['view-switcher__item--selected']: !searchParams?.by || searchParams?.by === 'name'
             })}
           >
             <a href="#" onClick={() => changeSearchParams({ by: 'name' })}>
@@ -247,12 +239,13 @@ export const AllAuthors = (props: Props) => {
       </div>
     </div>
   )
+
   return (
     <>
       <Show when={props.isLoaded} fallback={<Loading />}>
         <div class="offset-md-5">
           <TabNavigator />
-          <Show when={searchParams?.by === 'name'} fallback={<AuthorsSortedList />}>
+          <Show when={!searchParams.by || searchParams.by === 'name'} fallback={<AuthorsSortedList />}>
             <AbcNavigator />
             <AbcAuthorsList />
           </Show>

src/context/authors.tsx

@@ -125,7 +125,7 @@ export const AuthorsProvider = (props: { children: JSX.Element }) => {
     }))
 
     // Определяем функцию сортировки по рейтингу
-    const sortByRating: SortFunction<{ slug: string; rating: number }> = (a, b) => b.rating - a.rating
+    const sortByRating: SortFunction<{ slug: string; rating: number }> = (a, b) => a.rating - b.rating
 
     // Фильтруем и сортируем авторов
     const sortedTopAuthors = filterAndSort(authors, sortByRating)

src/lib/sort.ts

@@ -34,7 +34,7 @@ export const byStat = (metric: string) => {
   return (a: { stat?: SomeStat }, b: { stat?: SomeStat }) => {
     const aStat = a.stat?.[metric] ?? 0
     const bStat = b.stat?.[metric] ?? 0
-    return aStat - bStat
+    return bStat - aStat
   }
 }
 

src/routes/author/(all-authors).tsx

@@ -1,4 +1,4 @@
-import { RouteDefinition, RouteLoadFuncArgs, type RouteSectionProps, createAsync } from '@solidjs/router'
+import { RouteDefinition, RoutePreloadFuncArgs, type RouteSectionProps, createAsync } from '@solidjs/router'
 import { Suspense, createEffect, on } from 'solid-js'
 import { AllAuthors } from '~/components/Views/AllAuthors'
 import { AUTHORS_PER_PAGE } from '~/components/Views/AllAuthors/AllAuthors'
@@ -9,30 +9,23 @@ import { useLocalize } from '~/context/localize'
 import { loadAuthors, loadAuthorsAll } from '~/graphql/api/public'
 import { Author, AuthorsBy } from '~/graphql/schema/core.gen'
 
-const fetchAuthorsWithStat = async (offset = 0, order?: string) => {
+// Fetch Function
-  const by: AuthorsBy = { order }
-  const authorsFetcher = loadAuthors({ by, offset, limit: AUTHORS_PER_PAGE })
-  return await authorsFetcher()
-}
-
 const fetchAllAuthors = async () => {
   const authorsAllFetcher = loadAuthorsAll()
   return await authorsAllFetcher()
 }
 
+//Route Defenition
 export const route = {
-  load: async ({ location: { query } }: RouteLoadFuncArgs) => {
+  load: async ({ location: { query } }: RoutePreloadFuncArgs) => {
-    const by = query.by
-    const isAll = !by || by === 'name'
     return {
-      authors: isAll && (await fetchAllAuthors()),
+      authors: await fetchAllAuthors()
-      authorsByFollowers: await fetchAuthorsWithStat(10, 'followers'),
+    }
-      authorsByShouts: await fetchAuthorsWithStat(10, 'shouts')
-    } as AllAuthorsData
   }
 } satisfies RouteDefinition
 
-type AllAuthorsData = { authors: Author[]; authorsByFollowers: Author[]; authorsByShouts: Author[] }
+type AllAuthorsData = { authors: Author[] }
+
 
 // addAuthors to context
 
@@ -40,25 +33,20 @@ export default function AllAuthorsPage(props: RouteSectionProps<AllAuthorsData>)
   const { t } = useLocalize()
   const { addAuthors } = useAuthors()
 
-  // async load data: from ssr or fetch
   const data = createAsync<AllAuthorsData>(async () => {
     if (props.data) return props.data
+    const authors = await fetchAllAuthors()
     return {
-      authors: await fetchAllAuthors(),
+      authors: authors || []
-      authorsByFollowers: await fetchAuthorsWithStat(10, 'followers'),
+    }
-      authorsByShouts: await fetchAuthorsWithStat(10, 'shouts')
-    } as AllAuthorsData
   })
 
-  // update context when data is loaded
   createEffect(
     on(
       [data, () => addAuthors],
       ([data, aa]) => {
         if (data && aa) {
           aa(data.authors as Author[])
-          aa(data.authorsByFollowers as Author[])
-          aa(data.authorsByShouts as Author[])
           console.debug('[routes.author] added all authors:', data.authors)
         }
       },
@@ -76,8 +64,6 @@ export default function AllAuthorsPage(props: RouteSectionProps<AllAuthorsData>)
         <AllAuthors
           isLoaded={Boolean(data()?.authors)}
           authors={data()?.authors || []}
-          authorsByFollowers={data()?.authorsByFollowers}
-          authorsByShouts={data()?.authorsByShouts}
         />
       </Suspense>
     </PageLayout>