Fix subscribe logic (refactoring)

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -41,11 +41,7 @@ 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 { subscriptions } = useFollowing()
-  const { setFollowing } = useFollowing()
-  const isOwnerSubscribed = (authorId: number) => {
-    return !!subscriptions?.authors.some((a) => a.id === authorId)
-  }
+  const { setFollowing, isOwnerSubscribed } = useFollowing()
 
   onMount(() => {
     setAuthorSubs(props.following)

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,