From 4a9c36bf0a849ebad1da910b2062cac6cd54c320 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 30 Sep 2021 09:27:01 +0700 Subject: [PATCH 1/2] refactor folder hooks/auth --- pages/account.tsx | 2 +- .../common/Header/components/HeaderMenu/HeaderMenu.tsx | 2 +- .../common/ModalAuthenticate/ModalAuthenticate.tsx | 2 +- .../ModalAuthenticate/components/FormLogin/FormLogin.tsx | 2 +- .../components/FormRegister/FormRegister.tsx | 2 +- src/components/hooks/auth/index.ts | 5 ++++- src/components/hooks/{ => auth}/useActiveCustomer.tsx | 0 src/components/hooks/{ => auth}/useLogin.tsx | 0 src/components/hooks/auth/useLogout.tsx | 2 +- src/components/hooks/{ => auth}/useSignup.tsx | 0 src/components/hooks/{ => auth}/useVerifyCustomer.tsx | 2 +- src/components/hooks/index.ts | 2 -- .../components/AccountInfomation/AccountInfomation.tsx | 2 +- 13 files changed, 12 insertions(+), 11 deletions(-) rename src/components/hooks/{ => auth}/useActiveCustomer.tsx (100%) rename src/components/hooks/{ => auth}/useLogin.tsx (100%) rename src/components/hooks/{ => auth}/useSignup.tsx (100%) rename src/components/hooks/{ => auth}/useVerifyCustomer.tsx (95%) diff --git a/pages/account.tsx b/pages/account.tsx index df4121aa7..690e72cb3 100644 --- a/pages/account.tsx +++ b/pages/account.tsx @@ -1,6 +1,6 @@ import React from 'react' import { Layout } from 'src/components/common' -import useActiveCustomer from 'src/components/hooks/useActiveCustomer' +import { useActiveCustomer } from 'src/components/hooks/auth' import { AccountPage, AccountSignIn } from 'src/components/modules/account' const Account = () => { diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index a4977b198..4f7e5d21a 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -22,7 +22,7 @@ import { import Logo from '../../../Logo/Logo' import s from './HeaderMenu.module.scss' import { useLogout } from '../../../../hooks/auth' -import useActiveCustomer from 'src/components/hooks/useActiveCustomer' +import { useActiveCustomer } from 'src/components/hooks/auth' interface Props { children?: any isFull?: boolean diff --git a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx index 08cbc96e6..145155268 100644 --- a/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx +++ b/src/components/common/ModalAuthenticate/ModalAuthenticate.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' import { useRouter } from 'next/router' import React, { useEffect, useState } from 'react' -import useActiveCustomer from 'src/components/hooks/useActiveCustomer' +import { useActiveCustomer } from 'src/components/hooks/auth' import { ROUTE } from 'src/utils/constanst.utils' import ModalCommon from '../ModalCommon/ModalCommon' import FormLogin from './components/FormLogin/FormLogin' diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx index 713b78629..279137a84 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx @@ -3,7 +3,7 @@ import Link from 'next/link' import React, { useEffect, useRef } from 'react' import { ButtonCommon, InputFiledInForm, InputPasswordFiledInForm } from 'src/components/common' import { useMessage } from 'src/components/contexts' -import useLogin from 'src/components/hooks/useLogin' +import useLogin from 'src/components/hooks/auth/useLogin' import { ROUTE } from 'src/utils/constanst.utils' import { LANGUAGE } from 'src/utils/language.utils' import { CustomInputCommon } from 'src/utils/type.utils' diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx index 7f63ef4e0..c08b9120f 100644 --- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx @@ -10,7 +10,7 @@ import { useMessage } from 'src/components/contexts' import { LANGUAGE } from 'src/utils/language.utils' import { CustomInputCommon } from 'src/utils/type.utils' import * as Yup from 'yup' -import { useSignup } from '../../../../hooks' +import { useSignup } from '../../../../hooks/auth' import s from '../FormAuthen.module.scss' import SocialAuthen from '../SocialAuthen/SocialAuthen' import styles from './FormRegister.module.scss' diff --git a/src/components/hooks/auth/index.ts b/src/components/hooks/auth/index.ts index 494c974de..845617bcd 100644 --- a/src/components/hooks/auth/index.ts +++ b/src/components/hooks/auth/index.ts @@ -1,3 +1,6 @@ +export { default as useSignup } from './useSignup' +export { default as useLogin } from './useLogin' export { default as useLogout } from './useLogout' - +export { default as useVerifyCustomer } from './useVerifyCustomer' +export { default as useActiveCustomer } from './useActiveCustomer' diff --git a/src/components/hooks/useActiveCustomer.tsx b/src/components/hooks/auth/useActiveCustomer.tsx similarity index 100% rename from src/components/hooks/useActiveCustomer.tsx rename to src/components/hooks/auth/useActiveCustomer.tsx diff --git a/src/components/hooks/useLogin.tsx b/src/components/hooks/auth/useLogin.tsx similarity index 100% rename from src/components/hooks/useLogin.tsx rename to src/components/hooks/auth/useLogin.tsx diff --git a/src/components/hooks/auth/useLogout.tsx b/src/components/hooks/auth/useLogout.tsx index 5b1c095e1..93398bf49 100644 --- a/src/components/hooks/auth/useLogout.tsx +++ b/src/components/hooks/auth/useLogout.tsx @@ -4,7 +4,7 @@ import { useState } from 'react' import { CommonError } from 'src/domains/interfaces/CommonError' import { LOCAL_STORAGE_KEY } from 'src/utils/constanst.utils' import rawFetcher from 'src/utils/rawFetcher' -import useActiveCustomer from '../useActiveCustomer' +import useActiveCustomer from './useActiveCustomer' const useLogout = () => { const [loading, setLoading] = useState(false) diff --git a/src/components/hooks/useSignup.tsx b/src/components/hooks/auth/useSignup.tsx similarity index 100% rename from src/components/hooks/useSignup.tsx rename to src/components/hooks/auth/useSignup.tsx diff --git a/src/components/hooks/useVerifyCustomer.tsx b/src/components/hooks/auth/useVerifyCustomer.tsx similarity index 95% rename from src/components/hooks/useVerifyCustomer.tsx rename to src/components/hooks/auth/useVerifyCustomer.tsx index d86a5b8ed..af05729a7 100644 --- a/src/components/hooks/useVerifyCustomer.tsx +++ b/src/components/hooks/auth/useVerifyCustomer.tsx @@ -2,7 +2,7 @@ import { VerifyCustomerAccountMutation } from '@framework/schema' import { useState } from 'react' import { CommonError } from 'src/domains/interfaces/CommonError' import rawFetcher from 'src/utils/rawFetcher' -import { VERIFY_CUSTOMER_ACCOUNT } from '../../graphql/mutation' +import { VERIFY_CUSTOMER_ACCOUNT } from '../../../graphql/mutation' import useActiveCustomer from './useActiveCustomer' interface VerifyInput { diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts index 4a25fd98e..cf83feb42 100644 --- a/src/components/hooks/index.ts +++ b/src/components/hooks/index.ts @@ -1,3 +1 @@ export { default as useModalCommon } from './useModalCommon' -export { default as useVerifyCustomer } from './useVerifyCustomer' -export { default as useSignup } from './useSignup' diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx index 5da39b54d..b025d5744 100644 --- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx @@ -5,7 +5,7 @@ import Image from 'next/image' import avatar from '../../assets/avatar.png' import { ButtonCommon } from 'src/components/common' -import useActiveCustomer from 'src/components/hooks/useActiveCustomer' +import { useActiveCustomer } from 'src/components/hooks/auth' interface AccountProps { name: string From b752b0f7a4d65586f528001429977ea217bae6a6 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 30 Sep 2021 09:45:57 +0700 Subject: [PATCH 2/2] :hammer: refactor: using query and mutation from framework vendure :%s --- .../verify-customer-account-mutation.ts | 9 ++------- .../hooks/auth/useActiveCustomer.tsx | 15 ++------------- src/components/hooks/auth/useLogin.tsx | 19 ++----------------- src/components/hooks/auth/useSignup.tsx | 19 ++----------------- .../hooks/auth/useVerifyCustomer.tsx | 4 ++-- .../VerifyCustomerAccount.tsx | 3 ++- src/graphql/mutation/index.ts | 1 - src/graphql/query/index.ts | 1 - src/graphql/query/user.query.ts | 1 - 9 files changed, 12 insertions(+), 60 deletions(-) rename src/graphql/mutation/user.mutation.ts => framework/vendure/utils/mutations/verify-customer-account-mutation.ts (59%) delete mode 100644 src/graphql/mutation/index.ts delete mode 100644 src/graphql/query/index.ts delete mode 100644 src/graphql/query/user.query.ts diff --git a/src/graphql/mutation/user.mutation.ts b/framework/vendure/utils/mutations/verify-customer-account-mutation.ts similarity index 59% rename from src/graphql/mutation/user.mutation.ts rename to framework/vendure/utils/mutations/verify-customer-account-mutation.ts index 40812db19..2df2bc53d 100644 --- a/src/graphql/mutation/user.mutation.ts +++ b/framework/vendure/utils/mutations/verify-customer-account-mutation.ts @@ -1,8 +1,5 @@ -import { gql } from 'graphql-request' - - -export const VERIFY_CUSTOMER_ACCOUNT = gql` -mutation verifyCustomerAccount($token: String!, $password: String) { +export const verifyCustomerAccountMutaton = /* GraphQL */ ` + mutation verifyCustomerAccount($token: String!, $password: String) { verifyCustomerAccount( token: $token, password: $password) { __typename ...on CurrentUser { @@ -16,5 +13,3 @@ mutation verifyCustomerAccount($token: String!, $password: String) { } } ` - - diff --git a/src/components/hooks/auth/useActiveCustomer.tsx b/src/components/hooks/auth/useActiveCustomer.tsx index 4226a15b7..f0f4f6fef 100644 --- a/src/components/hooks/auth/useActiveCustomer.tsx +++ b/src/components/hooks/auth/useActiveCustomer.tsx @@ -1,21 +1,10 @@ import { ActiveCustomerQuery } from '@framework/schema' -import { gql } from 'graphql-request' +import { activeCustomerQuery } from '@framework/utils/queries/active-customer-query' import gglFetcher from 'src/utils/gglFetcher' import useSWR from 'swr' -const query = gql` - query activeCustomer { - activeCustomer { - id - firstName - lastName - emailAddress - } - } -` - const useActiveCustomer = () => { - const { data, ...rest } = useSWR([query], gglFetcher) + const { data, ...rest } = useSWR([activeCustomerQuery], gglFetcher) return { customer: data?.activeCustomer, ...rest } } diff --git a/src/components/hooks/auth/useLogin.tsx b/src/components/hooks/auth/useLogin.tsx index 0b97e8d8b..d38390004 100644 --- a/src/components/hooks/auth/useLogin.tsx +++ b/src/components/hooks/auth/useLogin.tsx @@ -1,4 +1,3 @@ -import { gql } from 'graphql-request' import { useState } from 'react' import useActiveCustomer from './useActiveCustomer' import { CommonError } from 'src/domains/interfaces/CommonError' @@ -6,21 +5,7 @@ import rawFetcher from 'src/utils/rawFetcher' import { LoginMutation } from '@framework/schema' import { LOCAL_STORAGE_KEY } from 'src/utils/constanst.utils' import { errorMapping } from 'src/utils/errrorMapping' - -const query = gql` - mutation login($username: String!, $password: String!) { - login(username: $username, password: $password) { - __typename - ... on CurrentUser { - id - } - ... on ErrorResult { - errorCode - message - } - } - } -` +import { loginMutation } from '@framework/utils/mutations/log-in-mutation' interface LoginInput { username: string @@ -38,7 +23,7 @@ const useLogin = () => { setError(null) setLoading(true) rawFetcher({ - query, + query: loginMutation, variables: options, }) .then(({ data, headers }) => { diff --git a/src/components/hooks/auth/useSignup.tsx b/src/components/hooks/auth/useSignup.tsx index 4842915e1..922460c77 100644 --- a/src/components/hooks/auth/useSignup.tsx +++ b/src/components/hooks/auth/useSignup.tsx @@ -1,24 +1,9 @@ -import { gql } from 'graphql-request' import { useState } from 'react' import useActiveCustomer from './useActiveCustomer' import { SignupMutation } from '@framework/schema' import fetcher from 'src/utils/fetcher' import { CommonError } from 'src/domains/interfaces/CommonError' - -const query = gql` - mutation signup($input: RegisterCustomerInput!) { - registerCustomerAccount(input: $input) { - __typename - ... on Success { - success - } - ... on ErrorResult { - errorCode - message - } - } - } -` +import { signupMutation } from '@framework/utils/mutations/sign-up-mutation' interface SignupInput { email: string @@ -39,7 +24,7 @@ const useSignup = () => { setError(null) setLoading(true) fetcher({ - query, + query: signupMutation, variables: { input: { firstName, diff --git a/src/components/hooks/auth/useVerifyCustomer.tsx b/src/components/hooks/auth/useVerifyCustomer.tsx index af05729a7..181444b51 100644 --- a/src/components/hooks/auth/useVerifyCustomer.tsx +++ b/src/components/hooks/auth/useVerifyCustomer.tsx @@ -2,8 +2,8 @@ import { VerifyCustomerAccountMutation } from '@framework/schema' import { useState } from 'react' import { CommonError } from 'src/domains/interfaces/CommonError' import rawFetcher from 'src/utils/rawFetcher' -import { VERIFY_CUSTOMER_ACCOUNT } from '../../../graphql/mutation' import useActiveCustomer from './useActiveCustomer' +import { verifyCustomerAccountMutaton } from '@framework/utils/mutations/verify-customer-account-mutation' interface VerifyInput { token: string @@ -22,7 +22,7 @@ const useVerifyCustomer = () => { setError(null) setLoading(true) rawFetcher({ - query: VERIFY_CUSTOMER_ACCOUNT, + query: verifyCustomerAccountMutaton, variables: options, }) .then(({ data }) => { diff --git a/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.tsx b/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.tsx index e2c93db2e..d03bd6aa4 100644 --- a/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.tsx +++ b/src/components/modules/verify-customer/VerifyCustomerAccount/VerifyCustomerAccount.tsx @@ -2,7 +2,8 @@ import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import { ButtonCommon } from 'src/components/common' import LoadingCommon from 'src/components/common/LoadingCommon/LoadingCommon' -import { useModalCommon, useVerifyCustomer } from 'src/components/hooks' +import { useModalCommon } from 'src/components/hooks' +import { useVerifyCustomer } from 'src/components/hooks/auth' import { ROUTE } from 'src/utils/constanst.utils' import s from './VerifyCustomerAccount.module.scss' import Link from 'next/link' diff --git a/src/graphql/mutation/index.ts b/src/graphql/mutation/index.ts deleted file mode 100644 index 7ea0d4f82..000000000 --- a/src/graphql/mutation/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './user.mutation' diff --git a/src/graphql/query/index.ts b/src/graphql/query/index.ts deleted file mode 100644 index 47c53bc6d..000000000 --- a/src/graphql/query/index.ts +++ /dev/null @@ -1 +0,0 @@ -// export * from './user.mutation' diff --git a/src/graphql/query/user.query.ts b/src/graphql/query/user.query.ts deleted file mode 100644 index e9e7409b4..000000000 --- a/src/graphql/query/user.query.ts +++ /dev/null @@ -1 +0,0 @@ -// query here \ No newline at end of file