From aadaa8d013cb6fd3348ab2d8a694fa9a582bdd40 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Wed, 6 Apr 2022 14:00:03 +0200 Subject: [PATCH] refactor(react): sidebar components structure --- .../main-sidebar/community-dialog.tsx | 58 ------------ .../channels}/channel-group.tsx | 0 .../channels}/channel-item.tsx | 4 +- .../components/channels/index.tsx | 32 +++++++ .../components/community-info/index.tsx | 41 +++++++++ .../{ => components/messages}/chat-item.tsx | 4 +- .../components/messages/index.tsx | 34 +++++++ .../sidebar-item/index.tsx} | 0 .../src/components/main-sidebar/index.tsx | 91 ++----------------- 9 files changed, 120 insertions(+), 144 deletions(-) delete mode 100644 packages/status-react/src/components/main-sidebar/community-dialog.tsx rename packages/status-react/src/components/main-sidebar/{ => components/channels}/channel-group.tsx (100%) rename packages/status-react/src/components/main-sidebar/{ => components/channels}/channel-item.tsx (91%) create mode 100644 packages/status-react/src/components/main-sidebar/components/channels/index.tsx create mode 100644 packages/status-react/src/components/main-sidebar/components/community-info/index.tsx rename packages/status-react/src/components/main-sidebar/{ => components/messages}/chat-item.tsx (91%) create mode 100644 packages/status-react/src/components/main-sidebar/components/messages/index.tsx rename packages/status-react/src/components/main-sidebar/{sidebar-item.tsx => components/sidebar-item/index.tsx} (100%) diff --git a/packages/status-react/src/components/main-sidebar/community-dialog.tsx b/packages/status-react/src/components/main-sidebar/community-dialog.tsx deleted file mode 100644 index ed7ab423..00000000 --- a/packages/status-react/src/components/main-sidebar/community-dialog.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react' - -import { Button, Dialog, Text, TextInput } from '~/src/system' - -interface Props { - title: string - description: string -} - -export const CommunityDialog = (props: Props) => { - const { title, description } = props - - return ( - - - {description} - - - - - - To access this community, paste community public key in Status desktop - or mobile app - - - - - - - - - - - - - Cancel - Submit - - - ) -} diff --git a/packages/status-react/src/components/main-sidebar/channel-group.tsx b/packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx similarity index 100% rename from packages/status-react/src/components/main-sidebar/channel-group.tsx rename to packages/status-react/src/components/main-sidebar/components/channels/channel-group.tsx diff --git a/packages/status-react/src/components/main-sidebar/channel-item.tsx b/packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx similarity index 91% rename from packages/status-react/src/components/main-sidebar/channel-item.tsx rename to packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx index cfed8b18..ed074896 100644 --- a/packages/status-react/src/components/main-sidebar/channel-item.tsx +++ b/packages/status-react/src/components/main-sidebar/components/channels/channel-item.tsx @@ -3,9 +3,9 @@ import React from 'react' import { BellIcon } from '~/src/icons/bell-icon' import { ContextMenu, ContextMenuTrigger } from '~/src/system/context-menu' -import { SidebarItem } from './sidebar-item' +import { SidebarItem } from '../sidebar-item' -import type { SidebarItemProps } from './sidebar-item' +import type { SidebarItemProps } from '../sidebar-item' interface Props extends SidebarItemProps { children: string diff --git a/packages/status-react/src/components/main-sidebar/components/channels/index.tsx b/packages/status-react/src/components/main-sidebar/components/channels/index.tsx new file mode 100644 index 00000000..c1c69f2b --- /dev/null +++ b/packages/status-react/src/components/main-sidebar/components/channels/index.tsx @@ -0,0 +1,32 @@ +import React from 'react' + +import { Box } from '~/src/system' + +import { ChannelGroup } from './channel-group' +import { ChannelItem } from './channel-item' + +const CHANNELS = { + Public: ['welcome', 'general', 'random'], + Other: ['random', 'general', 'welcome'], +} + +export const Channels = () => { + return ( + + {Object.entries(CHANNELS).map(([group, channels]) => ( + + {channels.map(channel => ( + + {channel} + + ))} + + ))} + + ) +} diff --git a/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx new file mode 100644 index 00000000..804c6560 --- /dev/null +++ b/packages/status-react/src/components/main-sidebar/components/community-info/index.tsx @@ -0,0 +1,41 @@ +import React from 'react' + +import { useCommunity } from '~/src/protocol/use-community' +import { styled } from '~/src/styles/config' +import { Avatar } from '~/src/system/avatar' +import { DialogTrigger } from '~/src/system/dialog' +import { Text } from '~/src/system/text' + +import { CommunityDialog } from './community-dialog' + +export const CommunityInfo = () => { + const { name, imageUrl, membersCount } = useCommunity() + + return ( + + + + + ) +} + +const Button = styled('button', { + padding: '4px 6px', + display: 'inline-flex', + alignSelf: 'flex-start', + gap: '$2', + borderRadius: 8, + alignItems: 'center', + + '&:hover': { + background: '#E9EDF1', + }, +}) diff --git a/packages/status-react/src/components/main-sidebar/chat-item.tsx b/packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx similarity index 91% rename from packages/status-react/src/components/main-sidebar/chat-item.tsx rename to packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx index be7e7fa8..24e2af0a 100644 --- a/packages/status-react/src/components/main-sidebar/chat-item.tsx +++ b/packages/status-react/src/components/main-sidebar/components/messages/chat-item.tsx @@ -3,9 +3,9 @@ import React from 'react' import { BellIcon } from '~/src/icons/bell-icon' import { ContextMenu, ContextMenuTrigger } from '~/src/system' -import { SidebarItem } from './sidebar-item' +import { SidebarItem } from '../sidebar-item' -import type { SidebarItemProps } from './sidebar-item' +import type { SidebarItemProps } from '../sidebar-item' interface Props extends SidebarItemProps { children: string diff --git a/packages/status-react/src/components/main-sidebar/components/messages/index.tsx b/packages/status-react/src/components/main-sidebar/components/messages/index.tsx new file mode 100644 index 00000000..297e1c85 --- /dev/null +++ b/packages/status-react/src/components/main-sidebar/components/messages/index.tsx @@ -0,0 +1,34 @@ +import React from 'react' + +import { EditIcon } from '~/src/icons/edit-icon' +import { Box } from '~/src/system' +import { Grid } from '~/src/system/grid' +import { Heading } from '~/src/system/heading' +import { IconButton } from '~/src/system/icon-button' + +import { ChatItem } from './chat-item' + +const CHATS = ['vitalik.eth', 'pvl.eth', 'Climate Change'] + +export const Messages = () => { + return ( + + + Messages + + + + + {CHATS.map(chat => ( + + {chat} + + ))} + + ) +} diff --git a/packages/status-react/src/components/main-sidebar/sidebar-item.tsx b/packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx similarity index 100% rename from packages/status-react/src/components/main-sidebar/sidebar-item.tsx rename to packages/status-react/src/components/main-sidebar/components/sidebar-item/index.tsx diff --git a/packages/status-react/src/components/main-sidebar/index.tsx b/packages/status-react/src/components/main-sidebar/index.tsx index fa0f9915..3183fb6d 100644 --- a/packages/status-react/src/components/main-sidebar/index.tsx +++ b/packages/status-react/src/components/main-sidebar/index.tsx @@ -1,81 +1,21 @@ import React from 'react' -import { EditIcon } from '~/src/icons/edit-icon' import { styled } from '~/src/styles/config' -import { Box } from '~/src/system' -import { Avatar } from '~/src/system/avatar' -import { DialogTrigger } from '~/src/system/dialog' -import { Grid } from '~/src/system/grid' -import { Heading } from '~/src/system/heading' -import { IconButton } from '~/src/system/icon-button' -import { Text } from '~/src/system/text' -import { ChannelGroup } from './channel-group' -import { ChannelItem } from './channel-item' -import { ChatItem } from './chat-item' -import { CommunityDialog } from './community-dialog' - -const CHANNELS = { - Public: ['welcome', 'general', 'random'], - Other: ['random', 'general', 'welcome'], -} - -const CHATS = ['vitalik.eth', 'pvl.eth', 'Climate Change'] +import { Channels } from './components/channels' +import { CommunityInfo } from './components/community-info' +import { GetStarted } from './components/get-started' +import { Messages } from './components/messages' export const MainSidebar = () => { return ( - - - -
- CryptoKitties - - 186 members - -
- - - - - {Object.entries(CHANNELS).map(([group, channels]) => ( - - {channels.map(channel => ( - - {channel} - - ))} - - ))} - + + - - - - Messages - - - - - {CHATS.map(chat => ( - - {chat} - - ))} - + + + ) } @@ -99,16 +39,3 @@ const Separator = styled('div', { height: 1, background: 'rgba(0, 0, 0, 0.1)', }) - -const IdentityWrapper = styled('button', { - padding: '4px 6px', - display: 'inline-flex', - alignSelf: 'flex-start', - gap: '$2', - borderRadius: 8, - alignItems: 'center', - - '&:hover': { - background: '#E9EDF1', - }, -})