feat(react): add action handlers

This commit is contained in:
Pavel Prichodko 2022-04-19 14:09:16 +02:00
parent a361820b24
commit 0ccea4b559
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
2 changed files with 38 additions and 35 deletions

View File

@ -22,6 +22,7 @@ interface Props {
pinned: boolean
onReplyClick: () => void
onEditClick: () => void
onPinClick: () => void
reacting: boolean
onReactingChange: (reacting: boolean) => void
reactions: Reactions
@ -33,6 +34,7 @@ export const Actions = (props: Props) => {
pinned,
onReplyClick,
onEditClick,
onPinClick,
reacting,
onReactingChange,
reactions,
@ -77,19 +79,16 @@ export const Actions = (props: Props) => {
</IconButton>
</Tooltip>
)}
{pinned ? (
<Tooltip label="Unpin">
<IconButton label="Unpin message" intent="info" color="gray">
<UnpinIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip label="Pin">
<IconButton label="Pin message" intent="info" color="gray">
<PinIcon />
</IconButton>
</Tooltip>
)}
<Tooltip label={pinned ? 'Unpin' : 'Pin'}>
<IconButton
label={pinned ? 'Unpin message' : 'Pin message'}
intent="info"
color="gray"
onClick={onPinClick}
>
{pinned ? <UnpinIcon /> : <PinIcon />}
</IconButton>
</Tooltip>
{owner && (
<AlertDialogTrigger>
<Tooltip label="Delete">

View File

@ -60,12 +60,26 @@ export const ChatMessage = (props: Props) => {
const { dispatch } = useChatContext()
if (editing) {
return (
<Wrapper>
<Avatar size={44} />
const handleReplyClick = () => {
dispatch({
type: 'SET_REPLY',
message,
})
}
const handlePinClick = () => {
console.log(pinned)
}
const handleReaction = (reaction: string) => {
console.log(reaction)
}
const renderMessage = () => {
if (editing) {
return (
<Box>
<ChatInput value={message?.text} />
<ChatInput value={message?.text ?? ''} />
<Flex gap={2}>
<Button
variant="outline"
@ -77,22 +91,9 @@ export const ChatMessage = (props: Props) => {
<Button size="small">Save</Button>
</Flex>
</Box>
</Wrapper>
)
}
)
}
const handleReplyClick = () => {
dispatch({
type: 'SET_REPLY',
message,
})
}
const handleReaction = (reaction: string) => {
console.log(reaction)
}
const renderMessage = () => {
switch (type) {
case 'text': {
// <AlertDialogTrigger>
@ -210,14 +211,15 @@ export const ChatMessage = (props: Props) => {
pinned={pinned}
onEditClick={() => setEditing(true)}
onReplyClick={handleReplyClick}
onPinClick={handlePinClick}
reacting={reacting}
onReactingChange={setReacting}
reactions={reactions}
/>
</Wrapper>
<ContextMenu>
<ContextMenu.Item>Reply</ContextMenu.Item>
<ContextMenu.Item>Pin</ContextMenu.Item>
<ContextMenu.Item onSelect={handleReplyClick}>Reply</ContextMenu.Item>
<ContextMenu.Item onSelect={handlePinClick}>Pin</ContextMenu.Item>
</ContextMenu>
</ContextMenuTrigger>
</>
@ -280,4 +282,6 @@ const Wrapper = styled('div', {
},
},
},
compoundVariants: [],
})