[WIP]

public/locales/en/translation.json

@@ -527,5 +527,7 @@
   "yesterday": "yesterday",
   "Failed to delete comment": "Failed to delete comment",
   "It's OK. Just enter your email to receive a link to change your password": "It's OK. Just enter your email to receive a link to change your password",
-  "Restore password": "Restore password"
+  "Restore password": "Restore password",
+  "Subscribing...": "Subscribing...",
+  "Unsubscribing...": "Unsubscribing..."
 }

public/locales/ru/translation.json

@@ -554,5 +554,7 @@
   "yesterday": "вчера",
   "Failed to delete comment": "Не удалось удалить комментарий",
   "It's OK. Just enter your email to receive a link to change your password": "Ничего страшного. Просто укажите свою почту, чтобы получить ссылку для смены пароля",
-  "Restore password": "Восстановить пароль"
+  "Restore password": "Восстановить пароль",
+  "Subscribing...": "Подписываем...",
+  "Unsubscribing...": "Отписываем..."
 }

src/components/App.tsx

@@ -39,6 +39,7 @@ import { InboxPage } from '../pages/inbox.page'
 import { HomePage } from '../pages/index.page'
 import { ProfileSecurityPage } from '../pages/profile/profileSecurity.page'
 import { ProfileSettingsPage } from '../pages/profile/profileSettings.page'
+//TODO: ProfileSubscriptionsPage - garbage code?
 import { ProfileSubscriptionsPage } from '../pages/profile/profileSubscriptions.page'
 import { SearchPage } from '../pages/search.page'
 import { TopicPage } from '../pages/topic.page'

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -34,7 +34,6 @@ export const AuthorCard = (props: Props) => {
   const { author, isSessionLoaded, requireAuthentication } = useSession()
   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 { follow, isOwnerSubscribed, subscribeInAction } = useFollowing()
 
@@ -42,9 +41,10 @@ export const AuthorCard = (props: Props) => {
     setAuthorSubs(props.following)
   })
 
