stacker.news/components/items.js

79 lines
2.3 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 pinMap = useMemo(() =>
pins?.reduce((a, p) => { a[p.position] = p; return a }, {}), [pins])
const Skeleton = useCallback(() =>
<ItemsSkeleton rank={rank} startRank={items?.length} limit={variables.limit} />, [rank, items])
if (!dat) {
return <Skeleton />
}
2021-06-22 17:47:49 +00:00
return (
<>
2021-04-22 22:14:32 +00:00
<div className={styles.grid}>
{items.filter(filter).map((item, i) => (
2023-05-06 21:51:17 +00:00
<Fragment key={item.id}>
2022-02-17 17:23:43 +00:00
{pinMap && pinMap[i + 1] && <Item item={pinMap[i + 1]} />}
2023-08-29 21:05:09 +00:00
<ListItem item={item} rank={rank && i + 1} siblingComments={variables.includeComments} />
2023-05-06 21:51:17 +00:00
</Fragment>
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} />))
)
}
export function ItemsSkeleton ({ rank, startRank = 0, limit = LIMIT }) {
const items = new Array(limit).fill(null)
2021-04-22 22:14:32 +00:00
2021-04-14 23:56:29 +00:00
return (
<div className={styles.grid}>
2021-06-22 17:47:49 +00:00
{items.map((_, i) => (
2021-06-24 23:58:58 +00:00
<ItemSkeleton rank={rank && i + startRank + 1} key={i + startRank} />
2021-04-14 23:56:29 +00:00
))}
</div>
)
}