Change follow logic

src/components/Author/AuthorBadge/AuthorBadge.module.scss

@@ -89,4 +89,30 @@
       text-align: right;
     }
   }
+
+  .actionButton {
+    border-radius: 0.8rem !important;
+    margin-right: 0 !important;
+    width: 9em;
+
+    &.iconed {
+      padding: 6px !important;
+      min-width: 4rem;
+      width: unset;
+
+      &:hover img {
+        filter: invert(1);
+      }
+    }
+
+    &:hover {
+      .actionButtonLabel {
+        display: none;
+      }
+
+      .actionButtonLabelHovered {
+        display: block;
+      }
+    }
+  }
 }

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -15,7 +15,6 @@ import { CheckButton } from '../../_shared/CheckButton'
 import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
 import { Icon } from '../../_shared/Icon'
 import { Userpic } from '../Userpic'
-import stylesButton from '../../_shared/Button/Button.module.scss'
 import styles from './AuthorBadge.module.scss'
 import { BadgeSubscribeButton } from "../../_shared/BadgeSubscribeButton";
 
@@ -131,56 +130,8 @@ export const AuthorBadge = (props: Props) => {
           <BadgeSubscribeButton
             action={() => handleFollowClick()}
             isSubscribed={isSubscribed()}
+            actionMessageType={subscribeInAction()?.slug === props.author.slug ? subscribeInAction().type : undefined}
           />
-          {/*<Show*/}
-          {/*  when={!props.minimizeSubscribeButton}*/}
-          {/*  fallback={<CheckButton text={t('Follow')} checked={isSubscribed()} onClick={handleFollowClick} />}*/}
-          {/*>*/}
-          {/*  <Show*/}
-          {/*    when={isSubscribed()}*/}
-          {/*    fallback={*/}
-          {/*      <Button*/}
-          {/*        variant={props.iconButtons ? 'secondary' : 'bordered'}*/}
-          {/*        size="S"*/}
-          {/*        value={*/}
-          {/*          <Show when={props.iconButtons} fallback={t('Subscribe')}>*/}
-          {/*            <Icon name="author-subscribe" class={stylesButton.icon} />*/}
-          {/*          </Show>*/}
-          {/*        }*/}
-          {/*        onClick={handleFollowClick}*/}
-          {/*        isSubscribeButton={true}*/}
-          {/*        class={clsx(styles.actionButton, {*/}
-          {/*          [styles.iconed]: props.iconButtons,*/}
-          {/*          [stylesButton.subscribed]: isSubscribed(),*/}
-          {/*        })}*/}
-          {/*      />*/}
-          {/*    }*/}
-          {/*  >*/}
-          {/*    <Button*/}
-          {/*      variant={props.iconButtons ? 'secondary' : 'bordered'}*/}
-          {/*      size="S"*/}
-          {/*      value={*/}
-          {/*        <Show*/}
-          {/*          when={props.iconButtons}*/}
-          {/*          fallback={*/}
-          {/*            <>*/}
-          {/*              <span class={styles.actionButtonLabel}>{t('Following')}</span>*/}
-          {/*              <span class={styles.actionButtonLabelHovered}>{t('Unfollow')}</span>*/}
-          {/*            </>*/}
-          {/*          }*/}
-          {/*        >*/}
-          {/*          <Icon name="author-unsubscribe" class={stylesButton.icon} />*/}
-          {/*        </Show>*/}
-          {/*      }*/}
-          {/*      onClick={handleFollowClick}*/}
-          {/*      isSubscribeButton={true}*/}
-          {/*      class={clsx(styles.actionButton, {*/}
-          {/*        [styles.iconed]: props.iconButtons,*/}
-          {/*        [stylesButton.subscribed]: isSubscribed(),*/}
-          {/*      })}*/}
-          {/*    />*/}
-          {/*  </Show>*/}
-          {/*</Show>*/}
           <Show when={props.showMessageButton}>
             <Button
               variant={props.iconButtons ? 'secondary' : 'bordered'}

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -296,9 +296,13 @@ export const AuthorCard = (props: Props) => {
                     <For each={authorSubs()}>
                       {(subscription) =>
                         isAuthor(subscription) ? (
-                          <AuthorBadge author={subscription} />
+                          <AuthorBadge
+                            author={subscription}
+                          />
                         ) : (
-                          <TopicBadge topic={subscription}/>
+                          <TopicBadge
+                            topic={subscription}
+                          />
                         )
                       }
                     </For>

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -24,7 +24,6 @@ export const TopicBadge = (props: Props) => {
   const { mediaMatches } = useMediaQuery()
   const [isMobileView, setIsMobileView] = createSignal(false)
   const { requireAuthentication } = useSession()
-  const { setFollowing, loading: subLoading } = useFollowing()
   const [isSubscribed, setIsSubscribed] = createSignal<boolean>()
   const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
 
@@ -36,7 +35,7 @@ export const TopicBadge = (props: Props) => {
 
   const handleFollowClick = () => {
     requireAuthentication(() => {
-      follow(FollowingEntity.Topic, props.topic.slug)
+      isSubscribed() ? follow(FollowingEntity.Topic, props.topic.slug) : unfollow(FollowingEntity.Topic, props.topic.slug)
     }, 'subscribe')
   }
 
@@ -78,7 +77,11 @@ export const TopicBadge = (props: Props) => {
           </a>
         </div>
         <div class={styles.actions}>
-          <BadgeSubscribeButton isSubscribed={isSubscribed()} action={handleFollowClick}/>
+          <BadgeSubscribeButton
+            isSubscribed={isSubscribed()}
+            action={handleFollowClick}
+            actionMessageType={subscribeInAction()?.slug === props.topic.slug ? subscribeInAction().type : undefined}
+          />
         </div>
       </div>
       <div class={styles.stats}>

src/components/Views/Author/Author.tsx

@@ -3,7 +3,7 @@ import type { Author, Reaction, Shout, Topic } from '../../../graphql/schema/cor
 import { getPagePath } from '@nanostores/router'
 import { Meta, Title } from '@solidjs/meta'
 import { clsx } from 'clsx'
-import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from 'solid-js'
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount, on } from "solid-js";
 
 import { useFollowing } from '../../../context/following'
 import { useLocalize } from '../../../context/localize'
@@ -48,13 +48,11 @@ export const AuthorView = (props: Props) => {
   const [commented, setCommented] = createSignal<Reaction[]>()
 
   // current author
-  console.log('%c!!! :', 'color: #bada55', props.author)
+  // const [author, _] = createSignal<Author>(props.author)
-  const [author, setAuthor] = createSignal<Author>(props.author)
 
   createEffect(async () => {
-    if (author()?.id && !author().stat) {
+    if (props.author?.id && !props.author.stat) {
-      const a = await loadAuthor({ slug: '', author_id: author().id })
+      const a = await loadAuthor({ slug: '', author_id: props.author.id })
-      console.log('%c!!! A2:', 'color: #bada55', props.author)
       console.debug('[AuthorView] loaded author:', a)
     }
   })
@@ -63,14 +61,11 @@ export const AuthorView = (props: Props) => {
   const bioWrapperRef: { current: HTMLDivElement } = { current: null }
 
   const fetchData = async (author: Author) => {
-    console.log('%c!!! slug:', 'color: #bada55', author)
     try {
       const [subscriptionsResult, followersResult] = await Promise.all([
         apiClient.getAuthorFollows({ author_id: author.id }),
         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 || [])
@@ -99,7 +94,6 @@ export const AuthorView = (props: Props) => {
   }
 
   onMount(() => {
-    fetchData(author())
     checkBioHeight()
     // pagination
     if (sortedArticles().length === PRERENDERED_ARTICLES_COUNT) {
@@ -118,41 +112,46 @@ export const AuthorView = (props: Props) => {
     setCommented(data)
   }
 
-  createEffect(() => {
+  createEffect(
-    if (author()) {
+    on(
-      fetchComments(author())
+      () => props.author,
-    }
+      () => {
-  })
+        fetchData(props.author)
+        fetchComments(props.author)
+      },
+      { defer: true },
+    ),
+  )
 
   const ogImage = createMemo(() =>
-    author()?.pic
+    props.author?.pic
-      ? getImageUrl(author()?.pic, { width: 1200 })
+      ? getImageUrl(props.author?.pic, { width: 1200 })
       : getImageUrl('production/image/logo_image.png'),
   )
-  const description = createMemo(() => getDescription(author()?.bio))
+  const description = createMemo(() => getDescription(props.author?.bio))
   const handleDeleteComment = (id: number) => {
     setCommented((prev) => prev.filter((comment) => comment.id !== id))
   }
 
   return (
     <div class={styles.authorPage}>
-      <Show when={author()}>
+      <Show when={props.author}>
-        <Title>{author().name}</Title>
+        <Title>{props.author.name}</Title>
         <Meta name="descprition" content={description()} />
         <Meta name="og:type" content="profile" />
-        <Meta name="og:title" content={author().name} />
+        <Meta name="og:title" content={props.author.name} />
         <Meta name="og:image" content={ogImage()} />
         <Meta name="og:description" content={description()} />
         <Meta name="twitter:card" content="summary_large_image" />
-        <Meta name="twitter:title" content={author().name} />
+        <Meta name="twitter:title" content={props.author.name} />
         <Meta name="twitter:description" content={description()} />
         <Meta name="twitter:image" content={ogImage()} />
       </Show>
       <div class="wide-container">
-        <Show when={author()} fallback={<Loading />}>
+        <Show when={props.author} fallback={<Loading />}>
           <>
             <div class={styles.authorHeader}>
-              <AuthorCard author={author()} followers={followers()} following={following()} />
+              <AuthorCard author={props.author} followers={followers()} following={following()} />
             </div>
             <div class={clsx(styles.groupControls, 'row')}>
               <div class="col-md-16">
@@ -161,16 +160,16 @@ export const AuthorView = (props: Props) => {
                     <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>
                       {t('Publications')}
                     </a>
-                    <Show when={author().stat}>
+                    <Show when={props.author.stat}>
-                      <span class="view-switcher__counter">{author().stat.shouts}</span>
+                      <span class="view-switcher__counter">{props.author.stat.shouts}</span>
                     </Show>
                   </li>
                   <li classList={{ 'view-switcher__item--selected': getPage().route === 'authorComments' }}>
                     <a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
                       {t('Comments')}
                     </a>
-                    <Show when={author().stat}>
+                    <Show when={props.author.stat}>
-                      <span class="view-switcher__counter">{author().stat.comments}</span>
+                      <span class="view-switcher__counter">{props.author.stat.comments}</span>
                     </Show>
                   </li>
                   <li classList={{ 'view-switcher__item--selected': getPage().route === 'authorAbout' }}>
@@ -206,7 +205,7 @@ export const AuthorView = (props: Props) => {
                   class={styles.longBio}
                   classList={{ [styles.longBioExpanded]: isBioExpanded() }}
                 >
-                  <div ref={(el) => (bioContainerRef.current = el)} innerHTML={author().about} />
+                  <div ref={(el) => (bioContainerRef.current = el)} innerHTML={props.author.about} />
                 </div>
 
                 <Show when={showExpandBioControl()}>

src/components/Views/ProfileSubscriptions/ProfileSubscriptions.tsx

@@ -27,8 +27,6 @@ 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/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx

@@ -1,37 +1,46 @@
-import { clsx } from 'clsx'
+import { clsx } from "clsx";
-import styles from './BadgeDubscribeButton.module.scss'
+import styles from "./BadgeDubscribeButton.module.scss";
 import { CheckButton } from "../CheckButton";
-import { Show } from "solid-js";
+import { createMemo, Show } from "solid-js";
 import { Button } from "../Button";
 import { Icon } from "../Icon";
 import stylesButton from "../Button/Button.module.scss";
 import { useLocalize } from "../../../context/localize";
+import { useFollowing } from "../../../context/following";
 
 type Props = {
-  class?: string
+  class?: string;
-  isSubscribed: boolean
+  isSubscribed: boolean;
-  minimizeSubscribeButton?: boolean
+  minimizeSubscribeButton?: boolean;
-  action: () => void
+  action: () => void;
-  iconButtons?: boolean
+  iconButtons?: boolean;
-}
+  actionMessageType?: "subscribe" | "unsubscribe";
+};
 
 export const BadgeSubscribeButton = (props: Props) => {
-  const { t } = useLocalize()
+  const { t } = useLocalize();
+
+  const inActionText = createMemo(() => {
+    return props.actionMessageType === "subscribe" ? t("Subscribing...") : t("Unsubscribing...");
+  });
 
   return (
     <div class={props.class}>
       <Show
         when={!props.minimizeSubscribeButton}
-        fallback={<CheckButton text={t('Follow')} checked={props.isSubscribed} onClick={props.action} />}
+        fallback={<CheckButton text={t("Follow")} checked={props.isSubscribed} onClick={props.action} />}
       >
         <Show
           when={props.isSubscribed}
           fallback={
             <Button
-              variant={props.iconButtons ? 'secondary' : 'bordered'}
+              variant={props.iconButtons ? "secondary" : "bordered"}
               size="S"
               value={
-                <Show when={props.iconButtons} fallback={t('Subscribe')}>
+                <Show
+                  when={props.iconButtons}
+                  fallback={props.actionMessageType ? inActionText() : t("Subscribe")}
+                >
                   <Icon name="author-subscribe" class={stylesButton.icon} />
                 </Show>
               }
@@ -45,16 +54,20 @@ export const BadgeSubscribeButton = (props: Props) => {
           }
         >
           <Button
-            variant={props.iconButtons ? 'secondary' : 'bordered'}
+            variant={props.iconButtons ? "secondary" : "bordered"}
             size="S"
             value={
               <Show
                 when={props.iconButtons}
                 fallback={
+                  props.actionMessageType ? (
+                    inActionText()
+                  ) : (
                     <>
-                    <span class={styles.actionButtonLabel}>{t('Following')}</span>
+                      <span class={styles.actionButtonLabel}>{t("Following")}</span>
-                    <span class={styles.actionButtonLabelHovered}>{t('Unfollow')}</span>
+                      <span class={styles.actionButtonLabelHovered}>{t("Unfollow")}</span>
                     </>
+                  )
                 }
               >
                 <Icon name="author-unsubscribe" class={stylesButton.icon} />
@@ -70,5 +83,5 @@ export const BadgeSubscribeButton = (props: Props) => {
         </Show>
       </Show>
     </div>
-  )
+  );
-}
+};

src/context/following.tsx

@@ -122,10 +122,6 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
     }
   }
 
-  createEffect(() => {
-    console.log('%c!!! WTF subscriptions:', 'color: #bada55', subscriptions);
-  })
-
   const value: FollowingContextType = {
     loading,
     subscriptions,

src/graphql/client/core.ts

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