[WIP]

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

@@ -89,34 +89,4 @@
       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;
-      }
-    }
-  }
-
-  .actionButtonLabelHovered {
-    display: none;
-  }
 }

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -15,10 +15,9 @@ import { CheckButton } from '../../_shared/CheckButton'
 import { ConditionalWrapper } from '../../_shared/ConditionalWrapper'
 import { Icon } from '../../_shared/Icon'
 import { Userpic } from '../Userpic'
-
-import { FollowedInfo } from '../../../pages/types'
 import stylesButton from '../../_shared/Button/Button.module.scss'
 import styles from './AuthorBadge.module.scss'
+import { BadgeSubscribeButton } from "../../_shared/BadgeSubscribeButton";
 
 type Props = {
   author: Author
@@ -29,13 +28,19 @@ type Props = {
   inviteView?: boolean
   onInvite?: (id: number) => void
   selected?: boolean
-  isFollowed?: FollowedInfo
 }
 export const AuthorBadge = (props: Props) => {
   const { mediaMatches } = useMediaQuery()
   const { author, requireAuthentication } = useSession()
+  const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
   const [isMobileView, setIsMobileView] = createSignal(false)
-  const [isFollowed, setIsFollowed] = createSignal<boolean>()
+  const [isSubscribed, setIsSubscribed] = createSignal<boolean>()
+
+  createEffect(() => {
+    if(!subscriptions || !props.author) return
+    const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.author?.id);
+    setIsSubscribed(subscribed)
+  })
 
   createEffect(() => {
     setIsMobileView(!mediaMatches.sm)
@@ -67,20 +72,9 @@ export const AuthorBadge = (props: Props) => {
     return props.author.name
   })
 
-  createEffect(
-    on(
-      () => props.isFollowed,
-      () => {
-        setIsFollowed(props.isFollowed?.value)
-      },
-    ),
-  )
-
   const handleFollowClick = () => {
-    const value = !isFollowed()
     requireAuthentication(() => {
-      setIsFollowed(value)
+      isSubscribed() ? unfollow(FollowingEntity.Author, props.author.slug) : follow(FollowingEntity.Author, props.author.slug)
-      setFollowing(FollowingEntity.Author, props.author.slug, value)
     }, 'subscribe')
   }
 
@@ -134,55 +128,59 @@ export const AuthorBadge = (props: Props) => {
       </div>
       <Show when={props.author.slug !== author()?.slug && !props.nameOnly}>
         <div class={styles.actions}>
-          <Show
+          <BadgeSubscribeButton
-            when={!props.minimizeSubscribeButton}
+            action={() => handleFollowClick()}
-            fallback={<CheckButton text={t('Follow')} checked={isFollowed()} onClick={handleFollowClick} />}
+            isSubscribed={isSubscribed()}
-          >
-            <Show
-              when={isFollowed()}
-              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]: isFollowed(),
-                  })}
           />
