stacker.news/components/items.js

92 lines
2.6 KiB
JavaScript
Raw Normal View History

2021-04-22 22:14:32 +00:00
import { useQuery } from '@apollo/client'
2022-07-21 22:55:05 +00:00
import Item, { ItemSkeleton } from './item'
import ItemJob from './item-job'
2021-04-14 23:56:29 +00:00
import styles from './items.module.css'
2021-09-30 15:46:58 +00:00
import MoreFooter from './more-footer'
import { Fragment, useCallback, useMemo } from 'react'
2023-05-06 21:51:17 +00:00
import { CommentFlat } from './comment'
import { SUB_ITEMS } from '@/fragments/subs'
import { LIMIT } from '@/lib/cursor'
import ItemFull from './item-full'
import { useData } from './use-data'
2021-04-14 23:56:29 +00:00
export default function Items ({ ssrData, variables = {}, query, destructureData, rank, noMoreText, Footer, filter = () => true }) {
const { data, fetchMore } = useQuery(query || SUB_ITEMS, { variables })
const Foooter = Footer || MoreFooter
const dat = useData(data, ssrData)
2021-09-30 15:46:58 +00:00
const { items, pins, cursor } = useMemo(() => {
if (!dat) return {}
2022-10-25 21:35:32 +00:00
if (destructureData) {
return destructureData(dat)
2022-10-25 21:35:32 +00:00
} else {
return dat?.items
2022-10-25 21:35:32 +00:00
}
}, [dat])
2022-01-07 16:32:31 +00:00
const itemsWithPins = useMemo(() => {
if (!pins) return items
const res = [...items]
pins?.forEach(p => {
if (p.position <= res.length) {
res.splice(p.position - 1, 0, p)
} else {
res.push(p)
}
})
return res
}, [pins, items])
const Skeleton = useCallback(() =>
2024-01-17 23:39:39 +00:00
<ItemsSkeleton rank={rank} startRank={items?.length} limit={variables.limit} Footer={Foooter} />, [rank, items])
if (!dat) {
return <Skeleton />
}
2024-02-04 21:15:18 +00:00
const isHome = !variables?.sub
2021-06-22 17:47:49 +00:00
return (
<>
2021-04-22 22:14:32 +00:00
<div className={styles.grid}>
{itemsWithPins.filter(filter).map((item, i) => (
2024-02-04 21:15:18 +00:00
<ListItem key={item.id} item={item} rank={rank && i + 1} siblingComments={variables.includeComments} pinnable={isHome ? false : pins?.length > 0} />
2021-04-22 22:14:32 +00:00
))}
</div>
<Foooter
cursor={cursor} fetchMore={fetchMore} noMoreText={noMoreText}
count={items?.length}
Skeleton={Skeleton}
2021-09-30 15:46:58 +00:00
/>
2021-06-22 17:47:49 +00:00
</>
)
}
2023-08-29 21:05:09 +00:00
export function ListItem ({ item, ...props }) {
return (
item.parentId
? <CommentFlat item={item} noReply includeParent clickToContext {...props} />
: (item.isJob
? <ItemJob item={item} />
: (item.searchText
? <ItemFull item={item} noReply {...props} />
: <Item item={item} {...props} />))
)
}
2024-01-17 23:39:39 +00:00
export function ItemsSkeleton ({ rank, startRank = 0, limit = LIMIT, Footer }) {
const items = new Array(limit).fill(null)
2021-04-22 22:14:32 +00:00
2021-04-14 23:56:29 +00:00
return (
2024-01-17 23:39:39 +00:00
<>
<div className={styles.grid}>
{items.map((_, i) => (
<ItemSkeleton rank={rank && i + startRank + 1} key={i + startRank} />
))}
</div>
<Footer invisible cursor />
</>
2021-04-14 23:56:29 +00:00
)
}