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

use-following-data-2

Browse Source
This commit is contained in:
Untone 2024-04-08 17:48:58 +03:00
parent aeb42de908
commit cf0214563d
4 changed files with 493 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -16,7 +16,7 @@
"hygen": "HYGEN_TMPLS=gen hygen", "hygen": "HYGEN_TMPLS=gen hygen",
"postinstall": "npm run codegen && npx patch-package", "postinstall": "npm run codegen && npx patch-package",
"check:code": "npx @biomejs/biome check src --log-kind=compact --verbose", "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": "npm run lint:code && stylelint **/*.{scss,css}",
"lint:code": "npx @biomejs/biome lint src --log-kind=compact --verbose", "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", "lint:code:fix": "npx @biomejs/biome lint src --apply-unsafe --log-kind=compact --verbose",

281
src/components/Author/AuthorCard/AuthorCard.tsx
View File

@ -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 { openPage, redirectPage } from "@nanostores/router";
import { clsx } from 'clsx' import { clsx } from "clsx";
import { For, Show, createEffect, createMemo, createSignal, onMount } from 'solid-js' import {
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<Array<Author | Topic | Community>>([]) const [authorSubs, setAuthorSubs] = createSignal<
const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all') Array<Author | Topic | Community>
const [isFollowed, setIsFollowed] = createSignal<boolean>() >([]);
const isProfileOwner = createMemo(() => author()?.slug === props.author.slug) const [subscriptionFilter, setSubscriptionFilter] =
const { setFollowing, isOwnerSubscribed } = useFollowing() createSignal<SubscriptionFilter>("all");
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}>{t('Following')}</span> <span class={stylesButton.buttonSubscribeLabel}>
<span class={stylesButton.buttonSubscribeLabelHovered}>{t('Unfollow')}</span> {t("Following")}
</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}>
@ -130,11 +144,18 @@ 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 size={'XS'} name={f.name} userpic={f.pic} class={styles.subscribersItem} /> <Userpic
size={"XS"}
name={f.name}
userpic={f.pic}
class={styles.subscribersItem}
/>
)} )}
</For> </For>
<div class={styles.subscribersCounter}> <div class={styles.subscribersCounter}>
{t('SubscriberWithCount', { count: props.followers.length ?? 0 })} {t("SubscriberWithCount", {
count: props.followers.length ?? 0,
})}
</div> </div>
</a> </a>
</Show> </Show>
@ -143,33 +164,35 @@ 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', { count: props?.following.length ?? 0 })} {t("SubscriptionWithCount", {
count: props?.following.length ?? 0,
})}
</div> </div>
</a> </a>
</Show> </Show>
@ -184,12 +207,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>
)} )}
@ -211,8 +234,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}
/> />
@ -222,11 +245,15 @@ 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}>{t('Edit profile')}</span> <span class={styles.authorActionsLabel}>
<span class={styles.authorActionsLabelMobile}>{t('Edit')}</span> {t("Edit profile")}
</span>
<span class={styles.authorActionsLabelMobile}>
{t("Edit")}
</span>
</> </>
} }
/> />
@ -234,17 +261,24 @@ export const AuthorCard = (props: Props) => {
title={props.author.name} title={props.author.name}
description={props.author.bio} description={props.author.bio}
imageUrl={props.author.pic} imageUrl={props.author.pic}
shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })} shareUrl={getShareUrl({
trigger={<Button variant="secondary" value={t('Share')} />} pathname: `/author/${props.author.slug}`,
})}
trigger={<Button variant="secondary" value={t("Share")} />}
/> />
</div> </div>
</Show> </Show>
</Show> </Show>
</ShowOnlyOnClient> </ShowOnlyOnClient>
<Show when={props.followers}> <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={styles.listWrapper}>
<div class="row"> <div class="row">
<div class="col-24"> <div class="col-24">
@ -266,30 +300,61 @@ export const AuthorCard = (props: Props) => {
</Modal> </Modal>
</Show> </Show>
<Show when={props.following}> <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"> <ul class="view-switcher">
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}> <li
<button type="button" onClick={() => setSubscriptionFilter('all')}> class={clsx({
{t('All')} "view-switcher__item--selected":
</button> subscriptionFilter() === "all",
<span class="view-switcher__counter">{props.following.length}</span> })}
</li> >
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}> <button
<button type="button" onClick={() => setSubscriptionFilter('authors')}> type="button"
{t('Authors')} onClick={() => setSubscriptionFilter("all")}
>
{t("All")}
</button> </button>
<span class="view-switcher__counter"> <span class="view-switcher__counter">
{props.following.filter((s) => 'name' in s).length} {props.following.length}
</span> </span>
</li> </li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}> <li
<button type="button" onClick={() => setSubscriptionFilter('topics')}> class={clsx({
{t('Topics')} "view-switcher__item--selected":
subscriptionFilter() === "authors",
})}
>
<button
type="button"
onClick={() => setSubscriptionFilter("authors")}
>
{t("Authors")}
</button> </button>
<span class="view-switcher__counter"> <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> </span>
</li> </li>
</ul> </ul>
@ -326,5 +391,5 @@ export const AuthorCard = (props: Props) => {
</Show> </Show>
</div> </div>
</div> </div>
) );
} };

