diff --git a/pages/test.tsx b/pages/test.tsx index e94bba73d..a140d5aee 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -1,35 +1,16 @@ -import { Layout, MessageCommon } from 'src/components/common' -import { MessageItemProps } from 'src/components/common/MessageCommon/MessageItem/MessageItem' +import { Layout } from 'src/components/common' +import { useMessage } from 'src/components/contexts' -const data: MessageItemProps[] = [ - { - id: 1, - content: 'Create account successfully', - type: 'error', - }, - { - id: 2, - content: 'Create account successfully', - type: 'success', - }, - { - id: 3, - content: 'Create account successfully', - type: 'warning', - }, - { - id: 4, - content: 'Create account successfully', - type: 'info', - }, -] export default function Test() { + const { showMessageSuccess } = useMessage() + + const handleClick = () => { + showMessageSuccess("Create account successfully") + } + return ( <> - - {/* Create account successfully - Create account successfully - Create account successfully */} + ) } diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index e7b0c88e4..ec5a1646d 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -1,25 +1,24 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' -import { CartDrawerProvider } from 'src/components/contexts' +import { CartDrawerProvider, MessageProvider } from 'src/components/contexts' import LayoutContent from './LayoutContent/LayoutContent' interface Props { - className?: string - children?: any + className?: string + children?: any } const Layout: FC = ({ children }) => { - const { locale = 'en-US' } = useRouter() - return ( - - - - {children} - - - - - ) + const { locale = 'en-US' } = useRouter() + return ( + + + + {children} + + + + ) } export default Layout diff --git a/src/components/common/Layout/LayoutContent/LayoutContent.tsx b/src/components/common/Layout/LayoutContent/LayoutContent.tsx index 7c096be0a..77eac0a2a 100644 --- a/src/components/common/Layout/LayoutContent/LayoutContent.tsx +++ b/src/components/common/Layout/LayoutContent/LayoutContent.tsx @@ -1,8 +1,9 @@ import { useRouter } from 'next/router' import { FC } from 'react' +import { useMessage } from 'src/components/contexts' import { useModalCommon } from 'src/components/hooks' import { BRAND, CATEGORY, FEATURED, FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils' -import { CartDrawer, Footer, ScrollToTop } from '../..' +import { CartDrawer, Footer, MessageCommon, ScrollToTop } from '../..' import Header from '../../Header/Header' import MenuNavigationProductList from '../../MenuNavigationProductList/MenuNavigationProductList' import s from './LayoutContent.module.scss' @@ -16,6 +17,7 @@ const LayoutContent: FC = ({ children }) => { const { pathname } = useRouter() const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false }) const router = useRouter() + const {messages, removeMessage} = useMessage() const toggleFilter = () => { if (visibleFilter) { @@ -44,6 +46,7 @@ const LayoutContent: FC = ({ children }) => {