30 lines
926 B
JavaScript
30 lines
926 B
JavaScript
|
import { SUB_FULL } from '@/fragments/subs'
|
||
|
|
import errorStyles from '@/styles/error.module.css'
|
||
|
|
import { useLazyQuery } from '@apollo/client'
|
||
|
|
import classNames from 'classnames'
|
||
|
|
import HoverablePopover from './hoverable-popover'
|
||
|
|
import { TerritoryInfo, TerritoryInfoSkeleton } from './territory-header'
|
||
|
|
import { truncateString } from '@/lib/format'
|
||
|
|
|
||
|
|
export default function SubPopover ({ sub, children }) {
|
||
|
|
const [getSub, { loading, data }] = useLazyQuery(
|
||
|
|
SUB_FULL,
|
||
|
|
{
|
||
|
|
variables: { sub },
|
||
|
|
fetchPolicy: 'cache-first'
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<HoverablePopover
|
||
|
|
onShow={getSub}
|
||
|
|
trigger={children}
|
||
|
|
body={!data || loading
|
||
|
|
? <TerritoryInfoSkeleton />
|
||
|
|
: !data.sub
|
||
|
|
? <h1 className={classNames(errorStyles.status, errorStyles.describe)}>SUB NOT FOUND</h1>
|
||
|
|
: <TerritoryInfo sub={{ ...data.sub, desc: truncateString(data.sub.desc, 280) }} />}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|