[WiP]

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -36,13 +36,14 @@ 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 { setFollowing, isOwnerSubscribed } = useFollowing()
+  const { follow, isOwnerSubscribed, subscribeInAction } = useFollowing()
 
   onMount(() => {
     setAuthorSubs(props.following)
   })
 
   createEffect(() => {
+    console.log("!!! isOwnerSubscribed(props.author?.id):", isOwnerSubscribed(props.author?.id));
     setIsFollowed(isOwnerSubscribed(props.author?.id))
   })
 
@@ -82,15 +83,24 @@ export const AuthorCard = (props: Props) => {
     }
   })
 
+  createEffect(() => {
+    console.log("!!! subscribeInAction:", subscribeInAction());
+  })
   const handleFollowClick = () => {
+    console.log("!!! handleFollowClick:");
     const value = !isFollowed()
     requireAuthentication(() => {
       setIsFollowed(value)
-      setFollowing(FollowingEntity.Author, props.author.slug, value)
+      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...')
+    }
+
     if (isOwnerSubscribed(props.author?.id)) {
       return (
         <>
@@ -200,7 +210,7 @@ export const AuthorCard = (props: Props) => {
               when={isProfileOwner()}
               fallback={
                 <div class={styles.authorActions}>
-                  <Show when={authorSubs().length}>
+                  <Show when={authorSubs()?.length}>
                     <Button
                       onClick={handleFollowClick}
                       value={followButtonText()}

src/context/following.tsx

@@ -2,10 +2,18 @@ import { Accessor, JSX, createContext, createEffect, createSignal, useContext }
 import { createStore } from 'solid-js/store'
 
 import { apiClient } from '../graphql/client/core'
-import { AuthorFollows, FollowingEntity } from '../graphql/schema/core.gen'
+import { Author, AuthorFollows, Community, FollowingEntity, Topic } from "../graphql/schema/core.gen";
 
 import { useSession } from './session'
 
+export type SubscriptionsData = {
+  topics?: Topic[]
+  authors?: Author[]
+  communities?: Community[]
+}
+
+type SubscribeAction = { slug: string; type: 'subscribe' | 'unsubscribe' }
+
 interface FollowingContextType {
   loading: Accessor<boolean>
   subscriptions: AuthorFollows
@@ -15,6 +23,8 @@ interface FollowingContextType {
   follow: (what: FollowingEntity, slug: string) => Promise<void>
   unfollow: (what: FollowingEntity, slug: string) => Promise<void>
   isOwnerSubscribed: (id: number | string) => boolean
+  // followers: Accessor<Author[]>
+  subscribeInAction?: Accessor<SubscribeAction>
 }
 
 const FollowingContext = createContext<FollowingContextType>()
@@ -31,8 +41,9 @@ const EMPTY_SUBSCRIPTIONS: AuthorFollows = {
 
 export const FollowingProvider = (props: { children: JSX.Element }) => {
   const [loading, setLoading] = createSignal<boolean>(false)
-  const [subscriptions, setSubscriptions] = createStore<AuthorFollows>(EMPTY_SUBSCRIPTIONS)
-  const { author, session } = useSession()
+  const [subscriptions, setSubscriptions] = createStore<SubscriptionsData>(EMPTY_SUBSCRIPTIONS)
+  const { session, author } = useSession()
+  const [subscribeInAction, setSubscribeInAction] = createSignal<SubscribeAction>()
 
   const fetchData = async () => {
     setLoading(true)
@@ -51,9 +62,14 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
   }
 
   const follow = async (what: FollowingEntity, slug: string) => {
-    if (!author()) return
+    console.log("!!! flw:", author());
+    // if (!author()) return
+    setSubscribeInAction({ slug, type: 'subscribe' })
     try {
-      await apiClient.follow({ what, slug })
+      const result = async () => {
+        await apiClient.follow({ what, slug })
+      }
+      console.log("!!! follow result:", result());
       setSubscriptions((prevSubscriptions) => {
         const updatedSubs = { ...prevSubscriptions }
         if (!updatedSubs[what]) updatedSubs[what] = []
@@ -63,19 +79,26 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
       })
     } catch (error) {
       console.error(error)
+    } finally {
+      setSubscribeInAction()
     }
   }
 
   const unfollow = async (what: FollowingEntity, slug: string) => {
     if (!author()) return
     try {
+      setSubscribeInAction({ slug: slug, type: 'unsubscribe' })
       await apiClient.unfollow({ what, slug })
     } catch (error) {
       console.error(error)
+    } finally {
+      setSubscribeInAction()
     }
   }
 
+
   createEffect(() => {
+    console.log("!!! cone setSubscribeInAction:", subscribeInAction());
     if (author()) {
       console.debug('[context.following] author update detect')
       fetchData()
@@ -119,6 +142,8 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
     loadSubscriptions: fetchData,
     follow,
     unfollow,
+    // followers,
+    subscribeInAction,
   }
 
   return <FollowingContext.Provider value={value}>{props.children}</FollowingContext.Provider>

src/graphql/client/core.ts

@@ -92,6 +92,7 @@ export const apiClient = {
 
   follow: async ({ what, slug }: { what: FollowingEntity; slug: string }) => {
     const response = await apiClient.private.mutation(followMutation, { what, slug }).toPromise()
+    console.log("!!! response:", response);
     return response.data.follow
   },