From 4cb888262d0d05dad476c325306b432e874615cc Mon Sep 17 00:00:00 2001 From: Untone Date: Tue, 30 Jul 2024 05:35:27 +0300 Subject: [PATCH 1/2] restored-all-authors --- .../Views/AllAuthors/AllAuthors.tsx | 53 +++++++++++-------- 1 file changed, 31 insertions(+), 22 deletions(-) diff --git a/src/components/Views/AllAuthors/AllAuthors.tsx b/src/components/Views/AllAuthors/AllAuthors.tsx index d1c30b42..d81aac9c 100644 --- a/src/components/Views/AllAuthors/AllAuthors.tsx +++ b/src/components/Views/AllAuthors/AllAuthors.tsx @@ -18,6 +18,8 @@ import stylesAuthorList from './AuthorsList.module.scss' type Props = { authors: Author[] + authorsByFollowers?: Author[] + authorsByShouts?: Author[] isLoaded: boolean } @@ -33,43 +35,48 @@ export const AllAuthors = (props: Props) => { const [searchParams, changeSearchParams] = useSearchParams<{ by?: string }>() const { authorsSorted, setAuthorsSort, loadAuthors } = useAuthors() const [loading, setLoading] = createSignal(false) - const [searchQuery, setSearchQuery] = createSignal('') - const [filteredAuthors, setFilteredAuthors] = createSignal([]) + const [_currentAuthors, setCurrentAuthors] = createSignal([]) + // UPDATE Fetch authors initially and when searchParams.by changes createEffect(() => { - // Load all authors initially fetchAuthors(searchParams.by || 'name', 0) }) - /* const authors = createMemo(() => { - let sortedAuthors = [...props.authors] - sortedAuthors = authorsSorted() - if (!searchParams.by || searchParams.by === 'name') { + const authors = createMemo(() => { + let sortedAuthors = [...(props.authors || authorsSorted())] // Clone the array to avoid mutating the original + console.log('Before Sorting:', sortedAuthors.slice(0, 5)) // Log the first 5 authors for comparison + if (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)) } - 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')) - } + console.log('After Sorting:', sortedAuthors.slice(0, 5)) return sortedAuthors }) + // Log authors data and searchParams for debugging createEffect(() => { - setFilteredAuthors(dummyFilter(authors(), searchQuery(), lang()) as Author[]) + 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) }) + // filter + const [searchQuery, setSearchQuery] = createSignal('') + const [filteredAuthors, setFilteredAuthors] = createSignal([]) + 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[] } @@ -86,6 +93,7 @@ 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 @@ -94,6 +102,8 @@ 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 { @@ -121,7 +131,7 @@ export const AllAuthors = (props: Props) => {