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

[WIP]

Browse Source
This commit is contained in:
ilya-bkv 2024-03-15 15:58:22 +03:00
parent b44008b229
commit 5c4d605724
9 changed files with 193 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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<boolean>()
const [isSubscribed, setIsSubscribed] = createSignal<boolean>()
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) => {
</div>
<Show when={props.author.slug !== author()?.slug && !props.nameOnly}>
<div class={styles.actions}>
<Show
when={!props.minimizeSubscribeButton}
fallback={<CheckButton text={t('Follow')} checked={isFollowed()} onClick={handleFollowClick} />}
>
<Show
when={isFollowed()}
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]: isFollowed(),
})}
/>
}
>
<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]: isFollowed(),
})}
/>
</Show>
</Show>
<BadgeSubscribeButton
action={() => handleFollowClick()}
isSubscribed={isSubscribed()}
/>
{/*<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'}

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

@ -34,17 +34,18 @@ export const AuthorCard = (props: Props) => {
const { author, isSessionLoaded, requireAuthentication } = useSession()
const [authorSubs, setAuthorSubs] = createSignal<Array<Author | Topic | Community>>([])
const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
const [isSubscribed, setIsSubscribed] = createSignal<boolean>()
const isProfileOwner = createMemo(() => author()?.slug === props.author.slug)
const { follow, isOwnerSubscribed, subscribeInAction } = useFollowing()
const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
onMount(() => {
setAuthorSubs(props.following)
})
const isSubscribed = isOwnerSubscribed(props.author?.id)
createEffect(() => {
console.log('%c!!! isSubscribed:', 'color: #bada55', isSubscribed())
if(!subscriptions || !props.author) return
const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.author?.id);
setIsSubscribed(subscribed)
})
const name = createMemo(() => {
@ -83,18 +84,13 @@ export const AuthorCard = (props: Props) => {
}
})
createEffect(() => {
console.log("!!! subscribeInAction:", subscribeInAction());
})
const handleFollowClick = () => {
console.log("!!! handleFollowClick:");
requireAuthentication(() => {
follow(FollowingEntity.Author, props.author.slug)
isSubscribed() ? unfollow(FollowingEntity.Author, props.author.slug) : 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...')
}
@ -256,13 +252,7 @@ export const AuthorCard = (props: Props) => {
<div class="col-24">
<For each={props.followers}>
{(follower: Author) => (
<AuthorBadge
author={follower}
isFollowed={{
loaded: Boolean(authorSubs()),
value: isSubscribed(),
}}
/>
<AuthorBadge author={follower}/>
)}
</For>
</div>
@ -306,21 +296,9 @@ export const AuthorCard = (props: Props) => {
<For each={authorSubs()}>
{(subscription) =>
isAuthor(subscription) ? (
<AuthorBadge
isFollowed={{
loaded: Boolean(authorSubs()),
value: isSubscribed(),
}}
author={subscription}
/>
<AuthorBadge author={subscription} />
) : (
<TopicBadge
isFollowed={{
loaded: Boolean(authorSubs()),
value: isSubscribed(),
}}
topic={subscription}
/>
<TopicBadge topic={subscription}/>
)
}
</For>

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

@ -10,14 +10,12 @@ import { capitalize } from '../../../utils/capitalize'
import { getImageUrl } from '../../../utils/getImageUrl'
import { Button } from '../../_shared/Button'
import { CheckButton } from '../../_shared/CheckButton'
import { FollowedInfo } from '../../../pages/types'
import styles from './TopicBadge.module.scss'
import { BadgeSubscribeButton } from "../../_shared/BadgeSubscribeButton";
type Props = {
topic: Topic
minimizeSubscribeButton?: boolean
isFollowed?: FollowedInfo
showStat?: boolean
}
@ -27,13 +25,18 @@ export const TopicBadge = (props: Props) => {
const [isMobileView, setIsMobileView] = createSignal(false)
const { requireAuthentication } = useSession()
const { setFollowing, loading: subLoading } = useFollowing()
const [isFollowed, setIsFollowed] = createSignal<boolean>()
const [isSubscribed, setIsSubscribed] = createSignal<boolean>()
const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
createEffect(() => {
if(!subscriptions || !props.topic) return
const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.topic?.id);
setIsSubscribed(subscribed)
})
const handleFollowClick = () => {
const value = !isFollowed()
requireAuthentication(() => {
setIsFollowed(value)
setFollowing(FollowingEntity.Topic, props.topic.slug, value)
follow(FollowingEntity.Topic, props.topic.slug)
}, 'subscribe')
}
@ -41,15 +44,6 @@ export const TopicBadge = (props: Props) => {
setIsMobileView(!mediaMatches.sm)
})
createEffect(
on(
() => props.isFollowed,
() => {
setIsFollowed(props.isFollowed.value)
},
),
)
const title = () =>
lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title
@ -83,35 +77,8 @@ export const TopicBadge = (props: Props) => {
</Show>
</a>
</div>
<div class={styles.actions}>
<Show
when={!props.minimizeSubscribeButton}
fallback={
<CheckButton text={t('Follow')} checked={Boolean(isFollowed())} onClick={handleFollowClick} />
}
>
<Show
when={isFollowed()}
fallback={
<Button
variant="primary"
size="S"
value={subLoading() ? t('subscribing...') : t('Subscribe')}
onClick={handleFollowClick}
class={styles.subscribeButton}
/>
}
>
<Button
onClick={handleFollowClick}
variant="bordered"
size="S"
value={t('Following')}
class={styles.subscribeButton}
/>
</Show>
</Show>
<BadgeSubscribeButton isSubscribed={isSubscribed()} action={handleFollowClick}/>
</div>
</div>
<div class={styles.stats}>

29
src/components/_shared/BadgeSubscribeButton/BadgeDubscribeButton.module.scss Normal file
View File

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

74
src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx Normal file
View File

@ -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 (
<div class={props.class}>
<Show
when={!props.minimizeSubscribeButton}
fallback={<CheckButton text={t('Follow')} checked={props.isSubscribed} onClick={props.action} />}
>
<Show
when={props.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={props.action}
isSubscribeButton={true}
class={clsx(styles.actionButton, {
[styles.iconed]: props.iconButtons,
[stylesButton.subscribed]: props.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={props.action}
isSubscribeButton={true}
class={clsx(styles.actionButton, {
[styles.iconed]: props.iconButtons,
[stylesButton.subscribed]: props.isSubscribed,
})}
/>
</Show>
</Show>
</div>
)
}

1
src/components/_shared/BadgeSubscribeButton/index.ts Normal file
View File

@ -0,0 +1 @@
export { BadgeSubscribeButton } from './BadgeSubscribeButton'

22
src/context/following.tsx
View File

@ -22,7 +22,6 @@ interface FollowingContextType {
loadSubscriptions: () => void
follow: (what: FollowingEntity, slug: string) => Promise<void>
unfollow: (what: FollowingEntity, slug: string) => Promise<void>
isOwnerSubscribed: (id: number | string) => Accessor<boolean>
// followers: Accessor<Author[]>
subscribeInAction?: Accessor<SubscribeAction>
}
@ -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,

5
src/pages/types.ts
View File

@ -53,9 +53,4 @@ export type UploadedFile = {
originalFilename?: string
}
export type FollowedInfo = {
value?: boolean
loaded?: boolean
}
export type SubscriptionFilter = 'all' | 'authors' | 'topics' | 'communities'