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