refactor(react): separate Navbar component
This commit is contained in:
Pavel Prichodko
parent
b771115011
commit
70143feea6
|
|
@ -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 (
|
||||||
|
<NavbarWrapper>
|
||||||
|
<ChatInfo chat={chat} />
|
||||||
|
|
||||||
|
<Flex gap="2" align="center">
|
||||||
|
{enableMembers && (
|
||||||
|
<IconButton
|
||||||
|
label="Toggle Members"
|
||||||
|
active={state.showMembers}
|
||||||
|
onClick={() => dispatch({ type: 'TOGGLE_MEMBERS' })}
|
||||||
|
>
|
||||||
|
<GroupIcon />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<DropdownMenuTrigger>
|
||||||
|
<IconButton label="Options">
|
||||||
|
<DotsIcon />
|
||||||
|
</IconButton>
|
||||||
|
<ChatMenu type="dropdown" chatType={chat.type} />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
|
||||||
|
<Separator orientation="vertical" css={{ height: 24 }} />
|
||||||
|
|
||||||
|
<IconButton label="Show Activity Center">
|
||||||
|
<BellIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Flex>
|
||||||
|
</NavbarWrapper>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const NavbarWrapper = styled('div', {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
padding: '10px 16px',
|
||||||
|
})
|
||||||
|
|
@ -11,7 +11,7 @@ import { Text } from '~/src/system/text'
|
||||||
|
|
||||||
import { ChatInput } from './chat-input'
|
import { ChatInput } from './chat-input'
|
||||||
import { ChatMessage } from './chat-message'
|
import { ChatMessage } from './chat-message'
|
||||||
import { Navbar } from './navbar'
|
import { Navbar } from './components/navbar'
|
||||||
|
|
||||||
const EmptyChat = () => {
|
const EmptyChat = () => {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -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<string, { type: 'channel' | 'group-chat' | 'chat' }> = {
|
|
||||||
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 (
|
|
||||||
<Flex align="center" gap="2">
|
|
||||||
<Avatar size={36} />
|
|
||||||
<div>
|
|
||||||
<Text>#general</Text>
|
|
||||||
<Text size={12} color="gray">
|
|
||||||
2 pinned messages | General discussions about CryptoKitties.
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</Flex>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
if (chat.type == 'group-chat') {
|
|
||||||
return (
|
|
||||||
<Flex align="center" gap="2">
|
|
||||||
<Avatar size={36} />
|
|
||||||
<div>
|
|
||||||
<Text>Climate Change</Text>
|
|
||||||
<Text size={12} color="gray">
|
|
||||||
3 pinned messages | 5 members
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</Flex>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Flex align="center" gap="2">
|
|
||||||
<Avatar size={36} />
|
|
||||||
<div>
|
|
||||||
<Text>pvl.eth</Text>
|
|
||||||
<Text size={12} color="gray">
|
|
||||||
0x63FaC9201494f0bd17B9892B9fae4d52fe3BD377
|
|
||||||
</Text>
|
|
||||||
</div>
|
|
||||||
</Flex>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderMenuItems = () => {
|
|
||||||
if (chat.type === 'channel') {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<DropdownMenu.TriggerItem label="Mute Channel" icon={<BellIcon />}>
|
|
||||||
<DropdownMenu.Item>For 15 min</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>For 1 hour</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>For 8 hours</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>For 24 hours</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>Until I turn it back on</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.TriggerItem>
|
|
||||||
<DropdownMenu.Item icon={<BellIcon />}>
|
|
||||||
Mark as Read
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{chat.type === 'chat' && (
|
|
||||||
<DropdownMenu.Item icon={<BellIcon />}>
|
|
||||||
View Profile
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
)}
|
|
||||||
{chat.type === 'group-chat' && (
|
|
||||||
<DropdownMenu.Item icon={<BellIcon />}>Edit Group</DropdownMenu.Item>
|
|
||||||
)}
|
|
||||||
<DropdownMenu.Separator />
|
|
||||||
{chat.type === 'group-chat' && (
|
|
||||||
<DropdownMenu.Item icon={<BellIcon />}>
|
|
||||||
Customize Chat
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
)}
|
|
||||||
<DropdownMenu.TriggerItem label="Mute Chat" icon={<BellIcon />}>
|
|
||||||
<DropdownMenu.Item>For 15 min</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>For 1 hour</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>For 8 hours</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>For 24 hours</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>Until I turn it back on</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.TriggerItem>
|
|
||||||
<DropdownMenu.Item icon={<BellIcon />}>Mark as Read</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.TriggerItem label="Fetch Messages" icon={<BellIcon />}>
|
|
||||||
<DropdownMenu.Item>Last 24 hours</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>Last 2 days</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>Last 3 days</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item>Last 7 days</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.TriggerItem>
|
|
||||||
<DropdownMenu.Separator />
|
|
||||||
{chat.type === 'chat' && (
|
|
||||||
<DropdownMenu.Item icon={<BellIcon />} danger>
|
|
||||||
Delete Chat
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
)}
|
|
||||||
{chat.type === 'group-chat' && (
|
|
||||||
<DropdownMenu.Item icon={<BellIcon />} danger>
|
|
||||||
Leave Chat
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NavbarWrapper>
|
|
||||||
{renderIdentity()}
|
|
||||||
|
|
||||||
<Flex gap="2" align="center">
|
|
||||||
{enableMembers && (
|
|
||||||
<IconButton
|
|
||||||
label="Toggle Members"
|
|
||||||
active={state.showMembers}
|
|
||||||
onClick={() => dispatch({ type: 'TOGGLE_MEMBERS' })}
|
|
||||||
>
|
|
||||||
<GroupIcon />
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<DropdownMenuTrigger>
|
|
||||||
<IconButton label="Options">
|
|
||||||
<DotsIcon />
|
|
||||||
</IconButton>
|
|
||||||
<DropdownMenu align="end">{renderMenuItems()}</DropdownMenu>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
|
|
||||||
<Separator orientation="vertical" css={{ height: 24 }} />
|
|
||||||
|
|
||||||
<IconButton label="Show Activity Center">
|
|
||||||
<BellIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Flex>
|
|
||||||
</NavbarWrapper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const NavbarWrapper = styled('div', {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
padding: '10px 16px',
|
|
||||||
})
|
|
||||||
Loading…
Reference in New Issue