status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/status-react/src/routes/chat/components/chat-message/actions.tsx
View File

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

48
packages/status-react/src/routes/chat/components/chat-message/index.tsx
View File

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