diff --git a/src/components/Author/Card.module.scss b/src/components/Author/Card.module.scss index 267ee386..9cd05095 100644 --- a/src/components/Author/Card.module.scss +++ b/src/components/Author/Card.module.scss @@ -1,6 +1,8 @@ .author { align-items: flex-start; display: flex; + flex-direction: row; + flex-wrap: nowrap; margin-bottom: 2.4rem; &:last-child { @@ -293,6 +295,12 @@ } } +.nowrapView { + flex-wrap: nowrap; + align-items: center; + margin: 0; +} + .authorComments { .authorName { @include font-size(1.2rem); diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx index 265ca6d6..68ad8dbb 100644 --- a/src/components/Author/Card.tsx +++ b/src/components/Author/Card.tsx @@ -30,6 +30,7 @@ interface AuthorCardProps { liteButtons?: boolean isComments?: boolean isFeedMode?: boolean + isNowrap?: boolean } export const AuthorCard = (props: AuthorCardProps) => { @@ -83,7 +84,8 @@ export const AuthorCard = (props: AuthorCardProps) => { [styles.authorPage]: props.isAuthorPage, [styles.authorComments]: props.isComments, [styles.authorsListItem]: props.isAuthorsList, - [styles.feedMode]: props.isFeedMode + [styles.feedMode]: props.isFeedMode, + [styles.nowrapView]: props.isNowrap }} > { const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) const author = createMemo(() => authorEntities()[props.authorSlug]) - const subscribers = Array.from({ length: 12 }).fill(author()) + const [followers, setFollowers] = createSignal([]) + onMount(async () => { + try { + const authorSubscribers = await apiClient.getAuthorFollowers({ slug: props.author.slug }) + setFollowers(authorSubscribers) + } catch (error) { + console.log('[getAuthorSubscribers]', error) + } + }) + const { searchParams, changeSearchParam } = useRouter() changeSearchParam('by', 'rating') @@ -136,19 +146,36 @@ export const AuthorView = (props: AuthorProps) => { {...props} trigger={
- - - -
12
+ + + + {(f) => } + + + 3}> + + {(f) => } + +
+ {followers().length} +
+
+
} variant="tiny" >
    - + {(item: Author) => ( -
  • - +
  • +
  • )}
    @@ -156,7 +183,7 @@ export const AuthorView = (props: AuthorProps) => {
    - Карма + {t('Karma')}
    diff --git a/src/graphql/query/author-followers.ts b/src/graphql/query/author-followers.ts index 5dccac58..882c5af0 100644 --- a/src/graphql/query/author-followers.ts +++ b/src/graphql/query/author-followers.ts @@ -2,22 +2,12 @@ import { gql } from '@urql/core' export default gql` query UserSubscribersQuery($slug: String!) { - userSubcribers(slug: $slug) { + userFollowers(slug: $slug) { _id: slug id slug name - bio userpic - communities - links - createdAt - lastSeen - ratings { - _id: rater - rater - value - } } } ` diff --git a/src/locales/ru.json b/src/locales/ru.json index 01a6060e..8f90af4c 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -237,5 +237,6 @@ "Header": "Заголовок", "Subheader": "Подзаголовок", "A short introduction to keep the reader interested": "Небольшое вступление, чтобы заинтересовать читателя", - "Publish": "Опубликовать" + "Publish": "Опубликовать", + "Karma": "Карма" } diff --git a/src/utils/apiClient.ts b/src/utils/apiClient.ts index 8d805bc4..85568376 100644 --- a/src/utils/apiClient.ts +++ b/src/utils/apiClient.ts @@ -37,6 +37,7 @@ import createArticle from '../graphql/mutation/article-create' import myChats from '../graphql/query/chats-load' import chatMessagesLoadBy from '../graphql/query/chat-messages-load-by' import authorBySlug from '../graphql/query/author-by-slug' +import userSubscribers from '../graphql/query/author-followers' import topicBySlug from '../graphql/query/topic-by-slug' import createChat from '../graphql/mutation/create-chat' import reactionsLoadBy from '../graphql/query/reactions-load-by' @@ -217,9 +218,12 @@ export const apiClient = { const response = await publicGraphQLClient.query(authorBySlug, { slug }).toPromise() return response.data.getAuthor }, + getAuthorFollowers: async ({ slug }: { slug: string }): Promise => { + const response = await publicGraphQLClient.query(userSubscribers, { slug }).toPromise() + return response.data.userFollowers + }, updateProfile: async (input: ProfileInput) => { const response = await privateGraphQLClient.mutation(updateProfile, { profile: input }).toPromise() - console.log('!!! response.data.getAuthor:', response.data.updateProfile) return response.data.updateProfile }, getTopic: async ({ slug }: { slug: string }): Promise => {