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

Load user profile

Browse Source
This commit is contained in:
ilya-bkv 2024-04-15 15:39:34 +03:00
parent 78cde31943
commit e3a2aaf73a
3 changed files with 120 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,168 +1,169 @@
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 { 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 { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll' import { restoreScrollPosition, saveScrollPosition } from "../../../utils/scroll";
import { splitToPages } from '../../../utils/splitToPages' import { splitToPages } from "../../../utils/splitToPages";
import { Comment } from '../../Article/Comment' import { Comment } from "../../Article/Comment";
import { AuthorCard } from '../../Author/AuthorCard' import { AuthorCard } from "../../Author/AuthorCard";
import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating' import { AuthorShoutsRating } from "../../Author/AuthorShoutsRating";
import { Row1 } from '../../Feed/Row1' import { Row1 } from "../../Feed/Row1";
import { Row2 } from '../../Feed/Row2' import { Row2 } from "../../Feed/Row2";
import { Row3 } from '../../Feed/Row3' import { Row3 } from "../../Feed/Row3";
import { Loading } from '../../_shared/Loading' 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 { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing() const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing();
const { session } = useSession() const { session } = useSession();
const { sortedArticles } = useArticlesStore({ shouts: props.shouts }) const { sortedArticles } = useArticlesStore({ shouts: props.shouts });
const { authorEntities } = useAuthorsStore({ authors: [props.author] }) const { authorEntities } = useAuthorsStore({ authors: [props.author] });
const { page: getPage, searchParams } = useRouter() const { page: getPage, searchParams } = useRouter();
const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false);
const [isBioExpanded, setIsBioExpanded] = createSignal(false) const [isBioExpanded, setIsBioExpanded] = createSignal(false);
const [author, setAuthor] = createSignal<Author>() const [author, setAuthor] = createSignal<Author>();
const [followers, setFollowers] = createSignal([]) const [followers, setFollowers] = createSignal([]);
const [following, setFollowing] = createSignal<Array<Author | Topic>>([]) // flat AuthorFollowsResult const [following, setFollowing] = createSignal<Array<Author | Topic>>([]); // flat AuthorFollowsResult
const [showExpandBioControl, setShowExpandBioControl] = createSignal(false) const [showExpandBioControl, setShowExpandBioControl] = createSignal(false);
const [commented, setCommented] = createSignal<Reaction[]>() const [commented, setCommented] = createSignal<Reaction[]>();
const modal = MODALS[searchParams().m] const modal = MODALS[searchParams().m];
// current author // current author
createEffect(() => { createEffect(async () => {
if (props.authorSlug) { await loadAuthor({ slug: props.authorSlug });
if (session()?.user?.app_data?.profile?.slug === props.authorSlug) { })
console.info('my own profile') createEffect( () => {
const { profile, authors, topics } = session().user.app_data if (props.authorSlug && session()?.user?.app_data?.profile?.slug === props.authorSlug) {
setFollowers(myFollowers) console.info("my own profile");
setAuthor(profile) const { profile, authors, topics } = session().user.app_data;
setFollowing([...authors, ...topics]) setFollowers(myFollowers);
} setAuthor(profile);
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(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}>
@ -184,20 +185,20 @@ export const AuthorView = (props: Props) => {
<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 <li
classList={{ classList={{
'view-switcher__item--selected': getPage().route === 'author', "view-switcher__item--selected": 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">{author().stat.shouts}</span> <span class="view-switcher__counter">{author().stat.shouts}</span>
@ -205,15 +206,15 @@ export const AuthorView = (props: Props) => {
</li> </li>
<li <li
classList={{ classList={{
'view-switcher__item--selected': getPage().route === 'authorComments', "view-switcher__item--selected": 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">{author().stat.comments}</span> <span class="view-switcher__counter">{author().stat.comments}</span>
@ -221,24 +222,24 @@ export const AuthorView = (props: Props) => {
</li> </li>
<li <li
classList={{ classList={{
'view-switcher__item--selected': getPage().route === 'authorAbout', "view-switcher__item--selected": 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 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>
@ -249,7 +250,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">
@ -263,17 +264,17 @@ export const AuthorView = (props: Props) => {
<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">
@ -293,7 +294,7 @@ 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>
@ -331,12 +332,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
src/components/_shared/SolidSwiper/ImageSwiper.tsx
View File

@ -49,7 +49,6 @@ export const ImageSwiper = (props: Props) => {
) )
onMount(async () => { onMount(async () => {
console.log("!!! onMount:");
const { register } = await import('swiper/element/bundle') const { register } = await import('swiper/element/bundle')
register() register()
SwiperCore.use([Pagination, Navigation, Manipulation]) SwiperCore.use([Pagination, Navigation, Manipulation])

2
src/stores/zine/authors.ts
View File

@ -1,5 +1,5 @@
import { createLazyMemo } from '@solid-primitives/memo' import { createLazyMemo } from '@solid-primitives/memo'
import { createSignal } from 'solid-js' import { createEffect, createSignal } from "solid-js";
import { apiClient } from '../../graphql/client/core' import { apiClient } from '../../graphql/client/core'
import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen' import { Author, QueryLoad_Authors_ByArgs } from '../../graphql/schema/core.gen'