feat: add member to chat input reply

This commit is contained in:
Pavel Prichodko 2022-06-15 16:04:07 +02:00
parent c2ecb7ed78
commit 9a009ddc4e
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
4 changed files with 23 additions and 21 deletions

View File

@ -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<Context | undefined>(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> = (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 <ChatContext.Provider value={value}>{children}</ChatContext.Provider>

View File

@ -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<HTMLInputElement>(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) => {
</IconButton>
</Box>
<Bubble>
{state.message && <InputReply message={state.message} />}
{state.message && (
<InputReply message={state.message} member={state.member} />
)}
<InputWrapper>
<Input
ref={inputRef}

View File

@ -4,34 +4,30 @@ import { useChatContext } from '~/src/contexts/chat-context'
import { CrossIcon } from '~/src/icons/cross-icon'
import { ReplyIcon } from '~/src/icons/reply-icon'
import { styled } from '~/src/styles/config'
import { Box, Flex, Icon, IconButton, Image, Text } from '~/src/system'
import { Flex, Icon, IconButton, Image, Text } from '~/src/system'
import type { Message } from '~/src/protocol/use-messages'
import type { Member, Message } from '~/src/protocol'
interface Props {
message: Message
member: Member
}
export const InputReply = (props: Props) => {
const { dispatch } = useChatContext()
const { message } = props
const { message, member } = props
return (
<Wrapper>
<Flex align="center" justify="between">
<Flex gap={1}>
<Icon hidden>
<ReplyIcon />
</Icon>
<Text size="13" weight="500" truncate={false}>
TODO: Add name
</Text>
</Flex>
<Text size="13" weight="500" truncate={false}>
{member.username}
</Text>
<IconButton
label="Cancel reply"
onClick={() => dispatch({ type: 'CANCEL_REPLY' })}
onClick={() => dispatch({ type: 'DELETE_REPLY' })}
>
<CrossIcon />
</IconButton>

View File

@ -85,7 +85,7 @@ export const ChatMessage = (props: Props) => {
}
const handleReplyClick = () => {
dispatch({ type: 'SET_REPLY', message })
dispatch({ type: 'SET_REPLY', message, member })
}
const handlePinClick = () => {