From cdad66b56b685e1712290fb8bb8773b088fee538 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 28 Sep 2021 17:50:55 +0700 Subject: [PATCH] :sparkles: feat: VerifyCustomerAccountMutation :%s --- framework/vendure/schema.d.ts | 30 +++++++++++++ next-env.d.ts | 3 ++ pages/verify.tsx | 30 +------------ .../common/LoadingCommon/LoadingCommon.tsx | 24 ++++++----- src/components/hooks/useProduct.tsx | 1 + src/components/hooks/useVerifyCustomer.tsx | 42 ++++++++++++------- .../modules/verify-customer/index.tsx | 2 + src/graphql/mutation/user.mutation.ts | 10 +++-- src/utils/fetcher.ts | 8 ++-- 9 files changed, 89 insertions(+), 61 deletions(-) create mode 100644 src/components/hooks/useProduct.tsx create mode 100644 src/components/modules/verify-customer/index.tsx diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index 9d6b53c52..b0b0170d7 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -3095,6 +3095,36 @@ export type LoginMutation = { __typename?: 'Mutation' } & { >) } +export type VerifyCustomerAccountVariables = Exact<{ + token: Scalars['String'] + password?: Maybe +}> + +export type VerifyCustomerAccountMutation = { __typename?: 'Mutation' } & { + verifyCustomerAccount: + | ({ __typename: 'CurrentUser' } & Pick) + | ({ __typename: 'VerificationTokenInvalidError' } & Pick< + VerificationTokenInvalidError, + 'errorCode' | 'message' + >) + | ({ __typename: 'VerificationTokenExpiredError' } & Pick< + VerificationTokenExpiredError, + 'errorCode' | 'message' + >) + | ({ __typename: 'MissingPasswordError' } & Pick< + MissingPasswordError, + 'errorCode' | 'message' + >) + | ({ __typename: 'PasswordAlreadySetError' } & Pick< + PasswordAlreadySetError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NativeAuthStrategyError' } & Pick< + NativeAuthStrategyError, + 'errorCode' | 'message' + >) +} + export type LogoutMutationVariables = Exact<{ [key: string]: never }> export type LogoutMutation = { __typename?: 'Mutation' } & { diff --git a/next-env.d.ts b/next-env.d.ts index c6643fda1..9bc3dd46b 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,3 +1,6 @@ /// /// /// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/pages/verify.tsx b/pages/verify.tsx index f16702e18..97d9743b1 100644 --- a/pages/verify.tsx +++ b/pages/verify.tsx @@ -1,34 +1,8 @@ -import { useRouter } from 'next/router' -import { useEffect } from 'react' import { Layout } from 'src/components/common' -import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon' -import { useVerifyCustomer } from 'src/components/hooks' +import { VerifyCustomerAccount } from 'src/components/modules/verify-customer' export default function VerifyCustomer() { - const router = useRouter() - const { error, loading, verify } = useVerifyCustomer() - - useEffect(() => { - const { token } = router.query - console.log("token: ", token) - if (token) { - verify({ token: token.toString() }) - } - }, []) - - return ( -
- { - loading ? <> - - Verifing your account .... - :
- {error?.message} -
- } -
- ) + return } - VerifyCustomer.Layout = Layout diff --git a/src/components/common/LoadingCommon/LoadingCommon.tsx b/src/components/common/LoadingCommon/LoadingCommon.tsx index 1e8ffe340..f75bc370b 100644 --- a/src/components/common/LoadingCommon/LoadingCommon.tsx +++ b/src/components/common/LoadingCommon/LoadingCommon.tsx @@ -1,15 +1,17 @@ -import React from "react"; +import React from 'react' import s from './LoadingCommon.module.scss' -const LoadingCommon = () => { - - return ( -
-
-
-

Loading...

-
- ) +interface Props { + description?: string } -export default LoadingCommon \ No newline at end of file +const LoadingCommon = ({ description = 'Loading...' }: Props) => { + return ( +
+
+

{description}

+
+ ) +} + +export default LoadingCommon diff --git a/src/components/hooks/useProduct.tsx b/src/components/hooks/useProduct.tsx new file mode 100644 index 000000000..ab2eb4eb0 --- /dev/null +++ b/src/components/hooks/useProduct.tsx @@ -0,0 +1 @@ +// here diff --git a/src/components/hooks/useVerifyCustomer.tsx b/src/components/hooks/useVerifyCustomer.tsx index edd789d13..a4af3184e 100644 --- a/src/components/hooks/useVerifyCustomer.tsx +++ b/src/components/hooks/useVerifyCustomer.tsx @@ -1,4 +1,4 @@ -import { LoginMutation } from '@framework/schema' +import { VerifyCustomerAccountMutation } from '@framework/schema' import { useState } from 'react' import { CommonError } from 'src/domains/interfaces/CommonError' import rawFetcher from 'src/utils/rawFetcher' @@ -13,28 +13,40 @@ interface VerifyInput { const useVerifyCustomer = () => { const [loading, setLoading] = useState(false) const [error, setError] = useState(null) - // const { mutate } = useActiveCustomer() + const { mutate } = useActiveCustomer() - const verify = (options: VerifyInput) => { + const verify = ( + options: VerifyInput, + fCallBack?: (isSuccess: boolean) => void + ) => { setError(null) setLoading(true) - rawFetcher({ + rawFetcher({ query: VERIFY_CUSTOMER_ACCOUNT, variables: options, }) .then(({ data, headers }) => { - console.log("data: ", data) - // if (data.login.__typename !== 'CurrentUser') { - // throw CommonError.create(data.login.message, data.login.errorCode) - // } - // const authToken = headers.get('vendure-auth-token') - // if (authToken != null) { - // localStorage.setItem('token', authToken) - // return mutate() - // } + if (data.verifyCustomerAccount.__typename !== 'CurrentUser') { + throw CommonError.create( + data.verifyCustomerAccount.message, + data.verifyCustomerAccount.errorCode + ) + } + fCallBack && fCallBack(true) + + const authToken = headers.get('vendure-auth-token') + if (authToken != null) { + localStorage.setItem('token', authToken) + return mutate() + } + }) + .catch((err) => { + setError(err) + fCallBack && fCallBack(false) + }) + .finally(() => { + setLoading(false) }) - .catch(setError) - .finally(() => setLoading(false)) } return { loading, verify, error } diff --git a/src/components/modules/verify-customer/index.tsx b/src/components/modules/verify-customer/index.tsx new file mode 100644 index 000000000..8b8fe4dbe --- /dev/null +++ b/src/components/modules/verify-customer/index.tsx @@ -0,0 +1,2 @@ +export { default as VerifyCustomerAccount } from './VerifyCustomerAccount/VerifyCustomerAccount' + diff --git a/src/graphql/mutation/user.mutation.ts b/src/graphql/mutation/user.mutation.ts index a48074ef0..40812db19 100644 --- a/src/graphql/mutation/user.mutation.ts +++ b/src/graphql/mutation/user.mutation.ts @@ -2,15 +2,19 @@ import { gql } from 'graphql-request' export const VERIFY_CUSTOMER_ACCOUNT = gql` -mutation verifyCustomerAccount(token: String!, password: String) { +mutation verifyCustomerAccount($token: String!, $password: String) { verifyCustomerAccount( token: $token, password: $password) { + __typename ...on CurrentUser { id identifier } - ...ErrorResult + ... on ErrorResult { + errorCode + message + } + } } -} ` diff --git a/src/utils/fetcher.ts b/src/utils/fetcher.ts index e92696970..53b736e5e 100644 --- a/src/utils/fetcher.ts +++ b/src/utils/fetcher.ts @@ -10,11 +10,11 @@ interface QueryOptions { const fetcher = async (options: QueryOptions): Promise => { const { query, variables } = options - console.log('query') - console.log(options) + // console.log('query') + // console.log(options) const token = localStorage.getItem('token') - console.log('token') - console.log(token) + // console.log('token') + // console.log(token) const res = await request( process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string, query,