Auth.tsx

import { useMutation } from '@apollo/client'
import { Button, Center, Image, Input, Stack, Text } from '@chakra-ui/react'
import { Session } from 'next-auth'
import { signIn } from 'next-auth/react'
import React, { useState } from 'react'
import toast from 'react-hot-toast'
import UserOperations from '../../graphql/operations/user'
import { CreateUsernameData, CreateUsernameVariables } from '../../util/types'

interface AuthProps {
  session: Session | null
  reloadSession: () => void
}

const Auth: React.FC<AuthProps> = ({ session, reloadSession }) => {
  const [username, setUsername] = useState('')

  const [createUsername, { data, loading, error }] = useMutation<
    CreateUsernameData,
    CreateUsernameVariables
  >(UserOperations.Mutations.createUsername)

  const onSubmit = async () => {
    if (!username) return

    try {
      const { data } = await createUsername({
        variables: {
          username,
        },
      })

      if (!data?.createUsername) {
        throw new Error()
      }

      if (data.createUsername.error) {
        const {
          createUsername: { error },
        } = data

        toast.error(error)
        return
      }

      toast.success('Username successfully created')

      /**
       * Reload session to obtain new username
       */
      reloadSession()
    } catch (error) {
      toast.error('There was an error')
      console.log('onSubmit error', error)
    }
  }

  return (
    <Center height='100vh'>
      <Stack spacing={8} align='center'>
        {session ? (
          <>
            <Text fontSize='3xl'>Create a Username</Text>
            <Input
              placeholder='Enter a username'
              value={username}
              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                setUsername(event.target.value)
              }
            />
            <Button onClick={onSubmit} width='100%' isLoading={loading}>
              Save
            </Button>
          </>
        ) : (
          <>
            <Image height={100} src='/images/imessage-logo.png' alt='logo' />
            <Text fontSize='4xl'>MessengerQL</Text>
            <Text width='70%' align='center'>
              Sign in with Google to send unlimited free messages to your
              friends
            </Text>
            <Button
              onClick={(e) => {
                e.preventDefault()
                signIn('google', { callbackUrl: 'http://localhost:3000' })
              }}
              leftIcon={
                <Image
                  height='20px'
                  src='/images/googlelogo.png'
                  alt='google'
                />
              }
            >
              Continue with Google
            </Button>
          </>
        )}
      </Stack>
    </Center>
  )
}
export default Auth