updateFormField('name', event.currentTarget.value)}
value={form.name}
ref={(el) => (nameInputRef.current = el)}
/>
-
{
type="text"
name="user-address"
id="user-address"
+ data-lpignore="true"
+ autocomplete="one-time-code2"
onInput={(event) => updateFormField('slug', event.currentTarget.value)}
value={form.slug}
ref={(el) => (slugInputRef.current = el)}
diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx
index f7000e20..322aa925 100644
--- a/src/components/TableOfContents/TableOfContents.tsx
+++ b/src/components/TableOfContents/TableOfContents.tsx
@@ -17,7 +17,7 @@ interface Props {
const isInViewport = (el: Element): boolean => {
const rect = el.getBoundingClientRect()
- return rect.top <= DEFAULT_HEADER_OFFSET
+ return rect.top <= DEFAULT_HEADER_OFFSET + 24 // default offset + 1.5em (default header margin-top)
}
const scrollToHeader = (element) => {
window.scrollTo({
diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index 35965f67..525c6b29 100644
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@@ -1,5 +1,5 @@
import { clsx } from 'clsx'
-import { Show, createMemo, createSignal } from 'solid-js'
+import { Show, createEffect, createMemo, createSignal } from 'solid-js'
import { useFollowing } from '../../context/following'
import { useLocalize } from '../../context/localize'
@@ -38,14 +38,20 @@ export const TopicCard = (props: TopicProps) => {
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)
+ isSubscribed()
+ ? unfollow(FollowingEntity.Topic, props.topic.slug)
+ : follow(FollowingEntity.Topic, props.topic.slug)
}, 'subscribe')
}
@@ -53,12 +59,12 @@ export const TopicCard = (props: TopicProps) => {
return (
<>
-
+
-
+
{t('Unfollow')}
{t('Following')}
@@ -130,7 +136,7 @@ export const TopicCard = (props: TopicProps) => {
fallback={
}
@@ -142,10 +148,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 2fdf9c65..44f37700 100644
--- a/src/components/Topic/TopicBadge/TopicBadge.tsx
+++ b/src/components/Topic/TopicBadge/TopicBadge.tsx
@@ -1,5 +1,5 @@
import { clsx } from 'clsx'
-import { Show, createEffect, createSignal, on } from 'solid-js'
+import { Show, createEffect, createSignal } from 'solid-js'
import { useFollowing } from '../../../context/following'
import { useLocalize } from '../../../context/localize'
@@ -8,16 +8,12 @@ import { useSession } from '../../../context/session'
import { FollowingEntity, Topic } from '../../../graphql/schema/core.gen'
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 { BadgeSubscribeButton } from '../../_shared/BadgeSubscribeButton'
import styles from './TopicBadge.module.scss'
type Props = {
topic: Topic
minimizeSubscribeButton?: boolean
- isFollowed?: FollowedInfo
showStat?: boolean
}
@@ -26,14 +22,20 @@ export const TopicBadge = (props: Props) => {
const { mediaMatches } = useMediaQuery()
const [isMobileView, setIsMobileView] = createSignal(false)
const { requireAuthentication } = useSession()
- const { setFollowing, loading: subLoading } = useFollowing()
- const [isFollowed, setIsFollowed] = 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 = !isFollowed()
requireAuthentication(() => {
- setIsFollowed(value)
- setFollowing(FollowingEntity.Topic, props.topic.slug, value)
+ isSubscribed()
+ ? follow(FollowingEntity.Topic, props.topic.slug)
+ : unfollow(FollowingEntity.Topic, props.topic.slug)
}, 'subscribe')
}
@@ -41,15 +43,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 +76,14 @@ export const TopicBadge = (props: Props) => {
-
-
+
-
- }
- >
-
-
-
+ />