354
src/components/Views/Author/Author.tsx
View File

@ -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 { 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 { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from 'solid-js' import {
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 { apiClient } from '../../../graphql/client/core' import { useSession } from "../../../context/session";
import { router, useRouter } from '../../../stores/router' import { apiClient } from "../../../graphql/client/core";
import { loadShouts, useArticlesStore } from '../../../stores/zine/articles' import { router, useRouter } from "../../../stores/router";
import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors' import { loadShouts, useArticlesStore } from "../../../stores/zine/articles";
import { getImageUrl } from '../../../utils/getImageUrl' import { loadAuthor, useAuthorsStore } from "../../../stores/zine/authors";
import { getDescription } from '../../../utils/meta' import { getImageUrl } from "../../../utils/getImageUrl";
import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll' import { getDescription } from "../../../utils/meta";
import { splitToPages } from '../../../utils/splitToPages' import {
import { Comment } from '../../Article/Comment' restoreScrollPosition,
import { AuthorCard } from '../../Author/AuthorCard' saveScrollPosition,
import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating' } from "../../../utils/scroll";
import { Row1 } from '../../Feed/Row1' import { splitToPages } from "../../../utils/splitToPages";
import { Row2 } from '../../Feed/Row2' import { Comment } from "../../Article/Comment";
import { Row3 } from '../../Feed/Row3' import { AuthorCard } from "../../Author/AuthorCard";
import { Loading } from '../../_shared/Loading' 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 { 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[];
export const PRERENDERED_ARTICLES_COUNT = 12 author?: Author;
const LOAD_MORE_PAGE_SIZE = 9 };
export const PRERENDERED_ARTICLES_COUNT = 12;
const LOAD_MORE_PAGE_SIZE = 9;
export const AuthorView = (props: Props) => { export const AuthorView = (props: Props) => {
const { t } = useLocalize() const { t } = useLocalize();
const { subscriptions, followers, loadSubscriptions } = useFollowing() const {
const { session } = useSession() subscriptions,
const { sortedArticles } = useArticlesStore({ shouts: props.shouts }) followers: myFollowers,
const { authorEntities } = useAuthorsStore({ authors: [props.author] }) loadSubscriptions,
const { page: getPage, searchParams } = useRouter() } = useFollowing();
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) const { session } = useSession();
const [isBioExpanded, setIsBioExpanded] = createSignal(false) const { sortedArticles } = useArticlesStore({ shouts: props.shouts });
const [author, setAuthor] = createSignal<Author>() const { authorEntities } = useAuthorsStore({ authors: [props.author] });
const [following, setFollowing] = createSignal<Array<Author | Topic>>([]) const { page: getPage, searchParams } = useRouter();
const [showExpandBioControl, setShowExpandBioControl] = createSignal(false) const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] =
const [commented, setCommented] = createSignal<Reaction[]>() createSignal(false);
const modal = MODALS[searchParams().m] 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 // 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;
setAuthor(profile) setFollowers(myFollowers);
setFollowing([...authors, ...topics]) setAuthor(profile);
setFollowing([...authors, ...topics]);
} }
} else { } else {
try { try {
const a = authorEntities()[props.authorSlug] const a = authorEntities()[props.authorSlug];
setAuthor(a) setAuthor(a);
console.debug('[Author] expecting following data fetched') // TODO: add following data retrieval
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(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight) setShowExpandBioControl(
} 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(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE), splitToPages(
) 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}>
@ -176,42 +211,80 @@ export const AuthorView = (props: Props) => {
<Show when={author()} fallback={<Loading />}> <Show when={author()} fallback={<Loading />}>
<> <>
<div class={styles.authorHeader}> <div class={styles.authorHeader}>
<AuthorCard author={author()} followers={followers()} following={following()} /> <AuthorCard
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 classList={{ 'view-switcher__item--selected': getPage().route === 'author' }}> <li
<a href={getPagePath(router, 'author', { slug: props.authorSlug })}> classList={{
{t('Publications')} "view-switcher__item--selected":
getPage().route === "author",
}}
>
<a
href={getPagePath(router, "author", {
slug: props.authorSlug,
})}
>
{t("Publications")}
</a> </a>
<Show when={author().stat}> <Show when={author().stat}>
<span class="view-switcher__counter">{author().stat.shouts}</span> <span class="view-switcher__counter">
{author().stat.shouts}
</span>
</Show> </Show>
</li> </li>
<li classList={{ 'view-switcher__item--selected': getPage().route === 'authorComments' }}> <li
<a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}> classList={{
{t('Comments')} "view-switcher__item--selected":
getPage().route === "authorComments",
}}
>
<a
href={getPagePath(router, "authorComments", {
slug: props.authorSlug,
})}
>
{t("Comments")}
</a> </a>
<Show when={author().stat}> <Show when={author().stat}>
<span class="view-switcher__counter">{author().stat.comments}</span> <span class="view-switcher__counter">
{author().stat.comments}
</span>
</Show> </Show>
</li> </li>
<li classList={{ 'view-switcher__item--selected': getPage().route === 'authorAbout' }}> <li
classList={{
"view-switcher__item--selected":
getPage().route === "authorAbout",
}}
>
<a <a
onClick={() => checkBioHeight()} onClick={() => checkBioHeight()}
href={getPagePath(router, 'authorAbout', { slug: props.authorSlug })} href={getPagePath(router, "authorAbout", {
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 when={author()?.stat?.rating || author()?.stat?.rating === 0}> <Show
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 author={author()} class={styles.ratingControl} /> <AuthorShoutsRating
author={author()}
class={styles.ratingControl}
/>
</div> </div>
</Show> </Show>
</div> </div>
@ -221,7 +294,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">
@ -230,22 +303,28 @@ export const AuthorView = (props: Props) => {
class={styles.longBio} class={styles.longBio}
classList={{ [styles.longBioExpanded]: isBioExpanded() }} classList={{ [styles.longBioExpanded]: isBioExpanded() }}
> >
<div ref={(el) => (bioContainerRef.current = el)} innerHTML={author().about} /> <div
ref={(el) => (bioContainerRef.current = el)}
innerHTML={author().about}
/>
</div> </div>
<Show when={showExpandBioControl()}> <Show when={showExpandBioControl()}>
<button <button
class={clsx('button button--subscribe-topic', styles.longBioExpandedControl)} class={clsx(
"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">
@ -265,13 +344,18 @@ 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 articles={sortedArticles()} isEqual={true} noauthor={true} nodate={true} /> <Row2
articles={sortedArticles()}
isEqual={true}
noauthor={true}
nodate={true}
/>
</Show> </Show>
<Show when={sortedArticles().length === 3}> <Show when={sortedArticles().length === 3}>
@ -280,21 +364,45 @@ 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 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} /> <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} /> <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()}> <For each={pages()}>
{(page) => ( {(page) => (
<> <>
<Row1 article={page[0]} noauthor={true} nodate={true} /> <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} /> <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} /> <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> </For>
@ -303,12 +411,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>
) );
} };

141
src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx
View File

@ -1,59 +1,60 @@
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 as AuthorType, 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 < AuthorType) | (Topic >> []) const [following, setFollowing] = createSignal<Array<Author | Topic>>([]);
const [filtered, setFiltered] = (createSignal < Array < AuthorType) | (Topic >> []) const [filtered, setFiltered] = createSignal<Array<Author | Topic>>([]);
const [subscriptionFilter, setSubscriptionFilter] = createSignal < SubscriptionFilter > 'all' const [subscriptionFilter, setSubscriptionFilter] =
const [searchQuery, setSearchQuery] = createSignal('') createSignal<SubscriptionFilter>("all");
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>
@ -61,28 +62,54 @@ 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">{t('Here you can manage all your Discours subscriptions')}</p> <p class="description">
{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 class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'all' })}> <li
<button type="button" onClick={() => setSubscriptionFilter('all')}> class={clsx({
{t('All')} "view-switcher__item--selected":
subscriptionFilter() === "all",
})}
>
<button
type="button"
onClick={() => setSubscriptionFilter("all")}
>
{t("All")}
</button> </button>
</li> </li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'authors' })}> <li
<button type="button" onClick={() => setSubscriptionFilter('authors')}> class={clsx({
{t('Authors')} "view-switcher__item--selected":
subscriptionFilter() === "authors",
})}
>
<button
type="button"
onClick={() => setSubscriptionFilter("authors")}
>
{t("Authors")}
</button> </button>
</li> </li>
<li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'topics' })}> <li
<button type="button" onClick={() => setSubscriptionFilter('topics')}> class={clsx({
{t('Topics')} "view-switcher__item--selected":
subscriptionFilter() === "topics",
})}
>
<button
type="button"
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}
@ -90,14 +117,22 @@ export const ProfileSubscriptions = () => {
/> />
</div> </div>
<div class={clsx(stylesSettings.settingsList, styles.topicsList)}> <div
class={clsx(stylesSettings.settingsList, styles.topicsList)}
>
<For each={filtered()}> <For each={filtered()}>
{(followingItem) => ( {(followingItem) => (
<div> <div>
{isAuthor(followingItem) ? ( {isAuthor(followingItem) ? (
<AuthorBadge minimizeSubscribeButton={true} author={followingItem} /> <AuthorBadge
minimizeSubscribeButton={true}
author={followingItem}
/>
) : ( ) : (
<TopicBadge minimizeSubscribeButton={true} topic={followingItem} /> <TopicBadge
minimizeSubscribeButton={true}
topic={followingItem}
/>
)} )}
</div> </div>
)} )}
@ -109,5 +144,5 @@ export const ProfileSubscriptions = () => {
</div> </div>
</div> </div>
</div> </div>
) );
} };