diff --git a/web/components/contract/prob-change-table.tsx b/web/components/contract/prob-change-table.tsx index f3e00f69..5a616f14 100644 --- a/web/components/contract/prob-change-table.tsx +++ b/web/components/contract/prob-change-table.tsx @@ -2,34 +2,35 @@ import clsx from 'clsx' import { contractPath } from 'web/lib/firebase/contracts' import { CPMMContract } from 'common/contract' import { formatPercent } from 'common/util/format' -import { useProbChanges } from 'web/hooks/use-prob-changes' import { SiteLink } from '../site-link' import { Col } from '../layout/col' import { Row } from '../layout/row' +import { LoadingIndicator } from '../loading-indicator' -export function ProbChangeTable(props: { userId: string | null | undefined }) { - const { userId } = props +export function ProbChangeTable(props: { + changes: + | { positiveChanges: CPMMContract[]; negativeChanges: CPMMContract[] } + | undefined +}) { + const { changes } = props - const changes = useProbChanges(userId ?? '') - - if (!changes) { - return null - } - - const count = 6 + if (!changes) return const { positiveChanges, negativeChanges } = changes - const filteredPositiveChanges = positiveChanges.slice(0, count / 2) - const filteredNegativeChanges = negativeChanges.slice(0, count / 2) - const filteredChanges = [ - ...filteredPositiveChanges, - ...filteredNegativeChanges, - ] + if (positiveChanges.length === 0 && negativeChanges.length === 0) return null + + const rows = Math.min( + Math.min(positiveChanges.length, negativeChanges.length), + 3 + ) + + const filteredPositiveChanges = positiveChanges.slice(0, rows) + const filteredNegativeChanges = negativeChanges.slice(0, rows) return ( - {filteredChanges.slice(0, count / 2).map((contract) => ( + {filteredPositiveChanges.map((contract) => ( - {filteredChanges.slice(count / 2).map((contract) => ( + {filteredNegativeChanges.map((contract) => ( { const user = useUser() @@ -38,8 +39,7 @@ const Home = () => { const groups = useMemberGroups(user?.id) ?? [] - const [homeSections] = useState(user?.homeSections ?? []) - const { sections } = getHomeItems(groups, homeSections) + const { sections } = getHomeItems(groups, user?.homeSections ?? []) return ( @@ -152,6 +152,8 @@ function GroupSection(props: { group: Group; user: User | null | undefined }) { function DailyMoversSection(props: { userId: string | null | undefined }) { const { userId } = props + const changes = useProbChanges(userId ?? '') + return ( @@ -161,7 +163,7 @@ function DailyMoversSection(props: { userId: string | null | undefined }) { aria-hidden="true" /> - + ) }