From 5c4d6057244e49c4711f9b7425cecf3daf53820f Mon Sep 17 00:00:00 2001 From: ilya-bkv Date: Fri, 15 Mar 2024 15:58:22 +0300 Subject: [PATCH] [WIP] --- .../AuthorBadge/AuthorBadge.module.scss | 30 ---- .../Author/AuthorBadge/AuthorBadge.tsx | 128 +++++++++--------- .../Author/AuthorCard/AuthorCard.tsx | 40 ++---- .../Topic/TopicBadge/TopicBadge.tsx | 55 ++------ .../BadgeDubscribeButton.module.scss | 29 ++++ .../BadgeSubscribeButton.tsx | 74 ++++++++++ .../_shared/BadgeSubscribeButton/index.ts | 1 + src/context/following.tsx | 22 +-- src/pages/types.ts | 5 - 9 files changed, 193 insertions(+), 191 deletions(-) create mode 100644 src/components/_shared/BadgeSubscribeButton/BadgeDubscribeButton.module.scss create mode 100644 src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx create mode 100644 src/components/_shared/BadgeSubscribeButton/index.ts diff --git a/src/components/Author/AuthorBadge/AuthorBadge.module.scss b/src/components/Author/AuthorBadge/AuthorBadge.module.scss index 8dc68f4b..3c3b1366 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss +++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss @@ -89,34 +89,4 @@ 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; - } - } - } - - .actionButtonLabelHovered { - display: none; - } } diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx index e0ef0334..3342b5b8 100644 --- a/src/components/Author/AuthorBadge/AuthorBadge.tsx +++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx @@ -15,10 +15,9 @@ import { CheckButton } from '../../_shared/CheckButton' import { ConditionalWrapper } from '../../_shared/ConditionalWrapper' import { Icon } from '../../_shared/Icon' import { Userpic } from '../Userpic' - -import { FollowedInfo } from '../../../pages/types' import stylesButton from '../../_shared/Button/Button.module.scss' import styles from './AuthorBadge.module.scss' +import { BadgeSubscribeButton } from "../../_shared/BadgeSubscribeButton"; type Props = { author: Author @@ -29,13 +28,19 @@ type Props = { inviteView?: boolean onInvite?: (id: number) => void selected?: boolean - isFollowed?: FollowedInfo } export const AuthorBadge = (props: Props) => { const { mediaMatches } = useMediaQuery() const { author, requireAuthentication } = useSession() + const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing() const [isMobileView, setIsMobileView] = createSignal(false) - const [isFollowed, setIsFollowed] = createSignal() + const [isSubscribed, setIsSubscribed] = createSignal() + + createEffect(() => { + if(!subscriptions || !props.author) return + const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.author?.id); + setIsSubscribed(subscribed) + }) createEffect(() => { setIsMobileView(!mediaMatches.sm) @@ -67,20 +72,9 @@ export const AuthorBadge = (props: Props) => { return props.author.name }) - createEffect( - on( - () => props.isFollowed, - () => { - setIsFollowed(props.isFollowed?.value) - }, - ), - ) - const handleFollowClick = () => { - const value = !isFollowed() requireAuthentication(() => { - setIsFollowed(value) - setFollowing(FollowingEntity.Author, props.author.slug, value) + isSubscribed() ? unfollow(FollowingEntity.Author, props.author.slug) : follow(FollowingEntity.Author, props.author.slug) }, 'subscribe') } @@ -134,55 +128,59 @@ export const AuthorBadge = (props: Props) => {
- } - > - - - - } - 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'