nostylelint-stage

.lintstagedrc

@@ -1,5 +1,5 @@
 {
   "*.{js,ts,cjs,mjs,d.mts,jsx,tsx,json,jsonc,scss,css}": [
-    "npx @biomejs/biome check . --log-kind=compact --verbose --apply-unsafe && stylelint **/*.{scss,css}"
+    "npx @biomejs/biome check . --log-kind=compact --verbose --apply-unsafe"
   ]
 }

src/components/Author/AuthorBadge/AuthorBadge.tsx

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

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -32,37 +32,30 @@ type Props = {
 export const AuthorCard = (props: Props) => {
   const { t, lang } = useLocalize()
   const { author, isSessionLoaded, requireAuthentication } = useSession()
-  const { setFollowing } = useFollowing()
   const [authorSubs, setAuthorSubs] = createSignal<Array<Author | Topic | Community>>([])
   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)
+  const { setFollowing, isOwnerSubscribed } = useFollowing()
 
-  createEffect(
-    on(
-      () => props.followers,
-      () => {
-        setIsFollowed(isSubscribed())
-      },
-      { defer: true },
-    ),
-  )
+  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 = () => {
@@ -98,7 +91,7 @@ export const AuthorCard = (props: Props) => {
   }
 
   const followButtonText = createMemo(() => {
-    if (isFollowed()) {
+    if (isOwnerSubscribed(props.author?.id)) {
       return (
         <>
           <span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
@@ -106,7 +99,6 @@ export const AuthorCard = (props: Props) => {
         </>
       )
     }
-
     return t('Follow')
   })
 
@@ -204,12 +196,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()}
@@ -258,7 +249,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>
@@ -301,7 +300,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 { For, Show, createEffect, createSignal } 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 { For, Show, createEffect, createMemo, createSignal } 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'
@@ -83,6 +84,8 @@ export const AllAuthorsView = (props: Props) => {
     )
   })
 
+  const { isOwnerSubscribed } = useFollowing()
+
   const sortedKeys = createMemo<string[]>(() => {
     const keys = Object.keys(byLetter())
     keys.sort()
@@ -201,7 +204,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,