2022-07-22 22:28:53 +00:00
|
|
|
import { debounce, sortBy } from 'lodash'
|
2022-06-22 16:35:50 +00:00
|
|
|
import Link from 'next/link'
|
2022-07-14 15:09:12 +00:00
|
|
|
import React, { useEffect, useState } from 'react'
|
2022-06-22 16:35:50 +00:00
|
|
|
import { Group } from 'common/group'
|
|
|
|
import { CreateGroupButton } from 'web/components/groups/create-group-button'
|
|
|
|
import { Col } from 'web/components/layout/col'
|
|
|
|
import { Row } from 'web/components/layout/row'
|
|
|
|
import { Page } from 'web/components/page'
|
|
|
|
import { Title } from 'web/components/title'
|
2022-09-03 00:12:55 +00:00
|
|
|
import { useGroups, useMemberGroupIds } from 'web/hooks/use-group'
|
2022-06-22 16:35:50 +00:00
|
|
|
import { groupPath, listAllGroups } from 'web/lib/firebase/groups'
|
2022-09-03 12:51:55 +00:00
|
|
|
import { getUser, getUserAndPrivateUser, User } from 'web/lib/firebase/users'
|
2022-06-22 16:35:50 +00:00
|
|
|
import { Tabs } from 'web/components/layout/tabs'
|
2022-06-29 16:00:43 +00:00
|
|
|
import { SiteLink } from 'web/components/site-link'
|
|
|
|
import clsx from 'clsx'
|
2022-07-13 21:11:22 +00:00
|
|
|
import { Avatar } from 'web/components/avatar'
|
|
|
|
import { JoinOrLeaveGroupButton } from 'web/components/groups/groups-button'
|
2022-07-15 21:16:00 +00:00
|
|
|
import { searchInAny } from 'common/util/parse'
|
2022-07-22 16:56:03 +00:00
|
|
|
import { SEO } from 'web/components/SEO'
|
2022-09-03 01:52:38 +00:00
|
|
|
import { GetServerSideProps } from 'next'
|
|
|
|
import { authenticateOnServer } from 'web/lib/firebase/server-auth'
|
|
|
|
import { useUser } from 'web/hooks/use-user'
|
2022-06-22 16:35:50 +00:00
|
|
|
|
2022-09-03 01:52:38 +00:00
|
|
|
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
|
|
|
const creds = await authenticateOnServer(ctx)
|
2022-09-03 12:51:55 +00:00
|
|
|
const auth = creds ? await getUserAndPrivateUser(creds.uid) : null
|
2022-09-03 00:08:53 +00:00
|
|
|
const groups = await listAllGroups().catch((_) => [])
|
2022-09-02 20:00:38 +00:00
|
|
|
|
2022-06-22 16:35:50 +00:00
|
|
|
const creators = await Promise.all(
|
|
|
|
groups.map((group) => getUser(group.creatorId))
|
|
|
|
)
|
|
|
|
const creatorsDict = Object.fromEntries(
|
|
|
|
creators.map((creator) => [creator.id, creator])
|
|
|
|
)
|
|
|
|
|
2022-09-03 12:51:55 +00:00
|
|
|
return { props: { auth, groups, creatorsDict } }
|
2022-06-22 16:35:50 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default function Groups(props: {
|
2022-09-03 12:51:55 +00:00
|
|
|
auth: { user: User } | null
|
2022-06-22 16:35:50 +00:00
|
|
|
groups: Group[]
|
|
|
|
creatorsDict: { [k: string]: User }
|
|
|
|
}) {
|
2022-09-03 01:52:38 +00:00
|
|
|
//TODO: do we really need the creatorsDict?
|
2022-06-22 16:35:50 +00:00
|
|
|
const [creatorsDict, setCreatorsDict] = useState(props.creatorsDict)
|
2022-09-03 12:51:55 +00:00
|
|
|
const serverUser = props.auth?.user
|
2022-06-22 16:35:50 +00:00
|
|
|
const groups = useGroups() ?? props.groups
|
2022-09-03 01:52:38 +00:00
|
|
|
const user = useUser() ?? serverUser
|
2022-09-03 12:52:51 +00:00
|
|
|
const memberGroupIds = useMemberGroupIds(user) || []
|
2022-06-22 16:35:50 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
// Load User object for creator of new Groups.
|
|
|
|
const newGroups = groups.filter(({ creatorId }) => !creatorsDict[creatorId])
|
|
|
|
if (newGroups.length > 0) {
|
|
|
|
Promise.all(newGroups.map(({ creatorId }) => getUser(creatorId))).then(
|
|
|
|
(newUsers) => {
|
|
|
|
const newUsersDict = Object.fromEntries(
|
|
|
|
newUsers.map((user) => [user.id, user])
|
|
|
|
)
|
|
|
|
setCreatorsDict({ ...creatorsDict, ...newUsersDict })
|
|
|
|
}
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}, [creatorsDict, groups])
|
|
|
|
|
|
|
|
const [query, setQuery] = useState('')
|
|
|
|
|
|
|
|
// List groups with the highest question count, then highest member count
|
|
|
|
// TODO use find-active-contracts to sort by?
|
2022-09-03 00:06:48 +00:00
|
|
|
const matches = sortBy(groups, []).filter((g) =>
|
2022-07-15 21:16:00 +00:00
|
|
|
searchInAny(
|
|
|
|
query,
|
|
|
|
g.name,
|
|
|
|
g.about || '',
|
|
|
|
creatorsDict[g.creatorId].username
|
|
|
|
)
|
2022-06-22 16:35:50 +00:00
|
|
|
)
|
|
|
|
|
|
|
|
const matchesOrderedByRecentActivity = sortBy(groups, [
|
2022-07-15 12:52:08 +00:00
|
|
|
(group) =>
|
2022-09-03 00:06:48 +00:00
|
|
|
-1 * (group.mostRecentContractAddedTime ?? group.mostRecentActivityTime),
|
2022-07-15 21:16:00 +00:00
|
|
|
]).filter((g) =>
|
|
|
|
searchInAny(
|
|
|
|
query,
|
|
|
|
g.name,
|
|
|
|
g.about || '',
|
|
|
|
creatorsDict[g.creatorId].username
|
|
|
|
)
|
2022-06-22 16:35:50 +00:00
|
|
|
)
|
|
|
|
|
|
|
|
// Not strictly necessary, but makes the "hold delete" experience less laggy
|
|
|
|
const debouncedQuery = debounce(setQuery, 50)
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Page>
|
2022-07-22 16:56:03 +00:00
|
|
|
<SEO
|
|
|
|
title="Groups"
|
|
|
|
description="Manifold Groups are communities centered around a collection of prediction markets. Discuss and compete on questions with your friends."
|
|
|
|
url="/groups"
|
|
|
|
/>
|
2022-06-22 16:35:50 +00:00
|
|
|
<Col className="items-center">
|
2022-07-13 21:11:22 +00:00
|
|
|
<Col className="w-full max-w-2xl px-4 sm:px-2">
|
|
|
|
<Row className="items-center justify-between">
|
|
|
|
<Title text="Explore groups" />
|
|
|
|
{user && <CreateGroupButton user={user} goToGroupOnSubmit={true} />}
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
<div className="mb-6 text-gray-500">
|
|
|
|
Discuss and compete on questions with a group of friends.
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<Tabs
|
|
|
|
currentPageForAnalytics={'groups'}
|
|
|
|
tabs={[
|
2022-09-03 01:52:38 +00:00
|
|
|
...(user
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
title: 'My Groups',
|
|
|
|
content: (
|
|
|
|
<Col>
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
onChange={(e) => debouncedQuery(e.target.value)}
|
|
|
|
placeholder="Search your groups"
|
|
|
|
className="input input-bordered mb-4 w-full"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
|
|
{matchesOrderedByRecentActivity
|
|
|
|
.filter((match) =>
|
|
|
|
memberGroupIds.includes(match.id)
|
|
|
|
)
|
|
|
|
.map((group) => (
|
|
|
|
<GroupCard
|
|
|
|
key={group.id}
|
|
|
|
group={group}
|
|
|
|
creator={creatorsDict[group.creatorId]}
|
|
|
|
user={user}
|
|
|
|
isMember={memberGroupIds.includes(group.id)}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
2022-07-13 21:11:22 +00:00
|
|
|
{
|
|
|
|
title: 'All',
|
|
|
|
content: (
|
|
|
|
<Col>
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
onChange={(e) => debouncedQuery(e.target.value)}
|
|
|
|
placeholder="Search groups"
|
|
|
|
className="input input-bordered mb-4 w-full"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
|
|
{matches.map((group) => (
|
|
|
|
<GroupCard
|
|
|
|
key={group.id}
|
|
|
|
group={group}
|
|
|
|
creator={creatorsDict[group.creatorId]}
|
2022-09-03 01:36:49 +00:00
|
|
|
user={user}
|
|
|
|
isMember={memberGroupIds.includes(group.id)}
|
2022-07-13 21:11:22 +00:00
|
|
|
/>
|
|
|
|
))}
|
2022-09-03 00:06:48 +00:00
|
|
|
</div>
|
|
|
|
</Col>
|
|
|
|
),
|
|
|
|
},
|
2022-07-13 21:11:22 +00:00
|
|
|
]}
|
|
|
|
/>
|
2022-06-22 16:35:50 +00:00
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
</Page>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-09-03 01:36:49 +00:00
|
|
|
export function GroupCard(props: {
|
|
|
|
group: Group
|
|
|
|
creator: User | undefined
|
|
|
|
user: User | undefined | null
|
|
|
|
isMember: boolean
|
|
|
|
}) {
|
|
|
|
const { group, creator, user, isMember } = props
|
2022-09-03 00:12:55 +00:00
|
|
|
const { totalContracts } = group
|
2022-06-22 16:35:50 +00:00
|
|
|
return (
|
2022-07-14 13:57:33 +00:00
|
|
|
<Col className="relative min-w-[20rem] max-w-xs gap-1 rounded-xl bg-white p-8 shadow-md hover:bg-gray-100">
|
2022-06-22 16:35:50 +00:00
|
|
|
<Link href={groupPath(group.slug)}>
|
2022-07-13 21:11:22 +00:00
|
|
|
<a className="absolute left-0 right-0 top-0 bottom-0 z-0" />
|
2022-06-22 16:35:50 +00:00
|
|
|
</Link>
|
2022-07-13 21:11:22 +00:00
|
|
|
<div>
|
|
|
|
<Avatar
|
2022-07-18 14:35:59 +00:00
|
|
|
className={'absolute top-2 right-2 z-10'}
|
2022-07-13 21:11:22 +00:00
|
|
|
username={creator?.username}
|
|
|
|
avatarUrl={creator?.avatarUrl}
|
|
|
|
noLink={false}
|
|
|
|
size={12}
|
|
|
|
/>
|
|
|
|
</div>
|
2022-06-22 16:35:50 +00:00
|
|
|
<Row className="items-center justify-between gap-2">
|
|
|
|
<span className="text-xl">{group.name}</span>
|
|
|
|
</Row>
|
2022-09-03 00:12:55 +00:00
|
|
|
<Row>{totalContracts} questions</Row>
|
2022-07-13 21:11:22 +00:00
|
|
|
<Row className="text-sm text-gray-500">
|
|
|
|
<GroupMembersList group={group} />
|
|
|
|
</Row>
|
|
|
|
<Row>
|
|
|
|
<div className="text-sm text-gray-500">{group.about}</div>
|
|
|
|
</Row>
|
|
|
|
<Col className={'mt-2 h-full items-start justify-end'}>
|
2022-09-03 01:36:49 +00:00
|
|
|
<JoinOrLeaveGroupButton
|
|
|
|
group={group}
|
|
|
|
className={'z-10 w-24'}
|
|
|
|
user={user}
|
|
|
|
isMember={isMember}
|
|
|
|
/>
|
2022-07-13 21:11:22 +00:00
|
|
|
</Col>
|
2022-06-22 16:35:50 +00:00
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
}
|
2022-06-29 16:00:43 +00:00
|
|
|
|
2022-07-14 15:09:12 +00:00
|
|
|
function GroupMembersList(props: { group: Group }) {
|
|
|
|
const { group } = props
|
2022-09-03 00:12:55 +00:00
|
|
|
const { totalMembers } = group
|
|
|
|
if (totalMembers === 1) return <div />
|
2022-07-14 15:09:12 +00:00
|
|
|
return (
|
|
|
|
<div className="text-neutral flex flex-wrap gap-1">
|
2022-09-03 00:12:55 +00:00
|
|
|
<span>{totalMembers} members</span>
|
2022-07-14 15:09:12 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-07-22 22:28:53 +00:00
|
|
|
export function GroupLinkItem(props: { group: Group; className?: string }) {
|
2022-06-29 16:00:43 +00:00
|
|
|
const { group, className } = props
|
|
|
|
|
|
|
|
return (
|
|
|
|
<SiteLink
|
|
|
|
href={groupPath(group.slug)}
|
|
|
|
className={clsx('z-10 truncate', className)}
|
|
|
|
>
|
|
|
|
{group.name}
|
|
|
|
</SiteLink>
|
|
|
|
)
|
|
|
|
}
|