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' 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 { items, pins, cursor } = useMemo(() => { if (!data && !ssrData) return {} if (destructureData) { return destructureData(data || ssrData) } else { return data?.items || ssrData?.items } }, [data, ssrData]) const pinMap = useMemo(() => pins?.reduce((a, p) => { a[p.position] = p; return a }, {}), [pins]) const Skeleton = useCallback(() => , [rank, items]) if (!ssrData && !data) { return } return ( <>
{items.filter(filter).map((item, i) => ( {pinMap && pinMap[i + 1] && } {item.parentId ? : (item.isJob ? : (item.searchText ? : ))} ))}
) } export function ItemsSkeleton ({ rank, startRank = 0, limit = LIMIT }) { const items = new Array(limit).fill(null) return (
{items.map((_, i) => ( ))}
) }