stacker.news/components/user-popover.js

50 lines
1.3 KiB
JavaScript

import { USER } from '@/fragments/users'
import errorStyles from '@/styles/error.module.css'
import { useLazyQuery } from '@apollo/client'
import classNames from 'classnames'
import Link from 'next/link'
import HoverablePopover from './hoverable-popover'
import ItemPopover from './item-popover'
import { UserBase, UserSkeleton } from './user-list'
function StackingSince ({ since }) {
return (
<small className='text-muted d-flex-inline'>
stacking since:{' '}
{since
? (
<ItemPopover id={since}>
<Link href={`/items/${since}`}>#{since}</Link>
</ItemPopover>
)
: <span>never</span>}
</small>
)
}
export default function UserPopover ({ name, children }) {
const [getUser, { loading, data }] = useLazyQuery(
USER,
{
variables: { name },
fetchPolicy: 'cache-first'
}
)
return (
<HoverablePopover
onShow={getUser}
trigger={children}
body={!data || loading
? <UserSkeleton />
: !data.user
? <h1 className={classNames(errorStyles.status, errorStyles.describe)}>USER NOT FOUND</h1>
: (
<UserBase user={data.user} className='mb-0 pb-0'>
<StackingSince since={data.user.since} />
</UserBase>
)}
/>
)
}