From 80ffc564a98d7a57114517c1a413d036a558cfd1 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Mon, 11 Mar 2024 08:20:00 +0300 Subject: [PATCH 01/12] [WiP] --- .../Author/AuthorCard/AuthorCard.tsx | 16 +++++++-- src/context/following.tsx | 35 ++++++++++++++++--- src/graphql/client/core.ts | 1 + 3 files changed, 44 insertions(+), 8 deletions(-) diff --git a/src/components/Author/AuthorCard/AuthorCard.tsx b/src/components/Author/AuthorCard/AuthorCard.tsx index 75f23639..6b67215a 100644 --- a/src/components/Author/AuthorCard/AuthorCard.tsx +++ b/src/components/Author/AuthorCard/AuthorCard.tsx @@ -36,13 +36,14 @@ export const AuthorCard = (props: Props) => { const [subscriptionFilter, setSubscriptionFilter] = createSignal('all') const [isFollowed, setIsFollowed] = createSignal() const isProfileOwner = createMemo(() => author()?.slug === props.author.slug) - const { setFollowing, isOwnerSubscribed } = useFollowing() + const { follow, isOwnerSubscribed, subscribeInAction } = useFollowing() onMount(() => { setAuthorSubs(props.following) }) createEffect(() => { + console.log("!!! isOwnerSubscribed(props.author?.id):", isOwnerSubscribed(props.author?.id)); setIsFollowed(isOwnerSubscribed(props.author?.id)) }) @@ -82,15 +83,24 @@ export const AuthorCard = (props: Props) => { } }) + createEffect(() => { + console.log("!!! subscribeInAction:", subscribeInAction()); + }) const handleFollowClick = () => { + console.log("!!! handleFollowClick:"); const value = !isFollowed() requireAuthentication(() => { setIsFollowed(value) - setFollowing(FollowingEntity.Author, props.author.slug, value) + follow(FollowingEntity.Author, props.author.slug) }, 'subscribe') } const followButtonText = createMemo(() => { + console.log("!!! subscribeInAction()", subscribeInAction()); + if (subscribeInAction()?.slug === props.author.slug) { + return subscribeInAction().type === 'subscribe' ? t('Subscribing...') : t('Unsubscribing...') + } + if (isOwnerSubscribed(props.author?.id)) { return ( <> @@ -200,7 +210,7 @@ export const AuthorCard = (props: Props) => { when={isProfileOwner()} fallback={
- +
- } - > - - - - } - onClick={handleFollowClick} - isSubscribeButton={true} - class={clsx(styles.actionButton, { - [styles.iconed]: props.iconButtons, - [stylesButton.subscribed]: isFollowed(), - })} - /> - } - > -
-
- - } - > - - } - > -
diff --git a/src/components/_shared/BadgeSubscribeButton/BadgeDubscribeButton.module.scss b/src/components/_shared/BadgeSubscribeButton/BadgeDubscribeButton.module.scss new file mode 100644 index 00000000..b5a7480f --- /dev/null +++ b/src/components/_shared/BadgeSubscribeButton/BadgeDubscribeButton.module.scss @@ -0,0 +1,29 @@ +.actionButton { + border-radius: 0.8rem !important; + margin-right: 0 !important; + width: 9em; + + &.iconed { + padding: 6px !important; + min-width: 4rem; + width: unset; + + &:hover img { + filter: invert(1); + } + } + + &:hover { + .actionButtonLabel { + display: none; + } + + .actionButtonLabelHovered { + display: block; + } + } +} + +.actionButtonLabelHovered { + display: none; +} diff --git a/src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx b/src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx new file mode 100644 index 00000000..d69e65f5 --- /dev/null +++ b/src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx @@ -0,0 +1,74 @@ +import { clsx } from 'clsx' +import styles from './BadgeDubscribeButton.module.scss' +import { CheckButton } from "../CheckButton"; +import { Show } from "solid-js"; +import { Button } from "../Button"; +import { Icon } from "../Icon"; +import stylesButton from "../Button/Button.module.scss"; +import { useLocalize } from "../../../context/localize"; + +type Props = { + class?: string + isSubscribed: boolean + minimizeSubscribeButton?: boolean + action: () => void + iconButtons?: boolean +} + +export const BadgeSubscribeButton = (props: Props) => { + const { t } = useLocalize() + + return ( +
+ } + > + + + + } + onClick={props.action} + isSubscribeButton={true} + class={clsx(styles.actionButton, { + [styles.iconed]: props.iconButtons, + [stylesButton.subscribed]: props.isSubscribed, + })} + /> + } + > +
+ ) +} diff --git a/src/components/_shared/BadgeSubscribeButton/index.ts b/src/components/_shared/BadgeSubscribeButton/index.ts new file mode 100644 index 00000000..b359ecff --- /dev/null +++ b/src/components/_shared/BadgeSubscribeButton/index.ts @@ -0,0 +1 @@ +export { BadgeSubscribeButton } from './BadgeSubscribeButton' diff --git a/src/context/following.tsx b/src/context/following.tsx index 3dd41c37..8edb6d1a 100644 --- a/src/context/following.tsx +++ b/src/context/following.tsx @@ -22,7 +22,6 @@ interface FollowingContextType { loadSubscriptions: () => void follow: (what: FollowingEntity, slug: string) => Promise unfollow: (what: FollowingEntity, slug: string) => Promise - isOwnerSubscribed: (id: number | string) => Accessor // followers: Accessor subscribeInAction?: Accessor } @@ -50,10 +49,7 @@ export const FollowingProvider = (props: { children: JSX.Element }) => { try { if (apiClient.private) { console.debug('[context.following] fetching subs data...') - console.log("%c!!! session()?.user.id:", 'background: #222; color: #bada55', session()); - const result = await apiClient.getAuthorFollows({ user: session()?.user.id }) - console.log("!!! result:", result); setSubscriptions(result || EMPTY_SUBSCRIPTIONS) } } catch (error) { @@ -99,11 +95,10 @@ export const FollowingProvider = (props: { children: JSX.Element }) => { createEffect(() => { - // console.log("!!! cone setSubscribeInAction:", subscribeInAction()); - // if (author()) { - // console.debug('[context.following] author update detect') - // fetchData() - // } + if (author()) { + console.debug('[context.following] author update detect') + fetchData() + } }) const setFollowing = (what: FollowingEntity, slug: string, value = true) => { @@ -127,19 +122,14 @@ export const FollowingProvider = (props: { children: JSX.Element }) => { } } - const isOwnerSubscribed = (id?: number | string) => createMemo(() => { - console.log('%c!!! WTF:', 'color: #bada55', subscriptions); - if (!author() || !subscriptions) return false; - const isAuthorSubscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === id); - const isTopicSubscribed = subscriptions.topics?.some((topicEntity) => topicEntity.slug === id); - return !!isAuthorSubscribed || !!isTopicSubscribed; + createEffect(() => { + console.log('%c!!! WTF subscriptions:', 'color: #bada55', subscriptions); }) const value: FollowingContextType = { loading, subscriptions, setSubscriptions, - isOwnerSubscribed, setFollowing, loadSubscriptions: fetchData, follow, diff --git a/src/pages/types.ts b/src/pages/types.ts index af588d9f..dc4d7132 100644 --- a/src/pages/types.ts +++ b/src/pages/types.ts @@ -53,9 +53,4 @@ export type UploadedFile = { originalFilename?: string } -export type FollowedInfo = { - value?: boolean - loaded?: boolean -} - export type SubscriptionFilter = 'all' | 'authors' | 'topics' | 'communities' From edf4400627abf3bd6a092a068b56872204c9f7f0 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Fri, 15 Mar 2024 17:55:37 +0300 Subject: [PATCH 05/12] Change follow logic --- .../AuthorBadge/AuthorBadge.module.scss | 26 +++++++++ .../Author/AuthorBadge/AuthorBadge.tsx | 51 +---------------- .../Author/AuthorCard/AuthorCard.tsx | 8 ++- .../Topic/TopicBadge/TopicBadge.tsx | 9 ++- src/components/Views/Author/Author.tsx | 57 +++++++++---------- .../ProfileSubscriptions.tsx | 2 - .../BadgeSubscribeButton.tsx | 53 ++++++++++------- src/context/following.tsx | 4 -- src/graphql/client/core.ts | 1 - 9 files changed, 100 insertions(+), 111 deletions(-) diff --git a/src/components/Author/AuthorBadge/AuthorBadge.module.scss b/src/components/Author/AuthorBadge/AuthorBadge.module.scss index 3c3b1366..ebd5d145 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss +++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss @@ -89,4 +89,30 @@ text-align: right; } } + + .actionButton { + border-radius: 0.8rem !important; + margin-right: 0 !important; + width: 9em; + + &.iconed { + padding: 6px !important; + min-width: 4rem; + width: unset; + + &:hover img { + filter: invert(1); + } + } + + &:hover { + .actionButtonLabel { + display: none; + } + + .actionButtonLabelHovered { + display: block; + } + } + } } diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx index 3342b5b8..6f0020ae 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.tsx +++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx @@ -15,7 +15,6 @@ import { CheckButton } from '../../_shared/CheckButton' import { ConditionalWrapper } from '../../_shared/ConditionalWrapper' import { Icon } from '../../_shared/Icon' import { Userpic } from '../Userpic' -import stylesButton from '../../_shared/Button/Button.module.scss' import styles from './AuthorBadge.module.scss' import { BadgeSubscribeButton } from "../../_shared/BadgeSubscribeButton"; @@ -131,56 +130,8 @@ export const AuthorBadge = (props: Props) => { handleFollowClick()} isSubscribed={isSubscribed()} + actionMessageType={subscribeInAction()?.slug === props.author.slug ? subscribeInAction().type : undefined} /> - {/*}*/} - {/*>*/} - {/* */} - {/* */} - {/* */} - {/* }*/} - {/* onClick={handleFollowClick}*/} - {/* isSubscribeButton={true}*/} - {/* class={clsx(styles.actionButton, {*/} - {/* [styles.iconed]: props.iconButtons,*/} - {/* [stylesButton.subscribed]: isSubscribed(),*/} - {/* })}*/} - {/* />*/} - {/* }*/} - {/* >*/} - {/* */} - {/* {t('Following')}*/} - {/* {t('Unfollow')}*/} - {/* */} - {/* }*/} - {/* >*/} - {/* */} - {/* */} - {/* }*/} - {/* onClick={handleFollowClick}*/} - {/* isSubscribeButton={true}*/} - {/* class={clsx(styles.actionButton, {*/} - {/* [styles.iconed]: props.iconButtons,*/} - {/* [stylesButton.subscribed]: isSubscribed(),*/} - {/* })}*/} - {/* />*/} - {/* */} - {/**/}
- +
diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index d4d37fde..9558cef9 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -3,7 +3,7 @@ import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/cor 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 { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount, on } from "solid-js"; import { useFollowing } from '../../../context/following' import { useLocalize } from '../../../context/localize' @@ -48,13 +48,11 @@ export const AuthorView = (props: Props) => { const [commented, setCommented] = createSignal() // current author - console.log('%c!!! :', 'color: #bada55', props.author) - const [author, setAuthor] = createSignal(props.author) + // const [author, _] = createSignal(props.author) createEffect(async () => { - if (author()?.id && !author().stat) { - const a = await loadAuthor({ slug: '', author_id: author().id }) - console.log('%c!!! A2:', 'color: #bada55', props.author) + if (props.author?.id && !props.author.stat) { + const a = await loadAuthor({ slug: '', author_id: props.author.id }) console.debug('[AuthorView] loaded author:', a) } }) @@ -63,14 +61,11 @@ export const AuthorView = (props: Props) => { const bioWrapperRef: { current: HTMLDivElement } = { current: null } const fetchData = async (author: Author) => { - console.log('%c!!! slug:', 'color: #bada55', author) try { const [subscriptionsResult, followersResult] = await Promise.all([ apiClient.getAuthorFollows({ author_id: author.id }), apiClient.getAuthorFollowers({ slug: author.slug }), ]) - console.log('%c!!! subscriptionsResult:', 'color: #bada55', subscriptionsResult) - console.log('%c!!! followersResult:', 'color: #bada55', followersResult) const { authors, topics } = subscriptionsResult setFollowing([...(authors || []), ...(topics || [])]) setFollowers(followersResult || []) @@ -99,7 +94,6 @@ export const AuthorView = (props: Props) => { } onMount(() => { - fetchData(author()) checkBioHeight() // pagination if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) { @@ -118,41 +112,46 @@ export const AuthorView = (props: Props) => { setCommented(data) } - createEffect(() => { - if (author()) { - fetchComments(author()) - } - }) + createEffect( + on( + () => props.author, + () => { + fetchData(props.author) + fetchComments(props.author) + }, + { defer: true }, + ), + ) const ogImage = createMemo(() => - author()?.pic - ? getImageUrl(author()?.pic, { width: 1200 }) + props.author?.pic + ? getImageUrl(props.author?.pic, { width: 1200 }) : getImageUrl('production/image/logo_image.png'), ) - const description = createMemo(() => getDescription(author()?.bio)) + const description = createMemo(() => getDescription(props.author?.bio)) const handleDeleteComment = (id: number) => { setCommented((prev) => prev.filter((comment) => comment.id !== id)) } return (
- - {author().name} + + {props.author.name} - + - +
- }> + }> <>
- +
@@ -161,16 +160,16 @@ export const AuthorView = (props: Props) => { {t('Publications')} - - {author().stat.shouts} + + {props.author.stat.shouts}
  • {t('Comments')} - - {author().stat.comments} + + {props.author.stat.comments}
  • @@ -206,7 +205,7 @@ export const AuthorView = (props: Props) => { class={styles.longBio} classList={{ [styles.longBioExpanded]: isBioExpanded() }} > -
    (bioContainerRef.current = el)} innerHTML={author().about} /> +
    (bioContainerRef.current = el)} innerHTML={props.author.about} />
    diff --git a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx index 82e2af19..6e1b4d8d 100644 --- a/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx +++ b/src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx @@ -27,8 +27,6 @@ export const ProfileSubscriptions = () => { const [searchQuery, setSearchQuery] = createSignal('') const fetchSubscriptions = async () => { - - console.log('%c!!! :', 'color: #bada55', 'Профайл fetchSubscriptions' ) try { const slug = author()?.slug const authorFollows = await apiClient.getAuthorFollows({ slug }) diff --git a/src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx b/src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx index d69e65f5..902f9e07 100644 --- a/src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx +++ b/src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx @@ -1,37 +1,46 @@ -import { clsx } from 'clsx' -import styles from './BadgeDubscribeButton.module.scss' +import { clsx } from "clsx"; +import styles from "./BadgeDubscribeButton.module.scss"; import { CheckButton } from "../CheckButton"; -import { Show } from "solid-js"; +import { createMemo, Show } from "solid-js"; import { Button } from "../Button"; import { Icon } from "../Icon"; import stylesButton from "../Button/Button.module.scss"; import { useLocalize } from "../../../context/localize"; +import { useFollowing } from "../../../context/following"; type Props = { - class?: string - isSubscribed: boolean - minimizeSubscribeButton?: boolean - action: () => void - iconButtons?: boolean -} + class?: string; + isSubscribed: boolean; + minimizeSubscribeButton?: boolean; + action: () => void; + iconButtons?: boolean; + actionMessageType?: "subscribe" | "unsubscribe"; +}; export const BadgeSubscribeButton = (props: Props) => { - const { t } = useLocalize() + const { t } = useLocalize(); + + const inActionText = createMemo(() => { + return props.actionMessageType === "subscribe" ? t("Subscribing...") : t("Unsubscribing..."); + }); return (
    } + fallback={} > + } @@ -45,16 +54,20 @@ export const BadgeSubscribeButton = (props: Props) => { } >
    - ) -} + ); +}; diff --git a/src/context/following.tsx b/src/context/following.tsx index 8edb6d1a..4dd9c4be 100644 --- a/src/context/following.tsx +++ b/src/context/following.tsx @@ -122,10 +122,6 @@ export const FollowingProvider = (props: { children: JSX.Element }) => { } } - createEffect(() => { - console.log('%c!!! WTF subscriptions:', 'color: #bada55', subscriptions); - }) - const value: FollowingContextType = { loading, subscriptions, diff --git a/src/graphql/client/core.ts b/src/graphql/client/core.ts index b9c77ab6..4cbe81c2 100644 --- a/src/graphql/client/core.ts +++ b/src/graphql/client/core.ts @@ -92,7 +92,6 @@ export const apiClient = { follow: async ({ what, slug }: { what: FollowingEntity; slug: string }) => { const response = await apiClient.private.mutation(followMutation, { what, slug }).toPromise() - console.log("!!! response FOLLOW AAAA:", 'background: #222; color: #bada55', response); return response.data.follow }, From d202845aab1ef62703f053d0378ba57a625a3690 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Fri, 15 Mar 2024 17:57:03 +0300 Subject: [PATCH 06/12] run fix checks --- .../Author/AuthorBadge/AuthorBadge.tsx | 14 +++-- .../Author/AuthorCard/AuthorCard.tsx | 24 ++++----- .../Topic/TopicBadge/TopicBadge.tsx | 14 +++-- src/components/Views/Author/Author.tsx | 2 +- .../BadgeSubscribeButton.tsx | 54 +++++++++---------- src/context/following.tsx | 26 +++++---- 6 files changed, 67 insertions(+), 67 deletions(-) diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx index 6f0020ae..bc7c3bbd 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.tsx +++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx @@ -10,13 +10,13 @@ import { Author, FollowingEntity } from '../../../graphql/schema/core.gen' import { router, useRouter } from '../../../stores/router' import { translit } from '../../../utils/ru2en' import { isCyrillic } from '../../../utils/translate' +import { BadgeSubscribeButton } from '../../_shared/BadgeSubscribeButton' import { Button } from '../../_shared/Button' import { CheckButton } from '../../_shared/CheckButton' import { ConditionalWrapper } from '../../_shared/ConditionalWrapper' import { Icon } from '../../_shared/Icon' import { Userpic } from '../Userpic' import styles from './AuthorBadge.module.scss' -import { BadgeSubscribeButton } from "../../_shared/BadgeSubscribeButton"; type Props = { author: Author @@ -36,8 +36,8 @@ export const AuthorBadge = (props: Props) => { const [isSubscribed, setIsSubscribed] = createSignal() createEffect(() => { - if(!subscriptions || !props.author) return - const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.author?.id); + if (!subscriptions || !props.author) return + const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.author?.id) setIsSubscribed(subscribed) }) @@ -73,7 +73,9 @@ export const AuthorBadge = (props: Props) => { const handleFollowClick = () => { requireAuthentication(() => { - isSubscribed() ? unfollow(FollowingEntity.Author, props.author.slug) : follow(FollowingEntity.Author, props.author.slug) + isSubscribed() + ? unfollow(FollowingEntity.Author, props.author.slug) + : follow(FollowingEntity.Author, props.author.slug) }, 'subscribe') } @@ -130,7 +132,9 @@ export const AuthorBadge = (props: Props) => { handleFollowClick()} isSubscribed={isSubscribed()} - actionMessageType={subscribeInAction()?.slug === props.author.slug ? subscribeInAction().type : undefined} + actionMessageType={ + subscribeInAction()?.slug === props.author.slug ? subscribeInAction().type : undefined + } />
    - ); -}; + ) +} diff --git a/src/context/following.tsx b/src/context/following.tsx index 4dd9c4be..2e2d1a44 100644 --- a/src/context/following.tsx +++ b/src/context/following.tsx @@ -1,8 +1,8 @@ -import { Accessor, JSX, createContext, createEffect, createSignal, useContext, createMemo } from "solid-js"; +import { Accessor, JSX, createContext, createEffect, createMemo, createSignal, useContext } from 'solid-js' import { createStore } from 'solid-js/store' import { apiClient } from '../graphql/client/core' -import { Author, AuthorFollows, Community, FollowingEntity, Topic } from "../graphql/schema/core.gen"; +import { Author, AuthorFollows, Community, FollowingEntity, Topic } from '../graphql/schema/core.gen' import { useSession } from './session' @@ -60,24 +60,23 @@ export const FollowingProvider = (props: { children: JSX.Element }) => { } createEffect(() => { - console.info('[context.following] subs:', subscriptions); + console.info('[context.following] subs:', subscriptions) }) - const follow = async (what: FollowingEntity, slug: string) => { - if (!author()) return; - setSubscribeInAction({ slug, type: 'subscribe' }); + if (!author()) return + setSubscribeInAction({ slug, type: 'subscribe' }) try { - const subscriptionData = await apiClient.follow({ what, slug }); + const subscriptionData = await apiClient.follow({ what, slug }) setSubscriptions((prevSubscriptions) => { - if (!prevSubscriptions[what]) prevSubscriptions[what] = []; - prevSubscriptions[what].push(subscriptionData); - return prevSubscriptions; - }); + if (!prevSubscriptions[what]) prevSubscriptions[what] = [] + prevSubscriptions[what].push(subscriptionData) + return prevSubscriptions + }) } catch (error) { - console.error(error); + console.error(error) } finally { - setSubscribeInAction(); // Сбрасываем состояние действия подписки. + setSubscribeInAction() // Сбрасываем состояние действия подписки. } } @@ -93,7 +92,6 @@ export const FollowingProvider = (props: { children: JSX.Element }) => { } } - createEffect(() => { if (author()) { console.debug('[context.following] author update detect') From 00a043683510a42bf52df311d9da78c496371b58 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Fri, 15 Mar 2024 17:58:34 +0300 Subject: [PATCH 07/12] cleanup code --- src/components/AuthorsList/AuthorsList.tsx | 9 +-------- src/components/Feed/Beside.tsx | 8 +------- src/components/Views/AllTopics/AllTopics.tsx | 6 ------ 3 files changed, 2 insertions(+), 21 deletions(-) diff --git a/src/components/AuthorsList/AuthorsList.tsx b/src/components/AuthorsList/AuthorsList.tsx index ccde9a92..ab48bae5 100644 --- a/src/components/AuthorsList/AuthorsList.tsx +++ b/src/components/AuthorsList/AuthorsList.tsx @@ -21,7 +21,6 @@ const PAGE_SIZE = 20 export const AuthorsList = (props: Props) => { const { t } = useLocalize() - const { isOwnerSubscribed } = useFollowing() const { authorsByShouts, authorsByFollowers } = useAuthorsStore() const [loading, setLoading] = createSignal(false) const [currentPage, setCurrentPage] = createSignal({ shouts: 0, followers: 0 }) @@ -83,13 +82,7 @@ export const AuthorsList = (props: Props) => { {(author) => (
    - +
    )} diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx index 87dc462e..06a3c3e2 100644 --- a/src/components/Feed/Beside.tsx +++ b/src/components/Feed/Beside.tsx @@ -30,7 +30,6 @@ type Props = { export const Beside = (props: Props) => { const { t } = useLocalize() - const { isOwnerSubscribed } = useFollowing() return ( 0}> @@ -86,12 +85,7 @@ export const Beside = (props: Props) => { /> - + { return keys }) - const { isOwnerSubscribed } = useFollowing() - const showMore = () => setLimit((oldLimit) => oldLimit + PAGE_SIZE) const [searchQuery, setSearchQuery] = createSignal('') const filteredResults = createMemo(() => { @@ -190,10 +188,6 @@ export const AllTopics = (props: Props) => { <> 0, - value: isOwnerSubscribed(topic.slug), - }} showStat={true} /> From dd4065036f23153fe31df0de9bafb7c975fab871 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Fri, 15 Mar 2024 18:24:33 +0300 Subject: [PATCH 08/12] cleanup code --- src/components/AuthorsList/AuthorsList.tsx | 2 +- src/components/Feed/Beside.tsx | 2 +- src/components/Topic/Card.tsx | 28 +++++++++++-------- .../Topic/TopicBadge/TopicBadge.tsx | 4 +-- src/components/Views/AllTopics/AllTopics.tsx | 5 +--- 5 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/components/AuthorsList/AuthorsList.tsx b/src/components/AuthorsList/AuthorsList.tsx index ab48bae5..e4e014ae 100644 --- a/src/components/AuthorsList/AuthorsList.tsx +++ b/src/components/AuthorsList/AuthorsList.tsx @@ -82,7 +82,7 @@ export const AuthorsList = (props: Props) => { {(author) => (
    - +
    )} diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx index 06a3c3e2..2d3a7caa 100644 --- a/src/components/Feed/Beside.tsx +++ b/src/components/Feed/Beside.tsx @@ -85,7 +85,7 @@ export const Beside = (props: Props) => { />     - + { capitalize(lang() === 'en' ? props.topic.slug.replaceAll('-', ' ') : props.topic.title || ''), ) const { author, requireAuthentication } = useSession() - const { setFollowing, loading: subLoading } = useFollowing() - const [followed, setFollowed] = createSignal() + const [isSubscribed, setIsSubscribed] = createSignal() + const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing() + + createEffect(() => { + if (!subscriptions || !props.topic) return + const subscribed = subscriptions.topics?.some((topics) => topics.id === props.topic?.id) + setIsSubscribed(subscribed) + }) const handleFollowClick = () => { - const value = !followed() requireAuthentication(() => { - setFollowed(value) - setFollowing(FollowingEntity.Topic, props.topic.slug, value) + follow(FollowingEntity.Topic, props.topic.slug) }, 'subscribe') } @@ -53,12 +57,12 @@ export const TopicCard = (props: TopicProps) => { return ( <> - + - + {t('Unfollow')} {t('Following')} @@ -130,7 +134,7 @@ export const TopicCard = (props: TopicProps) => { fallback={ } @@ -142,10 +146,10 @@ export const TopicCard = (props: TopicProps) => { onClick={handleFollowClick} isSubscribeButton={true} class={clsx(styles.actionButton, { - [styles.isSubscribing]: subLoading(), - [stylesButton.subscribed]: followed(), + [styles.isSubscribing]: + subscribeInAction()?.slug === props.topic.slug ? subscribeInAction().type : undefined, + [stylesButton.subscribed]: isSubscribed(), })} - // disabled={subLoading()} /> diff --git a/src/components/Topic/TopicBadge/TopicBadge.tsx b/src/components/Topic/TopicBadge/TopicBadge.tsx index fd292abc..47a27dcb 100644 --- a/src/components/Topic/TopicBadge/TopicBadge.tsx +++ b/src/components/Topic/TopicBadge/TopicBadge.tsx @@ -9,8 +9,6 @@ import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen' import { capitalize } from '../../../utils/capitalize' import { getImageUrl } from '../../../utils/getImageUrl' import { BadgeSubscribeButton } from '../../_shared/BadgeSubscribeButton' -import { Button } from '../../_shared/Button' -import { CheckButton } from '../../_shared/CheckButton' import styles from './TopicBadge.module.scss' type Props = { @@ -29,7 +27,7 @@ export const TopicBadge = (props: Props) => { createEffect(() => { if (!subscriptions || !props.topic) return - const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.topic?.id) + const subscribed = subscriptions.topics?.some((topics) => topics.id === props.topic?.id) setIsSubscribed(subscribed) }) diff --git a/src/components/Views/AllTopics/AllTopics.tsx b/src/components/Views/AllTopics/AllTopics.tsx index 636b9310..20e14709 100644 --- a/src/components/Views/AllTopics/AllTopics.tsx +++ b/src/components/Views/AllTopics/AllTopics.tsx @@ -186,10 +186,7 @@ export const AllTopics = (props: Props) => { {(topic) => ( <> - + )} From 8d78ba2c627306ade18f34d616862d3b90ca03c1 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Fri, 15 Mar 2024 19:42:55 +0300 Subject: [PATCH 09/12] fix preload author --- src/components/Views/Author/Author.tsx | 62 ++++++++++++++------------ 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index b5c82c0e..6ca91c66 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -48,11 +48,19 @@ export const AuthorView = (props: Props) => { const [commented, setCommented] = createSignal() // current author - // const [author, _] = createSignal(props.author) + const [author, setAuthor] = createSignal() + createEffect(() => { + try { + const a = authorEntities()[props.authorSlug] + setAuthor(a) + } catch (error) { + console.debug(error) + } + }) createEffect(async () => { - if (props.author?.id && !props.author.stat) { - const a = await loadAuthor({ slug: '', author_id: props.author.id }) + if (author()?.id && !author().stat) { + const a = await loadAuthor({ slug: '', author_id: author().id }) console.debug('[AuthorView] loaded author:', a) } }) @@ -112,46 +120,42 @@ export const AuthorView = (props: Props) => { setCommented(data) } - createEffect( - on( - () => props.author, - () => { - fetchData(props.author) - fetchComments(props.author) - }, - { defer: true }, - ), - ) + createEffect(() => { + if (author()) { + fetchData(author()) + fetchComments(author()) + } + }) const ogImage = createMemo(() => - props.author?.pic - ? getImageUrl(props.author?.pic, { width: 1200 }) + author()?.pic + ? getImageUrl(author()?.pic, { width: 1200 }) : getImageUrl('production/image/logo_image.png'), ) - const description = createMemo(() => getDescription(props.author?.bio)) + const description = createMemo(() => getDescription(author()?.bio)) const handleDeleteComment = (id: number) => { setCommented((prev) => prev.filter((comment) => comment.id !== id)) } return (
    - - {props.author.name} + + {author().name} - + - +
    - }> + }> <>
    - +
    @@ -160,16 +164,16 @@ export const AuthorView = (props: Props) => { {t('Publications')} - - {props.author.stat.shouts} + + {author().stat.shouts}
  • {t('Comments')} - - {props.author.stat.comments} + + {author().stat.comments}
  • @@ -183,10 +187,10 @@ export const AuthorView = (props: Props) => {
    • - +
    {t('All posts rating')} - +
    @@ -205,7 +209,7 @@ export const AuthorView = (props: Props) => { class={styles.longBio} classList={{ [styles.longBioExpanded]: isBioExpanded() }} > -
    (bioContainerRef.current = el)} innerHTML={props.author.about} /> +
    (bioContainerRef.current = el)} innerHTML={author().about} />
    From c80b2f044ac8c2953af1d3cacf490de5445f3a72 Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Thu, 21 Mar 2024 15:48:54 +0300 Subject: [PATCH 10/12] Merge dev --- src/components/Views/Author/Author.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index a592f433..e0fd82e8 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -23,10 +23,10 @@ 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 { hideModal, MODALS } from "../../../stores/ui"; type Props = { shouts: Shout[] From 23326b10f77403d956b28ca7cfa1b66b5029cdb4 Mon Sep 17 00:00:00 2001 From: Untone Date: Thu, 25 Apr 2024 13:53:51 +0300 Subject: [PATCH 11/12] postmerge-fix --- src/components/Views/Author/Author.tsx | 4 ++-- src/context/following.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Views/Author/Author.tsx b/src/components/Views/Author/Author.tsx index df63b945..ca2cdd0c 100644 --- a/src/components/Views/Author/Author.tsx +++ b/src/components/Views/Author/Author.tsx @@ -75,7 +75,7 @@ export const AuthorView = (props: Props) => { const bioContainerRef: { current: HTMLDivElement } = { current: null } const bioWrapperRef: { current: HTMLDivElement } = { current: null } - const fetchData = async (author: Author) => { + const fetchData = async (slug: string) => { try { const [subscriptionsResult, followersResult, authorResult] = await Promise.all([ apiClient.getAuthorFollows({ slug }), @@ -134,7 +134,7 @@ export const AuthorView = (props: Props) => { createEffect(() => { if (author()) { - fetchData(author()) + fetchData(author().slug) fetchComments(author()) } }) diff --git a/src/context/following.tsx b/src/context/following.tsx index a6b07a03..8fd07cba 100644 --- a/src/context/following.tsx +++ b/src/context/following.tsx @@ -2,7 +2,7 @@ import { Accessor, JSX, createContext, createEffect, createMemo, createSignal, u import { createStore } from 'solid-js/store' import { apiClient } from '../graphql/client/core' -import { Author, AuthorFollowsResult, FollowingEntity } from '../graphql/schema/core.gen' +import { Author, AuthorFollowsResult, FollowingEntity, Community, Topic } from '../graphql/schema/core.gen' import { useSession } from './session' @@ -64,6 +64,7 @@ export const FollowingProvider = (props: { children: JSX.Element }) => { console.info('[context.following] subs:', subscriptions) }) + const [subscribeInAction, setSubscribeInAction] = createSignal() const follow = async (what: FollowingEntity, slug: string) => { if (!author()) return setSubscribeInAction({ slug, type: 'subscribe' }) From 84fb665f9db0489fdf0795157e3dad9d7c18883e Mon Sep 17 00:00:00 2001 From: Untone Date: Thu, 25 Apr 2024 13:55:58 +0300 Subject: [PATCH 12/12] postmerge-fix-2 --- src/context/following.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/context/following.tsx b/src/context/following.tsx index 8fd07cba..7859102b 100644 --- a/src/context/following.tsx +++ b/src/context/following.tsx @@ -2,7 +2,7 @@ import { Accessor, JSX, createContext, createEffect, createMemo, createSignal, u import { createStore } from 'solid-js/store' import { apiClient } from '../graphql/client/core' -import { Author, AuthorFollowsResult, FollowingEntity, Community, Topic } from '../graphql/schema/core.gen' +import { Author, AuthorFollowsResult, Community, FollowingEntity, Topic } from '../graphql/schema/core.gen' import { useSession } from './session'