65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
'use client'
|
|
import { LogoutDocument, MeDocument, PostsDocument } from '@/generated/graphql/graphql'
|
|
import { useMutation, useQuery } from '@apollo/client/react'
|
|
import { Link } from '@chakra-ui/next-js'
|
|
import { Box, Button, Flex, Text } from '@chakra-ui/react'
|
|
import { usePathname, useRouter } from 'next/navigation'
|
|
|
|
const NavBar: React.FC = () => {
|
|
const { data, loading, refetch } = useQuery(MeDocument)
|
|
const { refetch: refetchPosts } = useQuery(PostsDocument)
|
|
const [logout] = useMutation(LogoutDocument)
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<Flex bgColor='tan' paddingY={4} paddingX={6} ml='auto' minH='72px' alignItems='center'>
|
|
<Box mr='auto'>
|
|
<Link href='/'>
|
|
<Button>Home</Button>
|
|
</Link>
|
|
</Box>
|
|
<Box ml='auto'>
|
|
{
|
|
loading &&
|
|
<Text>Loading...</Text>
|
|
}
|
|
{
|
|
!loading && !data?.me &&
|
|
<>
|
|
<Link href='/login' mr={4}>
|
|
<Button>Login</Button>
|
|
</Link>
|
|
<Link href='/register' mr={4}>
|
|
<Button>Register</Button>
|
|
</Link>
|
|
</>
|
|
}
|
|
{
|
|
data?.me &&
|
|
<Flex alignItems='center'>
|
|
<Text mr={4}>Logged in as {data.me.username}!</Text>
|
|
<Button
|
|
onClick={async () => {
|
|
await logout()
|
|
await refetch() // Calling refetch will also refetch the data for any other components using useQuery(MeDocument)
|
|
await refetchPosts()
|
|
if (pathname == '/') {
|
|
router.refresh()
|
|
}
|
|
else {
|
|
router.push('/')
|
|
}
|
|
|
|
}}
|
|
>
|
|
Log out
|
|
</Button>
|
|
</Flex>
|
|
}
|
|
</Box>
|
|
</Flex>
|
|
)
|
|
}
|
|
export default NavBar
|