diff --git a/packages/status-react/src/contexts/chat-context.tsx b/packages/status-react/src/contexts/chat-context.tsx index 932ee1a2..bae8a57a 100644 --- a/packages/status-react/src/contexts/chat-context.tsx +++ b/packages/status-react/src/contexts/chat-context.tsx @@ -1,6 +1,6 @@ import React, { createContext, useContext, useMemo, useReducer } from 'react' -import type { Message } from '../protocol/use-messages' +import type { Member, Message } from '../protocol' import type { Dispatch, Reducer } from 'react' type Context = { @@ -12,25 +12,27 @@ const ChatContext = createContext(undefined) interface State { message?: Message + member?: Member } type Action = - | { type: 'SET_REPLY'; message?: Message } - | { type: 'CANCEL_REPLY' } + | { type: 'SET_REPLY'; message?: Message; member?: Member } + | { type: 'DELETE_REPLY' } const reducer: Reducer = (state, action) => { switch (action.type) { case 'SET_REPLY': { - return { ...state, message: action.message } + return { ...state, message: action.message, member: action.member } } - case 'CANCEL_REPLY': { - return { ...state, message: undefined } + case 'DELETE_REPLY': { + return { ...initialState } } } } const initialState: State = { message: undefined, + member: undefined, } interface Props { @@ -41,6 +43,7 @@ export const ChatProvider = (props: Props) => { const { children } = props const [state, dispatch] = useReducer(reducer, initialState) + const value = useMemo(() => ({ state, dispatch }), [state]) return {children} diff --git a/packages/status-react/src/routes/chat/components/chat-input/index.tsx b/packages/status-react/src/routes/chat/components/chat-input/index.tsx index fbb54069..a2c788ff 100644 --- a/packages/status-react/src/routes/chat/components/chat-input/index.tsx +++ b/packages/status-react/src/routes/chat/components/chat-input/index.tsx @@ -21,7 +21,7 @@ export const ChatInput = (props: Props) => { const { value, editing, onSubmit } = props const [inputValue, setInputValue] = useState(value ?? '') - const { state } = useChatContext() + const { state, dispatch } = useChatContext() const inputRef = useRef(null) @@ -37,6 +37,7 @@ export const ChatInput = (props: Props) => { if (event.key === 'Enter' && event.shiftKey === false) { onSubmit(inputValue) setInputValue('') + dispatch({ type: 'DELETE_REPLY' }) } } @@ -48,7 +49,9 @@ export const ChatInput = (props: Props) => { - {state.message && } + {state.message && ( + + )} { const { dispatch } = useChatContext() - const { message } = props + const { message, member } = props return ( - - - - TODO: Add name - - + + {member.username} + dispatch({ type: 'CANCEL_REPLY' })} + onClick={() => dispatch({ type: 'DELETE_REPLY' })} > diff --git a/packages/status-react/src/routes/chat/components/chat-message/index.tsx b/packages/status-react/src/routes/chat/components/chat-message/index.tsx index 4297326b..ccad0976 100644 --- a/packages/status-react/src/routes/chat/components/chat-message/index.tsx +++ b/packages/status-react/src/routes/chat/components/chat-message/index.tsx @@ -85,7 +85,7 @@ export const ChatMessage = (props: Props) => { } const handleReplyClick = () => { - dispatch({ type: 'SET_REPLY', message }) + dispatch({ type: 'SET_REPLY', message, member }) } const handlePinClick = () => {