refactor(react): community module structure

packages/status-react/src/modules/community/CommunityChatRoom.tsx

@@ -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;
-`

packages/status-react/src/modules/community/CommunitySidebar.tsx

@@ -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;
-`

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,6 +24,7 @@ export const Community = (props: Props) => {
   const ref = useRef<HTMLHeadingElement>(null)
 
   return (
+    <AppProvider>
       <ThemeProvider theme={theme}>
         <NarrowProvider myRef={ref}>
           <ModalProvider>
@@ -36,7 +38,7 @@ export const Community = (props: Props) => {
                   >
                     <ChatStateProvider>
                       <ScrollProvider>
-                      <CommunityChatRoom />
+                        <Messenger />
                         <div id="modal-root" />
                       </ScrollProvider>
                     </ChatStateProvider>
@@ -47,6 +49,7 @@ export const Community = (props: Props) => {
           </ModalProvider>
         </NarrowProvider>
       </ThemeProvider>
+    </AppProvider>
   )
 }
 

packages/status-react/src/modules/community/messenger.tsx

@@ -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',
+})