From 7265ec260c28a6beffcd8bb0c3a3cf58be236328 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Mon, 23 May 2022 14:42:28 +0200
Subject: [PATCH] feat(react): add user profile dialog to chat message

---
 .../status-react/src/components/chat-menu/index.tsx   |  2 +-
 .../src/components/user-profile-dialog/index.tsx      |  8 ++++----
 .../src/routes/chat/components/chat-message/index.tsx | 11 ++++++++++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/status-react/src/components/chat-menu/index.tsx b/packages/status-react/src/components/chat-menu/index.tsx
index ee9fad35..b591592f 100644
--- a/packages/status-react/src/components/chat-menu/index.tsx
+++ b/packages/status-react/src/components/chat-menu/index.tsx
@@ -87,7 +87,7 @@ export const ChatMenu = (props: Props) => {
     <Menu>
       <Menu.Item
         icon={<BellIcon />}
-        onSelect={() => userProfileDialog.open({ contact: 'Satoshi' })}
+        onSelect={() => userProfileDialog.open({ name: 'Satoshi' })}
       >
         View Profile
       </Menu.Item>
diff --git a/packages/status-react/src/components/user-profile-dialog/index.tsx b/packages/status-react/src/components/user-profile-dialog/index.tsx
index 4e8b99eb..f6630b87 100644
--- a/packages/status-react/src/components/user-profile-dialog/index.tsx
+++ b/packages/status-react/src/components/user-profile-dialog/index.tsx
@@ -3,18 +3,18 @@ import React from 'react'
 import { Avatar, Dialog, EmojiHash, Heading, Text } from '~/src/system'
 
 interface Props {
-  contact: string
+  name: string
 }
 
 // TODO: Add all states of contact, wait for desktop release
 export const UserProfileDialog = (props: Props) => {
-  const { contact, ...dialogProps } = props
+  const { name, ...dialogProps } = props
 
   return (
-    <Dialog title={`${contact}'s Profile`} size="640" {...dialogProps}>
+    <Dialog title={`${name}'s Profile`} size="640" {...dialogProps}>
       <Dialog.Body align="center">
         <Avatar size="80" />
-        <Heading size="22">{contact}</Heading>
+        <Heading size="22">{name}</Heading>
         <Text>Chatkey:0x63FaC9201494f0bd17B9892B9fae4d52fe3BD377</Text>
         <EmojiHash />
       </Dialog.Body>
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 f88ae41a..b3b94b01 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
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 
+import { UserProfileDialog } from '~/src/components/user-profile-dialog'
 import { useChatContext } from '~/src/contexts/chat-context'
 import { BellIcon } from '~/src/icons/bell-icon'
 import { PinIcon } from '~/src/icons/pin-icon'
@@ -16,6 +17,7 @@ import {
   Flex,
   Image,
   Text,
+  useDialog,
 } from '~/src/system'
 
 import { ChatInput } from '../chat-input'
@@ -60,6 +62,8 @@ export const ChatMessage = (props: Props) => {
 
   const { dispatch } = useChatContext()
 
+  const userProfileDialog = useDialog(UserProfileDialog)
+
   const handleReplyClick = () => {
     dispatch({
       type: 'SET_REPLY',
@@ -160,7 +164,12 @@ export const ChatMessage = (props: Props) => {
                     <EmojiHash />
                   </Flex>
                   <DropdownMenu.Separator />
-                  <DropdownMenu.Item icon={<BellIcon />}>
+                  <DropdownMenu.Item
+                    icon={<BellIcon />}
+                    onSelect={() =>
+                      userProfileDialog.open({ name: contact.name })
+                    }
+                  >
                     View Profile
                   </DropdownMenu.Item>
                   <DropdownMenu.Item icon={<BellIcon />}>