From e6aa3a881f0fa0c5ab576016b1af76c717a8ba5c Mon Sep 17 00:00:00 2001 From: Stepan Vladovskiy Date: Mon, 22 Jul 2024 06:04:16 +0000 Subject: [PATCH] feat: page AllAuthors show sorted list and ABC nav is working. But pagination not yet --- .../Views/AllAuthors/AllAuthors.tsx | 55 ++++++++----------- src/context/authors.tsx | 2 +- src/lib/sort.ts | 2 +- src/routes/author/(all-authors).tsx | 36 ++++-------- 4 files changed, 37 insertions(+), 58 deletions(-) diff --git a/src/components/Views/AllAuthors/AllAuthors.tsx b/src/components/Views/AllAuthors/AllAuthors.tsx index d81aac9c..eea1751e 100644 --- a/src/components/Views/AllAuthors/AllAuthors.tsx +++ b/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(false) - const [_currentAuthors, setCurrentAuthors] = createSignal([]) + const [searchQuery, setSearchQuery] = createSignal('') + const [filteredAuthors, setFilteredAuthors] = createSignal([]) - // 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(() => { - 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') { +/* const authors = createMemo(() => { + let sortedAuthors = [...props.authors] + sortedAuthors = authorsSorted() + 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 - console.log('Sorted Authors:', authors().slice(0, 5)) // Log the first 5 sorted authors - console.log('Search Params "by":', searchParams.by) + setFilteredAuthors(dummyFilter(authors(), searchQuery(), lang()) as Author[]) }) - // 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[] } @@ -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 = () => (
@@ -131,7 +123,7 @@ export const AllAuthors = (props: Props) => {
) + return ( <> }>
- }> + }> diff --git a/src/context/authors.tsx b/src/context/authors.tsx index 8287b443..0089c641 100644 --- a/src/context/authors.tsx +++ b/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) diff --git a/src/lib/sort.ts b/src/lib/sort.ts index 8c34e79d..27235f92 100644 --- a/src/lib/sort.ts +++ b/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 } } diff --git a/src/routes/author/(all-authors).tsx b/src/routes/author/(all-authors).tsx index 931d77b5..12e91716 100644 --- a/src/routes/author/(all-authors).tsx +++ b/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) => { - const by: AuthorsBy = { order } - const authorsFetcher = loadAuthors({ by, offset, limit: AUTHORS_PER_PAGE }) - return await authorsFetcher() -} - +// Fetch Function const fetchAllAuthors = async () => { const authorsAllFetcher = loadAuthorsAll() return await authorsAllFetcher() } +//Route Defenition export const route = { - load: async ({ location: { query } }: RouteLoadFuncArgs) => { - const by = query.by - const isAll = !by || by === 'name' + load: async ({ location: { query } }: RoutePreloadFuncArgs) => { return { - authors: isAll && (await fetchAllAuthors()), - authorsByFollowers: await fetchAuthorsWithStat(10, 'followers'), - authorsByShouts: await fetchAuthorsWithStat(10, 'shouts') - } as AllAuthorsData + authors: await fetchAllAuthors() + } } } 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) const { t } = useLocalize() const { addAuthors } = useAuthors() - // async load data: from ssr or fetch const data = createAsync(async () => { if (props.data) return props.data + const authors = await fetchAllAuthors() return { - authors: await fetchAllAuthors(), - authorsByFollowers: await fetchAuthorsWithStat(10, 'followers'), - authorsByShouts: await fetchAuthorsWithStat(10, 'shouts') - } as AllAuthorsData + authors: authors || [] + } }) - // 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)