feat: app.tsx now with AutorsPaginator wrap, AllAuthors with logs and some dont needed changes, working on it. authors witrh minor changes

src/app.tsx

@@ -11,6 +11,7 @@ import { LocalizeProvider } from './context/localize'
 import { SessionProvider } from './context/session'
 import { TopicsProvider } from './context/topics'
 import { UIProvider } from './context/ui' // snackbar included
+import { AuthorsProvider } from './context/authors'
 import '~/styles/app.scss'
 
 export const Providers = (props: { children?: JSX.Element }) => {
@@ -24,7 +25,9 @@ export const Providers = (props: { children?: JSX.Element }) => {
                 <Meta name="viewport" content="width=device-width, initial-scale=1" />
                 <UIProvider>
                   <EditorProvider>
-                    <Suspense fallback={<Loading />}>{props.children}</Suspense>
+                    <AuthorsProvider>
+                      <Suspense fallback={<Loading />}>{props.children}</Suspense>
+                    </AuthorsProvider>
                   </EditorProvider>
                 </UIProvider>
               </MetaProvider>

src/components/Views/AllAuthors/AllAuthors.tsx

@@ -34,25 +34,34 @@ 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[]>([])
+
+  // UPDATE Fetch authors initially and when searchParams.by changes
+  createEffect(() => {
+    fetchAuthors(searchParams.by || 'name', 0)
+  })
 
   const authors = createMemo(() => {
     let sortedAuthors = [...(props.authors || authorsSorted())] // Clone the array to avoid mutating the original
-    console.log('Before Sorting:', sortedAuthors)
+    console.log('Before Sorting:', sortedAuthors.slice(0, 5)) // Log the first 5 authors for comparison
     if (searchParams.by === 'name') {
       sortedAuthors = sortedAuthors.sort((a, b) => a.name.localeCompare(b.name))
-      console.log('Sorted by Name:', sortedAuthors)
+      console.log('Sorted by Name:', sortedAuthors.slice(0, 5))
     } else if (searchParams.by === 'shouts') {
       sortedAuthors = sortedAuthors.sort((a, b) => (b.stat?.shouts || 0) - (a.stat?.shouts || 0))
-      console.log('Sorted by Shouts:', sortedAuthors)
+      console.log('Sorted by Shouts:', sortedAuthors.slice(0, 5))
+    } else if (searchParams.by === 'followers') {
+      sortedAuthors = sortedAuthors.sort((a, b) => (b.stat?.followers || 0) - (a.stat?.followers || 0));
+      console.log('Sorted by Followers:', sortedAuthors.slice(0, 5));
     }
-    console.log('After Sorting:', sortedAuthors)
+    console.log('After Sorting:', sortedAuthors.slice(0, 5))
     return sortedAuthors
   })
 
   // Log authors data and searchParams for debugging
   createEffect(() => {
-    console.log('Authors:', props.authors)
-    console.log('Sorted Authors:', authors())
+    console.log('Authors:', props.authors.slice(0, 5)) // Log the first 5 authors
+    console.log('Sorted Authors:', authors().slice(0, 5)) // Log the first 5 sorted authors
     console.log('Search Params "by":', searchParams.by)
   })
 
@@ -92,22 +101,25 @@ 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 {
       setLoading(false)
     }
   }
+
   const [currentPage, setCurrentPage] = createSignal<{ followers: number; shouts: number }>({
     followers: 0,
     shouts: 0
   })
 
   const loadMoreAuthors = () => {
-    const by = searchParams?.by as 'followers' | 'shouts' | undefined
-    if (!by) return
-    const nextPage = currentPage()[by] + 1
-    fetchAuthors(by, nextPage).then(() => setCurrentPage({ ...currentPage(), [by]: nextPage }))
+    const by = searchParams?.by as 'followers' | 'shouts' | undefined;
+    if (!by) return;
+    const nextPage = currentPage()[by] + 1;
+    fetchAuthors(by, nextPage).then(() => setCurrentPage({ ...currentPage(), [by]: nextPage }));
   }
 
   const TabNavigator = () => (
@@ -121,7 +133,7 @@ export const AllAuthors = (props: Props) => {
               ['view-switcher__item--selected']: !searchParams?.by || searchParams?.by === 'shouts'
             })}
           >
-            <a href="/author?by=shouts">{t('By shouts')}</a>
+            <a href="#" onClick={() => changeSearchParams({ by: 'shouts' })}>{t('By shouts')}</a>
           </li>
           <li
             class={clsx({

src/context/authors.tsx

@@ -56,7 +56,7 @@ export const AuthorsProvider = (props: { children: JSX.Element }) => {
   const [authorsSorted, setAuthorsSorted] = createSignal<Author[]>([])
   const [sortBy, setSortBy] = createSignal<SortFunction<Author>>()
   const { feedByAuthor } = useFeed()
-  const setAuthorsSort = (stat: string) => setSortBy((_) => byStat(stat) as SortFunction<Author>)
+  const setAuthorsSort = (stat: string) => setSortBy(() => byStat(stat) as SortFunction<Author>)
 
   // Эффект для отслеживания изменений сигнала sortBy и обновления authorsSorted
   createEffect(
@@ -64,7 +64,7 @@ export const AuthorsProvider = (props: { children: JSX.Element }) => {
       [sortBy, authorsEntities],
       ([sortfn, authorsdict]) => {
         if (sortfn) {
-          setAuthorsSorted?.([...filterAndSort(Object.values(authorsdict), sortfn)])
+          setAuthorsSorted([...filterAndSort(Object.values(authorsdict), sortfn)])
         }
       },
       { defer: true }
@@ -101,6 +101,17 @@ export const AuthorsProvider = (props: { children: JSX.Element }) => {
     }
   }
 
+  const loadAuthorsPaginated = async (args: QueryLoad_Authors_ByArgs): Promise<void> => {
+    try {
+      const fetcher = await loadAuthors(args)
+      const data = await fetcher()
+      if (data) addAuthors(data as Author[])
+    } catch (error) {
+      console.error('Error loading authors:', error)
+      throw error
+    }
+  }
+
   const topAuthors = createMemo(() => {
     const articlesByAuthorMap = feedByAuthor?.() || {}
 
@@ -125,17 +136,6 @@ export const AuthorsProvider = (props: { children: JSX.Element }) => {
     return sortedTopAuthors
   })
 
-  const loadAuthorsPaginated = async (args: QueryLoad_Authors_ByArgs): Promise<void> => {
-    try {
-      const fetcher = await loadAuthors(args)
-      const data = await fetcher()
-      if (data) addAuthors(data as Author[])
-    } catch (error) {
-      console.error('Error loading authors:', error)
-      throw error
-    }
-  }
-
   const authorsByTopic = createMemo(() => {
     const articlesByAuthorMap = feedByAuthor?.() || {}
     const result: { [topicSlug: string]: Author[] } = {}