feat: step to all authors, with debug level an dsome minor changes in memo

src/components/Views/AllAuthors/AllAuthors.tsx

@@ -21,44 +21,55 @@ type Props = {
   authorsByShouts?: Author[]
   isLoaded: boolean
 }
+
 export const AUTHORS_PER_PAGE = 20
 export const ABC = {
   ru: 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ#',
   en: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#'
 }
 
-// useAuthors sorted from context, set filter/sort
-
 export const AllAuthors = (props: Props) => {
   const { t, lang } = useLocalize()
   const alphabet = createMemo(() => ABC[lang()] || ABC['ru'])
   const [searchParams, changeSearchParams] = useSearchParams<{ by?: string }>()
   const { authorsSorted, setAuthorsSort, loadAuthors } = useAuthors()
-  const authors = createMemo(() => props.authors || authorsSorted())
   const [loading, setLoading] = createSignal<boolean>(false)
 
+  const authors = createMemo(() => {
+    let sortedAuthors = [...(props.authors || authorsSorted())] // Clone the array to avoid mutating the original
+    console.log('Before Sorting:', sortedAuthors)
+    if (searchParams.by === 'name') {
+      sortedAuthors = sortedAuthors.sort((a, b) => a.name.localeCompare(b.name))
+      console.log('Sorted by Name:', sortedAuthors)
+    } 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('After Sorting:', sortedAuthors)
+    return sortedAuthors
+  })
+
+  // Log authors data and searchParams for debugging
+  createEffect(() => {
+    console.log('Authors:', props.authors)
+    console.log('Sorted Authors:', authors())
+    console.log('Search Params "by":', searchParams.by)
+  })
+
   // filter
   const [searchQuery, setSearchQuery] = createSignal('')
   const [filteredAuthors, setFilteredAuthors] = createSignal<Author[]>([])
-  createEffect(
-    () =>
-      authors() &&
-      setFilteredAuthors((_prev: Author[]) => dummyFilter(authors(), searchQuery(), lang()) as Author[])
+  createEffect(() =>
+    authors() && setFilteredAuthors(dummyFilter(authors(), searchQuery(), lang()) as Author[])
   )
 
-  // sort by
-  onMount(() => !searchParams?.by && changeSearchParams({ by: 'name' }))
-  createEffect(on(() => searchParams?.by || 'name', setAuthorsSort || ((_) => null), {}))
-
   // 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[] }
-      ) || {}
+    return filteredAuthors().reduce(
+      (acc, author: Author) => authorLetterReduce(acc, author, lang()),
+      {} as { [letter: string]: Author[] }
     )
   })
 
@@ -91,6 +102,7 @@ export const AllAuthors = (props: Props) => {
     followers: 0,
     shouts: 0
   })
+
   const loadMoreAuthors = () => {
     const by = searchParams?.by as 'followers' | 'shouts' | undefined
     if (!by) return
@@ -116,14 +128,14 @@ export const AllAuthors = (props: Props) => {
               ['view-switcher__item--selected']: searchParams?.by === 'followers'
             })}
           >
-            <a href="/author?by=followers">{t('By popularity')}</a>
+            <a href="#" onClick={() => changeSearchParams({ by: 'followers' })}>{t('By popularity')}</a>
           </li>
           <li
             class={clsx({
               ['view-switcher__item--selected']: searchParams?.by === 'name'
             })}
           >
-            <a href="/author?by=name">{t('By name')}</a>
+            <a href="#" onClick={() => changeSearchParams({ by: 'name' })}>{t('By name')}</a>
           </li>
           <Show when={searchParams?.by === 'name'}>
             <li class="view-switcher__search">
@@ -193,7 +205,7 @@ export const AllAuthors = (props: Props) => {
 
   const AuthorsSortedList = () => (
     <div class={clsx(stylesAuthorList.AuthorsList)}>
-      <For each={authorsSorted?.()}>
+      <For each={authors()}>
         {(author) => (
           <div class="row">
             <div class="col-lg-20 col-xl-18">
@@ -205,7 +217,7 @@ export const AllAuthors = (props: Props) => {
       <div class="row">
         <div class="col-lg-20 col-xl-18">
           <div class={stylesAuthorList.action}>
-            <Show when={!loading() && ((authorsSorted?.() || []).length || 0) > 0}>
+            <Show when={!loading() && ((authors() || []).length || 0) > 0}>
               <Button value={t('Load more')} onClick={loadMoreAuthors} aria-live="polite" />
             </Show>
             <Show when={loading()}>
@@ -221,7 +233,6 @@ export const AllAuthors = (props: Props) => {
       <Show when={props.isLoaded} fallback={<Loading />}>
         <div class="offset-md-5">
           <TabNavigator />
-
           <Show when={searchParams?.by === 'name'} fallback={<AuthorsSortedList />}>
             <AbcNavigator />
             <AbcAuthorsList />