---

frontend/app/post/[id]/ClientSection.tsx

@@ -0,0 +1,79 @@
+'use client'
+import { DeletePostDocument, PostQuery } from '@/generated/graphql/graphql'
+import { useMutation } from '@apollo/client/react'
+import { DeleteIcon, EditIcon } from '@chakra-ui/icons'
+import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, Flex, IconButton, useDisclosure } from '@chakra-ui/react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useRef } from 'react'
+
+interface Props {
+  data: PostQuery
+}
+
+export const ClientSection: React.FC<Props> = ({ data }) => {
+  const router = useRouter()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const cancelRef: any = useRef(null)
+  const [deletePost] = useMutation(DeletePostDocument)
+
+  return (
+    <Flex mr='auto' alignItems='center' mt={4}>
+      <Link href={`/edit-post/${data?.post?.id}`}>
+        <IconButton
+          aria-label='edit-button'
+          icon={<EditIcon />}
+          mr={4}
+        />
+      </Link>
+      <IconButton
+        aria-label='delete-button'
+        icon={<DeleteIcon />}
+        colorScheme='red'
+        onClick={onOpen}
+      />
+      <AlertDialog
+        isOpen={isOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Delete Post
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              Are you sure? You can't undo this action afterwards.
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                colorScheme='red'
+                onClick={async () => {
+                  await deletePost({
+                    variables: { id: data.post?.id! },
+                    // https://stackoverflow.com/questions/63192774/apollo-client-delete-item-from-cache
+                    // https://www.apollographql.com/docs/react/caching/garbage-collection/#cacheevict
+                    update: cache => {
+                      const normalizedId = cache.identify({ id: data.post?.id!, __typename: 'Post' })
+                      cache.evict({ id: normalizedId })
+                      cache.gc()
+                    }
+                  })
+                  router.refresh()                  
+                }}
+                ml={3}
+              >
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </Flex>
+  )
+}

frontend/app/post/[id]/loading.tsx

@@ -0,0 +1,8 @@
+import { Text } from '@chakra-ui/react'
+
+const Loading: React.FC = () => {
+  return (
+    <Text>Loading...</Text>
+  )
+}
+export default Loading

frontend/app/post/[id]/page.tsx

@@ -0,0 +1,42 @@
+import { Wrapper } from '@/components'
+import { SESSION_COOKIE_NAME } from '@/constants'
+import { MeDocument, PostDocument } from '@/generated/graphql/graphql'
+import { createApolloClient } from '@/lib'
+import { Heading, Text } from '@chakra-ui/react'
+import { cookies } from 'next/headers'
+import { ClientSection } from './ClientSection'
+
+interface Props {
+  params: Promise<{
+    id: string
+  }>
+}
+
+const PostPage: React.FC<Props> = async ({ params }) => {
+  const { id } = await params
+  const cookieStore = await cookies()
+  const cookie = cookieStore.get(SESSION_COOKIE_NAME)?.value
+  const apollo = await createApolloClient(cookie)
+  const { data } = await apollo.query({ query: PostDocument, variables: { id } })
+  const { data: meData } = await apollo.query({ query: MeDocument })
+
+  return (
+    <Wrapper>
+      {
+        data?.post ?
+          <>
+            <Heading as='h3' size='md'>{data.post.title}</Heading>
+            <Text>Posted by {data.post.author.username}</Text>
+            <Text mt={4}>{data.post.content}</Text>
+            {
+              data?.post?.authorID == meData?.me?.id &&
+              <ClientSection data={data} />
+            }
+          </>
+          :
+          <>Post not found!</>
+      }
+    </Wrapper>
+  )
+}
+export default PostPage