use-following-data-2
This commit is contained in:
parent
aeb42de908
commit
cf0214563d
|
|
@ -16,7 +16,7 @@
|
|||
"hygen": "HYGEN_TMPLS=gen hygen",
|
||||
"postinstall": "npm run codegen && npx patch-package",
|
||||
"check:code": "npx @biomejs/biome check src --log-kind=compact --verbose",
|
||||
"check:code:fix": "npx @biomejs/biome check src --log-kind=compact --verbose --apply-unsafe",
|
||||
"check:code:fix": "npx @biomejs/biome check src --log-kind=compact",
|
||||
"lint": "npm run lint:code && stylelint **/*.{scss,css}",
|
||||
"lint:code": "npx @biomejs/biome lint src --log-kind=compact --verbose",
|
||||
"lint:code:fix": "npx @biomejs/biome lint src --apply-unsafe --log-kind=compact --verbose",
|
||||
|
|
|
|||
|
|
@ -1,119 +1,133 @@
|
|||
import type { Author, Community } from '../../../graphql/schema/core.gen'
|
||||
import type { Author, Community } from "../../../graphql/schema/core.gen";
|
||||
|
||||
import { openPage, redirectPage } from '@nanostores/router'
|
||||
import { clsx } from 'clsx'
|
||||
import { For, Show, createEffect, createMemo, createSignal, onMount } from 'solid-js'
|
||||
import { openPage, redirectPage } from "@nanostores/router";
|
||||
import { clsx } from "clsx";
|
||||
import {
|
||||
For,
|
||||
Show,
|
||||
createEffect,
|
||||
createMemo,
|
||||
createSignal,
|
||||
onMount,
|
||||
} from "solid-js";
|
||||
|
||||
import { useFollowing } from '../../../context/following'
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { useSession } from '../../../context/session'
|
||||
import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen'
|
||||
import { SubscriptionFilter } from '../../../pages/types'
|
||||
import { router, useRouter } from '../../../stores/router'
|
||||
import { isAuthor } from '../../../utils/isAuthor'
|
||||
import { translit } from '../../../utils/ru2en'
|
||||
import { isCyrillic } from '../../../utils/translate'
|
||||
import { SharePopup, getShareUrl } from '../../Article/SharePopup'
|
||||
import { Modal } from '../../Nav/Modal'
|
||||
import { TopicBadge } from '../../Topic/TopicBadge'
|
||||
import { Button } from '../../_shared/Button'
|
||||
import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient'
|
||||
import { AuthorBadge } from '../AuthorBadge'
|
||||
import { Userpic } from '../Userpic'
|
||||
import { useFollowing } from "../../../context/following";
|
||||
import { useLocalize } from "../../../context/localize";
|
||||
import { useSession } from "../../../context/session";
|
||||
import { FollowingEntity, Topic } from "../../../graphql/schema/core.gen";
|
||||
import { SubscriptionFilter } from "../../../pages/types";
|
||||
import { router, useRouter } from "../../../stores/router";
|
||||
import { isAuthor } from "../../../utils/isAuthor";
|
||||
import { translit } from "../../../utils/ru2en";
|
||||
import { isCyrillic } from "../../../utils/translate";
|
||||
import { SharePopup, getShareUrl } from "../../Article/SharePopup";
|
||||
import { Modal } from "../../Nav/Modal";
|
||||
import { TopicBadge } from "../../Topic/TopicBadge";
|
||||
import { Button } from "../../_shared/Button";
|
||||
import { ShowOnlyOnClient } from "../../_shared/ShowOnlyOnClient";
|
||||
import { AuthorBadge } from "../AuthorBadge";
|
||||
import { Userpic } from "../Userpic";
|
||||
|
||||
import stylesButton from '../../_shared/Button/Button.module.scss'
|
||||
import styles from './AuthorCard.module.scss'
|
||||
import stylesButton from "../../_shared/Button/Button.module.scss";
|
||||
import styles from "./AuthorCard.module.scss";
|
||||
|
||||
type Props = {
|
||||
author: Author
|
||||
followers?: Author[]
|
||||
following?: Array<Author | Topic>
|
||||
}
|
||||
author: Author;
|
||||
followers?: Author[];
|
||||
following?: Array<Author | Topic>;
|
||||
};
|
||||
export const AuthorCard = (props: Props) => {
|
||||
const { t, lang } = useLocalize()
|
||||
const { author, isSessionLoaded, requireAuthentication } = useSession()
|
||||
const [authorSubs, setAuthorSubs] = createSignal<Array<Author | Topic | Community>>([])
|
||||
const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
|
||||
const [isFollowed, setIsFollowed] = createSignal<boolean>()
|
||||
const isProfileOwner = createMemo(() => author()?.slug === props.author.slug)
|
||||
const { setFollowing, isOwnerSubscribed } = useFollowing()
|
||||
const { t, lang } = useLocalize();
|
||||
const { author, isSessionLoaded, requireAuthentication } = useSession();
|
||||
const [authorSubs, setAuthorSubs] = createSignal<
|
||||
Array<Author | Topic | Community>
|
||||
>([]);
|
||||
const [subscriptionFilter, setSubscriptionFilter] =
|
||||
createSignal<SubscriptionFilter>("all");
|
||||
const [isFollowed, setIsFollowed] = createSignal<boolean>();
|
||||
const isProfileOwner = createMemo(() => author()?.slug === props.author.slug);
|
||||
const { setFollowing, isOwnerSubscribed } = useFollowing();
|
||||
|
||||
onMount(() => {
|
||||
setAuthorSubs(props.following)
|
||||
})
|
||||
setAuthorSubs(props.following);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
setIsFollowed(isOwnerSubscribed(props.author?.id))
|
||||
})
|
||||
setIsFollowed(isOwnerSubscribed(props.author?.id));
|
||||
});
|
||||
|
||||
const name = createMemo(() => {
|
||||
if (lang() !== 'ru' && isCyrillic(props.author.name)) {
|
||||
if (props.author.name === 'Дискурс') {
|
||||
return 'Discours'
|
||||
if (lang() !== "ru" && isCyrillic(props.author.name)) {
|
||||
if (props.author.name === "Дискурс") {
|
||||
return "Discours";
|
||||
}
|
||||
return translit(props.author.name)
|
||||
return translit(props.author.name);
|
||||
}
|
||||
return props.author.name
|
||||
})
|
||||
return props.author.name;
|
||||
});
|
||||
|
||||
// TODO: reimplement AuthorCard
|
||||
const { changeSearchParams } = useRouter()
|
||||
const { changeSearchParams } = useRouter();
|
||||
const initChat = () => {
|
||||
// eslint-disable-next-line solid/reactivity
|
||||
requireAuthentication(() => {
|
||||
openPage(router, 'inbox')
|
||||
openPage(router, "inbox");
|
||||
changeSearchParams({
|
||||
initChat: props.author.id.toString(),
|
||||
})
|
||||
}, 'discussions')
|
||||
}
|
||||
});
|
||||
}, "discussions");
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
if (props.following) {
|
||||
if (subscriptionFilter() === 'authors') {
|
||||
setAuthorSubs(props.following.filter((s) => 'name' in s))
|
||||
} else if (subscriptionFilter() === 'topics') {
|
||||
setAuthorSubs(props.following.filter((s) => 'title' in s))
|
||||
} else if (subscriptionFilter() === 'communities') {
|
||||
setAuthorSubs(props.following.filter((s) => 'title' in s))
|
||||
if (subscriptionFilter() === "authors") {
|
||||
setAuthorSubs(props.following.filter((s) => "name" in s));
|
||||
} else if (subscriptionFilter() === "topics") {
|
||||
setAuthorSubs(props.following.filter((s) => "title" in s));
|
||||
} else if (subscriptionFilter() === "communities") {
|
||||
setAuthorSubs(props.following.filter((s) => "title" in s));
|
||||
} else {
|
||||
setAuthorSubs(props.following)
|
||||
setAuthorSubs(props.following);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const handleFollowClick = () => {
|
||||
const value = !isFollowed()
|
||||
const value = !isFollowed();
|
||||
requireAuthentication(() => {
|
||||
setIsFollowed(value)
|
||||
setFollowing(FollowingEntity.Author, props.author.slug, value)
|
||||
}, 'subscribe')
|
||||
}
|
||||
setIsFollowed(value);
|
||||
setFollowing(FollowingEntity.Author, props.author.slug, value);
|
||||
}, "subscribe");
|
||||
};
|
||||
|
||||
const followButtonText = createMemo(() => {
|
||||
if (isOwnerSubscribed(props.author?.id)) {
|
||||
return (
|
||||
<>
|
||||
<span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
|
||||
<span class={stylesButton.buttonSubscribeLabelHovered}>{t('Unfollow')}</span>
|
||||
<span class={stylesButton.buttonSubscribeLabel}>
|
||||
{t("Following")}
|
||||
</span>
|
||||
<span class={stylesButton.buttonSubscribeLabelHovered}>
|
||||
{t("Unfollow")}
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
return t('Follow')
|
||||
})
|
||||
return t("Follow");
|
||||
});
|
||||
|
||||
return (
|
||||
<div class={clsx(styles.author, 'row')}>
|
||||
<div class={clsx(styles.author, "row")}>
|
||||
<div class="col-md-5">
|
||||
<Userpic
|
||||
size={'XL'}
|
||||
size={"XL"}
|
||||
name={props.author.name}
|
||||
userpic={props.author.pic}
|
||||
slug={props.author.slug}
|
||||
class={styles.circlewrap}
|
||||
/>
|
||||
</div>
|
||||
<div class={clsx('col-md-15 col-xl-13', styles.authorDetails)}>
|
||||
<div class={clsx("col-md-15 col-xl-13", styles.authorDetails)}>
|
||||
<div class={styles.authorDetailsWrapper}>
|
||||
<div class={styles.authorName}>{name()}</div>
|
||||
<Show when={props.author.bio}>
|
||||
|
|
@ -130,11 +144,18 @@ export const AuthorCard = (props: Props) => {
|
|||
<a href="?m=followers" class={styles.subscribers}>
|
||||
<For each={props.followers.slice(0, 3)}>
|
||||
{(f) => (
|
||||
<Userpic size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} />
|
||||
<Userpic
|
||||
size={"XS"}
|
||||
name={f.name}
|
||||
userpic={f.pic}
|
||||
class={styles.subscribersItem}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{t('SubscriberWithCount', { count: props.followers.length ?? 0 })}
|
||||
{t("SubscriberWithCount", {
|
||||
count: props.followers.length ?? 0,
|
||||
})}
|
||||
</div>
|
||||
</a>
|
||||
</Show>
|
||||
|
|
@ -143,33 +164,35 @@ export const AuthorCard = (props: Props) => {
|
|||
<a href="?m=following" class={styles.subscribers}>
|
||||
<For each={props.following.slice(0, 3)}>
|
||||
{(f) => {
|
||||
if ('name' in f) {
|
||||
if ("name" in f) {
|
||||
return (
|
||||
<Userpic
|
||||
size={'XS'}
|
||||
size={"XS"}
|
||||
name={f.name}
|
||||
userpic={f.pic}
|
||||
class={styles.subscribersItem}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ('title' in f) {
|
||||
if ("title" in f) {
|
||||
return (
|
||||
<Userpic
|
||||
size={'XS'}
|
||||
size={"XS"}
|
||||
name={f.title}
|
||||
userpic={f.pic}
|
||||
class={styles.subscribersItem}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return null
|
||||
return null;
|
||||
}}
|
||||
</For>
|
||||
<div class={styles.subscribersCounter}>
|
||||
{t('SubscriptionWithCount', { count: props?.following.length ?? 0 })}
|
||||
{t("SubscriptionWithCount", {
|
||||
count: props?.following.length ?? 0,
|
||||
})}
|
||||
</div>
|
||||
</a>
|
||||
</Show>
|
||||
|
|
@ -184,12 +207,12 @@ export const AuthorCard = (props: Props) => {
|
|||
{(link) => (
|
||||
<a
|
||||
class={styles.socialLink}
|
||||
href={link.startsWith('http') ? link : `https://${link}`}
|
||||
href={link.startsWith("http") ? link : `https://${link}`}
|
||||
target="_blank"
|
||||
rel="nofollow noopener noreferrer"
|
||||
>
|
||||
<span class={styles.authorSubscribeSocialLabel}>
|
||||
{link.startsWith('http') ? link : `https://${link}`}
|
||||
{link.startsWith("http") ? link : `https://${link}`}
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
|
|
@ -211,8 +234,8 @@ export const AuthorCard = (props: Props) => {
|
|||
/>
|
||||
</Show>
|
||||
<Button
|
||||
variant={'secondary'}
|
||||
value={t('Message')}
|
||||
variant={"secondary"}
|
||||
value={t("Message")}
|
||||
onClick={initChat}
|
||||
class={styles.buttonWriteMessage}
|
||||
/>
|
||||
|
|
@ -222,11 +245,15 @@ export const AuthorCard = (props: Props) => {
|
|||
<div class={styles.authorActions}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => redirectPage(router, 'profileSettings')}
|
||||
onClick={() => redirectPage(router, "profileSettings")}
|
||||
value={
|
||||
<>
|
||||
<span class={styles.authorActionsLabel}>{t('Edit profile')}</span>
|
||||
<span class={styles.authorActionsLabelMobile}>{t('Edit')}</span>
|
||||
<span class={styles.authorActionsLabel}>
|
||||
{t("Edit profile")}
|
||||
</span>
|
||||
<span class={styles.authorActionsLabelMobile}>
|
||||
{t("Edit")}
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
|
@ -234,17 +261,24 @@ export const AuthorCard = (props: Props) => {
|
|||
title={props.author.name}
|
||||
description={props.author.bio}
|
||||
imageUrl={props.author.pic}
|
||||
shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
|
||||
trigger={<Button variant="secondary" value={t('Share')} />}
|
||||
shareUrl={getShareUrl({
|
||||
pathname: `/author/${props.author.slug}`,
|
||||
})}
|
||||
trigger={<Button variant="secondary" value={t("Share")} />}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</Show>
|
||||
</ShowOnlyOnClient>
|
||||
<Show when={props.followers}>
|
||||
<Modal variant="medium" isResponsive={true} name="followers" maxHeight>
|
||||
<Modal
|
||||
variant="medium"
|
||||
isResponsive={true}
|
||||
name="followers"
|
||||
maxHeight
|
||||
>
|
||||
<>
|
||||
<h2>{t('Followers')}</h2>
|
||||
<h2>{t("Followers")}</h2>
|
||||
<div class={styles.listWrapper}>
|
||||
<div class="row">
|
||||
<div class="col-24">
|
||||
|
|
@ -266,30 +300,61 @@ export const AuthorCard = (props: Props) => {
|
|||
</Modal>
|
||||
</Show>
|
||||
<Show when={props.following}>
|
||||
<Modal variant="medium" isResponsive={true} name="following" maxHeight>
|
||||
<Modal
|
||||
variant="medium"
|
||||
isResponsive={true}
|
||||
name="following"
|
||||
maxHeight
|
||||
>
|
||||
<>
|
||||
<h2>{t('Subscriptions')}</h2>
|
||||
<h2>{t("Subscriptions")}</h2>
|
||||
<ul class="view-switcher">
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('all')}>
|
||||
{t('All')}
|
||||
</button>
|
||||
<span class="view-switcher__counter">{props.following.length}</span>
|
||||
</li>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('authors')}>
|
||||
{t('Authors')}
|
||||
<li
|
||||
class={clsx({
|
||||
"view-switcher__item--selected":
|
||||
subscriptionFilter() === "all",
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubscriptionFilter("all")}
|
||||
>
|
||||
{t("All")}
|
||||
</button>
|
||||
<span class="view-switcher__counter">
|
||||
{props.following.filter((s) => 'name' in s).length}
|
||||
{props.following.length}
|
||||
</span>
|
||||
</li>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('topics')}>
|
||||
{t('Topics')}
|
||||
<li
|
||||
class={clsx({
|
||||
"view-switcher__item--selected":
|
||||
subscriptionFilter() === "authors",
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubscriptionFilter("authors")}
|
||||
>
|
||||
{t("Authors")}
|
||||
</button>
|
||||
<span class="view-switcher__counter">
|
||||
{props.following.filter((s) => 'title' in s).length}
|
||||
{props.following.filter((s) => "name" in s).length}
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class={clsx({
|
||||
"view-switcher__item--selected":
|
||||
subscriptionFilter() === "topics",
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubscriptionFilter("topics")}
|
||||
>
|
||||
{t("Topics")}
|
||||
</button>
|
||||
<span class="view-switcher__counter">
|
||||
{props.following.filter((s) => "title" in s).length}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -326,5 +391,5 @@ export const AuthorCard = (props: Props) => {
|
|||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,162 +1,197 @@
|
|||
import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen'
|
||||
import type {
|
||||
Author,
|
||||
Reaction,
|
||||
Shout,
|
||||
Topic,
|
||||
} from "../../../graphql/schema/core.gen";
|
||||
|
||||
import { getPagePath } from '@nanostores/router'
|
||||
import { Meta, Title } from '@solidjs/meta'
|
||||
import { clsx } from 'clsx'
|
||||
import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from 'solid-js'
|
||||
import { getPagePath } from "@nanostores/router";
|
||||
import { Meta, Title } from "@solidjs/meta";
|
||||
import { clsx } from "clsx";
|
||||
import {
|
||||
For,
|
||||
Match,
|
||||
Show,
|
||||
Switch,
|
||||
createEffect,
|
||||
createMemo,
|
||||
createSignal,
|
||||
onMount,
|
||||
} from "solid-js";
|
||||
|
||||
import { useFollowing } from '../../../context/following'
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { apiClient } from '../../../graphql/client/core'
|
||||
import { router, useRouter } from '../../../stores/router'
|
||||
import { loadShouts, useArticlesStore } from '../../../stores/zine/articles'
|
||||
import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
|
||||
import { getImageUrl } from '../../../utils/getImageUrl'
|
||||
import { getDescription } from '../../../utils/meta'
|
||||
import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll'
|
||||
import { splitToPages } from '../../../utils/splitToPages'
|
||||
import { Comment } from '../../Article/Comment'
|
||||
import { AuthorCard } from '../../Author/AuthorCard'
|
||||
import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating'
|
||||
import { Row1 } from '../../Feed/Row1'
|
||||
import { Row2 } from '../../Feed/Row2'
|
||||
import { Row3 } from '../../Feed/Row3'
|
||||
import { Loading } from '../../_shared/Loading'
|
||||
import { useFollowing } from "../../../context/following";
|
||||
import { useLocalize } from "../../../context/localize";
|
||||
import { useSession } from "../../../context/session";
|
||||
import { apiClient } from "../../../graphql/client/core";
|
||||
import { router, useRouter } from "../../../stores/router";
|
||||
import { loadShouts, useArticlesStore } from "../../../stores/zine/articles";
|
||||
import { loadAuthor, useAuthorsStore } from "../../../stores/zine/authors";
|
||||
import { getImageUrl } from "../../../utils/getImageUrl";
|
||||
import { getDescription } from "../../../utils/meta";
|
||||
import {
|
||||
restoreScrollPosition,
|
||||
saveScrollPosition,
|
||||
} from "../../../utils/scroll";
|
||||
import { splitToPages } from "../../../utils/splitToPages";
|
||||
import { Comment } from "../../Article/Comment";
|
||||
import { AuthorCard } from "../../Author/AuthorCard";
|
||||
import { AuthorShoutsRating } from "../../Author/AuthorShoutsRating";
|
||||
import { Row1 } from "../../Feed/Row1";
|
||||
import { Row2 } from "../../Feed/Row2";
|
||||
import { Row3 } from "../../Feed/Row3";
|
||||
import { Loading } from "../../_shared/Loading";
|
||||
|
||||
import { MODALS, hideModal } from '../../../stores/ui'
|
||||
import { byCreated } from '../../../utils/sortby'
|
||||
import stylesArticle from '../../Article/Article.module.scss'
|
||||
import styles from './Author.module.scss'
|
||||
import { MODALS, hideModal } from "../../../stores/ui";
|
||||
import { byCreated } from "../../../utils/sortby";
|
||||
import stylesArticle from "../../Article/Article.module.scss";
|
||||
import styles from "./Author.module.scss";
|
||||
|
||||
type Props = {
|
||||
authorSlug: string
|
||||
}
|
||||
export const PRERENDERED_ARTICLES_COUNT = 12
|
||||
const LOAD_MORE_PAGE_SIZE = 9
|
||||
authorSlug: string;
|
||||
shouts?: Shout[];
|
||||
author?: Author;
|
||||
};
|
||||
export const PRERENDERED_ARTICLES_COUNT = 12;
|
||||
const LOAD_MORE_PAGE_SIZE = 9;
|
||||
|
||||
export const AuthorView = (props: Props) => {
|
||||
const { t } = useLocalize()
|
||||
const { subscriptions, followers, loadSubscriptions } = useFollowing()
|
||||
const { session } = useSession()
|
||||
const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
|
||||
const { authorEntities } = useAuthorsStore({ authors: [props.author] })
|
||||
const { page: getPage, searchParams } = useRouter()
|
||||
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false)
|
||||
const [isBioExpanded, setIsBioExpanded] = createSignal(false)
|
||||
const [author, setAuthor] = createSignal<Author>()
|
||||
const [following, setFollowing] = createSignal<Array<Author | Topic>>([])
|
||||
const [showExpandBioControl, setShowExpandBioControl] = createSignal(false)
|
||||
const [commented, setCommented] = createSignal<Reaction[]>()
|
||||
const modal = MODALS[searchParams().m]
|
||||
const { t } = useLocalize();
|
||||
const {
|
||||
subscriptions,
|
||||
followers: myFollowers,
|
||||
loadSubscriptions,
|
||||
} = useFollowing();
|
||||
const { session } = useSession();
|
||||
const { sortedArticles } = useArticlesStore({ shouts: props.shouts });
|
||||
const { authorEntities } = useAuthorsStore({ authors: [props.author] });
|
||||
const { page: getPage, searchParams } = useRouter();
|
||||
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] =
|
||||
createSignal(false);
|
||||
const [isBioExpanded, setIsBioExpanded] = createSignal(false);
|
||||
const [author, setAuthor] = createSignal<Author>();
|
||||
const [followers, setFollowers] = createSignal([]);
|
||||
const [following, setFollowing] = createSignal<Array<Author | Topic>>([]); // flat AuthorFollowsResult
|
||||
const [showExpandBioControl, setShowExpandBioControl] = createSignal(false);
|
||||
const [commented, setCommented] = createSignal<Reaction[]>();
|
||||
const modal = MODALS[searchParams().m];
|
||||
|
||||
// current author
|
||||
createEffect(() => {
|
||||
if (props.authorSlug) {
|
||||
if (session()?.user?.app_data?.profile?.slug === props.authorSlug) {
|
||||
console.info('my own profile')
|
||||
const { profile, authors, topics } = session().user.app_data
|
||||
setAuthor(profile)
|
||||
setFollowing([...authors, ...topics])
|
||||
console.info("my own profile");
|
||||
const { profile, authors, topics } = session().user.app_data;
|
||||
setFollowers(myFollowers);
|
||||
setAuthor(profile);
|
||||
setFollowing([...authors, ...topics]);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const a = authorEntities()[props.authorSlug]
|
||||
setAuthor(a)
|
||||
console.debug('[Author] expecting following data fetched')
|
||||
const a = authorEntities()[props.authorSlug];
|
||||
setAuthor(a);
|
||||
// TODO: add following data retrieval
|
||||
console.debug("[Author] expecting following data fetched");
|
||||
} catch (error) {
|
||||
console.debug(error)
|
||||
console.debug(error);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
createEffect(async () => {
|
||||
if (author()?.id && !author().stat) {
|
||||
const a = await loadAuthor({ slug: '', author_id: author().id })
|
||||
console.debug('[AuthorView] loaded author:', a)
|
||||
const a = await loadAuthor({ slug: "", author_id: author().id });
|
||||
console.debug("[AuthorView] loaded author:", a);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const bioContainerRef: { current: HTMLDivElement } = { current: null }
|
||||
const bioWrapperRef: { current: HTMLDivElement } = { current: null }
|
||||
const bioContainerRef: { current: HTMLDivElement } = { current: null };
|
||||
const bioWrapperRef: { current: HTMLDivElement } = { current: null };
|
||||
|
||||
const fetchData = async (slug) => {
|
||||
try {
|
||||
const [subscriptionsResult, followersResult] = await Promise.all([
|
||||
apiClient.getAuthorFollows({ slug }),
|
||||
apiClient.getAuthorFollowers({ slug }),
|
||||
])
|
||||
]);
|
||||
|
||||
const { authors, topics } = subscriptionsResult
|
||||
setFollowing([...(authors || []), ...(topics || [])])
|
||||
setFollowers(followersResult || [])
|
||||
const { authors, topics } = subscriptionsResult;
|
||||
setFollowing([...(authors || []), ...(topics || [])]);
|
||||
setFollowers(followersResult || []);
|
||||
|
||||
console.info('[components.Author] following data loaded')
|
||||
console.info("[components.Author] following data loaded");
|
||||
} catch (error) {
|
||||
console.error('[components.Author] fetch error', error)
|
||||
console.error("[components.Author] fetch error", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const checkBioHeight = () => {
|
||||
if (bioContainerRef.current) {
|
||||
setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight)
|
||||
setShowExpandBioControl(
|
||||
bioContainerRef.current.offsetHeight >
|
||||
bioWrapperRef.current.offsetHeight,
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
fetchData(props.authorSlug)
|
||||
fetchData(props.authorSlug);
|
||||
|
||||
if (!modal) {
|
||||
hideModal()
|
||||
hideModal();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const loadMore = async () => {
|
||||
saveScrollPosition()
|
||||
saveScrollPosition();
|
||||
const { hasMore } = await loadShouts({
|
||||
filters: { author: props.authorSlug },
|
||||
limit: LOAD_MORE_PAGE_SIZE,
|
||||
offset: sortedArticles().length,
|
||||
})
|
||||
setIsLoadMoreButtonVisible(hasMore)
|
||||
restoreScrollPosition()
|
||||
}
|
||||
});
|
||||
setIsLoadMoreButtonVisible(hasMore);
|
||||
restoreScrollPosition();
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
checkBioHeight()
|
||||
checkBioHeight();
|
||||
|
||||
// pagination
|
||||
if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
|
||||
loadMore()
|
||||
loadSubscriptions()
|
||||
loadMore();
|
||||
loadSubscriptions();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const pages = createMemo<Shout[][]>(() =>
|
||||
splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE),
|
||||
)
|
||||
splitToPages(
|
||||
sortedArticles(),
|
||||
PRERENDERED_ARTICLES_COUNT,
|
||||
LOAD_MORE_PAGE_SIZE,
|
||||
),
|
||||
);
|
||||
|
||||
const fetchComments = async (commenter: Author) => {
|
||||
const data = await apiClient.getReactionsBy({
|
||||
by: { comment: false, created_by: commenter.id },
|
||||
})
|
||||
setCommented(data)
|
||||
}
|
||||
});
|
||||
setCommented(data);
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
if (author()) {
|
||||
fetchComments(author())
|
||||
fetchComments(author());
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const ogImage = createMemo(() =>
|
||||
author()?.pic
|
||||
? getImageUrl(author()?.pic, { width: 1200 })
|
||||
: getImageUrl('production/image/logo_image.png'),
|
||||
)
|
||||
const description = createMemo(() => getDescription(author()?.bio))
|
||||
: getImageUrl("production/image/logo_image.png"),
|
||||
);
|
||||
const description = createMemo(() => getDescription(author()?.bio));
|
||||
const handleDeleteComment = (id: number) => {
|
||||
setCommented((prev) => prev.filter((comment) => comment.id !== id))
|
||||
}
|
||||
setCommented((prev) => prev.filter((comment) => comment.id !== id));
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={styles.authorPage}>
|
||||
|
|
@ -176,42 +211,80 @@ export const AuthorView = (props: Props) => {
|
|||
<Show when={author()} fallback={<Loading />}>
|
||||
<>
|
||||
<div class={styles.authorHeader}>
|
||||
<AuthorCard author={author()} followers={followers()} following={following()} />
|
||||
<AuthorCard
|
||||
author={author()}
|
||||
followers={followers() || []}
|
||||
following={following() || []}
|
||||
/>
|
||||
</div>
|
||||
<div class={clsx(styles.groupControls, 'row')}>
|
||||
<div class={clsx(styles.groupControls, "row")}>
|
||||
<div class="col-md-16">
|
||||
<ul class="view-switcher">
|
||||
<li classList={{ 'view-switcher__item--selected': getPage().route === 'author' }}>
|
||||
<a href={getPagePath(router, 'author', { slug: props.authorSlug })}>
|
||||
{t('Publications')}
|
||||
<li
|
||||
classList={{
|
||||
"view-switcher__item--selected":
|
||||
getPage().route === "author",
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href={getPagePath(router, "author", {
|
||||
slug: props.authorSlug,
|
||||
})}
|
||||
>
|
||||
{t("Publications")}
|
||||
</a>
|
||||
<Show when={author().stat}>
|
||||
<span class="view-switcher__counter">{author().stat.shouts}</span>
|
||||
<span class="view-switcher__counter">
|
||||
{author().stat.shouts}
|
||||
</span>
|
||||
</Show>
|
||||
</li>
|
||||
<li classList={{ 'view-switcher__item--selected': getPage().route === 'authorComments' }}>
|
||||
<a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
|
||||
{t('Comments')}
|
||||
<li
|
||||
classList={{
|
||||
"view-switcher__item--selected":
|
||||
getPage().route === "authorComments",
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href={getPagePath(router, "authorComments", {
|
||||
slug: props.authorSlug,
|
||||
})}
|
||||
>
|
||||
{t("Comments")}
|
||||
</a>
|
||||
<Show when={author().stat}>
|
||||
<span class="view-switcher__counter">{author().stat.comments}</span>
|
||||
<span class="view-switcher__counter">
|
||||
{author().stat.comments}
|
||||
</span>
|
||||
</Show>
|
||||
</li>
|
||||
<li classList={{ 'view-switcher__item--selected': getPage().route === 'authorAbout' }}>
|
||||
<li
|
||||
classList={{
|
||||
"view-switcher__item--selected":
|
||||
getPage().route === "authorAbout",
|
||||
}}
|
||||
>
|
||||
<a
|
||||
onClick={() => checkBioHeight()}
|
||||
href={getPagePath(router, 'authorAbout', { slug: props.authorSlug })}
|
||||
href={getPagePath(router, "authorAbout", {
|
||||
slug: props.authorSlug,
|
||||
})}
|
||||
>
|
||||
{t('Profile')}
|
||||
{t("Profile")}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class={clsx('col-md-8', styles.additionalControls)}>
|
||||
<Show when={author()?.stat?.rating || author()?.stat?.rating === 0}>
|
||||
<div class={clsx("col-md-8", styles.additionalControls)}>
|
||||
<Show
|
||||
when={author()?.stat?.rating || author()?.stat?.rating === 0}
|
||||
>
|
||||
<div class={styles.ratingContainer}>
|
||||
{t('All posts rating')}
|
||||
<AuthorShoutsRating author={author()} class={styles.ratingControl} />
|
||||
{t("All posts rating")}
|
||||
<AuthorShoutsRating
|
||||
author={author()}
|
||||
class={styles.ratingControl}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
|
@ -221,7 +294,7 @@ export const AuthorView = (props: Props) => {
|
|||
</div>
|
||||
|
||||
<Switch>
|
||||
<Match when={getPage().route === 'authorAbout'}>
|
||||
<Match when={getPage().route === "authorAbout"}>
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<div class="col-md-20 col-lg-18">
|
||||
|
|
@ -230,22 +303,28 @@ export const AuthorView = (props: Props) => {
|
|||
class={styles.longBio}
|
||||
classList={{ [styles.longBioExpanded]: isBioExpanded() }}
|
||||
>
|
||||
<div ref={(el) => (bioContainerRef.current = el)} innerHTML={author().about} />
|
||||
<div
|
||||
ref={(el) => (bioContainerRef.current = el)}
|
||||
innerHTML={author().about}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Show when={showExpandBioControl()}>
|
||||
<button
|
||||
class={clsx('button button--subscribe-topic', styles.longBioExpandedControl)}
|
||||
class={clsx(
|
||||
"button button--subscribe-topic",
|
||||
styles.longBioExpandedControl,
|
||||
)}
|
||||
onClick={() => setIsBioExpanded(!isBioExpanded())}
|
||||
>
|
||||
{t('Show more')}
|
||||
{t("Show more")}
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Match>
|
||||
<Match when={getPage().route === 'authorComments'}>
|
||||
<Match when={getPage().route === "authorComments"}>
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<div class="col-md-20 col-lg-18">
|
||||
|
|
@ -265,13 +344,18 @@ export const AuthorView = (props: Props) => {
|
|||
</div>
|
||||
</div>
|
||||
</Match>
|
||||
<Match when={getPage().route === 'author'}>
|
||||
<Match when={getPage().route === "author"}>
|
||||
<Show when={sortedArticles().length === 1}>
|
||||
<Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
|
||||
</Show>
|
||||
|
||||
<Show when={sortedArticles().length === 2}>
|
||||
<Row2 articles={sortedArticles()} isEqual={true} noauthor={true} nodate={true} />
|
||||
<Row2
|
||||
articles={sortedArticles()}
|
||||
isEqual={true}
|
||||
noauthor={true}
|
||||
nodate={true}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={sortedArticles().length === 3}>
|
||||
|
|
@ -280,21 +364,45 @@ export const AuthorView = (props: Props) => {
|
|||
|
||||
<Show when={sortedArticles().length > 3}>
|
||||
<Row1 article={sortedArticles()[0]} noauthor={true} nodate={true} />
|
||||
<Row2 articles={sortedArticles().slice(1, 3)} isEqual={true} noauthor={true} />
|
||||
<Row2
|
||||
articles={sortedArticles().slice(1, 3)}
|
||||
isEqual={true}
|
||||
noauthor={true}
|
||||
/>
|
||||
<Row1 article={sortedArticles()[3]} noauthor={true} nodate={true} />
|
||||
<Row2 articles={sortedArticles().slice(4, 6)} isEqual={true} noauthor={true} />
|
||||
<Row2
|
||||
articles={sortedArticles().slice(4, 6)}
|
||||
isEqual={true}
|
||||
noauthor={true}
|
||||
/>
|
||||
<Row1 article={sortedArticles()[6]} noauthor={true} nodate={true} />
|
||||
<Row2 articles={sortedArticles().slice(7, 9)} isEqual={true} noauthor={true} />
|
||||
<Row2
|
||||
articles={sortedArticles().slice(7, 9)}
|
||||
isEqual={true}
|
||||
noauthor={true}
|
||||
/>
|
||||
|
||||
<For each={pages()}>
|
||||
{(page) => (
|
||||
<>
|
||||
<Row1 article={page[0]} noauthor={true} nodate={true} />
|
||||
<Row2 articles={page.slice(1, 3)} isEqual={true} noauthor={true} />
|
||||
<Row2
|
||||
articles={page.slice(1, 3)}
|
||||
isEqual={true}
|
||||
noauthor={true}
|
||||
/>
|
||||
<Row1 article={page[3]} noauthor={true} nodate={true} />
|
||||
<Row2 articles={page.slice(4, 6)} isEqual={true} noauthor={true} />
|
||||
<Row2
|
||||
articles={page.slice(4, 6)}
|
||||
isEqual={true}
|
||||
noauthor={true}
|
||||
/>
|
||||
<Row1 article={page[6]} noauthor={true} nodate={true} />
|
||||
<Row2 articles={page.slice(7, 9)} isEqual={true} noauthor={true} />
|
||||
<Row2
|
||||
articles={page.slice(7, 9)}
|
||||
isEqual={true}
|
||||
noauthor={true}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</For>
|
||||
|
|
@ -303,12 +411,12 @@ export const AuthorView = (props: Props) => {
|
|||
<Show when={isLoadMoreButtonVisible()}>
|
||||
<p class="load-more-container">
|
||||
<button class="button" onClick={loadMore}>
|
||||
{t('Load more')}
|
||||
{t("Load more")}
|
||||
</button>
|
||||
</p>
|
||||
</Show>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,59 +1,60 @@
|
|||
import { clsx } from 'clsx'
|
||||
import { For, Show, createEffect, createSignal, onMount } from 'solid-js'
|
||||
import { clsx } from "clsx";
|
||||
import { For, Show, createEffect, createSignal, onMount } from "solid-js";
|
||||
|
||||
import { useFollowing } from '../../../context/following'
|
||||
import { useLocalize } from '../../../context/localize'
|
||||
import { useSession } from '../../../context/session'
|
||||
import { apiClient } from '../../../graphql/client/core'
|
||||
import { Author as AuthorType, Topic } from '../../../graphql/schema/core.gen'
|
||||
import { SubscriptionFilter } from '../../../pages/types'
|
||||
import { dummyFilter } from '../../../utils/dummyFilter'
|
||||
import { useFollowing } from "../../../context/following";
|
||||
import { useLocalize } from "../../../context/localize";
|
||||
import { useSession } from "../../../context/session";
|
||||
import { apiClient } from "../../../graphql/client/core";
|
||||
import { Author, Topic } from "../../../graphql/schema/core.gen";
|
||||
import { SubscriptionFilter } from "../../../pages/types";
|
||||
import { dummyFilter } from "../../../utils/dummyFilter";
|
||||
// TODO: refactor styles
|
||||
import { isAuthor } from '../../../utils/isAuthor'
|
||||
import { AuthorBadge } from '../../Author/AuthorBadge'
|
||||
import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation'
|
||||
import { TopicBadge } from '../../Topic/TopicBadge'
|
||||
import { Loading } from '../../_shared/Loading'
|
||||
import { SearchField } from '../../_shared/SearchField'
|
||||
import { isAuthor } from "../../../utils/isAuthor";
|
||||
import { AuthorBadge } from "../../Author/AuthorBadge";
|
||||
import { ProfileSettingsNavigation } from "../../Nav/ProfileSettingsNavigation";
|
||||
import { TopicBadge } from "../../Topic/TopicBadge";
|
||||
import { Loading } from "../../_shared/Loading";
|
||||
import { SearchField } from "../../_shared/SearchField";
|
||||
|
||||
import styles from '../../../pages/profile/Settings.module.scss'
|
||||
import stylesSettings from '../../../styles/FeedSettings.module.scss'
|
||||
import styles from "../../../pages/profile/Settings.module.scss";
|
||||
import stylesSettings from "../../../styles/FeedSettings.module.scss";
|
||||
|
||||
export const ProfileSubscriptions = () => {
|
||||
const { t, lang } = useLocalize()
|
||||
const { author, session } = useSession()
|
||||
const { subscriptions } = useFollowing()
|
||||
const [following, setFollowing] = (createSignal < Array < AuthorType) | (Topic >> [])
|
||||
const [filtered, setFiltered] = (createSignal < Array < AuthorType) | (Topic >> [])
|
||||
const [subscriptionFilter, setSubscriptionFilter] = createSignal < SubscriptionFilter > 'all'
|
||||
const [searchQuery, setSearchQuery] = createSignal('')
|
||||
const { t, lang } = useLocalize();
|
||||
const { author, session } = useSession();
|
||||
const { subscriptions } = useFollowing();
|
||||
const [following, setFollowing] = createSignal<Array<Author | Topic>>([]);
|
||||
const [filtered, setFiltered] = createSignal<Array<Author | Topic>>([]);
|
||||
const [subscriptionFilter, setSubscriptionFilter] =
|
||||
createSignal<SubscriptionFilter>("all");
|
||||
const [searchQuery, setSearchQuery] = createSignal("");
|
||||
|
||||
createEffect(() => {
|
||||
const { authors, topics } = subscriptions
|
||||
const { authors, topics } = subscriptions;
|
||||
if (authors || topics) {
|
||||
const fdata = [...(authors || []), ...(topics || [])]
|
||||
setFollowing(fdata)
|
||||
if (subscriptionFilter() === 'authors') {
|
||||
setFiltered(fdata.filter((s) => 'name' in s))
|
||||
} else if (subscriptionFilter() === 'topics') {
|
||||
setFiltered(fdata.filter((s) => 'title' in s))
|
||||
const fdata = [...(authors || []), ...(topics || [])];
|
||||
setFollowing(fdata);
|
||||
if (subscriptionFilter() === "authors") {
|
||||
setFiltered(fdata.filter((s) => "name" in s));
|
||||
} else if (subscriptionFilter() === "topics") {
|
||||
setFiltered(fdata.filter((s) => "title" in s));
|
||||
} else {
|
||||
setFiltered(fdata)
|
||||
setFiltered(fdata);
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (searchQuery()) {
|
||||
setFiltered(dummyFilter(following(), searchQuery(), lang()))
|
||||
setFiltered(dummyFilter(following(), searchQuery(), lang()));
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="wide-container">
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<div class={clsx('left-navigation', styles.leftNavigation)}>
|
||||
<div class={clsx("left-navigation", styles.leftNavigation)}>
|
||||
<ProfileSettingsNavigation />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -61,28 +62,54 @@ export const ProfileSubscriptions = () => {
|
|||
<div class="col-md-19">
|
||||
<div class="row">
|
||||
<div class="col-md-20 col-lg-18 col-xl-16">
|
||||
<h1>{t('My subscriptions')}</h1>
|
||||
<p class="description">{t('Here you can manage all your Discours subscriptions')}</p>
|
||||
<h1>{t("My subscriptions")}</h1>
|
||||
<p class="description">
|
||||
{t("Here you can manage all your Discours subscriptions")}
|
||||
</p>
|
||||
<Show when={following()} fallback={<Loading />}>
|
||||
<ul class="view-switcher">
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('all')}>
|
||||
{t('All')}
|
||||
<li
|
||||
class={clsx({
|
||||
"view-switcher__item--selected":
|
||||
subscriptionFilter() === "all",
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubscriptionFilter("all")}
|
||||
>
|
||||
{t("All")}
|
||||
</button>
|
||||
</li>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('authors')}>
|
||||
{t('Authors')}
|
||||
<li
|
||||
class={clsx({
|
||||
"view-switcher__item--selected":
|
||||
subscriptionFilter() === "authors",
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubscriptionFilter("authors")}
|
||||
>
|
||||
{t("Authors")}
|
||||
</button>
|
||||
</li>
|
||||
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}>
|
||||
<button type="button" onClick={() => setSubscriptionFilter('topics')}>
|
||||
{t('Topics')}
|
||||
<li
|
||||
class={clsx({
|
||||
"view-switcher__item--selected":
|
||||
subscriptionFilter() === "topics",
|
||||
})}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSubscriptionFilter("topics")}
|
||||
>
|
||||
{t("Topics")}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class={clsx('pretty-form__item', styles.searchContainer)}>
|
||||
<div class={clsx("pretty-form__item", styles.searchContainer)}>
|
||||
<SearchField
|
||||
onChange={(value) => setSearchQuery(value)}
|
||||
class={styles.searchField}
|
||||
|
|
@ -90,14 +117,22 @@ export const ProfileSubscriptions = () => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class={clsx(stylesSettings.settingsList, styles.topicsList)}>
|
||||
<div
|
||||
class={clsx(stylesSettings.settingsList, styles.topicsList)}
|
||||
>
|
||||
<For each={filtered()}>
|
||||
{(followingItem) => (
|
||||
<div>
|
||||
{isAuthor(followingItem) ? (
|
||||
<AuthorBadge minimizeSubscribeButton={true} author={followingItem} />
|
||||
<AuthorBadge
|
||||
minimizeSubscribeButton={true}
|
||||
author={followingItem}
|
||||
/>
|
||||
) : (
|
||||
<TopicBadge minimizeSubscribeButton={true} topic={followingItem} />
|
||||
<TopicBadge
|
||||
minimizeSubscribeButton={true}
|
||||
topic={followingItem}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -109,5 +144,5 @@ export const ProfileSubscriptions = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user