2023-10-04 19:04:09 +00:00
|
|
|
import { clsx } from 'clsx'
|
|
|
|
import styles from './AuthorBadge.module.scss'
|
2023-11-08 20:52:56 +00:00
|
|
|
import stylesButton from '../../_shared/Button/Button.module.scss'
|
2023-10-04 19:04:09 +00:00
|
|
|
import { Userpic } from '../Userpic'
|
|
|
|
import { Author, FollowingEntity } from '../../../graphql/types.gen'
|
2023-10-09 09:14:41 +00:00
|
|
|
import { createMemo, createSignal, Match, Show, Switch } from 'solid-js'
|
2023-10-04 19:04:09 +00:00
|
|
|
import { useLocalize } from '../../../context/localize'
|
|
|
|
import { Button } from '../../_shared/Button'
|
|
|
|
import { useSession } from '../../../context/session'
|
|
|
|
import { follow, unfollow } from '../../../stores/zine/common'
|
|
|
|
import { CheckButton } from '../../_shared/CheckButton'
|
2023-10-20 16:21:40 +00:00
|
|
|
import { openPage } from '@nanostores/router'
|
|
|
|
import { router, useRouter } from '../../../stores/router'
|
|
|
|
import { Icon } from '../../_shared/Icon'
|
2023-10-04 19:04:09 +00:00
|
|
|
|
|
|
|
type Props = {
|
|
|
|
author: Author
|
|
|
|
minimizeSubscribeButton?: boolean
|
2023-10-20 16:21:40 +00:00
|
|
|
showMessageButton?: boolean
|
|
|
|
iconButtons?: boolean
|
2023-11-01 08:34:59 +00:00
|
|
|
nameOnly?: boolean
|
2023-10-04 19:04:09 +00:00
|
|
|
}
|
|
|
|
export const AuthorBadge = (props: Props) => {
|
|
|
|
const [isSubscribing, setIsSubscribing] = createSignal(false)
|
|
|
|
const {
|
|
|
|
session,
|
2023-10-19 15:05:22 +00:00
|
|
|
subscriptions,
|
|
|
|
actions: { loadSubscriptions, requireAuthentication }
|
2023-10-04 19:04:09 +00:00
|
|
|
} = useSession()
|
2023-10-20 16:21:40 +00:00
|
|
|
const { changeSearchParam } = useRouter()
|
2023-10-18 10:56:41 +00:00
|
|
|
const { t, formatDate } = useLocalize()
|
2023-10-19 15:05:22 +00:00
|
|
|
const subscribed = createMemo(() =>
|
|
|
|
subscriptions().authors.some((author) => author.slug === props.author.slug)
|
|
|
|
)
|
2023-10-04 19:04:09 +00:00
|
|
|
|
|
|
|
const subscribe = async (really = true) => {
|
|
|
|
setIsSubscribing(true)
|
|
|
|
|
|
|
|
await (really
|
|
|
|
? follow({ what: FollowingEntity.Author, slug: props.author.slug })
|
|
|
|
: unfollow({ what: FollowingEntity.Author, slug: props.author.slug }))
|
|
|
|
|
2023-10-19 15:05:22 +00:00
|
|
|
await loadSubscriptions()
|
2023-10-04 19:04:09 +00:00
|
|
|
setIsSubscribing(false)
|
|
|
|
}
|
2023-10-05 04:24:01 +00:00
|
|
|
const handleSubscribe = (really: boolean) => {
|
|
|
|
requireAuthentication(() => {
|
|
|
|
subscribe(really)
|
|
|
|
}, 'subscribe')
|
|
|
|
}
|
2023-10-04 19:04:09 +00:00
|
|
|
|
2023-10-20 16:21:40 +00:00
|
|
|
const initChat = () => {
|
|
|
|
requireAuthentication(() => {
|
|
|
|
openPage(router, `inbox`)
|
|
|
|
changeSearchParam({
|
|
|
|
initChat: props.author.id.toString()
|
|
|
|
})
|
|
|
|
}, 'discussions')
|
|
|
|
}
|
|
|
|
const subscribeValue = createMemo(() => {
|
|
|
|
if (props.iconButtons) {
|
2023-11-11 14:27:29 +00:00
|
|
|
return <Icon name="author-subscribe" class={stylesButton.icon} />
|
2023-10-20 16:21:40 +00:00
|
|
|
}
|
2023-11-02 22:02:11 +00:00
|
|
|
return isSubscribing() ? t('subscribing...') : t('Subscribe')
|
2023-10-20 16:21:40 +00:00
|
|
|
})
|
|
|
|
|
2023-11-13 18:56:47 +00:00
|
|
|
const unsubscribeValue = createMemo(() => {
|
2023-11-02 22:02:11 +00:00
|
|
|
if (props.iconButtons) {
|
2023-11-11 14:27:29 +00:00
|
|
|
return <Icon name="author-unsubscribe" class={stylesButton.icon} />
|
2023-11-02 22:02:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<span class={styles.actionButtonLabel}>{t('Following')}</span>
|
|
|
|
<span class={styles.actionButtonLabelHovered}>{t('Unfollow')}</span>
|
|
|
|
</>
|
|
|
|
)
|
2023-11-13 18:56:47 +00:00
|
|
|
})
|
2023-11-02 22:02:11 +00:00
|
|
|
|
2023-10-04 19:04:09 +00:00
|
|
|
return (
|
2023-11-01 08:34:59 +00:00
|
|
|
<div class={clsx(styles.AuthorBadge, { [styles.nameOnly]: props.nameOnly })}>
|
2023-11-06 08:00:31 +00:00
|
|
|
<div class={styles.basicInfo}>
|
|
|
|
<Userpic
|
|
|
|
hasLink={true}
|
|
|
|
size={'M'}
|
|
|
|
name={props.author.name}
|
|
|
|
userpic={props.author.userpic}
|
|
|
|
slug={props.author.slug}
|
|
|
|
/>
|
|
|
|
<a href={`/author/${props.author.slug}`} class={styles.info}>
|
|
|
|
<div class={styles.name}>
|
|
|
|
<span>{props.author.name}</span>
|
|
|
|
</div>
|
|
|
|
<Show when={!props.nameOnly}>
|
|
|
|
<Switch
|
|
|
|
fallback={
|
|
|
|
<div class={styles.bio}>
|
|
|
|
{t('Registered since {date}', { date: formatDate(new Date(props.author.createdAt)) })}
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<Match when={props.author.bio}>
|
|
|
|
<div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
|
|
|
|
</Match>
|
|
|
|
<Match when={props.author?.stat && props.author?.stat.shouts > 0}>
|
|
|
|
<div class={styles.bio}>
|
|
|
|
{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}
|
|
|
|
</div>
|
|
|
|
</Match>
|
|
|
|
</Switch>
|
|
|
|
</Show>
|
|
|
|
</a>
|
|
|
|
</div>
|
2023-11-01 08:34:59 +00:00
|
|
|
<Show when={props.author.slug !== session()?.user.slug && !props.nameOnly}>
|
2023-10-04 19:04:09 +00:00
|
|
|
<div class={styles.actions}>
|
|
|
|
<Show
|
|
|
|
when={!props.minimizeSubscribeButton}
|
|
|
|
fallback={
|
|
|
|
<CheckButton
|
|
|
|
text={t('Follow')}
|
|
|
|
checked={subscribed()}
|
2023-10-05 04:24:01 +00:00
|
|
|
onClick={() => handleSubscribe(!subscribed())}
|
2023-10-04 19:04:09 +00:00
|
|
|
/>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<Show
|
|
|
|
when={subscribed()}
|
|
|
|
fallback={
|
|
|
|
<Button
|
2023-10-20 16:21:40 +00:00
|
|
|
variant={props.iconButtons ? 'secondary' : 'bordered'}
|
2023-11-02 22:02:11 +00:00
|
|
|
size="M"
|
2023-10-20 16:21:40 +00:00
|
|
|
value={subscribeValue()}
|
2023-10-05 04:24:01 +00:00
|
|
|
onClick={() => handleSubscribe(true)}
|
2023-11-08 20:42:13 +00:00
|
|
|
isSubscribeButton={true}
|
2023-11-08 20:52:56 +00:00
|
|
|
class={clsx(styles.actionButton, {
|
|
|
|
[styles.iconed]: props.iconButtons,
|
|
|
|
[stylesButton.subscribed]: subscribed()
|
|
|
|
})}
|
2023-10-04 19:04:09 +00:00
|
|
|
/>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<Button
|
2023-10-20 16:21:40 +00:00
|
|
|
variant={props.iconButtons ? 'secondary' : 'bordered'}
|
2023-11-02 22:02:11 +00:00
|
|
|
size="M"
|
2023-11-03 06:05:34 +00:00
|
|
|
value={unsubscribeValue()}
|
2023-10-05 04:24:01 +00:00
|
|
|
onClick={() => handleSubscribe(false)}
|
2023-11-08 20:42:13 +00:00
|
|
|
isSubscribeButton={true}
|
2023-11-08 20:52:56 +00:00
|
|
|
class={clsx(styles.actionButton, {
|
|
|
|
[styles.iconed]: props.iconButtons,
|
|
|
|
[stylesButton.subscribed]: subscribed()
|
|
|
|
})}
|
2023-10-04 19:04:09 +00:00
|
|
|
/>
|
|
|
|
</Show>
|
|
|
|
</Show>
|
2023-10-20 16:21:40 +00:00
|
|
|
<Show when={props.showMessageButton}>
|
|
|
|
<Button
|
|
|
|
variant={props.iconButtons ? 'secondary' : 'bordered'}
|
2023-11-02 22:02:11 +00:00
|
|
|
size="M"
|
2023-10-20 16:21:40 +00:00
|
|
|
value={props.iconButtons ? <Icon name="inbox-white" /> : t('Message')}
|
|
|
|
onClick={initChat}
|
|
|
|
class={clsx(styles.actionButton, { [styles.iconed]: props.iconButtons })}
|
|
|
|
/>
|
|
|
|
</Show>
|
2023-10-04 19:04:09 +00:00
|
|
|
</div>
|
|
|
|
</Show>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|