BA-2366: improve messages components

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.1.0
+
+### Minor Changes
+
+- Restructure several components from the `messages` module to make it more customizable.
+
 ## 1.0.36
 
 ### Patch Changes

packages/components/modules/content-feed/web/NewContentPost/index.tsx

@@ -49,6 +49,7 @@ const NewContentPost: FC<NewContentPostProps> = () => {
 
     commitMutation({
       variables: {
+        // @ts-ignore this will be handle on BA-2452
         input: {
           content: data.content,
         },

packages/components/modules/messages/web/ChatRoomsList/index.tsx → packages/components/modules/messages/web/AllChatRoomsList/index.tsx

@@ -11,9 +11,10 @@ import {
 } from 'react'
 
 import { LoadingState } from '@baseapp-frontend/design-system/components/web/displays'
+import { Iconify } from '@baseapp-frontend/design-system/components/web/images'
 import { Searchbar as DefaultSearchbar } from '@baseapp-frontend/design-system/components/web/inputs'
 
-import { Box, CircularProgress, Tab, Tabs, Typography } from '@mui/material'
+import { Box, Button, CircularProgress, Tab, Tabs, Typography } from '@mui/material'
 import { useForm } from 'react-hook-form'
 import { Virtuoso } from 'react-virtuoso'
 
@@ -23,11 +24,12 @@ import { useChatRoom, useRoomListSubscription, useRoomsList } from '../../common
 import DefaultChatRoomItem from './ChatRoomItem'
 import DefaultEmptyChatRoomsState from './EmptyChatRoomsState'
 import { CHAT_TAB_LABEL, CHAT_TAB_VALUES } from './constants'
-import { ChatRoomListContainer } from './styled'
-import { ChatRoomNode, ChatRoomsListProps, ChatTabValues } from './types'
+import { Header, MainContainer } from './styled'
+import { AllChatRoomsListProps, ChatRoomNode, ChatTabValues } from './types'
 
-const ChatRoomsList: FC<ChatRoomsListProps> = ({
+const AllChatRoomsList: FC<AllChatRoomsListProps> = ({
   targetRef,
+  onHeaderClick = () => {},
   Searchbar = DefaultSearchbar,
   SearchbarProps = {},
   ChatRoomItem = DefaultChatRoomItem,
@@ -160,67 +162,84 @@ const ChatRoomsList: FC<ChatRoomsListProps> = ({
   }
 
   return (
-    <ChatRoomListContainer>
-      <Box
-        sx={{
-          paddingX: {
-            xs: 1.5,
-            sm: 2.5,
-          },
-          paddingTop: 2,
-        }}
-      >
-        <Searchbar
-          key={
-            tab /* The handleSearchChange function depends on tab.
+    <>
+      <Header>
+        <Box display="grid" width="100%" gridTemplateColumns="auto min-content" gap={1}>
+          <Typography variant="h4" component="span">
+            Messages
+          </Typography>
+          <Button
+            variant="contained"
+            color="inherit"
+            startIcon={<Iconify icon="mingcute:add-line" />}
+            onClick={onHeaderClick}
+          >
+            New
+          </Button>
+        </Box>
+      </Header>
+      <MainContainer>
+        <Box
+          sx={{
+            paddingX: {
+              xs: 1.5,
+              sm: 2.5,
+            },
+            paddingTop: 2,
+          }}
+        >
+          <Searchbar
+            key={
+              tab /* The handleSearchChange function depends on tab.
             Searchbar calls useRef on the onChange function (to debounce),
             hence it does not see the changes unless it is reloaded */
-          }
-          name="search"
-          control={control}
-          onChange={handleSearchChange}
-          onClear={handleSearchClear}
-          isPending={isPending}
-          {...SearchbarProps}
-        />
-      </Box>
-      <Tabs
-        value={tab}
-        onChange={handleChange}
-        centered
-        variant="fullWidth"
-        sx={{
-          paddingX: {
-            xs: 0,
-            sm: 2.5,
-          },
-          paddingTop: 2,
-        }}
-      >
-        <Tab label={renderTabLabel(CHAT_TAB_VALUES.active)} value={CHAT_TAB_VALUES.active} />
-        <Tab label={renderTabLabel(CHAT_TAB_VALUES.unread)} value={CHAT_TAB_VALUES.unread} />
-        <Tab label={renderTabLabel(CHAT_TAB_VALUES.archived)} value={CHAT_TAB_VALUES.archived} />
-      </Tabs>
-      {renderListContent()}
-      {renderList && (
-        <Virtuoso
-          data={chatRooms}
-          overscan={1}
-          itemContent={(_index, item) => renderItem(item)}
-          style={{ scrollbarWidth: 'none' }}
-          components={{
-            Footer: renderLoadingState,
-          }}
-          endReached={() => {
-            if (hasNext) {
-              loadNext(5)
             }
+            name="search"
+            control={control}
+            onChange={handleSearchChange}
+            onClear={handleSearchClear}
+            isPending={isPending}
+            {...SearchbarProps}
+          />
+        </Box>
+        <Tabs
+          value={tab}
+          onChange={handleChange}
+          centered
+          variant="fullWidth"
+          sx={{
+            paddingX: {
+              xs: 0,
+              sm: 2.5,
+            },
+            paddingTop: 2,
           }}
-          {...VirtuosoProps}
-        />
-      )}
-    </ChatRoomListContainer>
+        >
+          <Tab label={renderTabLabel(CHAT_TAB_VALUES.active)} value={CHAT_TAB_VALUES.active} />
+          <Tab label={renderTabLabel(CHAT_TAB_VALUES.unread)} value={CHAT_TAB_VALUES.unread} />
+          <Tab label={renderTabLabel(CHAT_TAB_VALUES.archived)} value={CHAT_TAB_VALUES.archived} />
+        </Tabs>
+        {renderListContent()}
+        {renderList && (
+          <Virtuoso
+            data={chatRooms}
+            overscan={1}
+            itemContent={(_index, item) => renderItem(item)}
+            style={{ scrollbarWidth: 'none' }}
+            components={{
+              Footer: renderLoadingState,
+            }}
+            endReached={() => {
+              if (hasNext) {
+                loadNext(5)
+              }
+            }}
+            {...VirtuosoProps}
+          />
+        )}
+      </MainContainer>
+    </>
   )
 }
 
-export default ChatRoomsList
+export default AllChatRoomsList

packages/components/modules/messages/web/AllChatRoomsList/styled.tsx

@@ -0,0 +1,19 @@
+import { ComponentType } from 'react'
+
+import { Box, BoxProps } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+export const MainContainer = styled(Box)(() => ({
+  display: 'grid',
+  gridTemplateRows: 'min-content min-content auto',
+  height: '100%',
+  width: '100%',
+}))
+
+export const Header: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({
+  width: '100%',
+  padding: `${theme.spacing(2.5)} ${theme.spacing(2.5)} ${theme.spacing(2)}`,
+  [theme.breakpoints.down('sm')]: {
+    padding: `${theme.spacing(2)} ${theme.spacing(1.5)} ${theme.spacing(2)}`,
+  },
+}))

packages/components/modules/messages/web/ChatRoomsList/types.ts → packages/components/modules/messages/web/AllChatRoomsList/types.ts

@@ -14,8 +14,9 @@ type ChatRooms = NonNullable<RoomsListFragment$data['chatRooms']>
 type ChatRoomsEdges = ChatRooms['edges']
 export type ChatRoomNode = NonNullable<ChatRoomsEdges[number]>['node']
 
-export interface ChatRoomsListProps {
+export interface AllChatRoomsListProps {
   targetRef: ChatRoomsQuery$data
+  onHeaderClick: () => void
   Searchbar?: FC<SearchbarProps>
   SearchbarProps?: Partial<SearchbarProps>
   ChatRoomItem?: FC<ChatRoomItemProps>

packages/components/modules/messages/web/ChatRoomsComponent/constants.ts

@@ -0,0 +1,7 @@
+export const LEFT_PANEL_CONTENT = {
+  chatRoomList: 0,
+  createChat: 1,
+  createGroupChat: 2,
+  editGroupChat: 3,
+  groupDetails: 4,
+} as const

packages/components/modules/messages/web/ChatRoomsComponent/index.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { FC, useState } from 'react'
+
+import { useResponsive } from '@baseapp-frontend/design-system/hooks/web'
+
+import { useQueryLoader } from 'react-relay'
+
+import { GroupDetailsQuery as GroupDetailsQueryType } from '../../../../__generated__/GroupDetailsQuery.graphql'
+import { GroupDetailsQuery, useChatRoom } from '../../common'
+import DefaultAllChatRoomsList from '../AllChatRoomsList'
+import ChatRoom from '../ChatRoom'
+import DefaultGroupChatCreate from '../GroupChatCreate'
+import DefaultGroupChatDetails from '../GroupChatDetails'
+import DefaultGroupChatEdit from '../GroupChatEdit'
+import DefaultSingleChatCreate from '../SingleChatCreate'
+import { LEFT_PANEL_CONTENT } from './constants'
+import { ChatRoomContainer, ChatRoomsContainer, ChatRoomsListContainer } from './styled'
+import { ChatRoomsComponentProps, LeftPanelContentValues } from './types'
+
+const ChatRoomsComponent: FC<ChatRoomsComponentProps> = ({
+  chatRoomsQueryData,
+  settings,
+  AllChatRoomsListComponent = DefaultAllChatRoomsList,
+  AllChatRoomsListComponentProps = {},
+  GroupChatCreateComponent = DefaultGroupChatCreate,
+  GroupChatCreateComponentProps = {},
+  GroupChatDetailsComponent = DefaultGroupChatDetails,
+  GroupChatDetailsComponentProps = {},
+  GroupChatEditComponent = DefaultGroupChatEdit,
+  GroupChatEditComponentProps = {},
+  SingleChatCreateComponent = DefaultSingleChatCreate,
+  SingleChatCreateComponentProps = {},
+}) => {
+  const isUpToMd = useResponsive('up', 'md')
+  const [leftPanelContent, setLeftPanelContent] = useState<LeftPanelContentValues>(
+    LEFT_PANEL_CONTENT.chatRoomList,
+  )
+
+  const [groupDetailsQueryRef, loadGroupDetailsQuery] =
+    useQueryLoader<GroupDetailsQueryType>(GroupDetailsQuery)
+  const { id: selectedRoom } = useChatRoom()
+
+  const displayGroupDetails = () => {
+    if (selectedRoom) {
+      setLeftPanelContent(LEFT_PANEL_CONTENT.groupDetails)
+      loadGroupDetailsQuery({ roomId: selectedRoom }, { fetchPolicy: 'network-only' })
+    }
+  }
+
+  const shouldRenderLeftPanel =
+    isUpToMd || leftPanelContent !== LEFT_PANEL_CONTENT.chatRoomList || !selectedRoom
+  const shouldRenderRightPanel =
+    isUpToMd || (leftPanelContent === LEFT_PANEL_CONTENT.chatRoomList && !!selectedRoom)
+
+  const renderLeftPanelContent = () => {
+    switch (leftPanelContent) {
+      case LEFT_PANEL_CONTENT.createGroupChat:
+        return (
+          <GroupChatCreateComponent
+            allProfilesRef={chatRoomsQueryData}
+            onValidSubmission={() => setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)}
+            onBackButtonClicked={() => setLeftPanelContent(LEFT_PANEL_CONTENT.createChat)}
+            {...GroupChatCreateComponentProps}
+          />
+        )
+      case LEFT_PANEL_CONTENT.editGroupChat:
+        if (!groupDetailsQueryRef) return null
+        return (
+          <GroupChatEditComponent
+            onCancellation={() => setLeftPanelContent(LEFT_PANEL_CONTENT.groupDetails)}
+            onRemovalFromGroup={() => setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)}
+            onValidSubmission={() => setLeftPanelContent(LEFT_PANEL_CONTENT.groupDetails)}
+            queryRef={groupDetailsQueryRef}
+            roomId={selectedRoom}
+            allProfilesRef={chatRoomsQueryData}
+            {...GroupChatEditComponentProps}
+          />
+        )
+      case LEFT_PANEL_CONTENT.groupDetails:
+        if (!groupDetailsQueryRef) return null
+        return (
+          <GroupChatDetailsComponent
+            queryRef={groupDetailsQueryRef}
+            onBackButtonClicked={() => setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)}
+            onEditButtonClicked={() => setLeftPanelContent(LEFT_PANEL_CONTENT.editGroupChat)}
+            {...GroupChatDetailsComponentProps}
+          />
+        )
+      case LEFT_PANEL_CONTENT.createChat:
+        return (
+          <SingleChatCreateComponent
+            allProfilesRef={chatRoomsQueryData}
+            onHeaderClick={() => setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)}
+            onChatCreation={() => setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)}
+            onGroupChatCreationButtonClicked={() =>
+              setLeftPanelContent(LEFT_PANEL_CONTENT.createGroupChat)
+            }
+            {...SingleChatCreateComponentProps}
+          />
+        )
+      default:
+        return (
+          <AllChatRoomsListComponent
+            targetRef={chatRoomsQueryData}
+            onHeaderClick={() => setLeftPanelContent(LEFT_PANEL_CONTENT.createChat)}
+            {...AllChatRoomsListComponentProps}
+          />
+        )
+    }
+  }
+
+  const renderRightPanelContent = () => {
+    if (!selectedRoom) return <div />
+
+    return <ChatRoom roomId={selectedRoom} onDisplayGroupDetailsClicked={displayGroupDetails} />
+  }
+
+  return (
+    <ChatRoomsContainer themeLayout={settings.themeLayout}>
+      {shouldRenderLeftPanel && (
+        <ChatRoomsListContainer hide={!shouldRenderLeftPanel /* TODO: Why? */}>
+          {renderLeftPanelContent()}
+        </ChatRoomsListContainer>
+      )}
+      {shouldRenderRightPanel && (
+        <ChatRoomContainer hide={!shouldRenderRightPanel /* TODO: Why? */}>
+          {renderRightPanelContent()}
+        </ChatRoomContainer>
+      )}
+    </ChatRoomsContainer>
+  )
+}
+
+export default ChatRoomsComponent