diff --git a/web/components/contract-search.tsx b/web/components/contract-search.tsx index 834a4db1..952d4034 100644 --- a/web/components/contract-search.tsx +++ b/web/components/contract-search.tsx @@ -57,6 +57,7 @@ export function ContractSearch(props: { creatorId?: string tag?: string excludeContractIds?: string[] + groupSlug?: string } onContractClick?: (contract: Contract) => void showPlaceHolder?: boolean @@ -79,7 +80,6 @@ export function ContractSearch(props: { ?.map((g) => g.slug) .filter((s) => !NEW_USER_GROUP_SLUGS.includes(s)) const follows = useFollows(user?.id) - console.log(memberGroupSlugs, follows) const { initialSort } = useInitialQueryAndSort(querySortOptions) const sort = sortIndexes @@ -112,6 +112,9 @@ export function ContractSearch(props: { additionalFilter?.creatorId ? `creatorId:${additionalFilter.creatorId}` : '', + additionalFilter?.groupSlug + ? `groupSlugs:${additionalFilter.groupSlug}` + : '', ].filter((f) => f) // Hack to make Algolia work. filters = ['', ...filters] diff --git a/web/hooks/use-group.ts b/web/hooks/use-group.ts index 1fde9f4e..8af2183e 100644 --- a/web/hooks/use-group.ts +++ b/web/hooks/use-group.ts @@ -75,19 +75,21 @@ export const useMemberGroupIds = (user: User | null | undefined) => { return memberGroupIds } -export function useMembers(group: Group) { +export function useMembers(group: Group, max?: number) { const [members, setMembers] = useState([]) useEffect(() => { const { memberIds } = group if (memberIds.length > 0) { - listMembers(group).then((members) => setMembers(members)) + listMembers(group, max).then((members) => setMembers(members)) } - }, [group]) + }, [group, max]) return members } -export async function listMembers(group: Group) { - return await Promise.all(group.memberIds.map(getUser)) +export async function listMembers(group: Group, max?: number) { + return await Promise.all( + group.memberIds.slice(0, max ? max : group.memberIds.length).map(getUser) + ) } export const useGroupsWithContract = (contractId: string | undefined) => { diff --git a/web/pages/group/[...slugs]/index.tsx b/web/pages/group/[...slugs]/index.tsx index fc76df48..91e6f998 100644 --- a/web/pages/group/[...slugs]/index.tsx +++ b/web/pages/group/[...slugs]/index.tsx @@ -7,10 +7,10 @@ import { Contract } from 'web/lib/firebase/contracts' import { groupPath, getGroupBySlug, - getGroupContracts, updateGroup, addUserToGroup, addContractToGroup, + getGroupContracts, } from 'web/lib/firebase/groups' import { Row } from 'web/components/layout/row' import { UserLink } from 'web/components/user-page' @@ -33,7 +33,6 @@ import { SEO } from 'web/components/SEO' import { Linkify } from 'web/components/linkify' import { fromPropz, usePropz } from 'web/hooks/use-propz' import { Tabs } from 'web/components/layout/tabs' -import { ContractsGrid } from 'web/components/contract/contracts-list' import { createButtonStyle, CreateQuestionButton, @@ -42,13 +41,15 @@ import React, { useEffect, useState } from 'react' import { GroupChat } from 'web/components/groups/group-chat' import { LoadingIndicator } from 'web/components/loading-indicator' import { Modal } from 'web/components/layout/modal' -import { checkAgainstQuery } from 'web/hooks/use-sort-and-query-params' +import { + checkAgainstQuery, + getSavedSort, +} from 'web/hooks/use-sort-and-query-params' import { ChoicesToggleGroup } from 'web/components/choices-toggle-group' import { toast } from 'react-hot-toast' import { useCommentsOnGroup } from 'web/hooks/use-comments' import { ShareIconButton } from 'web/components/share-icon-button' import { REFERRAL_AMOUNT } from 'common/user' -import { SiteLink } from 'web/components/site-link' import { ContractSearch } from 'web/components/contract-search' import clsx from 'clsx' import { FollowList } from 'web/components/follow-list' @@ -61,10 +62,14 @@ export async function getStaticPropz(props: { params: { slugs: string[] } }) { const { slugs } = props.params const group = await getGroupBySlug(slugs[0]) - const members = group ? await listMembers(group) : [] + const members = + group && group.memberIds.length < 100 ? await listMembers(group) : [] const creatorPromise = group ? getUser(group.creatorId) : null - const contracts = group ? await getGroupContracts(group).catch((_) => []) : [] + const contracts = + group && group.contractIds.length < 100 + ? await getGroupContracts(group).catch((_) => []) + : [] const bets = await Promise.all( contracts.map((contract: Contract) => listAllBets(contract.id)) @@ -149,26 +154,9 @@ export default function GroupPage(props: { const page = slugs?.[1] as typeof groupSubpages[number] const group = useGroup(props.group?.id) ?? props.group - const [contracts, setContracts] = useState(undefined) - const [query, setQuery] = useState('') const tips = useTipTxns({ groupId: group?.id }) const messages = useCommentsOnGroup(group?.id) - const debouncedQuery = debounce(setQuery, 50) - const filteredContracts = - query != '' && contracts - ? contracts.filter( - (c) => - checkAgainstQuery(query, c.question) || - checkAgainstQuery(query, c.creatorName) || - checkAgainstQuery(query, c.creatorUsername) - ) - : [] - - useEffect(() => { - if (group) - getGroupContracts(group).then((contracts) => setContracts(contracts)) - }, [group]) const user = useUser() useEffect(() => { @@ -237,37 +225,14 @@ export default function GroupPage(props: { { title: 'Questions', content: ( -
- {contracts ? ( - contracts.length > 0 ? ( - <> - debouncedQuery(e.target.value)} - placeholder="Search the group's questions" - className="input input-bordered mb-4 w-full" - /> - {}} - /> - - ) : ( -
- No questions yet. Why not{' '} - - add one? - -
- ) - ) : ( - - )} -
+ ), href: groupPath(group.slug, 'questions'), }, @@ -491,8 +456,10 @@ function GroupMemberSearch(props: { group: Group }) { export function GroupMembersList(props: { group: Group }) { const { group } = props - const members = useMembers(group).filter((m) => m.id !== group.creatorId) const maxMembersToShow = 3 + const members = useMembers(group, maxMembersToShow).filter( + (m) => m.id !== group.creatorId + ) if (group.memberIds.length === 1) return
return (
@@ -503,8 +470,8 @@ export function GroupMembersList(props: { group: Group }) { {members.length > 1 && i !== members.length - 1 && ,}
))} - {members.length > maxMembersToShow && ( - & {members.length - maxMembersToShow} more + {group.memberIds.length > maxMembersToShow && ( + & {group.memberIds.length - maxMembersToShow} more )}
)