-              }
+          {/*<Show*/}
-            >
+          {/*  when={!props.minimizeSubscribeButton}*/}
-              <Button
+          {/*  fallback={<CheckButton text={t('Follow')} checked={isSubscribed()} onClick={handleFollowClick} />}*/}
-                variant={props.iconButtons ? 'secondary' : 'bordered'}
+          {/*>*/}
-                size="S"
+          {/*  <Show*/}
-                value={
+          {/*    when={isSubscribed()}*/}
-                  <Show
+          {/*    fallback={*/}
-                    when={props.iconButtons}
+          {/*      <Button*/}
-                    fallback={
+          {/*        variant={props.iconButtons ? 'secondary' : 'bordered'}*/}
-                      <>
+          {/*        size="S"*/}
-                        <span class={styles.actionButtonLabel}>{t('Following')}</span>
+          {/*        value={*/}
-                        <span class={styles.actionButtonLabelHovered}>{t('Unfollow')}</span>
+          {/*          <Show when={props.iconButtons} fallback={t('Subscribe')}>*/}
-                      </>
+          {/*            <Icon name="author-subscribe" class={stylesButton.icon} />*/}
-                    }
+          {/*          </Show>*/}
-                  >
+          {/*        }*/}
-                    <Icon name="author-unsubscribe" class={stylesButton.icon} />
+          {/*        onClick={handleFollowClick}*/}
-                  </Show>
+          {/*        isSubscribeButton={true}*/}
-                }
+          {/*        class={clsx(styles.actionButton, {*/}
-                onClick={handleFollowClick}
+          {/*          [styles.iconed]: props.iconButtons,*/}
-                isSubscribeButton={true}
+          {/*          [stylesButton.subscribed]: isSubscribed(),*/}
-                class={clsx(styles.actionButton, {
+          {/*        })}*/}
-                  [styles.iconed]: props.iconButtons,
+          {/*      />*/}
-                  [stylesButton.subscribed]: isFollowed(),
+          {/*    }*/}
-                })}
+          {/*  >*/}
-              />
+          {/*    <Button*/}
-            </Show>
+          {/*      variant={props.iconButtons ? 'secondary' : 'bordered'}*/}
-          </Show>
+          {/*      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

@@ -34,17 +34,18 @@ 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 [isSubscribed, setIsSubscribed] = createSignal<boolean>()
   const isProfileOwner = createMemo(() => author()?.slug === props.author.slug)
-  const { follow, isOwnerSubscribed, subscribeInAction } = useFollowing()
+  const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
 
   onMount(() => {
     setAuthorSubs(props.following)
   })
 
-  const isSubscribed = isOwnerSubscribed(props.author?.id)
-
   createEffect(() => {
-    console.log('%c!!! isSubscribed:', 'color: #bada55', isSubscribed())
+    if(!subscriptions || !props.author) return
+    const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.author?.id);
+    setIsSubscribed(subscribed)
   })
 
   const name = createMemo(() => {
@@ -83,18 +84,13 @@ export const AuthorCard = (props: Props) => {
     }
   })
 
-  createEffect(() => {
-    console.log("!!! subscribeInAction:", subscribeInAction());
-  })
   const handleFollowClick = () => {
-    console.log("!!! handleFollowClick:");
     requireAuthentication(() => {
-      follow(FollowingEntity.Author, props.author.slug)
+      isSubscribed() ? unfollow(FollowingEntity.Author, props.author.slug) : 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...')
     }
@@ -256,13 +252,7 @@ export const AuthorCard = (props: Props) => {
                   <div class="col-24">
                     <For each={props.followers}>
                       {(follower: Author) => (
-                        <AuthorBadge
+                        <AuthorBadge author={follower}/>
-                          author={follower}
-                          isFollowed={{
-                            loaded: Boolean(authorSubs()),
-                            value: isSubscribed(),
-                          }}
-                        />
                       )}
                     </For>
                   </div>
@@ -306,21 +296,9 @@ export const AuthorCard = (props: Props) => {
                     <For each={authorSubs()}>
                       {(subscription) =>
                         isAuthor(subscription) ? (
-                          <AuthorBadge
+                          <AuthorBadge author={subscription} />
-                            isFollowed={{
-                              loaded: Boolean(authorSubs()),
-                              value: isSubscribed(),
-                            }}
-                            author={subscription}
-                          />
                         ) : (
-                          <TopicBadge
+                          <TopicBadge topic={subscription}/>
-                            isFollowed={{
-                              loaded: Boolean(authorSubs()),
-                              value: isSubscribed(),
-                            }}
-                            topic={subscription}
-                          />
                         )
                       }
                     </For>

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -10,14 +10,12 @@ import { capitalize } from '../../../utils/capitalize'
 import { getImageUrl } from '../../../utils/getImageUrl'
 import { Button } from '../../_shared/Button'
 import { CheckButton } from '../../_shared/CheckButton'
-
-import { FollowedInfo } from '../../../pages/types'
 import styles from './TopicBadge.module.scss'
+import { BadgeSubscribeButton } from "../../_shared/BadgeSubscribeButton";
 
 type Props = {
   topic: Topic
   minimizeSubscribeButton?: boolean
-  isFollowed?: FollowedInfo
   showStat?: boolean
 }
 
@@ -27,13 +25,18 @@ export const TopicBadge = (props: Props) => {
   const [isMobileView, setIsMobileView] = createSignal(false)
   const { requireAuthentication } = useSession()
   const { setFollowing, loading: subLoading } = useFollowing()
-  const [isFollowed, setIsFollowed] = createSignal<boolean>()
+  const [isSubscribed, setIsSubscribed] = createSignal<boolean>()
+  const { follow, unfollow, subscriptions, subscribeInAction } = useFollowing()
+
+  createEffect(() => {
+    if(!subscriptions || !props.topic) return
+    const subscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === props.topic?.id);
+    setIsSubscribed(subscribed)
+  })
 
   const handleFollowClick = () => {
-    const value = !isFollowed()
     requireAuthentication(() => {
-      setIsFollowed(value)
+      follow(FollowingEntity.Topic, props.topic.slug)
-      setFollowing(FollowingEntity.Topic, props.topic.slug, value)
     }, 'subscribe')
   }
 
@@ -41,15 +44,6 @@ export const TopicBadge = (props: Props) => {
     setIsMobileView(!mediaMatches.sm)
   })
 
-  createEffect(
-    on(
-      () => props.isFollowed,
-      () => {
-        setIsFollowed(props.isFollowed.value)
-      },
-    ),
-  )
-
   const title = () =>
     lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title
 
@@ -83,35 +77,8 @@ export const TopicBadge = (props: Props) => {
             </Show>
           </a>
         </div>
-
         <div class={styles.actions}>
-          <Show
+          <BadgeSubscribeButton isSubscribed={isSubscribed()} action={handleFollowClick}/>
-            when={!props.minimizeSubscribeButton}
-            fallback={
-              <CheckButton text={t('Follow')} checked={Boolean(isFollowed())} onClick={handleFollowClick} />
-            }
-          >
-            <Show
-              when={isFollowed()}
-              fallback={
-                <Button
-                  variant="primary"
-                  size="S"
-                  value={subLoading() ? t('subscribing...') : t('Subscribe')}
-                  onClick={handleFollowClick}
-                  class={styles.subscribeButton}
-                />
-              }
-            >
-              <Button
-                onClick={handleFollowClick}
-                variant="bordered"
-                size="S"
-                value={t('Following')}
-                class={styles.subscribeButton}
-              />
-            </Show>
-          </Show>
         </div>
       </div>
       <div class={styles.stats}>

src/components/_shared/BadgeSubscribeButton/BadgeDubscribeButton.module.scss

@@ -0,0 +1,29 @@
+.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;
+    }
+  }
+}
+
+.actionButtonLabelHovered {
+  display: none;
+}

src/components/_shared/BadgeSubscribeButton/BadgeSubscribeButton.tsx

@@ -0,0 +1,74 @@
+import { clsx } from 'clsx'
+import styles from './BadgeDubscribeButton.module.scss'
+import { CheckButton } from "../CheckButton";
+import { Show } from "solid-js";
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+import stylesButton from "../Button/Button.module.scss";
+import { useLocalize } from "../../../context/localize";
+
+type Props = {
+  class?: string
+  isSubscribed: boolean
+  minimizeSubscribeButton?: boolean
+  action: () => void
+  iconButtons?: boolean
+}
+
+export const BadgeSubscribeButton = (props: Props) => {
+  const { t } = useLocalize()
+
+  return (
+    <div class={props.class}>
+      <Show
+        when={!props.minimizeSubscribeButton}
+        fallback={<CheckButton text={t('Follow')} checked={props.isSubscribed} onClick={props.action} />}
+      >
+        <Show
+          when={props.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={props.action}
+              isSubscribeButton={true}
+              class={clsx(styles.actionButton, {
+                [styles.iconed]: props.iconButtons,
+                [stylesButton.subscribed]: props.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={props.action}
+            isSubscribeButton={true}
+            class={clsx(styles.actionButton, {
+              [styles.iconed]: props.iconButtons,
+              [stylesButton.subscribed]: props.isSubscribed,
+            })}
+          />
+        </Show>
+      </Show>
+    </div>
+  )
+}

src/components/_shared/BadgeSubscribeButton/index.ts

@@ -0,0 +1 @@
+export { BadgeSubscribeButton } from './BadgeSubscribeButton'

src/context/following.tsx

@@ -22,7 +22,6 @@ interface FollowingContextType {
   loadSubscriptions: () => void
   follow: (what: FollowingEntity, slug: string) => Promise<void>
   unfollow: (what: FollowingEntity, slug: string) => Promise<void>
-  isOwnerSubscribed: (id: number | string) => Accessor<boolean>
   // followers: Accessor<Author[]>
   subscribeInAction?: Accessor<SubscribeAction>
 }
@@ -50,10 +49,7 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
     try {
       if (apiClient.private) {
         console.debug('[context.following] fetching subs data...')
-        console.log("%c!!! session()?.user.id:", 'background: #222; color: #bada55', session());
-
         const result = await apiClient.getAuthorFollows({ user: session()?.user.id })
-        console.log("!!! result:", result);
         setSubscriptions(result || EMPTY_SUBSCRIPTIONS)
       }
     } catch (error) {
@@ -99,11 +95,10 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
 
 
   createEffect(() => {
-    // console.log("!!! cone setSubscribeInAction:", subscribeInAction());
+    if (author()) {
-    // if (author()) {
+      console.debug('[context.following] author update detect')
-    //   console.debug('[context.following] author update detect')
+      fetchData()
-    //   fetchData()
+    }
-    // }
   })
 
   const setFollowing = (what: FollowingEntity, slug: string, value = true) => {
@@ -127,19 +122,14 @@ export const FollowingProvider = (props: { children: JSX.Element }) => {
     }
   }
 
-  const isOwnerSubscribed = (id?: number | string) => createMemo(() => {
+  createEffect(() => {
-    console.log('%c!!! WTF:', 'color: #bada55', subscriptions);
+    console.log('%c!!! WTF subscriptions:', 'color: #bada55', subscriptions);
-    if (!author() || !subscriptions) return false;
-    const isAuthorSubscribed = subscriptions.authors?.some((authorEntity) => authorEntity.id === id);
-    const isTopicSubscribed = subscriptions.topics?.some((topicEntity) => topicEntity.slug === id);
-    return !!isAuthorSubscribed || !!isTopicSubscribed;
   })
 
   const value: FollowingContextType = {
     loading,
     subscriptions,
     setSubscriptions,
-    isOwnerSubscribed,
     setFollowing,
     loadSubscriptions: fetchData,
     follow,

src/pages/types.ts

@@ -53,9 +53,4 @@ export type UploadedFile = {
   originalFilename?: string
 }
 
-export type FollowedInfo = {
-  value?: boolean
-  loaded?: boolean
-}
-
 export type SubscriptionFilter = 'all' | 'authors' | 'topics' | 'communities'