From 73e1f575f8e7d8a9099bd68f1d006e0a57109576 Mon Sep 17 00:00:00 2001 From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com> Date: Sun, 25 Feb 2024 10:31:11 +0300 Subject: [PATCH] Hotfix/all authors bugfix (#418) bufgix to authors --- src/components/AuthorsList/AuthorsList.tsx | 72 ++++++++++++------- .../Views/AllAuthors/AllAuthors.tsx | 36 +++++----- src/stores/zine/authors.ts | 15 +--- 3 files changed, 66 insertions(+), 57 deletions(-) diff --git a/src/components/AuthorsList/AuthorsList.tsx b/src/components/AuthorsList/AuthorsList.tsx index 236a586e..2f3bb060 100644 --- a/src/components/AuthorsList/AuthorsList.tsx +++ b/src/components/AuthorsList/AuthorsList.tsx @@ -1,5 +1,5 @@ import { clsx } from 'clsx' -import { For, Show, createEffect, createSignal } from 'solid-js' +import { For, Show, createEffect, createSignal, on, onMount } from 'solid-js' import { useFollowing } from '../../context/following' import { useLocalize } from '../../context/localize' import { apiClient } from '../../graphql/client/core' @@ -11,24 +11,29 @@ import styles from './AuthorsList.module.scss' type Props = { class?: string - query: 'shouts' | 'followers' + query: 'shouts' | 'authors' + searchQuery?: string + allAuthorsLength?: number } const PAGE_SIZE = 20 export const AuthorsList = (props: Props) => { const { t } = useLocalize() const { isOwnerSubscribed } = useFollowing() + const { authorsByShouts, authorsByFollowers } = useAuthorsStore() const [loading, setLoading] = createSignal(false) const [currentPage, setCurrentPage] = createSignal({ shouts: 0, followers: 0 }) - const { authorsByShouts, authorsByFollowers } = useAuthorsStore() + const [allLoaded, setAllLoaded] = createSignal(false) - const fetchAuthors = async (queryType: 'shouts' | 'followers', page: number) => { + const fetchAuthors = async (queryType: 'shouts' | 'authors', page: number) => { setLoading(true) + + console.log('!!! AAA:') const offset = PAGE_SIZE * page const result = await apiClient.loadAuthorsBy({ by: { order: queryType }, limit: PAGE_SIZE, - offset: offset, + offset, }) if (queryType === 'shouts') { @@ -41,25 +46,38 @@ export const AuthorsList = (props: Props) => { } const loadMoreAuthors = () => { - const queryType = props.query - const nextPage = currentPage()[queryType] + 1 - fetchAuthors(queryType, nextPage).then(() => - setCurrentPage({ ...currentPage(), [queryType]: nextPage }), + const nextPage = currentPage()[props.query] + 1 + fetchAuthors(props.query, nextPage).then(() => + setCurrentPage({ ...currentPage(), [props.query]: nextPage }), ) } - createEffect(() => { - const queryType = props.query - if ( - currentPage()[queryType] === 0 && - (authorsByShouts().length === 0 || authorsByFollowers().length === 0) - ) { - loadMoreAuthors() - } - }) + createEffect( + on( + () => props.query, + (query) => { + const authorsList = query === 'shouts' ? authorsByShouts() : authorsByFollowers() + if (authorsList.length === 0 || currentPage()[query] === 0) { + setCurrentPage((prev) => ({ ...prev, [query]: 0 })) + fetchAuthors(query, 0).then(() => setCurrentPage((prev) => ({ ...prev, [query]: 1 }))) + } + }, + ), + ) const authorsList = () => (props.query === 'shouts' ? authorsByShouts() : authorsByFollowers()) + // TODO: do it with backend + // createEffect(() => { + // if (props.searchQuery) { + // // search logic + // } + // }) + + createEffect(() => { + setAllLoaded(authorsByShouts().length === authorsList.length) + }) + return (
@@ -77,13 +95,17 @@ export const AuthorsList = (props: Props) => {
)} -
- -
+ ) diff --git a/src/components/Views/AllAuthors/AllAuthors.tsx b/src/components/Views/AllAuthors/AllAuthors.tsx index c1723891..3d0552b9 100644 --- a/src/components/Views/AllAuthors/AllAuthors.tsx +++ b/src/components/Views/AllAuthors/AllAuthors.tsx @@ -28,6 +28,7 @@ type Props = { export const AllAuthors = (props: Props) => { const { t, lang } = useLocalize() + const [searchQuery, setSearchQuery] = createSignal('') const ALPHABET = lang() === 'ru' ? [...'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ@'] : [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ@'] const { searchParams, changeSearchParams } = useRouter() @@ -36,27 +37,22 @@ export const AllAuthors = (props: Props) => { sortBy: searchParams().by || 'name', }) - const [searchQuery, setSearchQuery] = createSignal('') - - createEffect(() => { - let by = searchParams().by - if (by) { - setAuthorsSort(by) - } else { - by = 'name' - changeSearchParams({ by }) - } + const filteredAuthors = createMemo(() => { + const query = searchQuery().toLowerCase() + return sortedAuthors().filter((author) => { + return author.name.toLowerCase().includes(query) // Предполагаем, что у автора есть свойство name + }) }) - const byLetter = createMemo<{ [letter: string]: Author[] }>(() => { - return sortedAuthors().reduce( + const byLetterFiltered = createMemo<{ [letter: string]: Author[] }>(() => { + return filteredAuthors().reduce( (acc, author) => authorLetterReduce(acc, author, lang()), {} as { [letter: string]: Author[] }, ) }) const sortedKeys = createMemo(() => { - const keys = Object.keys(byLetter()) + const keys = Object.keys(byLetterFiltered()) keys.sort() keys.push(keys.shift()) return keys @@ -106,7 +102,7 @@ export const AllAuthors = (props: Props) => { > {t('By name')} - +
  • setSearchQuery(value)} />
    • @@ -122,7 +118,7 @@ export const AllAuthors = (props: Props) => { {(letter, index) => (
  • - + { @@ -147,7 +143,7 @@ export const AllAuthors = (props: Props) => {
    - + {(author) => (
    @@ -167,8 +163,12 @@ export const AllAuthors = (props: Props) => { )} - }> - + +
    diff --git a/src/stores/zine/authors.ts b/src/stores/zine/authors.ts index c046737a..131b70c6 100644 --- a/src/stores/zine/authors.ts +++ b/src/stores/zine/authors.ts @@ -3,7 +3,6 @@ import { createSignal } from 'solid-js' import { apiClient } from '../../graphql/client/core' import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen' -import { byStat } from '../../utils/sortby' export type AuthorsSortBy = 'shouts' | 'name' | 'followers' type SortedAuthorsSetter = (prev: Author[]) => Author[] @@ -21,19 +20,7 @@ export const setAuthorsByShouts = (authors: SortedAuthorsSetter) => setSortedAut export const setAuthorsByFollowers = (authors: SortedAuthorsSetter) => setSortedAuthorsByFollowers(authors) const sortedAuthors = createLazyMemo(() => { - const authors = Object.values(authorEntities()) - switch (sortAllBy()) { - case 'followers': { - return authors.sort(byStat('followers')) - } - case 'shouts': { - return authors.sort(byStat('shouts')) - } - case 'name': { - return authors.sort((a, b) => a.name.localeCompare(b.name)) - } - } - return authors + return Object.values(authorEntities()) }) export const addAuthors = (authors: Author[]) => {