Merge pull request #397 from Discours/fix/suscribe_buttons_fix

Fix/suscribe buttons fix

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -80,7 +80,6 @@ export const AuthorBadge = (props: Props) => {
       () => {
         setIsFollowed(props.isFollowed.value)
       },
-      { defer: true },
     ),
   )
 

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -2,7 +2,7 @@ import type { Author, Community } from '../../../graphql/schema/core.gen'
 
 import { openPage, redirectPage } from '@nanostores/router'
 import { clsx } from 'clsx'
-import { createEffect, createMemo, createSignal, For, on, onMount, Show } from 'solid-js'
+import { createEffect, createMemo, createSignal, For, onMount, Show } from 'solid-js'
 
 import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
@@ -41,33 +41,26 @@ export const AuthorCard = (props: Props) => {
   const [subscriptionFilter, setSubscriptionFilter] = createSignal<SubscriptionFilter>('all')
   const [isFollowed, setIsFollowed] = createSignal<boolean>()
   const isProfileOwner = createMemo(() => author()?.slug === props.author.slug)
-  const isSubscribed = () => props.followers?.some((entity) => entity.id === author()?.id)
-  createEffect(
-    on(
-      () => props.followers,
-      () => {
-        setIsFollowed(isSubscribed())
-      },
-      { defer: true },
-    ),
-  )
+  const { setFollowing, isOwnerSubscribed } = useFollowing()
 
-  const { setFollowing } = useFollowing()
+  onMount(() => {
+    setAuthorSubs(props.following)
+  })
+
+  createEffect(() => {
+    setIsFollowed(isOwnerSubscribed(props.author?.id))
+  })
 
   const name = createMemo(() => {
     if (lang() !== 'ru' && isCyrillic(props.author.name)) {
       if (props.author.name === 'Дискурс') {
         return 'Discours'
       }
-
       return translit(props.author.name)
     }
-
     return props.author.name
   })
 
-  onMount(() => setAuthorSubs(props.following))
-
   // TODO: reimplement AuthorCard
   const { changeSearchParams } = useRouter()
   const initChat = () => {
@@ -103,7 +96,7 @@ export const AuthorCard = (props: Props) => {
   }
 
   const followButtonText = createMemo(() => {
-    if (isFollowed()) {
+    if (isOwnerSubscribed(props.author?.id)) {
       return (
         <>
           <span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
@@ -111,7 +104,6 @@ export const AuthorCard = (props: Props) => {
         </>
       )
     }
-
     return t('Follow')
   })
 
@@ -206,12 +198,11 @@ export const AuthorCard = (props: Props) => {
                 </For>
               </div>
             </Show>
-
             <Show
               when={isProfileOwner()}
               fallback={
                 <div class={styles.authorActions}>
-                  <Show when={isFollowed()}>
+                  <Show when={authorSubs().length}>
                     <Button
                       onClick={handleFollowClick}
                       value={followButtonText()}
@@ -260,7 +251,15 @@ export const AuthorCard = (props: Props) => {
                 <div class="row">
                   <div class="col-24">
                     <For each={props.followers}>
-                      {(follower: Author) => <AuthorBadge author={follower} />}
+                      {(follower: Author) => (
+                        <AuthorBadge
+                          author={follower}
+                          isFollowed={{
+                            loaded: Boolean(authorSubs()),
+                            value: isOwnerSubscribed(follower.id),
+                          }}
+                        />
+                      )}
                     </For>
                   </div>
                 </div>
@@ -303,7 +302,13 @@ export const AuthorCard = (props: Props) => {
                     <For each={authorSubs()}>
                       {(subscription) =>
                         isAuthor(subscription) ? (
-                          <AuthorBadge author={subscription} />
+                          <AuthorBadge
+                            isFollowed={{
+                              loaded: Boolean(authorSubs()),
+                              value: isOwnerSubscribed(subscription.id),
+                            }}
+                            author={subscription}
+                          />
                         ) : (
                           <TopicBadge topic={subscription} />
                         )

src/components/Feed/Beside.tsx

@@ -3,7 +3,7 @@
 import type { Author, Shout, Topic } from '../../graphql/schema/core.gen'
 
 import { clsx } from 'clsx'
-import { createEffect, createSignal, For, Show } from 'solid-js'
+import { For, Show } from 'solid-js'
 
 import { useFollowing } from '../../context/following'
 import { useLocalize } from '../../context/localize'
@@ -30,12 +30,7 @@ type Props = {
 
 export const Beside = (props: Props) => {
   const { t } = useLocalize()
-  const { subscriptions } = useFollowing()
-  const [subscriptionsAuthorsId, setSubscriptionsAuthorsId] = createSignal<number[] | undefined>()
-
-  createEffect(() => {
-    setSubscriptionsAuthorsId(subscriptions?.authors?.map((item) => item.id) || [])
-  })
+  const { isOwnerSubscribed } = useFollowing()
 
   return (
     <Show when={!!props.beside?.slug && props.values?.length > 0}>
@@ -94,8 +89,7 @@ export const Beside = (props: Props) => {
                           <AuthorBadge
                             author={value as Author}
                             isFollowed={{
-                              loaded: Boolean(subscriptionsAuthorsId()),
-                              value: subscriptionsAuthorsId().includes(value.id),
+                              value: isOwnerSubscribed(value.id),
                             }}
                           />
                         </Show>

src/components/Views/AllAuthors.tsx

@@ -4,6 +4,7 @@ import { Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
 import { createEffect, createMemo, createSignal, For, Show } from 'solid-js'
 
+import { useFollowing } from '../../context/following'
 import { useLocalize } from '../../context/localize'
 import { useRouter } from '../../stores/router'
 import { loadAuthors, setAuthorsSort, useAuthorsStore } from '../../stores/zine/authors'
@@ -111,6 +112,8 @@ export const AllAuthorsView = (props: Props) => {
     )
   })
 
+  const { isOwnerSubscribed } = useFollowing()
+
   const sortedKeys = createMemo<string[]>(() => {
     const keys = Object.keys(byLetter())
     keys.sort()
@@ -229,7 +232,13 @@ export const AllAuthorsView = (props: Props) => {
                 {(author) => (
                   <div class="row">
                     <div class="col-lg-20 col-xl-18">
-                      <AuthorBadge author={author as Author} />
+                      <AuthorBadge
+                        author={author as Author}
+                        isFollowed={{
+                          loaded: Boolean(filteredAuthors()),
+                          value: isOwnerSubscribed(author.id),
+                        }}
+                      />
                     </div>
                   </div>
                 )}

src/context/following.tsx

@@ -20,6 +20,7 @@ interface FollowingContextType {
   loadSubscriptions: () => void
   follow: (what: FollowingEntity, slug: string) => Promise<void>
   unfollow: (what: FollowingEntity, slug: string) => Promise<void>
+  isOwnerSubscribed: (userId: number) => boolean
 }
 
 const FollowingContext = createContext<FollowingContextType>()
@@ -108,10 +109,16 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
     }
   }
 
+  const isOwnerSubscribed = (userId: number) => {
+    if (!author()) return
+    return !!subscriptions?.authors?.some((authorEntity) => authorEntity.id === userId)
+  }
+
   const value: FollowingContextType = {
     loading,
     subscriptions,
     setSubscriptions,
+    isOwnerSubscribed,
     setFollowing,
     loadSubscriptions: fetchData,
     follow,