+  const isSubscribed = isOwnerSubscribed(props.author?.id)
+
   createEffect(() => {
-    console.log("!!! isOwnerSubscribed(props.author?.id):", isOwnerSubscribed(props.author?.id));
+    console.log('%c!!! isSubscribed:', 'color: #bada55', isSubscribed())
-    setIsFollowed(isOwnerSubscribed(props.author?.id))
   })
 
   const name = createMemo(() => {
@@ -88,9 +88,7 @@ export const AuthorCard = (props: Props) => {
   })
   const handleFollowClick = () => {
     console.log("!!! handleFollowClick:");
-    const value = !isFollowed()
     requireAuthentication(() => {
-      setIsFollowed(value)
       follow(FollowingEntity.Author, props.author.slug)
     }, 'subscribe')
   }
@@ -101,7 +99,7 @@ export const AuthorCard = (props: Props) => {
       return subscribeInAction().type === 'subscribe' ? t('Subscribing...') : t('Unsubscribing...')
     }
 
-    if (isOwnerSubscribed(props.author?.id)) {
+    if (isSubscribed()) {
       return (
         <>
           <span class={stylesButton.buttonSubscribeLabel}>{t('Following')}</span>
@@ -130,10 +128,7 @@ export const AuthorCard = (props: Props) => {
             <div class={styles.authorAbout} innerHTML={props.author.bio} />
           </Show>
           <Show
-            when={
+            when={(props.followers?.length > 0) || (props.following?.length > 0)}
-              (props.followers && props.followers.length > 0) ||
-              (props.following && props.following.length > 0)
-            }
           >
             <div class={styles.subscribersContainer}>
               <Show when={props.followers && props.followers.length > 0}>
@@ -213,10 +208,11 @@ export const AuthorCard = (props: Props) => {
                   <Show when={authorSubs()?.length}>
                     <Button
                       onClick={handleFollowClick}
+                      disabled={Boolean(subscribeInAction())}
                       value={followButtonText()}
                       isSubscribeButton={true}
                       class={clsx({
-                        [stylesButton.subscribed]: isFollowed(),
+                        [stylesButton.subscribed]: isSubscribed(),
                       })}
                     />
                   </Show>
@@ -264,7 +260,7 @@ export const AuthorCard = (props: Props) => {
                           author={follower}
                           isFollowed={{
                             loaded: Boolean(authorSubs()),
-                            value: isOwnerSubscribed(follower.id),
+                            value: isSubscribed(),
                           }}
                         />
                       )}
@@ -313,7 +309,7 @@ export const AuthorCard = (props: Props) => {
                           <AuthorBadge
                             isFollowed={{
                               loaded: Boolean(authorSubs()),
-                              value: isOwnerSubscribed(subscription.id),
+                              value: isSubscribed(),
                             }}
                             author={subscription}
                           />
@@ -321,7 +317,7 @@ export const AuthorCard = (props: Props) => {
                           <TopicBadge
                             isFollowed={{
                               loaded: Boolean(authorSubs()),
-                              value: isOwnerSubscribed(subscription.id),
+                              value: isSubscribed(),
                             }}
                             topic={subscription}
                           />

src/components/Views/Author/Author.tsx

@@ -37,7 +37,6 @@ const LOAD_MORE_PAGE_SIZE = 9
 
 export const AuthorView = (props: Props) => {
   const { t } = useLocalize()
-  const { loadSubscriptions } = useFollowing()
   const { sortedArticles } = useArticlesStore({ shouts: props.shouts })
   const { authorEntities } = useAuthorsStore({ authors: [props.author] })
   const { page: getPage } = useRouter()
@@ -49,19 +48,13 @@ export const AuthorView = (props: Props) => {
   const [commented, setCommented] = createSignal<Reaction[]>()
 
   // current author
-  const [author, setAuthor] = createSignal<Author>()
+  console.log('%c!!! :', 'color: #bada55', props.author)
-  createEffect(() => {
+  const [author, setAuthor] = createSignal<Author>(props.author)
-    try {
-      const a = authorEntities()[props.authorSlug]
-      setAuthor(a)
-    } catch (error) {
-      console.debug(error)
-    }
-  })
 
   createEffect(async () => {
     if (author()?.id && !author().stat) {
       const a = await loadAuthor({ slug: '', author_id: author().id })
+      console.log('%c!!! A2:', 'color: #bada55', props.author)
       console.debug('[AuthorView] loaded author:', a)
     }
   })
@@ -69,13 +62,15 @@ export const AuthorView = (props: Props) => {
   const bioContainerRef: { current: HTMLDivElement } = { current: null }
   const bioWrapperRef: { current: HTMLDivElement } = { current: null }
 
-  const fetchData = async (slug) => {
+  const fetchData = async (author: Author) => {
+    console.log('%c!!! slug:', 'color: #bada55', author)
     try {
       const [subscriptionsResult, followersResult] = await Promise.all([
-        apiClient.getAuthorFollows({ slug }),
+        apiClient.getAuthorFollows({ author_id: author.id }),
-        apiClient.getAuthorFollowers({ slug }),
+        apiClient.getAuthorFollowers({ slug: author.slug }),
       ])
-
+      console.log('%c!!! subscriptionsResult:', 'color: #bada55', subscriptionsResult)
+      console.log('%c!!! followersResult:', 'color: #bada55', followersResult)
       const { authors, topics } = subscriptionsResult
       setFollowing([...(authors || []), ...(topics || [])])
       setFollowers(followersResult || [])
@@ -92,8 +87,6 @@ export const AuthorView = (props: Props) => {
     }
   }
 
-  onMount(() => fetchData(props.authorSlug))
-
   const loadMore = async () => {
     saveScrollPosition()
     const { hasMore } = await loadShouts({
@@ -106,12 +99,11 @@ export const AuthorView = (props: Props) => {
   }
 
   onMount(() => {
+    fetchData(author())
     checkBioHeight()
-
     // pagination
     if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
       loadMore()
-      loadSubscriptions()
     }
   })
 

src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx

@@ -27,6 +27,8 @@ export const ProfileSubscriptions = () => {
   const [searchQuery, setSearchQuery] = createSignal('')
 
   const fetchSubscriptions = async () => {
+
+    console.log('%c!!! :', 'color: #bada55', 'Профайл fetchSubscriptions' )
     try {
       const slug = author()?.slug
       const authorFollows = await apiClient.getAuthorFollows({ slug })

src/context/following.tsx

@@ -1,4 +1,4 @@
-import { Accessor, JSX, createContext, createEffect, createSignal, useContext } from 'solid-js'
+import { Accessor, JSX, createContext, createEffect, createSignal, useContext, createMemo } from "solid-js";
 import { createStore } from 'solid-js/store'
 
 import { apiClient } from '../graphql/client/core'
@@ -22,7 +22,7 @@ interface FollowingContextType {
   loadSubscriptions: () => void
   follow: (what: FollowingEntity, slug: string) => Promise<void>
   unfollow: (what: FollowingEntity, slug: string) => Promise<void>
-  isOwnerSubscribed: (id: number | string) => boolean
+  isOwnerSubscribed: (id: number | string) => Accessor<boolean>
   // followers: Accessor<Author[]>
   subscribeInAction?: Accessor<SubscribeAction>
 }
@@ -69,33 +69,26 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
 
 
   const follow = async (what: FollowingEntity, slug: string) => {
-    console.log("!!! follow what:", what);
+    if (!author()) return;
-    console.log("!!! follow slug:", slug);
+    setSubscribeInAction({ slug, type: 'subscribe' });
-    // if (!author()) return
-    setSubscribeInAction({ slug, type: 'subscribe' })
     try {
-      const result = async () => {
+      const subscriptionData = await apiClient.follow({ what, slug });
-        await apiClient.follow({ what, slug })
-      }
-      console.log("!!! follow result:", result());
       setSubscriptions((prevSubscriptions) => {
-        const updatedSubs = { ...prevSubscriptions }
+        if (!prevSubscriptions[what]) prevSubscriptions[what] = [];
-        if (!updatedSubs[what]) updatedSubs[what] = []
+        prevSubscriptions[what].push(subscriptionData);
-        const exists = updatedSubs[what]?.some((entity) => entity.slug === slug)
+        return prevSubscriptions;
-        if (!exists) updatedSubs[what].push(slug)
+      });
-        return updatedSubs
-      })
     } catch (error) {
-      console.error(error)
+      console.error(error);
     } finally {
-      setSubscribeInAction()
+      setSubscribeInAction(); // Сбрасываем состояние действия подписки.
     }
   }
 
   const unfollow = async (what: FollowingEntity, slug: string) => {
     if (!author()) return
-    try {
     setSubscribeInAction({ slug: slug, type: 'unsubscribe' })
+    try {
       await apiClient.unfollow({ what, slug })
     } catch (error) {
       console.error(error)
@@ -134,12 +127,13 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
     }
   }
 
-  const isOwnerSubscribed = (id?: number | string) => {
+  const isOwnerSubscribed = (id?: number | string) => createMemo(() => {
-    if (!author() || !subscriptions) return
+    console.log('%c!!! WTF:', 'color: #bada55', subscriptions);
-    const isAuthorSubscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === id)
+    if (!author() || !subscriptions) return false;
-    const isTopicSubscribed = subscriptions.topics?.some((topicEntity) => topicEntity.slug === id)
+    const isAuthorSubscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === id);
-    return !!isAuthorSubscribed || !!isTopicSubscribed
+    const isTopicSubscribed = subscriptions.topics?.some((topicEntity) => topicEntity.slug === id);
-  }
+    return !!isAuthorSubscribed || !!isTopicSubscribed;
+  })
 
   const value: FollowingContextType = {
     loading,