src/ui/component/subscribeButton/view.jsx

@@ -1,9 +1,10 @@
 // @flow
 import * as MODALS from 'constants/modal_types';
 import * as ICONS from 'constants/icons';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import { parseURI } from 'lbry-redux';
 import Button from 'component/button';
+import useHover from 'util/use-hover';
 
 type SubscribtionArgs = {
   channelName: string,
@@ -33,28 +34,12 @@ export default function SubscribeButton(props: Props) {
     doToast,
   } = props;
   const buttonRef = useRef();
-  const [isHovering, setIsHovering] = useState(false);
+  const isHovering = useHover(buttonRef);
   const { claimName } = parseURI(uri);
   const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
   const subscriptionLabel = isSubscribed ? __('Following') : __('Follow');
   const unfollowOverride = isSubscribed && isHovering && __('Unfollow');
 
-  useEffect(() => {
-    function handleHover() {
-      setIsHovering(!isHovering);
-    }
-
-    const button = buttonRef.current;
-    if (button) {
-      button.addEventListener('mouseover', handleHover);
-      button.addEventListener('mouseleave', handleHover);
-      return () => {
-        button.removeEventListener('mouseover', handleHover);
-        button.removeEventListener('mouseleave', handleHover);
-      };
-    }
-  }, [buttonRef, isHovering]);
-
   return (
     <Button
       ref={buttonRef}

src/ui/page/tags/view.jsx

@@ -1,8 +1,9 @@
 // @flow
-import React from 'react';
+import React, { createRef } from 'react';
 import Page from 'component/page';
 import ClaimListDiscover from 'component/claimListDiscover';
 import Button from 'component/button';
+import useHover from 'util/use-hover';
 
 type Props = {
   location: { search: string },
@@ -16,6 +17,8 @@ function TagsPage(props: Props) {
     followedTags,
     doToggleTagFollow,
   } = props;
+  const buttonRef = createRef();
+  const isHovering = useHover(buttonRef);
 
   const urlParams = new URLSearchParams(search);
   const tagsQuery = urlParams.get('t') || '';
@@ -25,18 +28,16 @@ function TagsPage(props: Props) {
   const tag = tags[0];
 
   const isFollowing = followedTags.map(({ name }) => name).includes(tag);
+  let label = isFollowing ? __('Following') : __('Follow');
+  if (isHovering && isFollowing) {
+    label = __('Unfollow');
+  }
 
   return (
     <Page>
       <ClaimListDiscover
         tags={tags}
-        meta={
+        meta={<Button ref={buttonRef} button="link" onClick={() => doToggleTagFollow(tag)} label={label} />}
-          <Button
-            button="link"
-            onClick={() => doToggleTagFollow(tag)}
-            label={isFollowing ? __('Following') : __('Follow')}
-          />
-        }
       />
     </Page>
   );

src/ui/util/use-hover.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export default function useHover(ref) {
+  const [isHovering, setIsHovering] = useState(false);
+
+  useEffect(() => {
+    function handleHover() {
+      setIsHovering(!isHovering);
+    }
+
+    const refElement = ref.current;
+    if (refElement) {
+      refElement.addEventListener('mouseover', handleHover);
+      refElement.addEventListener('mouseleave', handleHover);
+      return () => {
+        refElement.removeEventListener('mouseover', handleHover);
+        refElement.removeEventListener('mouseleave', handleHover);
+      };
+    }
+  }, [ref, isHovering]);
+
+  return isHovering;
+}