'Discover' => 'Similar' and shows recs based on user you have open

web/components/following-button.tsx

@@ -23,7 +23,7 @@ export function FollowingButton(props: { user: User }) {
         Following
       </TextButton>
 
-      <FollowingFollowersDialog
+      <FollowsDialog
         user={user}
         defaultTab="following"
         followingIds={followingIds ?? []}
@@ -45,7 +45,7 @@ export function EditFollowingButton(props: { user: User; className?: string }) {
     <TextButton className={className} onClick={() => setIsOpen(true)}>
       <PencilIcon className="inline h-4 w-4" />
       Following
-      <FollowingFollowersDialog
+      <FollowsDialog
         user={user}
         defaultTab="following"
         followingIds={followingIds ?? []}
@@ -70,7 +70,7 @@ export function FollowersButton(props: { user: User }) {
         Followers
       </TextButton>
 
-      <FollowingFollowersDialog
+      <FollowsDialog
         user={user}
         defaultTab="followers"
         followingIds={followingIds ?? []}
@@ -82,7 +82,7 @@ export function FollowersButton(props: { user: User }) {
   )
 }
 
-function FollowingFollowersDialog(props: {
+function FollowsDialog(props: {
   user: User
   followingIds: string[]
   followerIds: string[]
@@ -99,7 +99,7 @@ function FollowingFollowersDialog(props: {
 
   const currentUser = useUser()
 
-  const discoverUserIds = useDiscoverUsers()
+  const discoverUserIds = useDiscoverUsers(user?.id)
   useEffect(() => {
     prefetchUsers(discoverUserIds)
   }, [discoverUserIds])
@@ -122,7 +122,7 @@ function FollowingFollowersDialog(props: {
             ...(currentUser
               ? [
                   {
-                    title: 'Discover',
+                    title: 'Similar',
                     content: <FollowList userIds={discoverUserIds} />,
                   },
                 ]

web/hooks/use-follows.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { listenForFollowers, listenForFollows } from 'web/lib/firebase/users'
 
-export const useFollows = (userId: string | undefined) => {
+export const useFollows = (userId: string | null | undefined) => {
   const [followIds, setFollowIds] = useState<string[] | undefined>()
 
   useEffect(() => {

web/hooks/use-users.ts

@@ -5,7 +5,6 @@ import {
   listenForAllUsers,
   listenForPrivateUsers,
 } from 'web/lib/firebase/users'
-import { useUser } from './use-user'
 import { groupBy, sortBy, difference } from 'lodash'
 import { getContractsOfUserBets } from 'web/lib/firebase/bets'
 import { useFollows } from './use-follows'
@@ -42,14 +41,12 @@ export const usePrivateUsers = () => {
   return users
 }
 
-export const useDiscoverUsers = () => {
-  const user = useUser()
-
+export const useDiscoverUsers = (userId: string | null | undefined) => {
   const [discoverUserIds, setDiscoverUserIds] = useState<string[]>([])
 
   useEffect(() => {
-    if (user)
-      getContractsOfUserBets(user.id).then((contracts) => {
+    if (userId)
+      getContractsOfUserBets(userId).then((contracts) => {
         const creatorCounts = Object.entries(
           groupBy(contracts, 'creatorId')
         ).map(([id, contracts]) => [id, contracts.length] as const)
@@ -60,10 +57,10 @@ export const useDiscoverUsers = () => {
 
         setDiscoverUserIds(topCreatorIds)
       })
-  }, [user])
+  }, [userId])
 
-  const followedUserIds = useFollows(user?.id)
-  const nonSuggestions = [user?.id ?? '', ...(followedUserIds ?? [])]
+  const followedUserIds = useFollows(userId)
+  const nonSuggestions = [userId ?? '', ...(followedUserIds ?? [])]
 
   return difference(discoverUserIds, nonSuggestions).slice(0, 50)
 }