From 649c65815e7d486b9149d69370546c9f80ee2aa0 Mon Sep 17 00:00:00 2001 From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com> Date: Wed, 16 Mar 2022 12:41:15 +0100 Subject: [PATCH] refactor(react): community module structure --- .../modules/community/CommunityChatRoom.tsx | 105 ------------------ .../modules/community/CommunitySidebar.tsx | 38 ------- .../src/modules/community/index.tsx | 53 ++++----- .../src/modules/community/messenger.tsx | 61 ++++++++++ 4 files changed, 89 insertions(+), 168 deletions(-) delete mode 100644 packages/status-react/src/modules/community/CommunityChatRoom.tsx delete mode 100644 packages/status-react/src/modules/community/CommunitySidebar.tsx create mode 100644 packages/status-react/src/modules/community/messenger.tsx diff --git a/packages/status-react/src/modules/community/CommunityChatRoom.tsx b/packages/status-react/src/modules/community/CommunityChatRoom.tsx deleted file mode 100644 index a8d3113..0000000 --- a/packages/status-react/src/modules/community/CommunityChatRoom.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React, { useState } from 'react' - -import styled from 'styled-components' - -import { Channels } from '~/src/components/Channels/Channels' -import { ChatBody } from '~/src/components/Chat/ChatBody' -import { ChatCreation } from '~/src/components/Chat/ChatCreation' -import { Members } from '~/src/components/Members/Members' -import { AgreementModal } from '~/src/components/Modals/AgreementModal' -import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal' -import { CommunityModal } from '~/src/components/Modals/CommunityModal' -import { EditModal } from '~/src/components/Modals/EditModal' -import { LeavingModal } from '~/src/components/Modals/LeavingModal' -import { LogoutModal } from '~/src/components/Modals/LogoutModal' -import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal' -import { ProfileModal } from '~/src/components/Modals/ProfileModal' -import { StatusModal } from '~/src/components/Modals/StatusModal' -import { UserCreationModal } from '~/src/components/Modals/UserCreationModal' -import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal' -import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal' -import { WalletModal } from '~/src/components/Modals/WalletModal' -import { ToastMessageList } from '~/src/components/ToastMessages/ToastMessageList' -import { ChatState, useChatState } from '~/src/contexts/chatStateProvider' -import { useMessengerContext } from '~/src/contexts/messengerProvider' -import { useNarrow } from '~/src/contexts/narrowProvider' - -import { CommunitySidebar } from './CommunitySidebar' - -function Modals() { - return ( - <> - - - - - - - - - - - - - - - ) -} - -export function CommunityChatRoom() { - const [state] = useChatState() - const [showMembers, setShowMembers] = useState(false) - const [editGroup, setEditGroup] = useState(false) - const narrow = useNarrow() - const { activeChannel } = useMessengerContext() - - return ( - - {!narrow && ( - - - - - )} - {state === ChatState.ChatBody && ( - setShowMembers(!showMembers)} - showMembers={showMembers} - permission={true} - editGroup={editGroup} - setEditGroup={setEditGroup} - /> - )} - {showMembers && - !narrow && - state === ChatState.ChatBody && - activeChannel && - activeChannel.type !== 'dm' && } - {state === ChatState.ChatCreation && } - - - - ) -} - -const ChatWrapper = styled.div` - width: 100%; - height: 100%; - display: flex; - position: relative; -` - -const ChannelsWrapper = styled.div` - width: 21%; - height: 100%; - min-width: 250px; - background-color: ${({ theme }) => theme.sectionBackgroundColor}; - padding: 10px 16px; - display: flex; - flex-direction: column; -` - -const StyledCommunity = styled(CommunitySidebar)` - padding: 0 0 0 8px; - margin: 0 0 16px; -` diff --git a/packages/status-react/src/modules/community/CommunitySidebar.tsx b/packages/status-react/src/modules/community/CommunitySidebar.tsx deleted file mode 100644 index a76ced4..0000000 --- a/packages/status-react/src/modules/community/CommunitySidebar.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react' - -import styled from 'styled-components' - -import { CommunityIdentity } from '../../components/CommunityIdentity' -import { CommunityModalName } from '../../components/Modals/CommunityModal' -import { CommunitySkeleton } from '../../components/Skeleton/CommunitySkeleton' -import { useMessengerContext } from '../../contexts/messengerProvider' -import { useModal } from '../../contexts/modalProvider' - -interface CommunityProps { - className?: string -} - -export function CommunitySidebar({ className }: CommunityProps) { - const { communityData } = useMessengerContext() - const { setModal } = useModal(CommunityModalName) - - if (!communityData) { - return ( - - - - ) - } - - return ( - <> - - - ) -} - -const SkeletonWrapper = styled.div` - margin-bottom: 16px; -` diff --git a/packages/status-react/src/modules/community/index.tsx b/packages/status-react/src/modules/community/index.tsx index f8dfb71..9af1c36 100644 --- a/packages/status-react/src/modules/community/index.tsx +++ b/packages/status-react/src/modules/community/index.tsx @@ -2,6 +2,7 @@ import React, { useRef } from 'react' import styled, { ThemeProvider } from 'styled-components' +import { AppProvider } from '~/src/contexts/app-context' import { ChatStateProvider } from '~/src/contexts/chatStateProvider' import { IdentityProvider } from '~/src/contexts/identityProvider' import { MessengerProvider } from '~/src/contexts/messengerProvider' @@ -11,7 +12,7 @@ import { ScrollProvider } from '~/src/contexts/scrollProvider' import { ToastProvider } from '~/src/contexts/toastProvider' import { GlobalStyle } from '~/src/styles/GlobalStyle' -import { CommunityChatRoom } from './CommunityChatRoom' +import { Messenger } from './messenger' import type { Config } from '~/src/types/config' @@ -23,30 +24,32 @@ export const Community = (props: Props) => { const ref = useRef(null) return ( - - - - - - - - - - - -