>
)
diff --git a/src/components/common/MessageCommon/MessageCommon.tsx b/src/components/common/MessageCommon/MessageCommon.tsx
index 8ffd62e35..adda6a040 100644
--- a/src/components/common/MessageCommon/MessageCommon.tsx
+++ b/src/components/common/MessageCommon/MessageCommon.tsx
@@ -1,21 +1,29 @@
-import React, { memo } from 'react'
+import React, { memo, useEffect } from 'react'
import s from './MessageCommon.module.scss'
import MessageItem, { MessageItemProps } from './MessageItem/MessageItem'
interface Props {
messages: MessageItemProps[]
- onRemove?: (id?: number) => void
+ onRemove?: (id: number) => void
}
const MessageCommon = memo(({ messages, onRemove }: Props) => {
+ useEffect(() => {
+ console.log("this fun change; onRemove")
+ }, [onRemove])
+
+ const handleRemove = (id: number) => {
+ onRemove && onRemove(id)
+ }
+
return (
- {messages.map((item) => (
+ {messages.reverse().map((item) => (
))}
diff --git a/src/components/common/MessageCommon/MessageItem/MessageItem.module.scss b/src/components/common/MessageCommon/MessageItem/MessageItem.module.scss
index da9896d05..e1f2d1b49 100644
--- a/src/components/common/MessageCommon/MessageItem/MessageItem.module.scss
+++ b/src/components/common/MessageCommon/MessageItem/MessageItem.module.scss
@@ -53,7 +53,7 @@
@keyframes showMessage {
0% {
- transform: translateY(-6rem);
+ transform: translateY(-2rem);
opacity: .5;
}
diff --git a/src/components/common/MessageCommon/MessageItem/MessageItem.tsx b/src/components/common/MessageCommon/MessageItem/MessageItem.tsx
index 38d7ed180..89f9b6600 100644
--- a/src/components/common/MessageCommon/MessageItem/MessageItem.tsx
+++ b/src/components/common/MessageCommon/MessageItem/MessageItem.tsx
@@ -8,7 +8,7 @@ export interface MessageItemProps {
content?: React.ReactNode
type?: 'info' | 'success' | 'error' | 'warning'
timeout?: number
- onRemove?: (id?: number) => void
+ onRemove?: (id: number) => void
}
const MessageItem = memo(
@@ -40,7 +40,7 @@ const MessageItem = memo(
useEffect(() => {
if (isHide && !isMouseOver && onRemove) {
- onRemove(id)
+ onRemove(id || 0)
}
}, [isHide, isMouseOver, onRemove, id])
diff --git a/src/components/contexts/Message/MessageContext.tsx b/src/components/contexts/Message/MessageContext.tsx
new file mode 100644
index 000000000..f9399498e
--- /dev/null
+++ b/src/components/contexts/Message/MessageContext.tsx
@@ -0,0 +1,27 @@
+import { createContext, useContext } from 'react'
+import { MessageItemProps } from 'src/components/common/MessageCommon/MessageItem/MessageItem'
+
+export type MessageContextType = {
+ messages: MessageItemProps[]
+ removeMessage: (id: number) => void
+ showMessageSuccess: (content: string, timeout?: number) => void
+ showMessageInfo: (content: string, timeout?: number) => void
+ showMessageError: (content: string, timeout?: number) => void
+ showMessageWarning: (content: string, timeout?: number) => void
+}
+export const DEFAULT_MESSAGE_CONTEXT: MessageContextType = {
+ messages: [],
+ removeMessage: () => {},
+ showMessageSuccess: () => {},
+ showMessageInfo: () => {},
+ showMessageError: () => {},
+ showMessageWarning: () => {},
+}
+
+export const MessageContext = createContext(
+ DEFAULT_MESSAGE_CONTEXT
+)
+
+export function useMessage() {
+ return useContext(MessageContext)
+}
diff --git a/src/components/contexts/Message/MessageProvider.tsx b/src/components/contexts/Message/MessageProvider.tsx
new file mode 100644
index 000000000..854fb5ac6
--- /dev/null
+++ b/src/components/contexts/Message/MessageProvider.tsx
@@ -0,0 +1,67 @@
+import { ReactNode, useCallback, useState } from 'react'
+import { MessageItemProps } from 'src/components/common/MessageCommon/MessageItem/MessageItem'
+import { MessageContext } from './MessageContext'
+
+type Props = {
+ children: ReactNode
+}
+
+export function MessageProvider({ children }: Props) {
+ const [currentId, setCurrentId] = useState(0)
+ const [messages, setMessages] = useState([])
+
+ const createNewMessage = (
+ content: string,
+ timeout?: number,
+ type?: 'info' | 'success' | 'error' | 'warning'
+ ) => {
+ const item: MessageItemProps = {
+ id: currentId + 1,
+ content: currentId + 1 + content,
+ type,
+ timeout,
+ }
+ setCurrentId(currentId + 1)
+ setMessages([...messages, item])
+ }
+
+ const showMessageSuccess = (content: string, timeout?: number) => {
+ createNewMessage(content, timeout, 'success')
+ }
+
+ const showMessageInfo = (content: string, timeout?: number) => {
+ createNewMessage(content, timeout, 'info')
+ }
+
+ const showMessageError = (content: string, timeout?: number) => {
+ createNewMessage(content, timeout, 'error')
+ }
+
+ const showMessageWarning = (content: string, timeout?: number) => {
+ createNewMessage(content, timeout, 'warning')
+ }
+
+ const removeMessage = (id: number) => {
+ const newMessages = messages.filter((item) => item.id !== id)
+ setMessages(newMessages)
+
+ if (newMessages.length === 0) {
+ setCurrentId(0)
+ }
+ }
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/components/contexts/index.ts b/src/components/contexts/index.ts
index a34c91d85..795c9161c 100644
--- a/src/components/contexts/index.ts
+++ b/src/components/contexts/index.ts
@@ -1,2 +1,5 @@
export * from './CartDrawer/CartDrawerContext'
-export * from './CartDrawer/CartDrawerProvider'
\ No newline at end of file
+export * from './CartDrawer/CartDrawerProvider'
+
+export * from './Message/MessageContext'
+export * from './Message/MessageProvider'