import { useQuery } from '@apollo/client' import Button from 'react-bootstrap/Button' import Item, { ItemSkeleton } from './item' import styles from './items.module.css' import { MORE_ITEMS } from '../fragments/items' import { useState } from 'react' export default function Items ({ variables, rank }) { const { loading, error, data, fetchMore } = useQuery(MORE_ITEMS, { variables }) if (error) return
Failed to load!
if (loading) { return } const { moreItems: { items, cursor } } = data return ( <>
{items.map((item, i) => ( ))}
) } function ItemsSkeleton ({ rank, startRank = 0 }) { const items = new Array(21).fill(null) return (
{items.map((_, i) => ( ))}
) } function MoreFooter ({ cursor, fetchMore, rank, offset }) { const [loading, setLoading] = useState(false) if (loading) { return } let Footer if (cursor) { Footer = () => ( ) } else { Footer = () => (
GENISIS
) } return
}