---

2026-06-24 15:34:09 +02:00
commit 65fb6816ca
442 changed files with 27246 additions and 0 deletions
@@ -0,0 +1,58 @@
+'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