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

Change follow logic

Browse Source
This commit is contained in:
ilya-bkv 2024-03-15 17:55:37 +03:00
parent 5c4d605724
commit edf4400627
9 changed files with 100 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Author/AuthorBadge/AuthorBadge.module.scss
View File

@ -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;
}
}
}
}

51
src/components/Author/AuthorBadge/AuthorBadge.tsx
View File

@ -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) => {
<BadgeSubscribeButton
action={() => handleFollowClick()}
isSubscribed={isSubscribed()}
actionMessageType={subscribeInAction()?.slug === props.author.slug ? subscribeInAction().type : undefined}
/>
{/*<Show*/}
{/* when={!props.minimizeSubscribeButton}*/}
{/* fallback={<CheckButton text={t('Follow')} checked={isSubscribed()} onClick={handleFollowClick} />}*/}
{/*>*/}
{/* <Show*/}
{/* when={isSubscribed()}*/}
{/* fallback={*/}
{/* <Button*/}
{/* variant={props.iconButtons ? 'secondary' : 'bordered'}*/}
{/* size="S"*/}
{/* value={*/}
{/* <Show when={props.iconButtons} fallback={t('Subscribe')}>*/}
{/* <Icon name="author-subscribe" class={stylesButton.icon} />*/}
{/* </Show>*/}
{/* }*/}
{/* onClick={handleFollowClick}*/}
{/* isSubscribeButton={true}*/}
{/* class={clsx(styles.actionButton, {*/}
{/* [styles.iconed]: props.iconButtons,*/}
{/* [stylesButton.subscribed]: isSubscribed(),*/}
{/* })}*/}
{/* />*/}
{/* }*/}
{/* >*/}
{/* <Button*/}
{/* variant={props.iconButtons ? 'secondary' : 'bordered'}*/}
{/* size="S"*/}
{/* value={*/}
{/* <Show*/}
{/* when={props.iconButtons}*/}
{/* fallback={*/}
{/* <>*/}
{/* <span class={styles.actionButtonLabel}>{t('Following')}</span>*/}
{/* <span class={styles.actionButtonLabelHovered}>{t('Unfollow')}</span>*/}
{/* </>*/}
{/* }*/}
{/* >*/}
{/* <Icon name="author-unsubscribe" class={stylesButton.icon} />*/}
{/* </Show>*/}
{/* }*/}
{/* onClick={handleFollowClick}*/}
{/* isSubscribeButton={true}*/}
{/* class={clsx(styles.actionButton, {*/}
{/* [styles.iconed]: props.iconButtons,*/}
{/* [stylesButton.subscribed]: isSubscribed(),*/}
{/* })}*/}
{/* />*/}
{/* </Show>*/}
{/*</Show>*/}
<Show when={props.showMessageButton}>
<Button
variant={props.iconButtons ? 'secondary' : 'bordered'}

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

@ -296,9 +296,13 @@ export const AuthorCard = (props: Props) => {
<For each={authorSubs()}>
{(subscription) =>
isAuthor(subscription) ? (
<AuthorBadge author={subscription} />
<AuthorBadge
author={subscription}
/>
) : (
<TopicBadge topic={subscription}/>
<TopicBadge
topic={subscription}
/>
)
}
</For>

9
src/components/Topic/TopicBadge/TopicBadge.tsx
View File

@ -24,7 +24,6 @@ export const TopicBadge = (props: Props) => {
const { mediaMatches } = useMediaQuery()
const [isMobileView, setIsMobileView] = createSignal(false)
const { requireAuthentication } = useSession()
const { setFollowing, loading: subLoading } = useFollowing()
const [isSubscribed, setIsSubscribed] = createSignal<boolean>()
const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
@ -36,7 +35,7 @@ export const TopicBadge = (props: Props) => {
const handleFollowClick = () => {
requireAuthentication(() => {
follow(FollowingEntity.Topic, props.topic.slug)
isSubscribed() ? follow(FollowingEntity.Topic, props.topic.slug) : unfollow(FollowingEntity.Topic, props.topic.slug)
}, 'subscribe')
}
@ -78,7 +77,11 @@ export const TopicBadge = (props: Props) => {
</a>
</div>
<div class={styles.actions}>
<BadgeSubscribeButton isSubscribed={isSubscribed()} action={handleFollowClick}/>
<BadgeSubscribeButton
isSubscribed={isSubscribed()}
action={handleFollowClick}
actionMessageType={subscribeInAction()?.slug === props.topic.slug ? subscribeInAction().type : undefined}
/>
</div>
</div>
<div class={styles.stats}>

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

@ -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<Reaction[]>()
// current author
console.log('%c!!! :', 'color: #bada55', props.author)
const [author, setAuthor] = createSignal<Author>(props.author)
// const [author, _] = createSignal<Author>(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 (
<div class={styles.authorPage}>
<Show when={author()}>
<Title>{author().name}</Title>
<Show when={props.author}>
<Title>{props.author.name}</Title>
<Meta name="descprition" content={description()} />
<Meta name="og:type" content="profile" />
<Meta name="og:title" content={author().name} />
<Meta name="og:title" content={props.author.name} />
<Meta name="og:image" content={ogImage()} />
<Meta name="og:description" content={description()} />
<Meta name="twitter:card" content="summary_large_image" />
<Meta name="twitter:title" content={author().name} />
<Meta name="twitter:title" content={props.author.name} />
<Meta name="twitter:description" content={description()} />
<Meta name="twitter:image" content={ogImage()} />
</Show>
<div class="wide-container">
<Show when={author()} fallback={<Loading />}>
<Show when={props.author} fallback={<Loading />}>
<>
<div class={styles.authorHeader}>
<AuthorCard author={author()} followers={followers()} following={following()} />
<AuthorCard author={props.author} followers={followers()} following={following()} />
</div>
<div class={clsx(styles.groupControls, 'row')}>
<div class="col-md-16">
@ -161,16 +160,16 @@ export const AuthorView = (props: Props) => {
<a href={getPagePath(router, 'author', { slug: props.authorSlug })}>
{t('Publications')}
</a>
<Show when={author().stat}>
<span class="view-switcher__counter">{author().stat.shouts}</span>
<Show when={props.author.stat}>
<span class="view-switcher__counter">{props.author.stat.shouts}</span>
</Show>
</li>
<li classList={{ 'view-switcher__item--selected': getPage().route === 'authorComments' }}>
<a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
{t('Comments')}
</a>
<Show when={author().stat}>
<span class="view-switcher__counter">{author().stat.comments}</span>
<Show when={props.author.stat}>
<span class="view-switcher__counter">{props.author.stat.comments}</span>
</Show>
</li>
<li classList={{ 'view-switcher__item--selected': getPage().route === 'authorAbout' }}>
@ -206,7 +205,7 @@ export const AuthorView = (props: Props) => {
class={styles.longBio}
classList={{ [styles.longBioExpanded]: isBioExpanded() }}
>
<div ref={(el) => (bioContainerRef.current = el)} innerHTML={author().about} />
<div ref={(el) => (bioContainerRef.current = el)} innerHTML={props.author.about} />
</div>
<Show when={showExpandBioControl()}>

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

@ -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 })

53
src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx
View File

@ -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 (
<div class={props.class}>
<Show
when={!props.minimizeSubscribeButton}
fallback={<CheckButton text={t('Follow')} checked={props.isSubscribed} onClick={props.action} />}
fallback={<CheckButton text={t("Follow")} checked={props.isSubscribed} onClick={props.action} />}
>
<Show
when={props.isSubscribed}
fallback={
<Button
variant={props.iconButtons ? 'secondary' : 'bordered'}
variant={props.iconButtons ? "secondary" : "bordered"}
size="S"
value={
<Show when={props.iconButtons} fallback={t('Subscribe')}>
<Show
when={props.iconButtons}
fallback={props.actionMessageType ? inActionText() : t("Subscribe")}
>
<Icon name="author-subscribe" class={stylesButton.icon} />
</Show>
}
@ -45,16 +54,20 @@ export const BadgeSubscribeButton = (props: Props) => {
}
>
<Button
variant={props.iconButtons ? 'secondary' : 'bordered'}
variant={props.iconButtons ? "secondary" : "bordered"}
size="S"
value={
<Show
when={props.iconButtons}
fallback={
<>
<span class={styles.actionButtonLabel}>{t('Following')}</span>
<span class={styles.actionButtonLabelHovered}>{t('Unfollow')}</span>
</>
props.actionMessageType ? (
inActionText()
) : (
<>
<span class={styles.actionButtonLabel}>{t("Following")}</span>
<span class={styles.actionButtonLabelHovered}>{t("Unfollow")}</span>
</>
)
}
>
<Icon name="author-unsubscribe" class={stylesButton.icon} />
@ -70,5 +83,5 @@ export const BadgeSubscribeButton = (props: Props) => {
</Show>
</Show>
</div>
)
}
);
};

4
src/context/following.tsx
View File

@ -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,

1
src/graphql/client/core.ts
View File

@ -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
},