From faabf5228d09f723d93d066d79c7092105701ce9 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 29 Sep 2021 16:58:12 +0700 Subject: [PATCH] :sparkles: feat: logout :%s --- pages/account.tsx | 19 +- .../components/HeaderMenu/HeaderMenu.tsx | 239 ++++++++++-------- .../MenuNavigationProductList.tsx | 2 +- src/components/hooks/auth/index.ts | 3 + src/components/hooks/auth/useLogout.tsx | 34 +++ src/components/hooks/useLogin.tsx | 4 +- .../account/AccountPage/AccountPage.tsx | 2 +- .../EditInfoModal/EditInfoModal.tsx | 2 - .../FormSubscribe/FormSubscribe.tsx | 1 - src/utils/constanst.utils.ts | 4 + src/utils/fetcher.ts | 7 +- src/utils/rawFetcher.ts | 5 +- 12 files changed, 201 insertions(+), 121 deletions(-) create mode 100644 src/components/hooks/auth/index.ts create mode 100644 src/components/hooks/auth/useLogout.tsx diff --git a/pages/account.tsx b/pages/account.tsx index 7da102c52..df4121aa7 100644 --- a/pages/account.tsx +++ b/pages/account.tsx @@ -1,13 +1,16 @@ -import React from 'react'; -import { Layout } from 'src/components/common'; -import { AccountPage } from 'src/components/modules/account'; +import React from 'react' +import { Layout } from 'src/components/common' +import useActiveCustomer from 'src/components/hooks/useActiveCustomer' +import { AccountPage, AccountSignIn } from 'src/components/modules/account' const Account = () => { - return ( - - ); -}; + const { customer } = useActiveCustomer() + if (customer) { + return + } + return +} Account.Layout = Layout -export default Account; \ No newline at end of file +export default Account diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index 2060d5996..c29890dbd 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -6,115 +6,154 @@ import { ButtonCommon } from 'src/components/common' import InputSearch from 'src/components/common/InputSearch/InputSearch' import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown' import { useCartDrawer } from 'src/components/contexts' -import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons' -import { ACCOUNT_TAB, FILTER_PAGE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' +import { + IconBuy, + IconFilter, + IconHeart, + IconHistory, + IconUser, +} from 'src/components/icons' +import { + ACCOUNT_TAB, + FILTER_PAGE, + QUERY_KEY, + ROUTE, +} from 'src/utils/constanst.utils' import Logo from '../../../Logo/Logo' import s from './HeaderMenu.module.scss' +import { useLogout } from '../../../../hooks/auth' interface Props { - children?: any, - isFull?: boolean, - isStickyHeader?: boolean, - visibleFilter?: boolean, - openModalAuthen: () => void, - openModalInfo: () => void, - toggleFilter: () => void, + children?: any + isFull?: boolean + isStickyHeader?: boolean + visibleFilter?: boolean + openModalAuthen: () => void + openModalInfo: () => void + toggleFilter: () => void } - -const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthen, openModalInfo, toggleFilter }: Props) => { +const HeaderMenu = memo( + ({ + isFull, + isStickyHeader, + visibleFilter, + openModalAuthen, + openModalInfo, + toggleFilter, + }: Props) => { const router = useRouter() const { toggleCartDrawer } = useCartDrawer() - const optionMenu = useMemo(() => [ - { - onClick: openModalAuthen, - name: 'Login (Demo)', - }, - { - onClick: openModalInfo, - name: 'Create User Info (Demo)', - }, - { - link: '/account-not-login', - name: 'Account Not Login (Demo)', - }, - { - link: '/demo', - name: 'Notifications Empty (Demo)', - }, - { - link: ROUTE.NOTIFICATION, - name: 'Notifications', - }, - { - link: ROUTE.ACCOUNT, - name: 'Account', - }, - { - link: '/', - name: 'Logout', - }, + const { logout } = useLogout() - ], [openModalAuthen]) - return ( -
-
-
- -
- { - FILTER_PAGE.includes(router.pathname) && ( - - ) - } - -
- -
-
-
- -
-
- Search -
-
-
- -
+ const optionMenu = useMemo( + () => [ + { + onClick: openModalAuthen, + name: 'Login (Demo)', + }, + { + onClick: openModalInfo, + name: 'Create User Info (Demo)', + }, + { + link: '/account-not-login', + name: 'Account Not Login (Demo)', + }, + { + link: '/demo', + name: 'Notifications Empty (Demo)', + }, + { + link: ROUTE.NOTIFICATION, + name: 'Notifications', + }, + { + link: ROUTE.ACCOUNT, + name: 'Account', + }, + { + link: '/', + name: 'Logout', + onClick: logout, + }, + ], + [openModalAuthen, openModalInfo, logout] ) -}) + return ( +
+
+
+ +
+ {FILTER_PAGE.includes(router.pathname) && ( + + )} + +
+
+
+
+ +
+
+ Search +
+
+
+
    +
  • + + + + + +
    • +
  • + + + + + +
    • +
  • + + + +
    • +
  • + +
    • +
+
+ ) + } +) +HeaderMenu.displayName = 'HeaderMenu' export default HeaderMenu diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx index 590368da4..026710bbf 100644 --- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx +++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx @@ -24,7 +24,7 @@ const MenuNavigationProductList = ({categories,brands,featured,visible,onClose}: setDataSort({...dataSort,...value}); } function filter(){ - console.log(dataSort) + // console.log(dataSort) } return( <> diff --git a/src/components/hooks/auth/index.ts b/src/components/hooks/auth/index.ts new file mode 100644 index 000000000..494c974de --- /dev/null +++ b/src/components/hooks/auth/index.ts @@ -0,0 +1,3 @@ +export { default as useLogout } from './useLogout' + + diff --git a/src/components/hooks/auth/useLogout.tsx b/src/components/hooks/auth/useLogout.tsx new file mode 100644 index 000000000..5b1c095e1 --- /dev/null +++ b/src/components/hooks/auth/useLogout.tsx @@ -0,0 +1,34 @@ +import { LogoutMutation } from '@framework/schema' +import { logoutMutation } from '@framework/utils/mutations/log-out-mutation' +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' + +const useLogout = () => { + const [loading, setLoading] = useState(false) + const [error, setError] = useState(null) + const { mutate } = useActiveCustomer() + + const logout = () => { + setError(null) + setLoading(true) + rawFetcher({ + query: logoutMutation, + }) + .then(({ data }) => { + if (!data.logout.success) { + throw CommonError.create('Logout fail') + } + localStorage.setItem(LOCAL_STORAGE_KEY.TOKEN, '') + mutate() + }) + .catch(setError) + .finally(() => setLoading(false)) + } + + return { loading, logout, error } +} + +export default useLogout diff --git a/src/components/hooks/useLogin.tsx b/src/components/hooks/useLogin.tsx index 5a000b9b1..e770ab7e0 100644 --- a/src/components/hooks/useLogin.tsx +++ b/src/components/hooks/useLogin.tsx @@ -4,6 +4,7 @@ import useActiveCustomer from './useActiveCustomer' import { CommonError } from 'src/domains/interfaces/CommonError' import rawFetcher from 'src/utils/rawFetcher' import { LoginMutation } from '@framework/schema' +import { LOCAL_STORAGE_KEY } from 'src/utils/constanst.utils' const query = gql` mutation login($username: String!, $password: String!) { @@ -42,9 +43,8 @@ const useLogin = () => { throw CommonError.create(data.login.message, data.login.errorCode) } const authToken = headers.get('vendure-auth-token') - console.log("auth token: ", authToken) if (authToken != null) { - localStorage.setItem('token', authToken) + localStorage.setItem(LOCAL_STORAGE_KEY.TOKEN, authToken) return mutate() } }) diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index 47f5cf955..db5801235 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -87,7 +87,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { const query = router.query[QUERY_KEY.TAB] as string const index = getTabIndex(query) setActiveTab(index) - }, [router.query[QUERY_KEY.TAB]]) + }, [router.query]) function showModal() { setModalVisible(true); diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx index 4f1b8296b..06e6b2124 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx @@ -12,8 +12,6 @@ interface EditInfoModalProps { const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoModalProps) => { function saveInfo() { - console.log("saved !!!"); - closeModal(); } diff --git a/src/components/modules/home/HomeSubscribe/FormSubscribe/FormSubscribe.tsx b/src/components/modules/home/HomeSubscribe/FormSubscribe/FormSubscribe.tsx index c6b459a2a..ad30990f9 100644 --- a/src/components/modules/home/HomeSubscribe/FormSubscribe/FormSubscribe.tsx +++ b/src/components/modules/home/HomeSubscribe/FormSubscribe/FormSubscribe.tsx @@ -16,7 +16,6 @@ const FormSubscribe = () => { e.preventDefault && e.preventDefault() value = inputElementRef.current?.getValue()?.toString() || '' } - console.log("email here: ", value) } return ( diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 9f9e0830f..f77991604 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -38,6 +38,10 @@ export const ACCOUNT_TAB = { FAVOURITE: 'wishlist', } +export const LOCAL_STORAGE_KEY = { + TOKEN: 'token' +} + export const QUERY_KEY = { TAB: 'tab', CATEGORY: 'category', diff --git a/src/utils/fetcher.ts b/src/utils/fetcher.ts index 53b736e5e..a86367398 100644 --- a/src/utils/fetcher.ts +++ b/src/utils/fetcher.ts @@ -1,5 +1,6 @@ import { request } from 'graphql-request' import { RequestDocument, Variables } from 'graphql-request/dist/types' +import { LOCAL_STORAGE_KEY } from './constanst.utils' interface QueryOptions { query: RequestDocument @@ -10,11 +11,7 @@ interface QueryOptions { const fetcher = async (options: QueryOptions): Promise => { const { query, variables } = options - // console.log('query') - // console.log(options) - const token = localStorage.getItem('token') - // console.log('token') - // console.log(token) + const token = localStorage.getItem(LOCAL_STORAGE_KEY.TOKEN) const res = await request( process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string, query, diff --git a/src/utils/rawFetcher.ts b/src/utils/rawFetcher.ts index 8ee6a05ee..c26b2ab20 100644 --- a/src/utils/rawFetcher.ts +++ b/src/utils/rawFetcher.ts @@ -1,5 +1,6 @@ import { rawRequest } from 'graphql-request' import { RequestDocument, Variables } from 'graphql-request/dist/types' +import { LOCAL_STORAGE_KEY } from './constanst.utils' interface QueryOptions { query: RequestDocument @@ -14,10 +15,12 @@ const rawFetcher = ({ onLoad = () => true, }: QueryOptions): Promise<{ data: T; headers: any }> => { onLoad(true) + const token = localStorage.getItem(LOCAL_STORAGE_KEY.TOKEN) return rawRequest( process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL as string, query as string, - variables + variables, + token ? { Authorization: 'Bearer ' + token } : {} ) .then(({ data, headers }) => { return { data, headers }