From e9870acf41d5b18d68fe985a11646d024b07dfcb Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Fri, 16 Sep 2022 14:09:48 -0500
Subject: [PATCH] Listen for group updates

---
 web/hooks/use-group.ts                |  1 -
 web/pages/experimental/home/index.tsx | 22 +++++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/web/hooks/use-group.ts b/web/hooks/use-group.ts
index dac97d8b..381f1879 100644
--- a/web/hooks/use-group.ts
+++ b/web/hooks/use-group.ts
@@ -84,7 +84,6 @@ export const useMemberGroups = (userId: string | null | undefined) => {
   return result.data
 }
 
-// Note: We cache member group ids in localstorage to speed up the initial load
 export const useMemberGroupIds = (user: User | null | undefined) => {
   const [memberGroupIds, setMemberGroupIds] = useState<string[] | undefined>(
     undefined
diff --git a/web/pages/experimental/home/index.tsx b/web/pages/experimental/home/index.tsx
index 29709c6d..818371f6 100644
--- a/web/pages/experimental/home/index.tsx
+++ b/web/pages/experimental/home/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import Router from 'next/router'
 import {
   AdjustmentsIcon,
@@ -29,7 +29,12 @@ import { getHomeItems } from '../../../components/arrange-home'
 import { Title } from 'web/components/title'
 import { Row } from 'web/components/layout/row'
 import { ProbChangeTable } from 'web/components/contract/prob-change-table'
-import { groupPath, joinGroup, leaveGroup } from 'web/lib/firebase/groups'
+import {
+  getGroup,
+  groupPath,
+  joinGroup,
+  leaveGroup,
+} from 'web/lib/firebase/groups'
 import { usePortfolioHistory } from 'web/hooks/use-portfolio-history'
 import { formatMoney } from 'common/util/format'
 import { useProbChanges } from 'web/hooks/use-prob-changes'
@@ -41,6 +46,7 @@ import { hasCompletedStreakToday } from 'web/components/profile/betting-streak-m
 import { useContractsQuery } from 'web/hooks/use-contracts'
 import { ContractsGrid } from 'web/components/contract/contracts-grid'
 import { PillButton } from 'web/components/buttons/pill-button'
+import { filterDefined } from 'common/util/array'
 
 export default function Home() {
   const user = useUser()
@@ -49,7 +55,17 @@ export default function Home() {
 
   useSaveReferral()
 
-  const groups = useMemberGroups(user?.id) ?? []
+  const cachedGroups = useMemberGroups(user?.id) ?? []
+  const groupIds = useMemberGroupIds(user)
+  const [groups, setGroups] = useState(cachedGroups)
+
+  useEffect(() => {
+    if (groupIds) {
+      Promise.all(groupIds.map((id) => getGroup(id))).then((groups) =>
+        setGroups(filterDefined(groups))
+      )
+    }
+  }, [groupIds])
 
   const { sections } = getHomeItems(groups, user?.homeSections ?? [])