From 70143feea6bf0e7ac136dca8d750f43c9da249d6 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Mon, 11 Apr 2022 21:00:59 +0200 Subject: [PATCH] refactor(react): separate Navbar component --- .../routes/chat/components/navbar/index.tsx | 68 +++++++ .../status-react/src/routes/chat/index.tsx | 2 +- .../status-react/src/routes/chat/navbar.tsx | 179 ------------------ 3 files changed, 69 insertions(+), 180 deletions(-) create mode 100644 packages/status-react/src/routes/chat/components/navbar/index.tsx delete mode 100644 packages/status-react/src/routes/chat/navbar.tsx diff --git a/packages/status-react/src/routes/chat/components/navbar/index.tsx b/packages/status-react/src/routes/chat/components/navbar/index.tsx new file mode 100644 index 00000000..2a747f65 --- /dev/null +++ b/packages/status-react/src/routes/chat/components/navbar/index.tsx @@ -0,0 +1,68 @@ +import React from 'react' + +import { useMatch } from 'react-router-dom' + +import { ChatMenu } from '~/src/components/chat-menu' +import { useAppState } from '~/src/contexts/app-context' +import { BellIcon } from '~/src/icons/bell-icon' +import { DotsIcon } from '~/src/icons/dots-icon' +import { GroupIcon } from '~/src/icons/group-icon' +import { useChat } from '~/src/protocol/use-chat' +import { styled } from '~/src/styles/config' +import { Separator } from '~/src/system' +import { DropdownMenuTrigger } from '~/src/system/dropdown-menu' +import { Flex } from '~/src/system/flex' +import { IconButton } from '~/src/system/icon-button' + +import { ChatInfo } from '../chat-info' + +interface Props { + enableMembers: boolean +} + +export const Navbar = (props: Props) => { + const { enableMembers } = props + + const { state, dispatch } = useAppState() + const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion + + const chat = useChat(params.id!) + + return ( + + + + + {enableMembers && ( + dispatch({ type: 'TOGGLE_MEMBERS' })} + > + + + )} + + + + + + + + + + + + + + + + ) +} + +const NavbarWrapper = styled('div', { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: '10px 16px', +}) diff --git a/packages/status-react/src/routes/chat/index.tsx b/packages/status-react/src/routes/chat/index.tsx index 5226153f..a71bef4b 100644 --- a/packages/status-react/src/routes/chat/index.tsx +++ b/packages/status-react/src/routes/chat/index.tsx @@ -11,7 +11,7 @@ import { Text } from '~/src/system/text' import { ChatInput } from './chat-input' import { ChatMessage } from './chat-message' -import { Navbar } from './navbar' +import { Navbar } from './components/navbar' const EmptyChat = () => { return ( diff --git a/packages/status-react/src/routes/chat/navbar.tsx b/packages/status-react/src/routes/chat/navbar.tsx deleted file mode 100644 index 0db7dc7d..00000000 --- a/packages/status-react/src/routes/chat/navbar.tsx +++ /dev/null @@ -1,179 +0,0 @@ -import React from 'react' - -import { useMatch } from 'react-router-dom' - -import { useAppState } from '~/src/contexts/app-context' -import { BellIcon } from '~/src/icons/bell-icon' -import { DotsIcon } from '~/src/icons/dots-icon' -import { GroupIcon } from '~/src/icons/group-icon' -import { styled } from '~/src/styles/config' -import { Separator } from '~/src/system' -import { Avatar } from '~/src/system/avatar' -import { DropdownMenu, DropdownMenuTrigger } from '~/src/system/dropdown-menu' -import { Flex } from '~/src/system/flex' -import { IconButton } from '~/src/system/icon-button' -import { Text } from '~/src/system/text' - -interface Props { - enableMembers: boolean -} - -const chats: Record = { - welcome: { type: 'channel' }, - general: { type: 'channel' }, - random: { type: 'channel' }, - 'vitalik.eth': { type: 'chat' }, - 'pvl.eth': { type: 'chat' }, - 'Climate Change': { type: 'group-chat' }, -} - -export const Navbar = (props: Props) => { - const { enableMembers } = props - - const { state, dispatch } = useAppState() - const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion - - const chat = chats[params.id!] - - const renderIdentity = () => { - if (chat.type == 'channel') { - return ( - - -
- #general - - 2 pinned messages | General discussions about CryptoKitties. - -
- - ) - } - - if (chat.type == 'group-chat') { - return ( - - -
- Climate Change - - 3 pinned messages | 5 members - -
- - ) - } - - return ( - - -
- pvl.eth - - 0x63FaC9201494f0bd17B9892B9fae4d52fe3BD377 - -
- - ) - } - - const renderMenuItems = () => { - if (chat.type === 'channel') { - return ( - <> - }> - For 15 min - For 1 hour - For 8 hours - For 24 hours - Until I turn it back on - - }> - Mark as Read - - - ) - } - return ( - <> - {chat.type === 'chat' && ( - }> - View Profile - - )} - {chat.type === 'group-chat' && ( - }>Edit Group - )} - - {chat.type === 'group-chat' && ( - }> - Customize Chat - - )} - }> - 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 - - - {chat.type === 'chat' && ( - } danger> - Delete Chat - - )} - {chat.type === 'group-chat' && ( - } danger> - Leave Chat - - )} - - ) - } - - return ( - - {renderIdentity()} - - - {enableMembers && ( - dispatch({ type: 'TOGGLE_MEMBERS' })} - > - - - )} - - - - - - {renderMenuItems()} - - - - - - - - - - ) -} - -const NavbarWrapper = styled('div', { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - padding: '10px 16px', -})