From d9a0badedd463b641b01789331443f0383b11f7e Mon Sep 17 00:00:00 2001 From: Stepan Vladovskiy Date: Fri, 12 Jul 2024 06:46:12 +0000 Subject: [PATCH] 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 | 5 ++- .../Views/AllAuthors/AllAuthors.tsx | 34 +++++++++++++------ src/context/authors.tsx | 26 +++++++------- 3 files changed, 40 insertions(+), 25 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index c47709f8..9f431cce 100644 --- a/src/app.tsx +++ b/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 }) => { - }>{props.children} + + }>{props.children} + diff --git a/src/components/Views/AllAuthors/AllAuthors.tsx b/src/components/Views/AllAuthors/AllAuthors.tsx index a22c33a8..8f068977 100644 --- a/src/components/Views/AllAuthors/AllAuthors.tsx +++ b/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(false) + const [currentAuthors, setCurrentAuthors] = createSignal([]) + + // 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' })} > - {t('By shouts')} + changeSearchParams({ by: 'shouts' })}>{t('By shouts')}
  • { const [authorsSorted, setAuthorsSorted] = createSignal([]) const [sortBy, setSortBy] = createSignal>() const { feedByAuthor } = useFeed() - const setAuthorsSort = (stat: string) => setSortBy((_) => byStat(stat) as SortFunction) + const setAuthorsSort = (stat: string) => setSortBy(() => byStat(stat) as SortFunction) // Эффект для отслеживания изменений сигнала 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 => { + 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 => { - 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[] } = {}