From 455006f6277be3a4e67c05ebfdf4a1e7dec663a0 Mon Sep 17 00:00:00 2001 From: Untone Date: Mon, 8 Apr 2024 18:19:43 +0300 Subject: [PATCH] fmt --- .../Author/AuthorCard/AuthorCard.tsx | 269 ++++++-------- src/components/Views/Author/Author.tsx | 336 +++++++----------- .../ProfileSubscriptions.tsx | 129 +++---- 3 files changed, 292 insertions(+), 442 deletions(-) diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx index b6054a58..5fedd3e5 100644 --- a/src/components/Author/AuthorCard/AuthorCard.tsx +++ b/src/components/Author/AuthorCard/AuthorCard.tsx @@ -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 { clsx } from "clsx"; -import { - For, - Show, - createEffect, - createMemo, - createSignal, - onMount, -} from "solid-js"; +import { openPage, redirectPage } from '@nanostores/router' +import { clsx } from 'clsx' +import { For, Show, createEffect, createMemo, createSignal, onMount } from 'solid-js' -import { useFollowing } from "../../../context/following"; -import { useLocalize } from "../../../context/localize"; -import { useSession } from "../../../context/session"; -import { FollowingEntity, Topic } from "../../../graphql/schema/core.gen"; -import { SubscriptionFilter } from "../../../pages/types"; -import { router, useRouter } from "../../../stores/router"; -import { isAuthor } from "../../../utils/isAuthor"; -import { translit } from "../../../utils/ru2en"; -import { isCyrillic } from "../../../utils/translate"; -import { SharePopup, getShareUrl } from "../../Article/SharePopup"; -import { Modal } from "../../Nav/Modal"; -import { TopicBadge } from "../../Topic/TopicBadge"; -import { Button } from "../../_shared/Button"; -import { ShowOnlyOnClient } from "../../_shared/ShowOnlyOnClient"; -import { AuthorBadge } from "../AuthorBadge"; -import { Userpic } from "../Userpic"; +import { useFollowing } from '../../../context/following' +import { useLocalize } from '../../../context/localize' +import { useSession } from '../../../context/session' +import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen' +import { SubscriptionFilter } from '../../../pages/types' +import { router, useRouter } from '../../../stores/router' +import { isAuthor } from '../../../utils/isAuthor' +import { translit } from '../../../utils/ru2en' +import { isCyrillic } from '../../../utils/translate' +import { SharePopup, getShareUrl } from '../../Article/SharePopup' +import { Modal } from '../../Nav/Modal' +import { TopicBadge } from '../../Topic/TopicBadge' +import { Button } from '../../_shared/Button' +import { ShowOnlyOnClient } from '../../_shared/ShowOnlyOnClient' +import { AuthorBadge } from '../AuthorBadge' +import { Userpic } from '../Userpic' -import stylesButton from "../../_shared/Button/Button.module.scss"; -import styles from "./AuthorCard.module.scss"; +import stylesButton from '../../_shared/Button/Button.module.scss' +import styles from './AuthorCard.module.scss' type Props = { - author: Author; - followers?: Author[]; - following?: Array; -}; + author: Author + followers?: Author[] + following?: Array +} export const AuthorCard = (props: Props) => { - const { t, lang } = useLocalize(); - const { author, isSessionLoaded, requireAuthentication } = useSession(); - const [authorSubs, setAuthorSubs] = createSignal< - Array - >([]); - const [subscriptionFilter, setSubscriptionFilter] = - createSignal("all"); - const [isFollowed, setIsFollowed] = createSignal(); - const isProfileOwner = createMemo(() => author()?.slug === props.author.slug); - const { setFollowing, isOwnerSubscribed } = useFollowing(); + const { t, lang } = useLocalize() + const { author, isSessionLoaded, requireAuthentication } = useSession() + const [authorSubs, setAuthorSubs] = createSignal>([]) + const [subscriptionFilter, setSubscriptionFilter] = createSignal('all') + const [isFollowed, setIsFollowed] = createSignal() + const isProfileOwner = createMemo(() => author()?.slug === props.author.slug) + const { setFollowing, isOwnerSubscribed } = useFollowing() onMount(() => { - setAuthorSubs(props.following); - }); + setAuthorSubs(props.following) + }) createEffect(() => { - setIsFollowed(isOwnerSubscribed(props.author?.id)); - }); + setIsFollowed(isOwnerSubscribed(props.author?.id)) + }) const name = createMemo(() => { - if (lang() !== "ru" && isCyrillic(props.author.name)) { - if (props.author.name === "Дискурс") { - return "Discours"; + if (lang() !== 'ru' && isCyrillic(props.author.name)) { + if (props.author.name === 'Дискурс') { + return 'Discours' } - return translit(props.author.name); + return translit(props.author.name) } - return props.author.name; - }); + return props.author.name + }) // TODO: reimplement AuthorCard - const { changeSearchParams } = useRouter(); + const { changeSearchParams } = useRouter() const initChat = () => { // eslint-disable-next-line solid/reactivity requireAuthentication(() => { - openPage(router, "inbox"); + openPage(router, 'inbox') changeSearchParams({ initChat: props.author.id.toString(), - }); - }, "discussions"); - }; + }) + }, 'discussions') + } createEffect(() => { if (props.following) { - if (subscriptionFilter() === "authors") { - setAuthorSubs(props.following.filter((s) => "name" in s)); - } else if (subscriptionFilter() === "topics") { - setAuthorSubs(props.following.filter((s) => "title" in s)); - } else if (subscriptionFilter() === "communities") { - setAuthorSubs(props.following.filter((s) => "title" in s)); + if (subscriptionFilter() === 'authors') { + setAuthorSubs(props.following.filter((s) => 'name' in s)) + } else if (subscriptionFilter() === 'topics') { + setAuthorSubs(props.following.filter((s) => 'title' in s)) + } else if (subscriptionFilter() === 'communities') { + setAuthorSubs(props.following.filter((s) => 'title' in s)) } else { - setAuthorSubs(props.following); + setAuthorSubs(props.following) } } - }); + }) const handleFollowClick = () => { - const value = !isFollowed(); + const value = !isFollowed() requireAuthentication(() => { - setIsFollowed(value); - setFollowing(FollowingEntity.Author, props.author.slug, value); - }, "subscribe"); - }; + setIsFollowed(value) + setFollowing(FollowingEntity.Author, props.author.slug, value) + }, 'subscribe') + } const followButtonText = createMemo(() => { if (isOwnerSubscribed(props.author?.id)) { return ( <> - - {t("Following")} - - - {t("Unfollow")} - + {t('Following')} + {t('Unfollow')} - ); + ) } - return t("Follow"); - }); + return t('Follow') + }) return ( -
+
-
+
{name()}
@@ -144,16 +130,11 @@ export const AuthorCard = (props: Props) => { {(f) => ( - + )}
- {t("SubscriberWithCount", { + {t('SubscriberWithCount', { count: props.followers.length ?? 0, })}
@@ -164,33 +145,33 @@ export const AuthorCard = (props: Props) => { {(f) => { - if ("name" in f) { + if ('name' in f) { return ( - ); + ) } - if ("title" in f) { + if ('title' in f) { return ( - ); + ) } - return null; + return null }}
- {t("SubscriptionWithCount", { + {t('SubscriptionWithCount', { count: props?.following.length ?? 0, })}
@@ -207,12 +188,12 @@ export const AuthorCard = (props: Props) => { {(link) => ( - {link.startsWith("http") ? link : `https://${link}`} + {link.startsWith('http') ? link : `https://${link}`} )} @@ -234,8 +215,8 @@ export const AuthorCard = (props: Props) => { />
- + <> -

{t("Followers")}

+

{t('Followers')}

@@ -300,61 +272,42 @@ export const AuthorCard = (props: Props) => { - + <> -

{t("Subscriptions")}

+

{t('Subscriptions')}

  • - + {props.following.length} +
    • +
  • + - {props.following.length} + {props.following.filter((s) => 'name' in s).length}
  • - - {props.following.filter((s) => "name" in s).length} - -
    • -
  • - - - {props.following.filter((s) => "title" in s).length} + {props.following.filter((s) => 'title' in s).length}
@@ -391,5 +344,5 @@ export const AuthorCard = (props: Props) => {
- ); -}; + ) +} diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index 9a6c12fd..0c6a958a 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -1,197 +1,168 @@ -import type { - Author, - Reaction, - Shout, - Topic, -} from "../../../graphql/schema/core.gen"; +import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/core.gen' -import { getPagePath } from "@nanostores/router"; -import { Meta, Title } from "@solidjs/meta"; -import { clsx } from "clsx"; -import { - For, - Match, - Show, - Switch, - createEffect, - createMemo, - createSignal, - onMount, -} from "solid-js"; +import { getPagePath } from '@nanostores/router' +import { Meta, Title } from '@solidjs/meta' +import { clsx } from 'clsx' +import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from 'solid-js' -import { useFollowing } from "../../../context/following"; -import { useLocalize } from "../../../context/localize"; -import { useSession } from "../../../context/session"; -import { apiClient } from "../../../graphql/client/core"; -import { router, useRouter } from "../../../stores/router"; -import { loadShouts, useArticlesStore } from "../../../stores/zine/articles"; -import { loadAuthor, useAuthorsStore } from "../../../stores/zine/authors"; -import { getImageUrl } from "../../../utils/getImageUrl"; -import { getDescription } from "../../../utils/meta"; -import { - restoreScrollPosition, - saveScrollPosition, -} from "../../../utils/scroll"; -import { splitToPages } from "../../../utils/splitToPages"; -import { Comment } from "../../Article/Comment"; -import { AuthorCard } from "../../Author/AuthorCard"; -import { AuthorShoutsRating } from "../../Author/AuthorShoutsRating"; -import { Row1 } from "../../Feed/Row1"; -import { Row2 } from "../../Feed/Row2"; -import { Row3 } from "../../Feed/Row3"; -import { Loading } from "../../_shared/Loading"; +import { useFollowing } from '../../../context/following' +import { useLocalize } from '../../../context/localize' +import { useSession } from '../../../context/session' +import { apiClient } from '../../../graphql/client/core' +import { router, useRouter } from '../../../stores/router' +import { loadShouts, useArticlesStore } from '../../../stores/zine/articles' +import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors' +import { getImageUrl } from '../../../utils/getImageUrl' +import { getDescription } from '../../../utils/meta' +import { restoreScrollPosition, saveScrollPosition } from '../../../utils/scroll' +import { splitToPages } from '../../../utils/splitToPages' +import { Comment } from '../../Article/Comment' +import { AuthorCard } from '../../Author/AuthorCard' +import { AuthorShoutsRating } from '../../Author/AuthorShoutsRating' +import { Row1 } from '../../Feed/Row1' +import { Row2 } from '../../Feed/Row2' +import { Row3 } from '../../Feed/Row3' +import { Loading } from '../../_shared/Loading' -import { MODALS, hideModal } from "../../../stores/ui"; -import { byCreated } from "../../../utils/sortby"; -import stylesArticle from "../../Article/Article.module.scss"; -import styles from "./Author.module.scss"; +import { MODALS, hideModal } from '../../../stores/ui' +import { byCreated } from '../../../utils/sortby' +import stylesArticle from '../../Article/Article.module.scss' +import styles from './Author.module.scss' type Props = { - authorSlug: string; - shouts?: Shout[]; - author?: Author; -}; -export const PRERENDERED_ARTICLES_COUNT = 12; -const LOAD_MORE_PAGE_SIZE = 9; + authorSlug: string + shouts?: Shout[] + author?: Author +} +export const PRERENDERED_ARTICLES_COUNT = 12 +const LOAD_MORE_PAGE_SIZE = 9 export const AuthorView = (props: Props) => { - const { t } = useLocalize(); - const { - subscriptions, - followers: myFollowers, - loadSubscriptions, - } = useFollowing(); - const { session } = useSession(); - const { sortedArticles } = useArticlesStore({ shouts: props.shouts }); - const { authorEntities } = useAuthorsStore({ authors: [props.author] }); - const { page: getPage, searchParams } = useRouter(); - const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = - createSignal(false); - const [isBioExpanded, setIsBioExpanded] = createSignal(false); - const [author, setAuthor] = createSignal(); - const [followers, setFollowers] = createSignal([]); - const [following, setFollowing] = createSignal>([]); // flat AuthorFollowsResult - const [showExpandBioControl, setShowExpandBioControl] = createSignal(false); - const [commented, setCommented] = createSignal(); - const modal = MODALS[searchParams().m]; + const { t } = useLocalize() + const { subscriptions, followers: myFollowers, loadSubscriptions } = useFollowing() + const { session } = useSession() + const { sortedArticles } = useArticlesStore({ shouts: props.shouts }) + const { authorEntities } = useAuthorsStore({ authors: [props.author] }) + const { page: getPage, searchParams } = useRouter() + const [isLoadMoreButtonVisible, setIsLoadMoreButtonVisible] = createSignal(false) + const [isBioExpanded, setIsBioExpanded] = createSignal(false) + const [author, setAuthor] = createSignal() + const [followers, setFollowers] = createSignal([]) + const [following, setFollowing] = createSignal>([]) // flat AuthorFollowsResult + const [showExpandBioControl, setShowExpandBioControl] = createSignal(false) + const [commented, setCommented] = createSignal() + const modal = MODALS[searchParams().m] // current author createEffect(() => { if (props.authorSlug) { if (session()?.user?.app_data?.profile?.slug === props.authorSlug) { - console.info("my own profile"); - const { profile, authors, topics } = session().user.app_data; - setFollowers(myFollowers); - setAuthor(profile); - setFollowing([...authors, ...topics]); + console.info('my own profile') + const { profile, authors, topics } = session().user.app_data + setFollowers(myFollowers) + setAuthor(profile) + setFollowing([...authors, ...topics]) } } else { try { - const a = authorEntities()[props.authorSlug]; - setAuthor(a); + const a = authorEntities()[props.authorSlug] + setAuthor(a) // TODO: add following data retrieval - console.debug("[Author] expecting following data fetched"); + console.debug('[Author] expecting following data fetched') } catch (error) { - console.debug(error); + console.debug(error) } } - }); + }) createEffect(async () => { if (author()?.id && !author().stat) { - const a = await loadAuthor({ slug: "", author_id: author().id }); - console.debug("[AuthorView] loaded author:", a); + const a = await loadAuthor({ slug: '', author_id: author().id }) + console.debug('[AuthorView] loaded author:', a) } - }); + }) - const bioContainerRef: { current: HTMLDivElement } = { current: null }; - const bioWrapperRef: { current: HTMLDivElement } = { current: null }; + const bioContainerRef: { current: HTMLDivElement } = { current: null } + const bioWrapperRef: { current: HTMLDivElement } = { current: null } const fetchData = async (slug) => { try { const [subscriptionsResult, followersResult] = await Promise.all([ apiClient.getAuthorFollows({ slug }), apiClient.getAuthorFollowers({ slug }), - ]); + ]) - const { authors, topics } = subscriptionsResult; - setFollowing([...(authors || []), ...(topics || [])]); - setFollowers(followersResult || []); + const { authors, topics } = subscriptionsResult + setFollowing([...(authors || []), ...(topics || [])]) + setFollowers(followersResult || []) - console.info("[components.Author] following data loaded"); + console.info('[components.Author] following data loaded') } catch (error) { - console.error("[components.Author] fetch error", error); + console.error('[components.Author] fetch error', error) } - }; + } const checkBioHeight = () => { if (bioContainerRef.current) { - setShowExpandBioControl( - bioContainerRef.current.offsetHeight > - bioWrapperRef.current.offsetHeight, - ); + setShowExpandBioControl(bioContainerRef.current.offsetHeight > bioWrapperRef.current.offsetHeight) } - }; + } onMount(() => { - fetchData(props.authorSlug); + fetchData(props.authorSlug) if (!modal) { - hideModal(); + hideModal() } - }); + }) const loadMore = async () => { - saveScrollPosition(); + saveScrollPosition() const { hasMore } = await loadShouts({ filters: { author: props.authorSlug }, limit: LOAD_MORE_PAGE_SIZE, offset: sortedArticles().length, - }); - setIsLoadMoreButtonVisible(hasMore); - restoreScrollPosition(); - }; + }) + setIsLoadMoreButtonVisible(hasMore) + restoreScrollPosition() + } onMount(() => { - checkBioHeight(); + checkBioHeight() // pagination if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) { - loadMore(); - loadSubscriptions(); + loadMore() + loadSubscriptions() } - }); + }) const pages = createMemo(() => - splitToPages( - sortedArticles(), - PRERENDERED_ARTICLES_COUNT, - LOAD_MORE_PAGE_SIZE, - ), - ); + splitToPages(sortedArticles(), PRERENDERED_ARTICLES_COUNT, LOAD_MORE_PAGE_SIZE), + ) const fetchComments = async (commenter: Author) => { const data = await apiClient.getReactionsBy({ by: { comment: false, created_by: commenter.id }, - }); - setCommented(data); - }; + }) + setCommented(data) + } createEffect(() => { if (author()) { - fetchComments(author()); + fetchComments(author()) } - }); + }) const ogImage = createMemo(() => author()?.pic ? getImageUrl(author()?.pic, { width: 1200 }) - : getImageUrl("production/image/logo_image.png"), - ); - const description = createMemo(() => getDescription(author()?.bio)); + : getImageUrl('production/image/logo_image.png'), + ) + const description = createMemo(() => getDescription(author()?.bio)) const handleDeleteComment = (id: number) => { - setCommented((prev) => prev.filter((comment) => comment.id !== id)); - }; + setCommented((prev) => prev.filter((comment) => comment.id !== id)) + } return (
@@ -211,80 +182,64 @@ export const AuthorView = (props: Props) => { }> <>
- +
-
+
-
- +
+
- {t("All posts rating")} - + {t('All posts rating')} +
@@ -294,7 +249,7 @@ export const AuthorView = (props: Props) => {
- +
@@ -303,28 +258,22 @@ export const AuthorView = (props: Props) => { class={styles.longBio} classList={{ [styles.longBioExpanded]: isBioExpanded() }} > -
(bioContainerRef.current = el)} - innerHTML={author().about} - /> +
(bioContainerRef.current = el)} innerHTML={author().about} />
- +
@@ -344,18 +293,13 @@ export const AuthorView = (props: Props) => {
- + - + @@ -364,45 +308,21 @@ export const AuthorView = (props: Props) => { 3}> - + - + - + {(page) => ( <> - + - + - + )} @@ -411,12 +331,12 @@ export const AuthorView = (props: Props) => {

- ); -}; + ) +} diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx index d4db7857..51f27325 100644 --- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx +++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx @@ -1,60 +1,59 @@ -import { clsx } from "clsx"; -import { For, Show, createEffect, createSignal, onMount } from "solid-js"; +import { clsx } from 'clsx' +import { For, Show, createEffect, createSignal, onMount } from 'solid-js' -import { useFollowing } from "../../../context/following"; -import { useLocalize } from "../../../context/localize"; -import { useSession } from "../../../context/session"; -import { apiClient } from "../../../graphql/client/core"; -import { Author, Topic } from "../../../graphql/schema/core.gen"; -import { SubscriptionFilter } from "../../../pages/types"; -import { dummyFilter } from "../../../utils/dummyFilter"; +import { useFollowing } from '../../../context/following' +import { useLocalize } from '../../../context/localize' +import { useSession } from '../../../context/session' +import { apiClient } from '../../../graphql/client/core' +import { Author, Topic } from '../../../graphql/schema/core.gen' +import { SubscriptionFilter } from '../../../pages/types' +import { dummyFilter } from '../../../utils/dummyFilter' // TODO: refactor styles -import { isAuthor } from "../../../utils/isAuthor"; -import { AuthorBadge } from "../../Author/AuthorBadge"; -import { ProfileSettingsNavigation } from "../../Nav/ProfileSettingsNavigation"; -import { TopicBadge } from "../../Topic/TopicBadge"; -import { Loading } from "../../_shared/Loading"; -import { SearchField } from "../../_shared/SearchField"; +import { isAuthor } from '../../../utils/isAuthor' +import { AuthorBadge } from '../../Author/AuthorBadge' +import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation' +import { TopicBadge } from '../../Topic/TopicBadge' +import { Loading } from '../../_shared/Loading' +import { SearchField } from '../../_shared/SearchField' -import styles from "../../../pages/profile/Settings.module.scss"; -import stylesSettings from "../../../styles/FeedSettings.module.scss"; +import styles from '../../../pages/profile/Settings.module.scss' +import stylesSettings from '../../../styles/FeedSettings.module.scss' export const ProfileSubscriptions = () => { - const { t, lang } = useLocalize(); - const { author, session } = useSession(); - const { subscriptions } = useFollowing(); - const [following, setFollowing] = createSignal>([]); - const [filtered, setFiltered] = createSignal>([]); - const [subscriptionFilter, setSubscriptionFilter] = - createSignal("all"); - const [searchQuery, setSearchQuery] = createSignal(""); + const { t, lang } = useLocalize() + const { author, session } = useSession() + const { subscriptions } = useFollowing() + const [following, setFollowing] = createSignal>([]) + const [filtered, setFiltered] = createSignal>([]) + const [subscriptionFilter, setSubscriptionFilter] = createSignal('all') + const [searchQuery, setSearchQuery] = createSignal('') createEffect(() => { - const { authors, topics } = subscriptions; + const { authors, topics } = subscriptions if (authors || topics) { - const fdata = [...(authors || []), ...(topics || [])]; - setFollowing(fdata); - if (subscriptionFilter() === "authors") { - setFiltered(fdata.filter((s) => "name" in s)); - } else if (subscriptionFilter() === "topics") { - setFiltered(fdata.filter((s) => "title" in s)); + const fdata = [...(authors || []), ...(topics || [])] + setFollowing(fdata) + if (subscriptionFilter() === 'authors') { + setFiltered(fdata.filter((s) => 'name' in s)) + } else if (subscriptionFilter() === 'topics') { + setFiltered(fdata.filter((s) => 'title' in s)) } else { - setFiltered(fdata); + setFiltered(fdata) } } - }); + }) createEffect(() => { if (searchQuery()) { - setFiltered(dummyFilter(following(), searchQuery(), lang())); + setFiltered(dummyFilter(following(), searchQuery(), lang())) } - }); + }) return (
-
+
@@ -62,54 +61,40 @@ export const ProfileSubscriptions = () => {
-

{t("My subscriptions")}

-

- {t("Here you can manage all your Discours subscriptions")} -

+

{t('My subscriptions')}

+

{t('Here you can manage all your Discours subscriptions')}

}>
  • -
  • -
  • -
-
+
setSearchQuery(value)} class={styles.searchField} @@ -117,22 +102,14 @@ export const ProfileSubscriptions = () => { />
-
+
{(followingItem) => (
{isAuthor(followingItem) ? ( - + ) : ( - + )}
)} @@ -144,5 +121,5 @@ export const ProfileSubscriptions = () => {
- ); -}; + ) +}