139 lines
3.7 KiB
TypeScript
139 lines
3.7 KiB
TypeScript
import clsx from 'clsx'
|
|
import { PencilIcon } from '@heroicons/react/outline'
|
|
import { User } from 'common/user'
|
|
import { useEffect, useState } from 'react'
|
|
import { useFollowers, useFollows } from 'web/hooks/use-follows'
|
|
import { prefetchUsers } from 'web/hooks/use-user'
|
|
import { FollowList } from './follow-list'
|
|
import { Col } from './layout/col'
|
|
import { Modal } from './layout/modal'
|
|
import { Tabs } from './layout/tabs'
|
|
|
|
export function FollowingButton(props: { user: User }) {
|
|
const { user } = props
|
|
const [open, setOpen] = useState(false)
|
|
const followingIds = useFollows(user.id)
|
|
const followerIds = useFollowers(user.id)
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="cursor-pointer gap-2 hover:underline focus:underline"
|
|
tabIndex={0}
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<span className="font-semibold">{followingIds?.length ?? ''}</span>{' '}
|
|
Following
|
|
</div>
|
|
|
|
<FollowingFollowersDialog
|
|
user={user}
|
|
defaultTab="following"
|
|
followingIds={followingIds ?? []}
|
|
followerIds={followerIds ?? []}
|
|
isOpen={open}
|
|
setIsOpen={setOpen}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function EditFollowingButton(props: { user: User; className?: string }) {
|
|
const { user, className } = props
|
|
const [open, setOpen] = useState(false)
|
|
const followingIds = useFollows(user.id)
|
|
const followerIds = useFollowers(user.id)
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
className,
|
|
'btn btn-sm btn-ghost cursor-pointer gap-2 whitespace-nowrap text-sm normal-case text-gray-700'
|
|
)}
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<PencilIcon className="inline h-4 w-4" />
|
|
<div>
|
|
<span className="font-semibold">{followingIds?.length ?? ''}</span>{' '}
|
|
Following
|
|
</div>
|
|
|
|
<FollowingFollowersDialog
|
|
user={user}
|
|
defaultTab="following"
|
|
followingIds={followingIds ?? []}
|
|
followerIds={followerIds ?? []}
|
|
isOpen={open}
|
|
setIsOpen={setOpen}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function FollowersButton(props: { user: User }) {
|
|
const { user } = props
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const followingIds = useFollows(user.id)
|
|
const followerIds = useFollowers(user.id)
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="cursor-pointer gap-2 hover:underline focus:underline"
|
|
tabIndex={0}
|
|
onClick={() => setIsOpen(true)}
|
|
>
|
|
<span className="font-semibold">{followerIds?.length ?? ''}</span>{' '}
|
|
Followers
|
|
</div>
|
|
|
|
<FollowingFollowersDialog
|
|
user={user}
|
|
defaultTab="followers"
|
|
followingIds={followingIds ?? []}
|
|
followerIds={followerIds ?? []}
|
|
isOpen={isOpen}
|
|
setIsOpen={setIsOpen}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function FollowingFollowersDialog(props: {
|
|
user: User
|
|
followingIds: string[]
|
|
followerIds: string[]
|
|
defaultTab: 'following' | 'followers'
|
|
isOpen: boolean
|
|
setIsOpen: (isOpen: boolean) => void
|
|
}) {
|
|
const { user, followingIds, followerIds, defaultTab, isOpen, setIsOpen } =
|
|
props
|
|
|
|
useEffect(() => {
|
|
prefetchUsers([...followingIds, ...followerIds])
|
|
}, [followingIds, followerIds])
|
|
|
|
return (
|
|
<Modal open={isOpen} setOpen={setIsOpen}>
|
|
<Col className="rounded bg-white p-6">
|
|
<div className="p-2 pb-1 text-xl">{user.name}</div>
|
|
<div className="p-2 pt-0 text-sm text-gray-500">@{user.username}</div>
|
|
<Tabs
|
|
tabs={[
|
|
{
|
|
title: 'Following',
|
|
content: <FollowList userIds={followingIds} />,
|
|
},
|
|
{
|
|
title: 'Followers',
|
|
content: <FollowList userIds={followerIds} />,
|
|
},
|
|
]}
|
|
defaultIndex={defaultTab === 'following' ? 0 : 1}
|
|
/>
|
|
</Col>
|
|
</Modal>
|
|
)
|
|
}
|