From 79d2bd2c11a6686a87a231e612e4aace6745b0ac Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Mon, 11 Apr 2022 21:00:10 +0200 Subject: [PATCH] feat(react): unify chat menu --- .../src/components/chat-menu/index.tsx | 69 +++++++++++++++++++ .../components/channels/channel-item.tsx | 20 +----- .../components/messages/chat-item.tsx | 23 ++----- 3 files changed, 78 insertions(+), 34 deletions(-) create mode 100644 packages/status-react/src/components/chat-menu/index.tsx diff --git a/packages/status-react/src/components/chat-menu/index.tsx b/packages/status-react/src/components/chat-menu/index.tsx new file mode 100644 index 00000000..f3478dee --- /dev/null +++ b/packages/status-react/src/components/chat-menu/index.tsx @@ -0,0 +1,69 @@ +import React from 'react' + +import { BellIcon } from '~/src/icons/bell-icon' +import { ContextMenu, DropdownMenu } from '~/src/system' + +interface Props { + type: 'dropdown' | 'context' + chatType: 'channel' | 'chat' | 'group-chat' +} + +export const ChatMenu = (props: Props) => { + const { type, chatType } = props + + const Menu = type === 'dropdown' ? DropdownMenu : ContextMenu + + const renderMenuItems = () => { + const commonMenuItems = ( + <> + }> + For 15 min + For 1 hour + For 8 hours + For 24 hours + Until I turn it back on + + }>Mark as Read + }> + Last 24 hours + Last 2 days + Last 3 days + Last 7 days + + + ) + + if (chatType === 'channel') { + return commonMenuItems + } + + if (chatType === 'group-chat') { + return ( + <> + }>Add / remove from group + }>Edit name and image + + {commonMenuItems} + + } danger> + Leave Chat + + + ) + } + + return ( + <> + }>View Profile + + {commonMenuItems} + + } danger> + Delete Chat + + + ) + } + + return {renderMenuItems()} +} diff --git a/packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx b/packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx index ed074896..0f465278 100644 --- a/packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx +++ b/packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx @@ -1,7 +1,7 @@ import React from 'react' -import { BellIcon } from '~/src/icons/bell-icon' -import { ContextMenu, ContextMenuTrigger } from '~/src/system/context-menu' +import { ChatMenu } from '~/src/components/chat-menu' +import { ContextMenuTrigger } from '~/src/system/context-menu' import { SidebarItem } from '../sidebar-item' @@ -17,21 +17,7 @@ export const ChannelItem = (props: Props) => { return ( #{children} - - }>View Profile - - - For 15 min - For 1 hour - For 8 hours - For 24 hours - Until I turn it back on - - - } danger> - Delete - - + ) } diff --git a/packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx b/packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx index 24e2af0a..ad773ac1 100644 --- a/packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx +++ b/packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx @@ -1,7 +1,8 @@ import React from 'react' -import { BellIcon } from '~/src/icons/bell-icon' -import { ContextMenu, ContextMenuTrigger } from '~/src/system' +import { ChatMenu } from '~/src/components/chat-menu' +import { useChat } from '~/src/protocol/use-chat' +import { ContextMenuTrigger } from '~/src/system' import { SidebarItem } from '../sidebar-item' @@ -14,24 +15,12 @@ interface Props extends SidebarItemProps { export const ChatItem = (props: Props) => { const { children, ...sidebarItemProps } = props + const chat = useChat(children) + return ( {children} - - }>View Profile - - }> - For 15 min - For 1 hour - For 8 hours - For 24 hours - Until I turn it back on - - - } danger> - Delete - - + ) }