91 lines
2.1 KiB
JavaScript
91 lines
2.1 KiB
JavaScript
import Item from './item'
|
|
import Reply from './reply'
|
|
import Comment from './comment'
|
|
import Text from './text'
|
|
import Comments from './comments'
|
|
import { COMMENTS } from '../fragments/comments'
|
|
import { ITEM_FIELDS } from '../fragments/items'
|
|
import { gql, useQuery } from '@apollo/client'
|
|
import styles from '../styles/item.module.css'
|
|
import { NOFOLLOW_LIMIT } from '../lib/constants'
|
|
import { useRouter } from 'next/router'
|
|
import { useMe } from './me'
|
|
import { Button } from 'react-bootstrap'
|
|
|
|
function BioItem ({ item, handleClick }) {
|
|
const me = useMe()
|
|
if (!item.text) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ItemText item={item} />
|
|
{me?.name === item.user.name &&
|
|
<Button
|
|
onClick={handleClick}
|
|
size='md' variant='link'
|
|
className='text-right'
|
|
>edit bio
|
|
</Button>}
|
|
<Reply parentId={item.id} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
function TopLevelItem ({ item }) {
|
|
return (
|
|
<Item item={item}>
|
|
{item.text && <ItemText item={item} />}
|
|
<Reply parentId={item.id} replyOpen />
|
|
</Item>
|
|
)
|
|
}
|
|
|
|
function ItemText ({ item }) {
|
|
return <Text nofollow={item.sats + item.boost < NOFOLLOW_LIMIT}>{item.text}</Text>
|
|
}
|
|
|
|
export default function ItemFull ({ item, bio, ...props }) {
|
|
const query = gql`
|
|
${ITEM_FIELDS}
|
|
${COMMENTS}
|
|
{
|
|
item(id: ${item.id}) {
|
|
...ItemFields
|
|
text
|
|
comments {
|
|
...CommentsRecursive
|
|
}
|
|
}
|
|
}`
|
|
|
|
const router = useRouter()
|
|
const { error, data } = useQuery(query, {
|
|
fetchPolicy: router.query.cache ? 'cache-first' : undefined
|
|
})
|
|
if (error) {
|
|
return <div>Failed to load!</div>
|
|
}
|
|
|
|
// XXX replace item with cache version
|
|
if (data) {
|
|
({ item } = data)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{item.parentId
|
|
? <Comment item={item} replyOpen includeParent noComments {...props} />
|
|
: (bio
|
|
? <BioItem item={item} {...props} />
|
|
: <TopLevelItem item={item} {...props} />
|
|
)}
|
|
{item.comments &&
|
|
<div className={styles.comments}>
|
|
<Comments comments={item.comments} />
|
|
</div>}
|
|
</>
|
|
)
|
|
}
|