feat(react): add action handlers

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

@@ -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={pinned ? 'Unpin' : 'Pin'}>
-        <Tooltip label="Unpin">
+        <IconButton
-          <IconButton label="Unpin message" intent="info" color="gray">
+          label={pinned ? 'Unpin message' : 'Pin message'}
-            <UnpinIcon />
+          intent="info"
+          color="gray"
+          onClick={onPinClick}
+        >
+          {pinned ? <UnpinIcon /> : <PinIcon />}
         </IconButton>
       </Tooltip>
-      ) : (
-        <Tooltip label="Pin">
-          <IconButton label="Pin message" intent="info" color="gray">
-            <PinIcon />
-          </IconButton>
-        </Tooltip>
-      )}
       {owner && (
         <AlertDialogTrigger>
           <Tooltip label="Delete">

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

@@ -60,12 +60,26 @@ export const ChatMessage = (props: Props) => {
 
   const { dispatch } = useChatContext()
 
+  const handleReplyClick = () => {
+    dispatch({
+      type: 'SET_REPLY',
+      message,
+    })
+  }
+
+  const handlePinClick = () => {
+    console.log(pinned)
+  }
+
+  const handleReaction = (reaction: string) => {
+    console.log(reaction)
+  }
+
+  const renderMessage = () => {
     if (editing) {
       return (
-      <Wrapper>
-        <Avatar size={44} />
         <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 onSelect={handleReplyClick}>Reply</ContextMenu.Item>
-          <ContextMenu.Item>Pin</ContextMenu.Item>
+          <ContextMenu.Item onSelect={handlePinClick}>Pin</ContextMenu.Item>
         </ContextMenu>
       </ContextMenuTrigger>
     </>
@@ -280,4 +282,6 @@ const Wrapper = styled('div', {
       },
     },
   },
+
+  compoundVariants: [],
 })