import React from "react" ; import { Formik , Form } from "formik" ; import { Box , Button , Link , Flex } from "@chakra-ui/core" ; import { Wrapper } from "../components/Wrapper" ; import { InputField } from "../components/InputField" ; import { useLoginMutation , MeQuery , MeDocument } from "../generated/graphql" ; import { toErrorMap } from "../utils/toErrorMap" ; import { useRouter } from "next/router" ; import { withUrqlClient } from "next-urql" ; import { createUrqlClient } from "../utils/createUrqlClient" ; import NextLink from "next/link" ; import { withApollo } from "../utils/withApollo" ; const Login = ( { } ) => { const router = useRouter ( ) ; const [ login ] = useLoginMutation ( ) ; return ( < Wrapper variant = "small" > < Formik initialValues = { { usernameOrEmail : "" , password : "" } } onSubmit = { async ( values , { setErrors } ) => { const response = await login ( { variables : values , update : ( cache , { data } ) => { cache . writeQuery < MeQuery > ( { query : MeDocument , data : { __typename : "Query" , me : data ?. login . user , } , } ) ; cache . evict ( { fieldName : "posts:{}" } ) ; } , } ) ; if ( response . data ?. login . errors ) { setErrors ( toErrorMap ( response . data . login . errors ) ) ; } else if ( response . data ?. login . user ) { if ( typeof router . query . next === "string" ) { router . push ( router . query . next ) ; } else { router . push ( "/" ) ; } } } } > { ( { isSubmitting } ) => ( < Form > < InputField name = "usernameOrEmail" placeholder = "username or email" label = "Username or Email" / > < Box mt = { 4 } > < InputField name = "password" placeholder = "password" label = "Password" type = "password" / > < /Box> < Flex mt = { 2 } > < NextLink href = "/forgot-password" > < Link ml = "auto" > forgot password ? < /Link> < /NextLink> < /Flex> < Button mt = { 4 } type = "submit" isLoading = { isSubmitting } variantColor = "teal" > login < /Button> < /Form>)} < /Formik> < /Wrapper>); } ; export default withApollo ( { ssr : false } ) ( Login ) ;