React querify fetching your groups

web/hooks/use-group.ts

@@ -2,13 +2,13 @@ import { useEffect, useState } from 'react'
 import { Group } from 'common/group'
 import { User } from 'common/user'
 import {
+  getMemberGroups,
   GroupMemberDoc,
   groupMembers,
   listenForGroup,
   listenForGroupContractDocs,
   listenForGroups,
   listenForMemberGroupIds,
-  listenForMemberGroups,
   listenForOpenGroups,
   listGroups,
 } from 'web/lib/firebase/groups'
@@ -17,6 +17,7 @@ import { filterDefined } from 'common/util/array'
 import { Contract } from 'common/contract'
 import { uniq } from 'lodash'
 import { listenForValues } from 'web/lib/firebase/utils'
+import { useQuery } from 'react-query'
 
 export const useGroup = (groupId: string | undefined) => {
   const [group, setGroup] = useState<Group | null | undefined>()
@@ -49,12 +50,10 @@ export const useOpenGroups = () => {
 }
 
 export const useMemberGroups = (userId: string | null | undefined) => {
-  const [memberGroups, setMemberGroups] = useState<Group[] | undefined>()
+  const result = useQuery(['member-groups', userId ?? ''], () =>
-  useEffect(() => {
+    getMemberGroups(userId ?? '')
-    if (userId)
+  )
-      return listenForMemberGroups(userId, (groups) => setMemberGroups(groups))
+  return result.data
-  }, [userId])
-  return memberGroups
 }
 
 // Note: We cache member group ids in localstorage to speed up the initial load

web/lib/firebase/groups.ts

@@ -32,7 +32,7 @@ export const groupMembers = (groupId: string) =>
 export const groupContracts = (groupId: string) =>
   collection(groups, groupId, 'groupContracts')
 const openGroupsQuery = query(groups, where('anyoneCanJoin', '==', true))
-const memberGroupsQuery = (userId: string) =>
+export const memberGroupsQuery = (userId: string) =>
   query(collectionGroup(db, 'groupMembers'), where('userId', '==', userId))
 
 export function groupPath(
@@ -112,6 +112,15 @@ export function listenForGroup(
   return listenForValue(doc(groups, groupId), setGroup)
 }
 
+export async function getMemberGroups(userId: string) {
+  const snapshot = await getDocs(memberGroupsQuery(userId))
+  const groupIds = filterDefined(
+    snapshot.docs.map((doc) => doc.ref.parent.parent?.id)
+  )
+  const groups = await Promise.all(groupIds.map(getGroup))
+  return filterDefined(groups)
+}
+
 export function listenForMemberGroupIds(
   userId: string,
   setGroupIds: (groupIds: string[]) => void