import { useQuery } from '@apollo/client' import Item, { ItemSkeleton } from './item' import ItemJob from './item-job' import styles from './items.module.css' import { ITEMS } from '../fragments/items' import MoreFooter from './more-footer' import React from 'react' import Comment from './comment' export default function Items ({ variables = {}, query, destructureData, rank, items, pins, cursor }) { const { data, fetchMore } = useQuery(query || ITEMS, { variables }) if (!data && !items) { return } if (data) { if (destructureData) { ({ items, pins, cursor } = destructureData(data)) } else { ({ items: { items, pins, cursor } } = data) } } const pinMap = pins?.reduce((a, p) => { a[p.position] = p; return a }, {}) return ( <>
{items.map((item, i) => ( {pinMap && pinMap[i + 1] && } {item.parentId ? <>
: (item.isJob ? : (item.title ? : (
)))} ))}
} /> ) } export function ItemsSkeleton ({ rank, startRank = 0 }) { const items = new Array(21).fill(null) return (
{items.map((_, i) => ( ))}
) }