import { useQuery } from '@apollo/client' import Item, { ItemSkeleton } from './item' import ItemJob from './item-job' import styles from './items.module.css' import MoreFooter from './more-footer' import { Fragment, useCallback, useMemo } from 'react' 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' 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) const { items, pins, cursor } = useMemo(() => { if (!dat) return {} if (destructureData) { return destructureData(dat) } else { return dat?.items } }, [dat]) 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(() => , [rank, items]) if (!dat) { return } return ( <>
{itemsWithPins.filter(filter).map((item, i) => ( ))}
) } export function ListItem ({ item, ...props }) { return ( item.parentId ? : (item.isJob ? : (item.searchText ? : )) ) } export function ItemsSkeleton ({ rank, startRank = 0, limit = LIMIT, Footer }) { const items = new Array(limit).fill(null) return ( <>
{items.map((_, i) => ( ))}