discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

feat: page AllAuthors show sorted list and ABC nav is working. But pagination not yet

Browse Source
This commit is contained in:
Stepan Vladovskiy 2024-07-22 06:04:16 +00:00
parent 1d540f28b7
commit e6aa3a881f
4 changed files with 37 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Views/AllAuthors/AllAuthors.tsx
View File

@ -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<boolean>(false)
const [_currentAuthors, setCurrentAuthors] = createSignal<Author[]>([])
const [searchQuery, setSearchQuery] = createSignal('')
const [filteredAuthors, setFilteredAuthors] = createSignal<Author[]>([])
// 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<Author[]>([])
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 = () => (
<div class="row">
<div class="col-lg-20 col-xl-18">
@ -131,7 +123,7 @@ export const AllAuthors = (props: Props) => {
<ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
<li
class={clsx({
['view-switcher__item--selected']: !searchParams?.by || searchParams?.by === 'shouts'
['view-switcher__item--selected']: searchParams?.by === 'shouts'
})}
>
<a href="#" onClick={() => changeSearchParams({ by: 'shouts' })}>
@ -149,7 +141,7 @@ export const AllAuthors = (props: Props) => {
</li>
<li
class={clsx({
['view-switcher__item--selected']: searchParams?.by === 'name'
['view-switcher__item--selected']: !searchParams?.by || searchParams?.by === 'name'
})}
>
<a href="#" onClick={() => changeSearchParams({ by: 'name' })}>
@ -247,12 +239,13 @@ export const AllAuthors = (props: Props) => {
</div>
</div>
)
return (
<>
<Show when={props.isLoaded} fallback={<Loading />}>
<div class="offset-md-5">
<TabNavigator />
<Show when={searchParams?.by === 'name'} fallback={<AuthorsSortedList />}>
<Show when={!searchParams.by || searchParams.by === 'name'} fallback={<AuthorsSortedList />}>
<AbcNavigator />
<AbcAuthorsList />
</Show>

2
src/context/authors.tsx
View File

@ -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)

2
src/lib/sort.ts
View File

@ -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
}
}

36
src/routes/author/(all-authors).tsx
View File

@ -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<AllAuthorsData>)
const { t } = useLocalize()
const { addAuthors } = useAuthors()
// async load data: from ssr or fetch
const data = createAsync<AllAuthorsData>(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<AllAuthorsData>)
<AllAuthors
isLoaded={Boolean(data()?.authors)}
authors={data()?.authors || []}
authorsByFollowers={data()?.authorsByFollowers}
authorsByShouts={data()?.authorsByShouts}
/>
</Suspense>
</PageLayout>