From aa554ca9f6bf8ffb403bbd7939406191348e83d0 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Wed, 20 Jul 2022 16:31:18 -0700
Subject: [PATCH] migrate useUsers hook to react-query (#674)

---
 web/hooks/use-users.ts    | 32 ++++++++++++++------------------
 web/lib/firebase/users.ts | 10 ----------
 2 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/web/hooks/use-users.ts b/web/hooks/use-users.ts
index 1312444e..659395b8 100644
--- a/web/hooks/use-users.ts
+++ b/web/hooks/use-users.ts
@@ -1,32 +1,28 @@
 import { useState, useEffect } from 'react'
 import { PrivateUser, User } from 'common/user'
-import {
-  listenForAllUsers,
-  listenForPrivateUsers,
-} from 'web/lib/firebase/users'
 import { groupBy, sortBy, difference } from 'lodash'
 import { getContractsOfUserBets } from 'web/lib/firebase/bets'
 import { useFollows } from './use-follows'
 import { useUser } from './use-user'
+import { useFirestoreQueryData } from '@react-query-firebase/firestore'
+import { DocumentData } from 'firebase/firestore'
+import { users, privateUsers } from 'web/lib/firebase/users'
 
 export const useUsers = () => {
-  const [users, setUsers] = useState<User[]>([])
-
-  useEffect(() => {
-    listenForAllUsers(setUsers)
-  }, [])
-
-  return users
+  const result = useFirestoreQueryData<DocumentData, User[]>(['users'], users, {
+    subscribe: true,
+    includeMetadataChanges: true,
+  })
+  return result.data ?? []
 }
 
 export const usePrivateUsers = () => {
-  const [users, setUsers] = useState<PrivateUser[]>([])
-
-  useEffect(() => {
-    listenForPrivateUsers(setUsers)
-  }, [])
-
-  return users
+  const result = useFirestoreQueryData<DocumentData, PrivateUser[]>(
+    ['private users'],
+    privateUsers,
+    { subscribe: true, includeMetadataChanges: true }
+  )
+  return result.data || []
 }
 
 export const useDiscoverUsers = (userId: string | null | undefined) => {
diff --git a/web/lib/firebase/users.ts b/web/lib/firebase/users.ts
index 884dde04..89852851 100644
--- a/web/lib/firebase/users.ts
+++ b/web/lib/firebase/users.ts
@@ -258,16 +258,6 @@ export async function listAllUsers() {
   return docs.map((doc) => doc.data())
 }
 
-export function listenForAllUsers(setUsers: (users: User[]) => void) {
-  listenForValues(users, setUsers)
-}
-
-export function listenForPrivateUsers(
-  setUsers: (users: PrivateUser[]) => void
-) {
-  listenForValues(privateUsers, setUsers)
-}
-
 export function getTopTraders(period: Period) {
   const topTraders = query(
     users,