stacker.news/components/more-footer.js

53 lines
1.5 KiB
JavaScript
Raw Normal View History

2023-07-24 18:35:05 +00:00
import Button from 'react-bootstrap/Button'
2021-09-30 15:46:58 +00:00
import { useState } from 'react'
import Link from 'next/link'
2021-09-30 15:46:58 +00:00
2024-01-17 23:39:39 +00:00
export default function MoreFooter ({ cursor, count, fetchMore, Skeleton, invisible, noMoreText = 'GENESIS' }) {
2021-09-30 15:46:58 +00:00
const [loading, setLoading] = useState(false)
if (loading) {
return <div><Skeleton /></div>
}
let Footer
if (cursor) {
Footer = () => (
<Button
variant='primary'
size='md'
onClick={async () => {
setLoading(true)
await fetchMore({
variables: {
cursor
}
})
2023-02-03 19:10:18 +00:00
setTimeout(() => setLoading(false), 100)
2021-09-30 15:46:58 +00:00
}}
>more
</Button>
)
} else {
Footer = () => (
<div className='text-muted' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.75' }}>{count === 0 ? 'EMPTY' : noMoreText}</div>
2021-09-30 15:46:58 +00:00
)
}
2024-01-17 23:39:39 +00:00
return <div className={`d-flex justify-content-center mt-3 mb-1 ${invisible ? 'invisible' : ''}`}><Footer /></div>
2021-09-30 15:46:58 +00:00
}
2024-01-17 23:39:39 +00:00
export function NavigateFooter ({ cursor, count, fetchMore, href, text, invisible, noMoreText = 'NO MORE' }) {
let Footer
if (cursor) {
Footer = () => (
2023-07-24 18:35:05 +00:00
<Link href={href} className='text-reset text-muted fw-bold'>{text}</Link>
)
} else {
Footer = () => (
<div className='text-muted' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.75' }}>{count === 0 ? 'EMPTY' : noMoreText}</div>
)
}
2024-01-17 23:39:39 +00:00
return <div className={`d-flex justify-content-start my-1 ${invisible ? 'invisible' : ''}`}><Footer /></div>
}