feat: make SingleChatCreate customizable

Author: pt-tsl

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

@@ -10,10 +10,10 @@ import { GroupDetailsQuery as GroupDetailsQueryType } from '../../../../__genera
 import { GroupDetailsQuery, useChatRoom } from '../../common'
 import DefaultAllChatRoomsList from '../AllChatRoomsList'
 import ChatRoom from '../ChatRoom'
-import DefaultGroupChatRoomCreate from '../GroupChatRoomCreate'
-import DefaultGroupChatRoomDetails from '../GroupChatRoomDetail'
-import DefaultGroupChatRoomEdit from '../GroupChatRoomEdit'
-import DefaultSingleChatRoomCreate from '../SingleChatRoomCreate'
+import DefaultGroupChatCreate from '../GroupChatCreate'
+import DefaultGroupChatDetails from '../GroupChatDetails'
+import DefaultGroupChatEdit from '../GroupChatEdit'
+import DefaultSingleChatCreate from '../SingleChatCreate'
 import { LEFT_PANEL_CONTENT, LeftPanelContentValues } from './constants'
 import { ChatRoomContainer, ChatRoomsContainer, ChatRoomsListContainer } from './styled'
 import { ChatRoomsComponentProps } from './types'
@@ -23,14 +23,14 @@ const ChatRoomsComponent: FC<ChatRoomsComponentProps> = ({
   settings,
   AllChatRoomsListComponent = DefaultAllChatRoomsList,
   AllChatRoomsListComponentProps = {},
-  GroupChatRoomCreateComponent = DefaultGroupChatRoomCreate,
-  GroupChatRoomCreateComponentProps = {},
-  GroupChatRoomDetailsComponent = DefaultGroupChatRoomDetails,
-  GroupChatRoomDetailsComponentProps = {},
-  GroupChatRoomEditComponent = DefaultGroupChatRoomEdit,
-  GroupChatRoomEditComponentProps = {},
-  SingleChatRoomCreateComponent = DefaultSingleChatRoomCreate,
-  SingleChatRoomCreateComponentProps = {},
+  GroupChatCreateComponent = DefaultGroupChatCreate,
+  GroupChatCreateComponentProps = {},
+  GroupChatDetailsComponent = DefaultGroupChatDetails,
+  GroupChatDetailsComponentProps = {},
+  GroupChatEditComponent = DefaultGroupChatEdit,
+  GroupChatEditComponentProps = {},
+  SingleChatCreateComponent = DefaultSingleChatCreate,
+  SingleChatCreateComponentProps = {},
 }) => {
   const isUpToMd = useResponsive('up', 'md')
   const [leftPanelContent, setLeftPanelContent] = useState<LeftPanelContentValues>(
@@ -57,46 +57,46 @@ const ChatRoomsComponent: FC<ChatRoomsComponentProps> = ({
     switch (leftPanelContent) {
       case LEFT_PANEL_CONTENT.createGroupChat:
         return (
-          <GroupChatRoomCreateComponent
+          <GroupChatCreateComponent
             allProfilesRef={chatRoomsQueryData}
             onValidSubmission={() => setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)}
             onBackButtonClicked={() => setLeftPanelContent(LEFT_PANEL_CONTENT.createChat)}
-            {...GroupChatRoomCreateComponentProps}
+            {...GroupChatCreateComponentProps}
           />
         )
       case LEFT_PANEL_CONTENT.editGroupChat:
         if (!groupDetailsQueryRef) return null
         return (
-          <GroupChatRoomEditComponent
+          <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}
-            {...GroupChatRoomEditComponentProps}
+            {...GroupChatEditComponentProps}
           />
         )
       case LEFT_PANEL_CONTENT.groupDetails:
         if (!groupDetailsQueryRef) return null
         return (
-          <GroupChatRoomDetailsComponent
+          <GroupChatDetailsComponent
             queryRef={groupDetailsQueryRef}
             onBackButtonClicked={() => setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)}
             onEditButtonClicked={() => setLeftPanelContent(LEFT_PANEL_CONTENT.editGroupChat)}
-            {...GroupChatRoomDetailsComponentProps}
+            {...GroupChatDetailsComponentProps}
           />
         )
       case LEFT_PANEL_CONTENT.createChat:
         return (
-          <SingleChatRoomCreateComponent
+          <SingleChatCreateComponent
             allProfilesRef={chatRoomsQueryData}
             onHeaderClick={() => setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)}
             onChatCreation={() => setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)}
             onGroupChatCreationButtonClicked={() =>
               setLeftPanelContent(LEFT_PANEL_CONTENT.createGroupChat)
             }
-            {...SingleChatRoomCreateComponentProps}
+            {...SingleChatCreateComponentProps}
           />
         )
       default:

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

