59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
'use client'
|
|
import { Post, Wrapper } from '@/components'
|
|
import { PostsDocument } from '@/generated/graphql/graphql'
|
|
import { useQuery } from '@apollo/client/react'
|
|
import { Link } from '@chakra-ui/next-js'
|
|
import { Box, Button, Flex, Heading, Stack, Text } from '@chakra-ui/react'
|
|
import { useState } from 'react'
|
|
|
|
|
|
const Home = (): React.ReactNode => {
|
|
// https://www.apollographql.com/docs/react/pagination/core-api/
|
|
const { data, loading, fetchMore } = useQuery(PostsDocument)
|
|
const [doesntHaveMore, setDoesntHaveMore] = useState(false)
|
|
|
|
return (
|
|
<Box w='100%'>
|
|
<Wrapper>
|
|
<Flex w='100%'>
|
|
<Heading as='h3' size='lg'>WreckIt ⚒️</Heading>
|
|
<Link href='/create-post' ml='auto'>
|
|
<Button>Create Post</Button>
|
|
</Link>
|
|
</Flex>
|
|
<Flex flexDir='column' alignItems='center'>
|
|
{
|
|
loading && !data?.posts &&
|
|
<Text>Loading...</Text>
|
|
}
|
|
<Stack spacing={4} mt={8} w='100%'>
|
|
{
|
|
data?.posts.map((p, idx) => <Post post={p} key={idx} />)
|
|
}
|
|
</Stack>
|
|
|
|
<Flex w='100%' mt={4}>
|
|
{
|
|
(data?.posts?.length && !doesntHaveMore) ?
|
|
<Button
|
|
onClick={async () => {
|
|
const result = await fetchMore({ variables: { cursor: data.posts[data.posts.length - 1].createdAt } })
|
|
if (result.data?.posts.length == 0) {
|
|
setDoesntHaveMore(true)
|
|
}
|
|
}}
|
|
m='auto'
|
|
>
|
|
More
|
|
</Button>
|
|
: <></>
|
|
}
|
|
</Flex>
|
|
</Flex>
|
|
</Wrapper>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export default Home
|