Merge pull request #70 from KieIO/feature/m1-authen

refactor folder hooks/auth

framework/vendure/utils/mutations/verify-customer-account-mutation.ts

@@ -1,7 +1,4 @@
-import { gql } from 'graphql-request'
-
-
-export const VERIFY_CUSTOMER_ACCOUNT = gql`
+export const verifyCustomerAccountMutaton = /* GraphQL */ `
   mutation verifyCustomerAccount($token: String!, $password: String) {
   verifyCustomerAccount( token: $token, password: $password) {
       __typename
@@ -16,5 +13,3 @@ mutation verifyCustomerAccount($token: String!, $password: String) {
     }
   }
 `
-
-

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 = () => {

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

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'

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'

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'

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'
 

src/components/hooks/auth/useActiveCustomer.tsx

@@ -0,0 +1,11 @@
+import { ActiveCustomerQuery } from '@framework/schema'
+import { activeCustomerQuery } from '@framework/utils/queries/active-customer-query'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+const useActiveCustomer = () => {
+  const { data, ...rest } = useSWR<ActiveCustomerQuery>([activeCustomerQuery], gglFetcher)
+  return { customer: data?.activeCustomer, ...rest }
+}
+
+export default useActiveCustomer

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<LoginMutation>({
-      query,
+      query: loginMutation,
       variables: options,
     })
       .then(({ data, headers }) => {

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)

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<SignupMutation>({
-      query,
+      query: signupMutation,
       variables: {
         input: {
           firstName,

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<VerifyCustomerAccountMutation>({
-      query: VERIFY_CUSTOMER_ACCOUNT,
+      query: verifyCustomerAccountMutaton,
       variables: options,
     })
       .then(({ data }) => {

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'

src/components/hooks/useActiveCustomer.tsx

@@ -1,22 +0,0 @@
-import { ActiveCustomerQuery } from '@framework/schema'
-import { gql } from 'graphql-request'
-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<ActiveCustomerQuery>([query], gglFetcher)
-  return { customer: data?.activeCustomer, ...rest }
-}
-
-export default useActiveCustomer

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

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'

src/graphql/mutation/index.ts

@@ -1 +0,0 @@
-export * from './user.mutation'

src/graphql/query/index.ts

@@ -1 +0,0 @@
-// export * from './user.mutation'

src/graphql/query/user.query.ts

@@ -1 +0,0 @@
-// query here