@@ -4,10 +4,10 @@ import { BoxProps } from '@mui/material'
 
 import { ChatRoomsQuery$data } from '../../../../__generated__/ChatRoomsQuery.graphql'
 import { AllChatRoomsListProps } from '../AllChatRoomsList/types'
-import { GroupChatRoomCreateProps } from '../GroupChatRoomCreate/types'
-import { GroupChatRoomDetailProps } from '../GroupChatRoomDetail/types'
-import { GroupChatRoomEditProps } from '../GroupChatRoomEdit/types'
-import { SingleChatRoomCreateProps } from '../SingleChatRoomCreate/types'
+import { GroupChatCreateProps } from '../GroupChatCreate/types'
+import { GroupChatDetailsProps } from '../GroupChatDetails/types'
+import { GroupChatEditProps } from '../GroupChatEdit/types'
+import { SingleChatCreateProps } from '../SingleChatCreate/types'
 
 export interface HidableContainerProps extends BoxProps {
   hide: boolean
@@ -18,12 +18,12 @@ export interface ChatRoomsComponentProps {
   settings: any
   AllChatRoomsListComponent?: FC<AllChatRoomsListProps>
   AllChatRoomsListComponentProps?: Partial<AllChatRoomsListProps>
-  GroupChatRoomCreateComponent?: FC<GroupChatRoomCreateProps>
-  GroupChatRoomCreateComponentProps?: Partial<GroupChatRoomCreateProps>
-  GroupChatRoomEditComponent?: FC<GroupChatRoomEditProps>
-  GroupChatRoomEditComponentProps?: Partial<GroupChatRoomEditProps>
-  GroupChatRoomDetailsComponent?: FC<GroupChatRoomDetailProps>
-  GroupChatRoomDetailsComponentProps?: Partial<GroupChatRoomDetailProps>
-  SingleChatRoomCreateComponent?: FC<SingleChatRoomCreateProps>
-  SingleChatRoomCreateComponentProps?: Partial<SingleChatRoomCreateProps>
+  GroupChatCreateComponent?: FC<GroupChatCreateProps>
+  GroupChatCreateComponentProps?: Partial<GroupChatCreateProps>
+  GroupChatDetailsComponent?: FC<GroupChatDetailsProps>
+  GroupChatDetailsComponentProps?: Partial<GroupChatDetailsProps>
+  GroupChatEditComponent?: FC<GroupChatEditProps>
+  GroupChatEditComponentProps?: Partial<GroupChatEditProps>
+  SingleChatCreateComponent?: FC<SingleChatCreateProps>
+  SingleChatCreateComponentProps?: Partial<SingleChatCreateProps>
 }

packages/components/modules/messages/web/GroupChatRoomCreate/Header/index.tsx packages/components/modules/messages/web/GroupChatCreate/Header/index.tsx

@@ -22,9 +22,9 @@ import {
 import { CreateOrEditGroup } from '../__shared__/types'
 import Header from './Header'
 import { ProfilesContainer } from './styled'
-import { GroupChatRoomCreateProps } from './types'
+import { GroupChatCreateProps } from './types'
 
-const GroupChatRoomCreate: FC<GroupChatRoomCreateProps> = ({
+const GroupChatCreate: FC<GroupChatCreateProps> = ({
   allProfilesRef,
   GroupChatMembersList = DefaultGroupChatMembersList,
   GroupChatMembersListProps = {},
@@ -162,4 +162,4 @@ const GroupChatRoomCreate: FC<GroupChatRoomCreateProps> = ({
   )
 }
 
-export default GroupChatRoomCreate
+export default GroupChatCreate

packages/components/modules/messages/web/GroupChatRoomCreate/Header/styled.tsx packages/components/modules/messages/web/GroupChatCreate/Header/styled.tsx

@@ -3,7 +3,7 @@ import { FC, PropsWithChildren } from 'react'
 import { ChatRoomsQuery$data } from '../../../../__generated__/ChatRoomsQuery.graphql'
 import { GroupChatMembersListProps } from '../__shared__/GroupChatMembersList/types'
 
-export interface GroupChatRoomCreateProps extends PropsWithChildren {
+export interface GroupChatCreateProps extends PropsWithChildren {
   allProfilesRef: ChatRoomsQuery$data
   GroupChatMembersList?: FC<GroupChatMembersListProps>
   GroupChatMembersListProps?: Partial<GroupChatMembersListProps>

packages/components/modules/messages/web/GroupChatRoomCreate/Header/types.ts packages/components/modules/messages/web/GroupChatCreate/Header/types.ts

@@ -24,9 +24,9 @@ import DefaultBody from './Body'
 import DefaultHeader from './Header'
 import DefaultProfileCard from './ProfileCard'
 import { GroupMembersEdge } from './ProfileCard/types'
-import { GroupChatRoomDetailProps } from './types'
+import { GroupChatDetailsProps } from './types'
 
-const GroupChatRoomDetail: FC<GroupChatRoomDetailProps> = ({
+const GroupChatDetails: FC<GroupChatDetailsProps> = ({
   onBackButtonClicked,
   onEditButtonClicked,
   queryRef,
@@ -144,7 +144,7 @@ const GroupChatRoomDetail: FC<GroupChatRoomDetailProps> = ({
   )
 }
 
-const SuspendedGroupDetails: FC<GroupChatRoomDetailProps> = ({
+const SuspendedGroupDetails: FC<GroupChatDetailsProps> = ({
   onBackButtonClicked,
   Header = DefaultHeader,
   HeaderProps = {},
@@ -164,7 +164,7 @@ const SuspendedGroupDetails: FC<GroupChatRoomDetailProps> = ({
       </>
     }
   >
-    <GroupChatRoomDetail onBackButtonClicked={onBackButtonClicked} {...props} />
+    <GroupChatDetails onBackButtonClicked={onBackButtonClicked} {...props} />
   </Suspense>
 )
 

packages/components/modules/messages/web/GroupChatRoomCreate/index.tsx packages/components/modules/messages/web/GroupChatCreate/index.tsx

@@ -8,7 +8,7 @@ import { BodyProps } from './Body/types'
 import { HeaderProps } from './Header/types'
 import { ProfileCardProps } from './ProfileCard/types'
 
-export type GroupChatRoomDetailProps = {
+export type GroupChatDetailsProps = {
   onBackButtonClicked: () => void
   onEditButtonClicked: () => void
   queryRef: PreloadedQuery<GroupDetailsQueryType>

packages/components/modules/messages/web/GroupChatRoomCreate/styled.tsx packages/components/modules/messages/web/GroupChatCreate/styled.tsx

@@ -31,9 +31,9 @@ import AddMembersDialog from './AddMembersDialog'
 import AddMembersMobile from './AddMembersMobile'
 import { DEFAULT_FORM_VALIDATION, getDefaultFormValues } from './constants'
 import { HeaderContainer } from './styled'
-import { GroupChatRoomEditProps } from './types'
+import { GroupChatEditProps } from './types'
 
-const GroupChatRoomEdit: FC<GroupChatRoomEditProps & { profileId: string }> = ({
+const GroupChatEdit: FC<GroupChatEditProps & { profileId: string }> = ({
   profileId,
   allProfilesRef,
   queryRef,
@@ -218,12 +218,12 @@ const GroupChatRoomEdit: FC<GroupChatRoomEditProps & { profileId: string }> = ({
   )
 }
 
-const WrappedEditGroup: FC<GroupChatRoomEditProps> = (props) => {
+const WrappedEditGroup: FC<GroupChatEditProps> = (props) => {
   const { currentProfile } = useCurrentProfile()
   if (!currentProfile?.id) {
     return null
   }
-  return <GroupChatRoomEdit profileId={currentProfile.id} {...props} />
+  return <GroupChatEdit profileId={currentProfile.id} {...props} />
 }
 
 export default WrappedEditGroup

packages/components/modules/messages/web/GroupChatRoomCreate/types.ts packages/components/modules/messages/web/GroupChatCreate/types.ts

@@ -6,7 +6,7 @@ import { ChatRoomsQuery$data } from '../../../../__generated__/ChatRoomsQuery.gr
 import { GroupDetailsQuery } from '../../../../__generated__/GroupDetailsQuery.graphql'
 import { GroupChatMembersListProps } from '../__shared__/GroupChatMembersList/types'
 
-export interface GroupChatRoomEditProps extends PropsWithChildren {
+export interface GroupChatEditProps extends PropsWithChildren {
   allProfilesRef: ChatRoomsQuery$data
   queryRef: PreloadedQuery<GroupDetailsQuery>
   roomId: string | undefined

packages/components/modules/messages/web/GroupChatRoomDetail/Body/index.tsx packages/components/modules/messages/web/GroupChatDetails/Body/index.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { FC } from 'react'
+
+import { AvatarButton } from '@baseapp-frontend/design-system/components/web/buttons'
+import { NewGroupIcon } from '@baseapp-frontend/design-system/components/web/icons'
+import { Searchbar as DefaultSearchbar } from '@baseapp-frontend/design-system/components/web/inputs'
+
+import { MainContainer, SearchbarContainer } from './styled'
+import { BodyProps } from './types'
+
+const Body: FC<BodyProps> = ({
+  children,
+  control,
+  handleSearchChange,
+  handleSearchClear,
+  isPending,
+  onGroupChatCreationButtonClicked,
+  Searchbar = DefaultSearchbar,
+  SearchbarProps = {},
+}) => (
+  <MainContainer>
+    <SearchbarContainer>
+      <Searchbar
+        name="search"
+        onChange={handleSearchChange}
+        onClear={handleSearchClear}
+        control={control}
+        isPending={isPending}
+        {...SearchbarProps}
+      />
+    </SearchbarContainer>
+    <AvatarButton
+      onClick={onGroupChatCreationButtonClicked}
+      caption="New Group"
+      Icon={NewGroupIcon}
+    />
+    {children}
+  </MainContainer>
+)
+
+export default Body

packages/components/modules/messages/web/GroupChatRoomDetail/Body/styled.tsx packages/components/modules/messages/web/GroupChatDetails/Body/styled.tsx

@@ -28,12 +28,3 @@ export const GroupChatContainer: ComponentType<BoxProps> = styled(Box)(({ theme
     padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)}`,
   },
 }))
-
-export const Header: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({
-  borderBottom: `1px ${theme.palette.divider} solid`,
-  width: '100%',
-  padding: `${theme.spacing(2)}`,
-  [theme.breakpoints.down('sm')]: {
-    padding: `${theme.spacing(2)} ${theme.spacing(1.5)} ${theme.spacing(2)}`,
-  },
-}))

packages/components/modules/messages/web/GroupChatRoomDetail/Body/types.ts packages/components/modules/messages/web/GroupChatDetails/Body/types.ts

@@ -0,0 +1,14 @@
+import { ChangeEventHandler, PropsWithChildren } from 'react'
+
+import { SearchbarProps } from '@baseapp-frontend/design-system/components/web/inputs'
+
+export interface BodyProps extends PropsWithChildren {
+  control: any
+  handleSearchChange: ChangeEventHandler<HTMLInputElement>
+  handleSearchClear: () => void
+  isPending: boolean
+  onGroupChatCreationButtonClicked: () => void
+  // TODO: type this better
+  Searchbar: any
+  SearchbarProps?: Partial<SearchbarProps>
+}

packages/components/modules/messages/web/GroupChatRoomDetail/Header/index.tsx packages/components/modules/messages/web/GroupChatDetails/Header/index.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { FC } from 'react'
+
+import { IconButton } from '@baseapp-frontend/design-system/components/web/buttons'
+import { Iconify } from '@baseapp-frontend/design-system/components/web/images'
+
+import { Box, Typography } from '@mui/material'
+
+import { HeaderContainer } from './styled'
+
+const Header: FC<{ onHeaderClick: () => void }> = ({ onHeaderClick }) => (
+  <HeaderContainer>
+    <Box
+      display="grid"
+      width="100%"
+      gridTemplateColumns="24px auto 24px"
+      gap={1.5}
+      alignItems="center"
+    >
+      <IconButton
+        aria-label="return to existing chat rooms"
+        onClick={onHeaderClick}
+        sx={{ maxWidth: 'fit-content' }}
+      >
+        <Iconify icon="eva:arrow-ios-back-fill" width={24} />
+      </IconButton>
+      <Typography component="span" variant="subtitle2" sx={{ textAlign: 'center' }}>
+        New Chat
+      </Typography>
+      <div />
+    </Box>
+  </HeaderContainer>
+)
+
+export default Header

packages/components/modules/messages/web/GroupChatRoomDetail/Header/styled.tsx packages/components/modules/messages/web/GroupChatDetails/Header/styled.tsx

@@ -0,0 +1,13 @@
+import { ComponentType } from 'react'
+
+import { Box, BoxProps } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+export const HeaderContainer: ComponentType<BoxProps> = styled(Box)(({ theme }) => ({
+  borderBottom: `1px ${theme.palette.divider} solid`,
+  width: '100%',
+  padding: `${theme.spacing(2)}`,
+  [theme.breakpoints.down('sm')]: {
+    padding: `${theme.spacing(2)} ${theme.spacing(1.5)} ${theme.spacing(2)}`,
+  },
+}))

packages/components/modules/messages/web/GroupChatRoomDetail/Header/types.ts packages/components/modules/messages/web/GroupChatDetails/Header/types.ts

@@ -0,0 +1,3 @@
+export interface HeaderProps {
+  onHeaderClick: () => void
+}