Use UserFollowButton instead of FollowButton in UserPage (#742)

web/components/user-page.tsx

@@ -6,12 +6,7 @@ import { LinkIcon } from '@heroicons/react/solid'
 import { PencilIcon } from '@heroicons/react/outline'
 import Confetti from 'react-confetti'
 
-import {
+import { getPortfolioHistory, User } from 'web/lib/firebase/users'
-  follow,
-  getPortfolioHistory,
-  unfollow,
-  User,
-} from 'web/lib/firebase/users'
 import { CreatorContractsList } from './contract/contracts-grid'
 import { SEO } from './SEO'
 import { Page } from './page'
@@ -31,8 +26,7 @@ import { getContractFromId, listContracts } from 'web/lib/firebase/contracts'
 import { LoadingIndicator } from './loading-indicator'
 import { BetsList } from './bets-list'
 import { FollowersButton, FollowingButton } from './following-button'
-import { useFollows } from 'web/hooks/use-follows'
+import { UserFollowButton } from './follow-button'
-import { FollowButton } from './follow-button'
 import { PortfolioMetrics } from 'common/user'
 import { GroupsButton } from 'web/components/groups/groups-button'
 import { PortfolioValueSection } from './portfolio/portfolio-value-section'
@@ -120,19 +114,8 @@ export function UserPage(props: { user: User; currentUser?: User }) {
     }
   }, [userBets, usersComments])
 
-  const yourFollows = useFollows(currentUser?.id)
-  const isFollowing = yourFollows?.includes(user.id)
   const profit = user.profitCached.allTime
 
-  const onFollow = () => {
-    if (!currentUser) return
-    follow(currentUser.id, user.id)
-  }
-  const onUnfollow = () => {
-    if (!currentUser) return
-    unfollow(currentUser.id, user.id)
-  }
-
   return (
     <Page key={user.id}>
       <SEO
@@ -167,13 +150,7 @@ export function UserPage(props: { user: User; currentUser?: User }) {
 
         {/* Top right buttons (e.g. edit, follow) */}
         <div className="absolute right-0 top-0 mt-4 mr-4">
-          {!isCurrentUser && (
+          {!isCurrentUser && <UserFollowButton userId={user.id} />}
-            <FollowButton
-              isFollowing={isFollowing}
-              onFollow={onFollow}
-              onUnfollow={onUnfollow}
-            />
-          )}
           {isCurrentUser && (
             <SiteLink className="btn" href="/profile">
               <PencilIcon className="h-5 w-5" />{' '}