status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(react): community module structure

This commit is contained in:
Pavel Prichodko 2022-03-16 12:41:15 +01:00
parent 1ea83d55fc
commit 649c65815e
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
4 changed files with 89 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
packages/status-react/src/modules/community/CommunityChatRoom.tsx
View File

@ -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 (
<>
<CommunityModal subtitle="Public Community" />
<UserCreationModal />
<EditModal />
<ProfileModal />
<StatusModal />
<WalletModal />
<WalletConnectModal />
<CoinbaseModal />
<LogoutModal />
<AgreementModal />
<ProfileFoundModal />
<UserCreationStartModal />
<LeavingModal />
</>
)
}
export function CommunityChatRoom() {
const [state] = useChatState()
const [showMembers, setShowMembers] = useState(false)
const [editGroup, setEditGroup] = useState(false)
const narrow = useNarrow()
const { activeChannel } = useMessengerContext()
return (
<ChatWrapper>
{!narrow && (
<ChannelsWrapper>
<StyledCommunity />
<Channels setEditGroup={setEditGroup} />
</ChannelsWrapper>
)}
{state === ChatState.ChatBody && (
<ChatBody
onClick={() => setShowMembers(!showMembers)}
showMembers={showMembers}
permission={true}
editGroup={editGroup}
setEditGroup={setEditGroup}
/>
)}
{showMembers &&
!narrow &&
state === ChatState.ChatBody &&
activeChannel &&
activeChannel.type !== 'dm' && <Members />}
{state === ChatState.ChatCreation && <ChatCreation />}
<Modals />
<ToastMessageList />
</ChatWrapper>
)
}
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;
`

38
packages/status-react/src/modules/community/CommunitySidebar.tsx
View File

@ -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 (
<SkeletonWrapper>
<CommunitySkeleton />
</SkeletonWrapper>
)
}
return (
<>
<button className={className} onClick={() => setModal(true)}>
<CommunityIdentity subtitle={`${communityData.members} members`} />
</button>
</>
)
}
const SkeletonWrapper = styled.div`
margin-bottom: 16px;
`

53
packages/status-react/src/modules/community/index.tsx
View File

@ -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<HTMLHeadingElement>(null)
return (
<ThemeProvider theme={theme}>
<NarrowProvider myRef={ref}>
<ModalProvider>
<ToastProvider>
<Wrapper ref={ref}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider
publicKey={publicKey}
environment={environment}
>
<ChatStateProvider>
<ScrollProvider>
<CommunityChatRoom />
<div id="modal-root" />
</ScrollProvider>
</ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</NarrowProvider>
</ThemeProvider>
<AppProvider>
<ThemeProvider theme={theme}>
<NarrowProvider myRef={ref}>
<ModalProvider>
<ToastProvider>
<Wrapper ref={ref}>
<GlobalStyle />
<IdentityProvider>
<MessengerProvider
publicKey={publicKey}
environment={environment}
>
<ChatStateProvider>
<ScrollProvider>
<Messenger />
<div id="modal-root" />
</ScrollProvider>
</ChatStateProvider>
</MessengerProvider>
</IdentityProvider>
</Wrapper>
</ToastProvider>
</ModalProvider>
</NarrowProvider>
</ThemeProvider>
</AppProvider>
)
}

61
packages/status-react/src/modules/community/messenger.tsx Normal file
View File

@ -0,0 +1,61 @@
import React from 'react'
import { Chat } from '~/src/components/chat'
import { MainSidebar } from '~/src/components/main-sidebar'
import { NewChat } from '~/src/components/new-chat'
import { useAppState } from '~/src/contexts/app-context'
import { styled } from '~/src/styles/config'
// 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'
// function Modals() {
// return (
// <>
// <CommunityModal subtitle="Public Community" />
// <UserCreationModal />
// <EditModal />
// <ProfileModal />
// <StatusModal />
// <WalletModal />
// <WalletConnectModal />
// <CoinbaseModal />
// <LogoutModal />
// <AgreementModal />
// <ProfileFoundModal />
// <UserCreationStartModal />
// <LeavingModal />
// </>
// )
// }
export function Messenger() {
const { state } = useAppState()
return (
<Wrapper>
<MainSidebar />
{state.view === 'new-chat' && <NewChat />}
{(state.view === 'channel' || state.view === 'chat') && <Chat />}
</Wrapper>
)
}
const Wrapper = styled('div', {
position: 'relative',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'stretch',
})