import React from "react" ; import { Box , Link , Flex , Button , Heading } from "@chakra-ui/core" ; import NextLink from "next/link" ; import { useMeQuery , useLogoutMutation } from "../generated/graphql" ; import { isServer } from "../utils/isServer" ; import { useRouter } from "next/router" ; import { useApolloClient } from "@apollo/client" ; interface NavBarProps { } export const NavBar = ( { } ) => { const router = useRouter ( ) ; const [ logout , { loading : logoutFetching } ] = useLogoutMutation ( ) ; const apolloClient = useApolloClient ( ) ; const { data , loading } = useMeQuery ( { skip : isServer ( ) , } ) ; let body = null ; if ( loading ) { } else if ( ! data ?. me ) { body = ( < > < NextLink href = "/login" > < Link mr = { 2 } > login < /Link> < /NextLink> < NextLink href = "/register" > < Link > register < /Link> < /NextLink> < />); } else { body = ( < Flex align = "center" > < NextLink href = "/create-post" > < Button as = { Link } mr = { 4 } > create post < /Button> < /NextLink> < Box mr = { 2 } > { data . me . username } < /Box> < Button onClick = { async ( ) => { await logout ( ) ; await apolloClient . resetStore ( ) ; } } isLoading = { logoutFetching } variant = "link" > logout < /Button> < /Flex>); } return ( < Flex zIndex = { 1 } position = "sticky" top = { 0 } bg = "tan" p = { 4 } > < Flex flex = { 1 } m = "auto" align = "center" maxW = { 800 } > < NextLink href = "/" > < Link > < Heading > LiReddit < /Heading> < /Link> < /NextLink> < Box ml = { "auto" } > { body } < /Box> < /Flex> < /Flex>); } ;