diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 19029a38..20f37778 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,13 @@ # @baseapp-frontend/components +## 1.4.7 + +### Patch Changes + +- Updated messages to show additional detail regarding chat participant in non group chats +- Updated dependencies + - @baseapp-frontend/design-system@1.1.4 + ## 1.4.6 ### Patch Changes diff --git a/packages/components/modules/messages/common/context/ChatRoomProvider/constants.ts b/packages/components/modules/messages/common/context/ChatRoomProvider/constants.ts index a5046481..7c1cc13f 100644 --- a/packages/components/modules/messages/common/context/ChatRoomProvider/constants.ts +++ b/packages/components/modules/messages/common/context/ChatRoomProvider/constants.ts @@ -1,6 +1,8 @@ +import { LEFT_PANEL_CONTENT } from '../useChatRoom/constants' import { ChatRoomState } from './types' export const INITIAL_CHAT_ROOM_STATE: ChatRoomState = { id: undefined, participants: undefined, + leftPanelContent: LEFT_PANEL_CONTENT.chatRoomList, } diff --git a/packages/components/modules/messages/common/context/ChatRoomProvider/index.tsx b/packages/components/modules/messages/common/context/ChatRoomProvider/index.tsx index 58c69091..cc166e95 100644 --- a/packages/components/modules/messages/common/context/ChatRoomProvider/index.tsx +++ b/packages/components/modules/messages/common/context/ChatRoomProvider/index.tsx @@ -5,7 +5,7 @@ import { FC, PropsWithChildren, createContext, useRef } from 'react' import { StoreApi, create } from 'zustand' import { INITIAL_CHAT_ROOM_STATE } from './constants' -import { ChatRoomState, UseChatRoom } from './types' +import { ChatRoomState, LeftPanelContentValues, UseChatRoom } from './types' export const ChatRoomContext = createContext | null>(null) @@ -14,8 +14,10 @@ const ChatRoomProvider: FC = ({ children }) => { if (!storeRef.current) { storeRef.current = create((set) => ({ ...INITIAL_CHAT_ROOM_STATE, + setChatRoom: (state: ChatRoomState) => set(state), resetChatRoom: () => set({ ...INITIAL_CHAT_ROOM_STATE }), + setLeftPanelContent: (content: LeftPanelContentValues) => set({ leftPanelContent: content }), })) } return {children} diff --git a/packages/components/modules/messages/common/context/ChatRoomProvider/types.ts b/packages/components/modules/messages/common/context/ChatRoomProvider/types.ts index 6b095cbb..76e3985f 100644 --- a/packages/components/modules/messages/common/context/ChatRoomProvider/types.ts +++ b/packages/components/modules/messages/common/context/ChatRoomProvider/types.ts @@ -1,14 +1,22 @@ +import { ValueOf } from '@baseapp-frontend/utils' + +import { LEFT_PANEL_CONTENT } from '../useChatRoom/constants' + export type ChatRoomState = { id?: string participants?: (string | null | undefined)[] + leftPanelContent?: number } +export type LeftPanelContentValues = ValueOf + type ChatRoomFunctions = { setChatRoom: ( partial: Partial | ((state: ChatRoomState) => Partial), replace?: boolean | undefined, ) => void resetChatRoom: () => void + setLeftPanelContent: (content: LeftPanelContentValues) => void } export type UseChatRoom = ChatRoomState & ChatRoomFunctions diff --git a/packages/components/modules/messages/web/ChatRoomsComponent/constants.ts b/packages/components/modules/messages/common/context/useChatRoom/constants.ts similarity index 87% rename from packages/components/modules/messages/web/ChatRoomsComponent/constants.ts rename to packages/components/modules/messages/common/context/useChatRoom/constants.ts index e7c1ee55..9ebf389f 100644 --- a/packages/components/modules/messages/web/ChatRoomsComponent/constants.ts +++ b/packages/components/modules/messages/common/context/useChatRoom/constants.ts @@ -4,4 +4,5 @@ export const LEFT_PANEL_CONTENT = { createGroupChat: 2, editGroupChat: 3, groupDetails: 4, + profileSummary: 5, } as const diff --git a/packages/components/modules/messages/common/graphql/fragments/ProfileSummary.ts b/packages/components/modules/messages/common/graphql/fragments/ProfileSummary.ts new file mode 100644 index 00000000..d22e1d00 --- /dev/null +++ b/packages/components/modules/messages/common/graphql/fragments/ProfileSummary.ts @@ -0,0 +1,30 @@ +import { graphql } from 'react-relay' + +export const ProfileSummaryFragment = graphql` + fragment ProfileSummaryFragment on ChatRoom + @argumentDefinitions( + avatarSize: { type: "Int", defaultValue: 100 } + count: { type: "Int", defaultValue: 5 } + ) { + id + participants(first: $count) { + edges { + node { + profile { + id + pk + name + image(width: $avatarSize, height: $avatarSize) { + url + } + biography + urlPath { + path + } + } + role + } + } + } + } +` diff --git a/packages/components/modules/messages/common/graphql/queries/GroupDetailsQuery.ts b/packages/components/modules/messages/common/graphql/queries/GroupDetailsQuery.ts index 4a976fba..452d02f6 100644 --- a/packages/components/modules/messages/common/graphql/queries/GroupDetailsQuery.ts +++ b/packages/components/modules/messages/common/graphql/queries/GroupDetailsQuery.ts @@ -7,6 +7,7 @@ export const GroupDetailsQuery = graphql` participantsCount ...GroupTitleFragment ...MembersListFragment + ...ProfileSummaryFragment } } ` diff --git a/packages/components/modules/messages/common/utils.ts b/packages/components/modules/messages/common/utils.ts index 4b33c955..39e31438 100644 --- a/packages/components/modules/messages/common/utils.ts +++ b/packages/components/modules/messages/common/utils.ts @@ -25,7 +25,7 @@ export const useGroupNameAndAvatar = ( } } -const useRoomNameAndAvatar = (headerRef: RoomTitleFragment$key | null | undefined) => { +export const useRoomNameAndAvatar = (headerRef: RoomTitleFragment$key | null | undefined) => { const { currentProfile } = useCurrentProfile() const header = useFragment(RoomTitleFragment, headerRef) if (!header?.participants) { diff --git a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx index 5c5a0b77..6e7b34cf 100644 --- a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx +++ b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/index.tsx @@ -11,6 +11,7 @@ const ChatRoomOptions: FC = ({ onArchiveClicked, onDetailsClicked, onLeaveClicked, + onContactDetailsClicked, }) => ( @@ -27,7 +28,11 @@ const ChatRoomOptions: FC = ({ - ) : null} + ) : ( + + Contact Details + + )} ) diff --git a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/types.ts b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/types.ts index 1547823d..d5a9564b 100644 --- a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/types.ts +++ b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/ChatRoomOptions/types.ts @@ -5,4 +5,5 @@ export interface ChatRoomOptionsProps { onArchiveClicked: () => void onDetailsClicked: () => void onLeaveClicked: () => void + onContactDetailsClicked: () => void } diff --git a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/index.tsx b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/index.tsx index 279744e1..0fd36397 100644 --- a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/index.tsx +++ b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/index.tsx @@ -34,9 +34,11 @@ const ChatRoomHeader: FC = ({ participantsCount, roomTitleRef, onDisplayGroupDetailsClicked, + onDisplayProfileSummaryClicked, roomId, }) => { const roomHeader = useFragment(TitleFragment, roomTitleRef) + const [open, setOpen] = useState(false) const { currentProfile } = useCurrentProfile() @@ -148,6 +150,10 @@ const ChatRoomHeader: FC = ({ popover.onClose() setOpen(true) }} + onContactDetailsClicked={() => { + popover.onClose() + onDisplayProfileSummaryClicked() + }} /> diff --git a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/types.ts b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/types.ts index 2987d9c4..b6a579a3 100644 --- a/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/types.ts +++ b/packages/components/modules/messages/web/ChatRoom/ChatRoomHeader/types.ts @@ -7,6 +7,7 @@ export interface ChatRoomHeaderProps { participantsCount: number roomTitleRef: TitleFragment$key onDisplayGroupDetailsClicked: VoidFunction + onDisplayProfileSummaryClicked: VoidFunction roomId?: string } diff --git a/packages/components/modules/messages/web/ChatRoom/__storybook__/ChatRoomWithQuery/index.tsx b/packages/components/modules/messages/web/ChatRoom/__storybook__/ChatRoomWithQuery/index.tsx index c22e0427..3c37609a 100644 --- a/packages/components/modules/messages/web/ChatRoom/__storybook__/ChatRoomWithQuery/index.tsx +++ b/packages/components/modules/messages/web/ChatRoom/__storybook__/ChatRoomWithQuery/index.tsx @@ -26,6 +26,7 @@ const ChatRoomWithQuery = () => { alert('Group details clicked')} + onDisplayProfileSummaryClicked={() => alert('Profile summary clicked')} MessagesListProps={{ roomRef: data.chatRoom as MessagesListFragment$key }} /> ) diff --git a/packages/components/modules/messages/web/ChatRoom/index.tsx b/packages/components/modules/messages/web/ChatRoom/index.tsx index f58cf400..d4ba9f8c 100644 --- a/packages/components/modules/messages/web/ChatRoom/index.tsx +++ b/packages/components/modules/messages/web/ChatRoom/index.tsx @@ -22,6 +22,7 @@ const ChatRoom: FC = ({ SendMessage = DefaultSendMessage, SendMessageProps = {}, onDisplayGroupDetailsClicked, + onDisplayProfileSummaryClicked, }) => { // TODO: pre load this query and instead of lazyload const { chatRoom } = useLazyLoadQuery( @@ -47,6 +48,7 @@ const ChatRoom: FC = ({ participantsCount={chatRoom.participantsCount} roomTitleRef={chatRoom} onDisplayGroupDetailsClicked={onDisplayGroupDetailsClicked} + onDisplayProfileSummaryClicked={onDisplayProfileSummaryClicked} roomId={roomId} /> diff --git a/packages/components/modules/messages/web/ChatRoom/types.ts b/packages/components/modules/messages/web/ChatRoom/types.ts index e82c4ef8..1c2c0a93 100644 --- a/packages/components/modules/messages/web/ChatRoom/types.ts +++ b/packages/components/modules/messages/web/ChatRoom/types.ts @@ -10,4 +10,5 @@ export interface ChatRoomProps { SendMessage?: FC SendMessageProps?: Partial onDisplayGroupDetailsClicked: () => void + onDisplayProfileSummaryClicked: () => void } diff --git a/packages/components/modules/messages/web/ChatRoomsComponent/index.tsx b/packages/components/modules/messages/web/ChatRoomsComponent/index.tsx index d1dc3521..5c85685d 100644 --- a/packages/components/modules/messages/web/ChatRoomsComponent/index.tsx +++ b/packages/components/modules/messages/web/ChatRoomsComponent/index.tsx @@ -1,6 +1,6 @@ 'use client' -import { FC, useState } from 'react' +import { FC } from 'react' import { useResponsive } from '@baseapp-frontend/design-system/hooks/web' @@ -8,15 +8,16 @@ import { useQueryLoader } from 'react-relay' import { GroupDetailsQuery as GroupDetailsQueryType } from '../../../../__generated__/GroupDetailsQuery.graphql' import { GroupDetailsQuery, useChatRoom } from '../../common' +import { LEFT_PANEL_CONTENT } from '../../common/context/useChatRoom/constants' import DefaultAllChatRoomsList from '../AllChatRoomsList' import ChatRoom from '../ChatRoom' import DefaultGroupChatCreate from '../GroupChatCreate' import DefaultGroupChatDetails from '../GroupChatDetails' import DefaultGroupChatEdit from '../GroupChatEdit' +import DefaultProfileSummary from '../ProfileSummary' import DefaultSingleChatCreate from '../SingleChatCreate' -import { LEFT_PANEL_CONTENT } from './constants' import { ChatRoomContainer, ChatRoomsContainer, ChatRoomsListContainer } from './styled' -import { ChatRoomsComponentProps, LeftPanelContentValues } from './types' +import { ChatRoomsComponentProps } from './types' const ChatRoomsComponent: FC = ({ chatRoomsQueryData, @@ -31,15 +32,14 @@ const ChatRoomsComponent: FC = ({ GroupChatEditComponentProps = {}, SingleChatCreateComponent = DefaultSingleChatCreate, SingleChatCreateComponentProps = {}, + ProfileSummaryComponent = DefaultProfileSummary, }) => { const isUpToMd = useResponsive('up', 'md') - const [leftPanelContent, setLeftPanelContent] = useState( - LEFT_PANEL_CONTENT.chatRoomList, - ) const [groupDetailsQueryRef, loadGroupDetailsQuery] = useQueryLoader(GroupDetailsQuery) - const { id: selectedRoom } = useChatRoom() + + const { id: selectedRoom, leftPanelContent, setLeftPanelContent } = useChatRoom() const displayGroupDetails = () => { if (selectedRoom) { @@ -48,6 +48,13 @@ const ChatRoomsComponent: FC = ({ } } + const displayProfileSummary = () => { + if (selectedRoom) { + setLeftPanelContent(LEFT_PANEL_CONTENT.profileSummary) + loadGroupDetailsQuery({ roomId: selectedRoom }, { fetchPolicy: 'network-only' }) + } + } + const shouldRenderLeftPanel = isUpToMd || leftPanelContent !== LEFT_PANEL_CONTENT.chatRoomList || !selectedRoom const shouldRenderRightPanel = @@ -99,6 +106,14 @@ const ChatRoomsComponent: FC = ({ {...SingleChatCreateComponentProps} /> ) + case LEFT_PANEL_CONTENT.profileSummary: + if (!groupDetailsQueryRef) return null + return ( + setLeftPanelContent(LEFT_PANEL_CONTENT.chatRoomList)} + /> + ) default: return ( = ({ const renderRightPanelContent = () => { if (!selectedRoom) return
- return + return ( + + ) } return ( diff --git a/packages/components/modules/messages/web/ChatRoomsComponent/types.ts b/packages/components/modules/messages/web/ChatRoomsComponent/types.ts index ff3e0d0a..2a63bf31 100644 --- a/packages/components/modules/messages/web/ChatRoomsComponent/types.ts +++ b/packages/components/modules/messages/web/ChatRoomsComponent/types.ts @@ -6,12 +6,13 @@ import { ValueOf } from '@baseapp-frontend/utils' import { BoxProps } from '@mui/material' import { ChatRoomsQuery$data } from '../../../../__generated__/ChatRoomsQuery.graphql' +import { LEFT_PANEL_CONTENT } from '../../common/context/useChatRoom/constants' import { AllChatRoomsListProps } from '../AllChatRoomsList/types' import { GroupChatCreateProps } from '../GroupChatCreate/types' import { GroupChatDetailsProps } from '../GroupChatDetails/types' import { GroupChatEditProps } from '../GroupChatEdit/types' +import { ProfileSummaryProps } from '../ProfileSummary/types' import { SingleChatCreateProps } from '../SingleChatCreate/types' -import { LEFT_PANEL_CONTENT } from './constants' export interface HidableContainerProps extends BoxProps { hide: boolean @@ -32,4 +33,6 @@ export interface ChatRoomsComponentProps { GroupChatEditComponentProps?: Partial SingleChatCreateComponent?: FC SingleChatCreateComponentProps?: Partial + ProfileSummaryComponent?: FC + ProfileSummaryComponentProps?: Partial } diff --git a/packages/components/modules/messages/web/MessagesList/__storybook__/stories.tsx b/packages/components/modules/messages/web/MessagesList/__storybook__/stories.tsx index d183fc12..c12cab5b 100644 --- a/packages/components/modules/messages/web/MessagesList/__storybook__/stories.tsx +++ b/packages/components/modules/messages/web/MessagesList/__storybook__/stories.tsx @@ -10,6 +10,7 @@ const mockChatRoomStore = create((set) => ({ id: 'room-123', setChatRoom: (newState) => set(newState), resetChatRoom: () => set({ id: '' }), + setLeftPanelContent: (_content) => {}, })) const meta: Meta = { diff --git a/packages/components/modules/messages/web/ProfileSummary/Body/index.tsx b/packages/components/modules/messages/web/ProfileSummary/Body/index.tsx new file mode 100644 index 00000000..a9d5a5dc --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Body/index.tsx @@ -0,0 +1,115 @@ +import { FC } from 'react' + +import { useCurrentProfile } from '@baseapp-frontend/authentication' +import { CircledAvatar } from '@baseapp-frontend/design-system/components/web/avatars' +import { IconButton } from '@baseapp-frontend/design-system/components/web/buttons' +import { + NewGroupIcon, + ProfileNoCircleIcon, +} from '@baseapp-frontend/design-system/components/web/icons' +import { TypographyWithEllipsis } from '@baseapp-frontend/design-system/components/web/typographies' + +import { Box, Divider, Typography } from '@mui/material' +import { useFragment } from 'react-relay' + +import { ProfileSummaryFragment$key } from '../../../../../__generated__/ProfileSummaryFragment.graphql' +import { ProfileSummaryFragment } from '../../../common/graphql/fragments/ProfileSummary' +import { + ButtonContainer, + HeaderContainer, + Subheader, + SubheaderContainer, + TitleContainer, +} from './styled' +import { BodyProps } from './types' + +const Body: FC = ({ avatarSize = 144, chatRoomRef }) => { + const { currentProfile } = useCurrentProfile() + const profileSummary = useFragment( + ProfileSummaryFragment, + chatRoomRef, + ) + const getroomNameAndAvatar = () => { + const details = profileSummary?.participants?.edges?.map((edge) => { + const profileId = edge?.node?.profile?.id + if (!profileId) return null + if (edge?.node?.profile?.id !== currentProfile?.id) { + return { + name: edge?.node?.profile?.name, + avatar: edge?.node?.profile?.image?.url, + username: edge?.node?.profile?.urlPath?.path, + biography: edge?.node?.profile?.biography, + pk: edge?.node?.profile?.pk, + } + } + return null + }) + return details?.find((detail) => detail !== null) + } + + const { name, avatar, username, biography, pk } = getroomNameAndAvatar() || {} + const formattedUsername = username ? username.replace(/^\/+/, '') : '' + const profilePath = username ?? (pk ? `/profile/${pk}` : undefined) + + return ( + + + + + + {name} + + {formattedUsername && ( + + {`@${formattedUsername}`} + + )} + + + + + window.open(profilePath, '_blank', 'noopener,noreferrer')} + disabled={!profilePath} + > + + + Go to profile + + + + + + + Add contact to a group + + + + + + About + + + + + + {biography?.split('\n').map((line, index, lines) => ( + + {line} + {index < lines.length - 1 &&
} + + ))} + + + + + ) +} + +export default Body diff --git a/packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx b/packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx new file mode 100644 index 00000000..afbca205 --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Body/styled.tsx @@ -0,0 +1,38 @@ +import { Box } from '@mui/material' +import { styled } from '@mui/material/styles' + +export const HeaderContainer = styled(Box)(({ theme }) => ({ + display: 'grid', + gridTemplateRows: '144px auto', + justifyItems: 'center', + width: '100%', + padding: theme.spacing(3.5), + gap: theme.spacing(2), +})) + +export const TitleContainer = styled(Box)(() => ({ + width: '100%', + textAlign: 'center', + display: 'grid', + justifyItems: 'center', + gridTemplateRows: '22px 22px', + gap: '8px', +})) + +export const SubheaderContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), +})) + +export const ButtonContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + gap: theme.spacing(1), + padding: theme.spacing(2), +})) + +export const Subheader = styled(Box)(({ theme }) => ({ + padding: theme.spacing(2), +})) diff --git a/packages/components/modules/messages/web/ProfileSummary/Body/types.ts b/packages/components/modules/messages/web/ProfileSummary/Body/types.ts new file mode 100644 index 00000000..881c24ed --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Body/types.ts @@ -0,0 +1,8 @@ +import { PropsWithChildren } from 'react' + +import { ProfileSummaryFragment$key } from '../../../../../__generated__/ProfileSummaryFragment.graphql' + +export interface BodyProps extends PropsWithChildren { + avatarSize?: number + chatRoomRef: ProfileSummaryFragment$key +} diff --git a/packages/components/modules/messages/web/ProfileSummary/Header/index.tsx b/packages/components/modules/messages/web/ProfileSummary/Header/index.tsx new file mode 100644 index 00000000..0dbfb789 --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Header/index.tsx @@ -0,0 +1,30 @@ +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 { Typography } from '@mui/material' + +import { ProfileSummaryHeaderContainer } from './styled' +import { HeaderProps } from './types' + +const Header: FC = ({ + backIcon = 'eva:arrow-ios-back-fill', + backIconProps = {}, + onBackButtonClicked, +}) => ( + + + + + + Contact Details + + +) + +export default Header diff --git a/packages/components/modules/messages/web/ProfileSummary/Header/styled.tsx b/packages/components/modules/messages/web/ProfileSummary/Header/styled.tsx new file mode 100644 index 00000000..e8b78a59 --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Header/styled.tsx @@ -0,0 +1,15 @@ +import { Box } from '@mui/material' +import { styled } from '@mui/material/styles' + +export const ProfileSummaryHeaderContainer = styled(Box)(({ theme }) => ({ + borderBottom: `1px ${theme.palette.divider} solid`, + width: '100%', + padding: theme.spacing(2), + display: 'grid', + gridTemplateColumns: '24px auto 24px', + gap: theme.spacing(1.5), + alignItems: 'center', + [theme.breakpoints.down('sm')]: { + padding: `${theme.spacing(2)} ${theme.spacing(1.5)} ${theme.spacing(2)}`, + }, +})) diff --git a/packages/components/modules/messages/web/ProfileSummary/Header/types.ts b/packages/components/modules/messages/web/ProfileSummary/Header/types.ts new file mode 100644 index 00000000..5e6fe49f --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/Header/types.ts @@ -0,0 +1,7 @@ +import { IconifyProps } from '@baseapp-frontend/design-system/components/web/images' + +export interface HeaderProps { + backIcon?: IconifyProps['icon'] + backIconProps?: Partial> + onBackButtonClicked: VoidFunction +} diff --git a/packages/components/modules/messages/web/ProfileSummary/index.tsx b/packages/components/modules/messages/web/ProfileSummary/index.tsx new file mode 100644 index 00000000..ce85e4d3 --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/index.tsx @@ -0,0 +1,41 @@ +'use client' + +import { FC, Suspense } from 'react' + +import { LoadingState } from '@baseapp-frontend/design-system/components/web/displays' + +import { usePreloadedQuery } from 'react-relay' + +import { GroupDetailsQuery } from '../../common' +import Body from './Body' +import Header from './Header' +import { ProfileSummaryProps } from './types' + +const ProfileSummary: FC = ({ onBackButtonClicked, queryRef }) => { + const data = usePreloadedQuery(GroupDetailsQuery, queryRef) + + if (!data.chatRoom) { + return + } + return ( + <> +
+ + + ) +} + +const SuspendedProfileSummary: FC = ({ onBackButtonClicked, ...props }) => ( + +
+ + + } + > + + +) + +export default SuspendedProfileSummary diff --git a/packages/components/modules/messages/web/ProfileSummary/types.ts b/packages/components/modules/messages/web/ProfileSummary/types.ts new file mode 100644 index 00000000..e97d206e --- /dev/null +++ b/packages/components/modules/messages/web/ProfileSummary/types.ts @@ -0,0 +1,8 @@ +import { PreloadedQuery } from 'react-relay' + +import { GroupDetailsQuery } from '../../../../__generated__/GroupDetailsQuery.graphql' + +export type ProfileSummaryProps = { + queryRef: PreloadedQuery + onBackButtonClicked: () => void +} diff --git a/packages/components/package.json b/packages/components/package.json index 99d5cd10..a9fe80fc 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/components", "description": "BaseApp components modules such as comments, notifications, messages, and more.", - "version": "1.4.6", + "version": "1.4.7", "sideEffects": false, "scripts": { "build": "rm -rf dist && pnpm relay && tsc --build tsconfig.build.json", diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index dab45c9a..4ae73bf8 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,11 @@ # @baseapp-frontend/design-system +## 1.1.4 + +### Patch Changes + +- Added new icon ProfileNoCircleIcon + ## 1.1.3 ### Patch Changes diff --git a/packages/design-system/components/web/icons/ProfileNoCircleIcon/index.tsx b/packages/design-system/components/web/icons/ProfileNoCircleIcon/index.tsx new file mode 100644 index 00000000..c095b153 --- /dev/null +++ b/packages/design-system/components/web/icons/ProfileNoCircleIcon/index.tsx @@ -0,0 +1,20 @@ +import { FC } from 'react' + +import { SvgIcon, SvgIconProps } from '@mui/material' + +const ProfileNoCircleIcon: FC = ({ sx, ...props }) => ( + + + + + + +) + +export default ProfileNoCircleIcon diff --git a/packages/design-system/components/web/icons/index.ts b/packages/design-system/components/web/icons/index.ts index 6e189b4d..4c5a98aa 100644 --- a/packages/design-system/components/web/icons/index.ts +++ b/packages/design-system/components/web/icons/index.ts @@ -28,6 +28,7 @@ export { default as OutlinedCheckMarkIcon } from './OutlinedCheckMarkIcon' export { default as OutlinedEditIcon } from './OutlinedEditIcon' export { default as PenEditIcon } from './PenEditIcon' export { default as PinIcon } from './PinIcon' +export { default as ProfileNoCircleIcon } from './ProfileNoCircleIcon' export { default as SendMessageIcon } from './SendMessageIcon' export { default as ShareIcon } from './ShareIcon' export { default as ThreeDotsIcon } from './ThreeDotsIcon' diff --git a/packages/design-system/package.json b/packages/design-system/package.json index a02c7432..662aace6 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/design-system", "description": "Design System components and configurations.", - "version": "1.1.3", + "version": "1.1.4", "sideEffects": false, "scripts": { "build": "rm -rf dist && tsc --build tsconfig.build.json", diff --git a/packages/wagtail/CHANGELOG.md b/packages/wagtail/CHANGELOG.md index 9903c1eb..f936c992 100644 --- a/packages/wagtail/CHANGELOG.md +++ b/packages/wagtail/CHANGELOG.md @@ -1,5 +1,12 @@ # @baseapp-frontend/wagtail +## 1.0.41 + +### Patch Changes + +- Updated dependencies + - @baseapp-frontend/design-system@1.1.4 + ## 1.0.40 ### Patch Changes diff --git a/packages/wagtail/package.json b/packages/wagtail/package.json index 4ad46d7c..253e9a2b 100644 --- a/packages/wagtail/package.json +++ b/packages/wagtail/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/wagtail", "description": "BaseApp Wagtail", - "version": "1.0.40", + "version": "1.0.41", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false,