diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c3337ace..e9ee0298 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,11 @@ # @baseapp-frontend/components +## 0.0.33 + +### Patch Changes + +- Introduces a chat header, which displays the profile image and name of the other person in a one-on-one chat and the group picture, group name and member count in a group chat + ## 0.0.32 ### Patch Changes diff --git a/packages/components/__generated__/ChatRoomHeaderFragment.graphql.ts b/packages/components/__generated__/ChatRoomHeaderFragment.graphql.ts new file mode 100644 index 00000000..31baf7d5 --- /dev/null +++ b/packages/components/__generated__/ChatRoomHeaderFragment.graphql.ts @@ -0,0 +1,169 @@ +/** + * @generated SignedSource<<5e808251434895d9c0aa7fb0d0631353>> + * @lightSyntaxTransform + * @nogrep + */ + +/* tslint:disable */ + +/* eslint-disable */ +// @ts-nocheck +import { Fragment, ReaderFragment } from 'relay-runtime' +import { FragmentRefs } from 'relay-runtime' + +export type ChatRoomHeaderFragment$data = { + readonly image: + | { + readonly url: string + } + | null + | undefined + readonly participants: + | { + readonly edges: ReadonlyArray< + | { + readonly node: + | { + readonly profile: + | { + readonly id: string + readonly image: + | { + readonly url: string + } + | null + | undefined + readonly name: string | null | undefined + } + | null + | undefined + } + | null + | undefined + } + | null + | undefined + > + } + | null + | undefined + readonly title: string | null | undefined + readonly ' $fragmentType': 'ChatRoomHeaderFragment' +} +export type ChatRoomHeaderFragment$key = { + readonly ' $data'?: ChatRoomHeaderFragment$data + readonly ' $fragmentSpreads': FragmentRefs<'ChatRoomHeaderFragment'> +} + +const node: ReaderFragment = (function () { + var v0 = { + alias: null, + args: [ + { + kind: 'Literal', + name: 'height', + value: 100, + }, + { + kind: 'Literal', + name: 'width', + value: 100, + }, + ], + concreteType: 'File', + kind: 'LinkedField', + name: 'image', + plural: false, + selections: [ + { + alias: null, + args: null, + kind: 'ScalarField', + name: 'url', + storageKey: null, + }, + ], + storageKey: 'image(height:100,width:100)', + } + return { + argumentDefinitions: [], + kind: 'Fragment', + metadata: null, + name: 'ChatRoomHeaderFragment', + selections: [ + v0 /*: any*/, + { + alias: null, + args: null, + kind: 'ScalarField', + name: 'title', + storageKey: null, + }, + { + alias: null, + args: null, + concreteType: 'ChatRoomParticipantConnection', + kind: 'LinkedField', + name: 'participants', + plural: false, + selections: [ + { + alias: null, + args: null, + concreteType: 'ChatRoomParticipantEdge', + kind: 'LinkedField', + name: 'edges', + plural: true, + selections: [ + { + alias: null, + args: null, + concreteType: 'ChatRoomParticipant', + kind: 'LinkedField', + name: 'node', + plural: false, + selections: [ + { + alias: null, + args: null, + concreteType: 'Profile', + kind: 'LinkedField', + name: 'profile', + plural: false, + selections: [ + { + alias: null, + args: null, + kind: 'ScalarField', + name: 'id', + storageKey: null, + }, + { + alias: null, + args: null, + kind: 'ScalarField', + name: 'name', + storageKey: null, + }, + v0 /*: any*/, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], + storageKey: null, + }, + ], + type: 'ChatRoom', + abstractKey: null, + } +})() + +;(node as any).hash = '7983eaa530f167bdd9363a4aa2eade2d' + +export default node diff --git a/packages/components/__generated__/ChatRoomQuery.graphql.ts b/packages/components/__generated__/ChatRoomQuery.graphql.ts index 6ada24c9..d3b590ca 100644 --- a/packages/components/__generated__/ChatRoomQuery.graphql.ts +++ b/packages/components/__generated__/ChatRoomQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<33575c6da1146a8319653fa269485d21>> + * @generated SignedSource<<8ee140d8fcda94cbadcfae93ce3159e6>> * @lightSyntaxTransform * @nogrep */ @@ -18,38 +18,9 @@ export type ChatRoomQuery$data = { readonly chatRoom: | { readonly id: string - readonly participants: - | { - readonly edges: ReadonlyArray< - | { - readonly node: - | { - readonly profile: - | { - readonly __typename: 'Profile' - readonly id: string - readonly image: - | { - readonly url: string - } - | null - | undefined - readonly name: string | null | undefined - } - | null - | undefined - } - | null - | undefined - } - | null - | undefined - > - } - | null - | undefined - readonly unreadMessagesCount: number | null | undefined - readonly ' $fragmentSpreads': FragmentRefs<'MessagesListFragment'> + readonly ' $fragmentSpreads': FragmentRefs< + 'ChatRoomHeaderFragment' | 'MessagesListFragment' + > } | null | undefined @@ -81,28 +52,7 @@ const node: ConcreteRequest = (function () { name: 'id', storageKey: null, }, - v3 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'unreadMessagesCount', - storageKey: null, - }, - v4 = { - alias: null, - args: null, - kind: 'ScalarField', - name: '__typename', - storageKey: null, - }, - v5 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'name', - storageKey: null, - }, - v6 = [ + v3 = [ { alias: null, args: null, @@ -111,49 +61,42 @@ const node: ConcreteRequest = (function () { storageKey: null, }, ], - v7 = { + v4 = { alias: null, - args: null, - concreteType: 'Profile', - kind: 'LinkedField', - name: 'profile', - plural: false, - selections: [ - v2 /*: any*/, - v4 /*: any*/, - v5 /*: any*/, + args: [ { - alias: null, - args: [ - { - kind: 'Literal', - name: 'height', - value: 100, - }, - { - kind: 'Literal', - name: 'width', - value: 100, - }, - ], - concreteType: 'File', - kind: 'LinkedField', - name: 'image', - plural: false, - selections: v6 /*: any*/, - storageKey: 'image(height:100,width:100)', + kind: 'Literal', + name: 'height', + value: 100, + }, + { + kind: 'Literal', + name: 'width', + value: 100, }, ], + concreteType: 'File', + kind: 'LinkedField', + name: 'image', + plural: false, + selections: v3 /*: any*/, + storageKey: 'image(height:100,width:100)', + }, + v5 = { + alias: null, + args: null, + kind: 'ScalarField', + name: 'name', storageKey: null, }, - v8 = { + v6 = { alias: null, args: null, kind: 'ScalarField', name: 'totalCount', storageKey: null, }, - v9 = [ + v7 = [ { kind: 'Literal', name: 'first', @@ -176,38 +119,10 @@ const node: ConcreteRequest = (function () { plural: false, selections: [ v2 /*: any*/, - v3 /*: any*/, { - alias: null, args: null, - concreteType: 'ChatRoomParticipantConnection', - kind: 'LinkedField', - name: 'participants', - plural: false, - selections: [ - { - alias: null, - args: null, - concreteType: 'ChatRoomParticipantEdge', - kind: 'LinkedField', - name: 'edges', - plural: true, - selections: [ - { - alias: null, - args: null, - concreteType: 'ChatRoomParticipant', - kind: 'LinkedField', - name: 'node', - plural: false, - selections: [v7 /*: any*/], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, + kind: 'FragmentSpread', + name: 'ChatRoomHeaderFragment', }, { args: null, @@ -236,7 +151,14 @@ const node: ConcreteRequest = (function () { plural: false, selections: [ v2 /*: any*/, - v3 /*: any*/, + v4 /*: any*/, + { + alias: null, + args: null, + kind: 'ScalarField', + name: 'title', + storageKey: null, + }, { alias: null, args: null, @@ -260,25 +182,44 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'node', plural: false, - selections: [v7 /*: any*/, v2 /*: any*/], + selections: [ + { + alias: null, + args: null, + concreteType: 'Profile', + kind: 'LinkedField', + name: 'profile', + plural: false, + selections: [v2 /*: any*/, v5 /*: any*/, v4 /*: any*/], + storageKey: null, + }, + v2 /*: any*/, + ], storageKey: null, }, ], storageKey: null, }, - v8 /*: any*/, + v6 /*: any*/, ], storageKey: null, }, { alias: null, - args: v9 /*: any*/, + args: null, + kind: 'ScalarField', + name: 'unreadMessagesCount', + storageKey: null, + }, + { + alias: null, + args: v7 /*: any*/, concreteType: 'MessageConnection', kind: 'LinkedField', name: 'allMessages', plural: false, selections: [ - v8 /*: any*/, + v6 /*: any*/, { alias: null, args: null, @@ -331,7 +272,7 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'image', plural: false, - selections: v6 /*: any*/, + selections: v3 /*: any*/, storageKey: 'image(height:32,width:32)', }, ], @@ -382,7 +323,13 @@ const node: ConcreteRequest = (function () { name: 'verb', storageKey: null, }, - v4 /*: any*/, + { + alias: null, + args: null, + kind: 'ScalarField', + name: '__typename', + storageKey: null, + }, ], storageKey: null, }, @@ -426,7 +373,7 @@ const node: ConcreteRequest = (function () { }, { alias: null, - args: v9 /*: any*/, + args: v7 /*: any*/, filters: null, handle: 'connection', key: 'chatRoom_allMessages', @@ -439,16 +386,16 @@ const node: ConcreteRequest = (function () { ], }, params: { - cacheID: 'c8ded0d3c408e6149fc07900272389de', + cacheID: '1be7817039d0266ae5f5a59e70f3cae3', id: null, metadata: {}, name: 'ChatRoomQuery', operationKind: 'query', - text: 'query ChatRoomQuery(\n $roomId: ID!\n) {\n chatRoom(id: $roomId) {\n id\n unreadMessagesCount\n participants {\n edges {\n node {\n profile {\n id\n __typename\n name\n image(width: 100, height: 100) {\n url\n }\n }\n id\n }\n }\n }\n ...MessagesListFragment\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n', + text: 'query ChatRoomQuery(\n $roomId: ID!\n) {\n chatRoom(id: $roomId) {\n id\n ...ChatRoomHeaderFragment\n ...MessagesListFragment\n }\n}\n\nfragment ChatRoomHeaderFragment on ChatRoom {\n image(width: 100, height: 100) {\n url\n }\n title\n participants {\n edges {\n node {\n profile {\n id\n name\n image(width: 100, height: 100) {\n url\n }\n }\n id\n }\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n', }, } })() -;(node as any).hash = 'eb4461cf8963b7c4fa0611792ca328aa' +;(node as any).hash = 'f4a1b2a556f517a2f2e3016bfb38f7b5' export default node diff --git a/packages/components/__generated__/ChatRoomsQuery.graphql.ts b/packages/components/__generated__/ChatRoomsQuery.graphql.ts index d3ca1774..2d002c9e 100644 --- a/packages/components/__generated__/ChatRoomsQuery.graphql.ts +++ b/packages/components/__generated__/ChatRoomsQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<60e7201406e289f6409bf11cc8b81e94>> + * @generated SignedSource<<43f91ec4dc055bc7109f9c12c6fa346a>> * @lightSyntaxTransform * @nogrep */ @@ -336,7 +336,6 @@ const node: ConcreteRequest = (function () { name: 'unreadMessagesCount', storageKey: null, }, - v7 /*: any*/, { alias: null, args: null, @@ -354,6 +353,7 @@ const node: ConcreteRequest = (function () { selections: [v0 /*: any*/, v11 /*: any*/], storageKey: null, }, + v7 /*: any*/, { alias: null, args: null, @@ -369,7 +369,6 @@ const node: ConcreteRequest = (function () { name: 'participants', plural: false, selections: [ - v3 /*: any*/, { alias: null, args: null, @@ -386,7 +385,6 @@ const node: ConcreteRequest = (function () { name: 'node', plural: false, selections: [ - v0 /*: any*/, { alias: null, args: null, @@ -396,18 +394,19 @@ const node: ConcreteRequest = (function () { plural: false, selections: [ v0 /*: any*/, - v8 /*: any*/, v5 /*: any*/, v7 /*: any*/, ], storageKey: null, }, + v0 /*: any*/, ], storageKey: null, }, ], storageKey: null, }, + v3 /*: any*/, ], storageKey: null, }, @@ -572,12 +571,12 @@ const node: ConcreteRequest = (function () { ], }, params: { - cacheID: '4943fd77373dd62f8b74a60a66373294', + cacheID: 'f8b0b4c3bd559ad17b832e9bdfb3a919', id: null, metadata: {}, name: 'ChatRoomsQuery', operationKind: 'query', - text: 'query ChatRoomsQuery {\n ...AllProfilesListFragment\n me {\n id\n profile {\n id\n ...RoomsListFragment\n }\n }\n}\n\nfragment AllProfilesListFragment on Query {\n allProfiles(first: 5, orderBy: "-created") {\n totalCount\n pageInfo {\n hasNextPage\n endCursor\n }\n edges {\n node {\n id\n ...ProfileItemFragment\n __typename\n }\n cursor\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment ProfileItemFragment on Profile {\n id\n name\n image(width: 100, height: 100) {\n url\n }\n urlPath {\n path\n id\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n image(width: 100, height: 100) {\n url\n }\n lastMessageTime\n lastMessage {\n id\n content\n }\n title\n participants {\n totalCount\n edges {\n node {\n id\n profile {\n id\n __typename\n name\n image(width: 100, height: 100) {\n url\n }\n }\n }\n }\n }\n ...MessagesListFragment\n}\n\nfragment RoomsListFragment on ChatRoomsInterface {\n __isChatRoomsInterface: __typename\n chatRooms(first: 5, unreadMessages: false, archived: false) {\n edges {\n node {\n id\n ...RoomFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n id\n}\n', + text: 'query ChatRoomsQuery {\n ...AllProfilesListFragment\n me {\n id\n profile {\n id\n ...RoomsListFragment\n }\n }\n}\n\nfragment AllProfilesListFragment on Query {\n allProfiles(first: 5, orderBy: "-created") {\n totalCount\n pageInfo {\n hasNextPage\n endCursor\n }\n edges {\n node {\n id\n ...ProfileItemFragment\n __typename\n }\n cursor\n }\n }\n}\n\nfragment ChatRoomHeaderFragment on ChatRoom {\n image(width: 100, height: 100) {\n url\n }\n title\n participants {\n edges {\n node {\n profile {\n id\n name\n image(width: 100, height: 100) {\n url\n }\n }\n id\n }\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment ProfileItemFragment on Profile {\n id\n name\n image(width: 100, height: 100) {\n url\n }\n urlPath {\n path\n id\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n lastMessageTime\n lastMessage {\n id\n content\n }\n ...ChatRoomHeaderFragment\n ...MessagesListFragment\n}\n\nfragment RoomsListFragment on ChatRoomsInterface {\n __isChatRoomsInterface: __typename\n chatRooms(first: 5, unreadMessages: false, archived: false) {\n edges {\n node {\n id\n ...RoomFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n id\n}\n', }, } })() diff --git a/packages/components/__generated__/CreateChatRoomMutation.graphql.ts b/packages/components/__generated__/CreateChatRoomMutation.graphql.ts index f4ea74b5..81137500 100644 --- a/packages/components/__generated__/CreateChatRoomMutation.graphql.ts +++ b/packages/components/__generated__/CreateChatRoomMutation.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<> + * @generated SignedSource<<61cf9f01f1fb97c3e5efe797b0cfaf4e>> * @lightSyntaxTransform * @nogrep */ @@ -124,20 +124,13 @@ const node: ConcreteRequest = (function () { storageKey: null, }, v6 = { - alias: null, - args: null, - kind: 'ScalarField', - name: '__typename', - storageKey: null, - }, - v7 = { alias: null, args: null, kind: 'ScalarField', name: 'name', storageKey: null, }, - v8 = [ + v7 = [ { alias: null, args: null, @@ -146,7 +139,7 @@ const node: ConcreteRequest = (function () { storageKey: null, }, ], - v9 = { + v8 = { alias: null, args: [ { @@ -164,24 +157,24 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'image', plural: false, - selections: v8 /*: any*/, + selections: v7 /*: any*/, storageKey: 'image(height:100,width:100)', }, - v10 = { + v9 = { alias: null, args: null, kind: 'ScalarField', name: 'totalCount', storageKey: null, }, - v11 = { + v10 = { alias: null, args: null, kind: 'ScalarField', name: 'content', storageKey: null, }, - v12 = [ + v11 = [ { kind: 'Literal', name: 'first', @@ -334,12 +327,7 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'profile', plural: false, - selections: [ - v3 /*: any*/, - v6 /*: any*/, - v7 /*: any*/, - v9 /*: any*/, - ], + selections: [v3 /*: any*/, v6 /*: any*/, v8 /*: any*/], storageKey: null, }, ], @@ -348,7 +336,7 @@ const node: ConcreteRequest = (function () { ], storageKey: null, }, - v10 /*: any*/, + v9 /*: any*/, ], storageKey: null, }, @@ -359,7 +347,6 @@ const node: ConcreteRequest = (function () { name: 'unreadMessagesCount', storageKey: null, }, - v9 /*: any*/, { alias: null, args: null, @@ -374,9 +361,10 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'lastMessage', plural: false, - selections: [v3 /*: any*/, v11 /*: any*/], + selections: [v3 /*: any*/, v10 /*: any*/], storageKey: null, }, + v8 /*: any*/, { alias: null, args: null, @@ -386,13 +374,13 @@ const node: ConcreteRequest = (function () { }, { alias: null, - args: v12 /*: any*/, + args: v11 /*: any*/, concreteType: 'MessageConnection', kind: 'LinkedField', name: 'allMessages', plural: false, selections: [ - v10 /*: any*/, + v9 /*: any*/, { alias: null, args: null, @@ -426,7 +414,7 @@ const node: ConcreteRequest = (function () { plural: false, selections: [ v3 /*: any*/, - v7 /*: any*/, + v6 /*: any*/, { alias: null, args: [ @@ -445,7 +433,7 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'image', plural: false, - selections: v8 /*: any*/, + selections: v7 /*: any*/, storageKey: 'image(height:32,width:32)', }, ], @@ -458,7 +446,7 @@ const node: ConcreteRequest = (function () { name: 'isRead', storageKey: null, }, - v11 /*: any*/, + v10 /*: any*/, { alias: null, args: null, @@ -490,7 +478,13 @@ const node: ConcreteRequest = (function () { name: 'verb', storageKey: null, }, - v6 /*: any*/, + { + alias: null, + args: null, + kind: 'ScalarField', + name: '__typename', + storageKey: null, + }, ], storageKey: null, }, @@ -534,7 +528,7 @@ const node: ConcreteRequest = (function () { }, { alias: null, - args: v12 /*: any*/, + args: v11 /*: any*/, filters: null, handle: 'connection', key: 'chatRoom_allMessages', @@ -570,12 +564,12 @@ const node: ConcreteRequest = (function () { ], }, params: { - cacheID: '11bf60080bc3647d363cbfaa9aa6204b', + cacheID: '1de5bc3b81a673f0a5442a0462175c63', id: null, metadata: {}, name: 'CreateChatRoomMutation', operationKind: 'mutation', - text: 'mutation CreateChatRoomMutation(\n $input: ChatRoomCreateInput!\n) {\n chatRoomCreate(input: $input) {\n room {\n node {\n id\n participants {\n edges {\n node {\n id\n }\n }\n }\n ...RoomFragment\n }\n }\n errors {\n field\n messages\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n image(width: 100, height: 100) {\n url\n }\n lastMessageTime\n lastMessage {\n id\n content\n }\n title\n participants {\n totalCount\n edges {\n node {\n id\n profile {\n id\n __typename\n name\n image(width: 100, height: 100) {\n url\n }\n }\n }\n }\n }\n ...MessagesListFragment\n}\n', + text: 'mutation CreateChatRoomMutation(\n $input: ChatRoomCreateInput!\n) {\n chatRoomCreate(input: $input) {\n room {\n node {\n id\n participants {\n edges {\n node {\n id\n }\n }\n }\n ...RoomFragment\n }\n }\n errors {\n field\n messages\n }\n }\n}\n\nfragment ChatRoomHeaderFragment on ChatRoom {\n image(width: 100, height: 100) {\n url\n }\n title\n participants {\n edges {\n node {\n profile {\n id\n name\n image(width: 100, height: 100) {\n url\n }\n }\n id\n }\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n lastMessageTime\n lastMessage {\n id\n content\n }\n ...ChatRoomHeaderFragment\n ...MessagesListFragment\n}\n', }, } })() diff --git a/packages/components/__generated__/ReadMessagesMutation.graphql.ts b/packages/components/__generated__/ReadMessagesMutation.graphql.ts index 8a040bd2..e45dc1b8 100644 --- a/packages/components/__generated__/ReadMessagesMutation.graphql.ts +++ b/packages/components/__generated__/ReadMessagesMutation.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<52d5b4ddfcd9386fc78d0b20b872c96c>> + * @generated SignedSource<> * @lightSyntaxTransform * @nogrep */ @@ -105,7 +105,14 @@ const node: ConcreteRequest = (function () { ], storageKey: null, }, - v5 = [ + v5 = { + alias: null, + args: null, + kind: 'ScalarField', + name: 'content', + storageKey: null, + }, + v6 = [ { alias: null, args: null, @@ -114,7 +121,7 @@ const node: ConcreteRequest = (function () { storageKey: null, }, ], - v6 = { + v7 = { alias: null, args: [ { @@ -132,38 +139,24 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'image', plural: false, - selections: v5 /*: any*/, + selections: v6 /*: any*/, storageKey: 'image(height:100,width:100)', }, - v7 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'content', - storageKey: null, - }, v8 = { alias: null, args: null, kind: 'ScalarField', - name: 'totalCount', + name: 'name', storageKey: null, }, v9 = { alias: null, args: null, kind: 'ScalarField', - name: '__typename', - storageKey: null, - }, - v10 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'name', + name: 'totalCount', storageKey: null, }, - v11 = [ + v10 = [ { kind: 'Literal', name: 'first', @@ -235,7 +228,6 @@ const node: ConcreteRequest = (function () { selections: [ v2 /*: any*/, v3 /*: any*/, - v6 /*: any*/, { alias: null, args: null, @@ -250,9 +242,10 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'lastMessage', plural: false, - selections: [v2 /*: any*/, v7 /*: any*/], + selections: [v2 /*: any*/, v5 /*: any*/], storageKey: null, }, + v7 /*: any*/, { alias: null, args: null, @@ -268,7 +261,6 @@ const node: ConcreteRequest = (function () { name: 'participants', plural: false, selections: [ - v8 /*: any*/, { alias: null, args: null, @@ -285,7 +277,6 @@ const node: ConcreteRequest = (function () { name: 'node', plural: false, selections: [ - v2 /*: any*/, { alias: null, args: null, @@ -293,27 +284,29 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'profile', plural: false, - selections: [v2 /*: any*/, v9 /*: any*/, v10 /*: any*/, v6 /*: any*/], + selections: [v2 /*: any*/, v8 /*: any*/, v7 /*: any*/], storageKey: null, }, + v2 /*: any*/, ], storageKey: null, }, ], storageKey: null, }, + v9 /*: any*/, ], storageKey: null, }, { alias: null, - args: v11 /*: any*/, + args: v10 /*: any*/, concreteType: 'MessageConnection', kind: 'LinkedField', name: 'allMessages', plural: false, selections: [ - v8 /*: any*/, + v9 /*: any*/, { alias: null, args: null, @@ -347,7 +340,7 @@ const node: ConcreteRequest = (function () { plural: false, selections: [ v2 /*: any*/, - v10 /*: any*/, + v8 /*: any*/, { alias: null, args: [ @@ -366,7 +359,7 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'image', plural: false, - selections: v5 /*: any*/, + selections: v6 /*: any*/, storageKey: 'image(height:32,width:32)', }, ], @@ -379,7 +372,7 @@ const node: ConcreteRequest = (function () { name: 'isRead', storageKey: null, }, - v7 /*: any*/, + v5 /*: any*/, { alias: null, args: null, @@ -411,7 +404,13 @@ const node: ConcreteRequest = (function () { name: 'verb', storageKey: null, }, - v9 /*: any*/, + { + alias: null, + args: null, + kind: 'ScalarField', + name: '__typename', + storageKey: null, + }, ], storageKey: null, }, @@ -455,7 +454,7 @@ const node: ConcreteRequest = (function () { }, { alias: null, - args: v11 /*: any*/, + args: v10 /*: any*/, filters: null, handle: 'connection', key: 'chatRoom_allMessages', @@ -472,12 +471,12 @@ const node: ConcreteRequest = (function () { ], }, params: { - cacheID: '17d51112d5e90700cfa7dd3027f2e4b2', + cacheID: '8a73bdda098595a81d4e8237dc2977b6', id: null, metadata: {}, name: 'ReadMessagesMutation', operationKind: 'mutation', - text: 'mutation ReadMessagesMutation(\n $input: ChatRoomReadMessagesInput!\n) {\n chatRoomReadMessages(input: $input) {\n room {\n id\n unreadMessagesCount\n ...RoomFragment\n }\n errors {\n field\n messages\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n image(width: 100, height: 100) {\n url\n }\n lastMessageTime\n lastMessage {\n id\n content\n }\n title\n participants {\n totalCount\n edges {\n node {\n id\n profile {\n id\n __typename\n name\n image(width: 100, height: 100) {\n url\n }\n }\n }\n }\n }\n ...MessagesListFragment\n}\n', + text: 'mutation ReadMessagesMutation(\n $input: ChatRoomReadMessagesInput!\n) {\n chatRoomReadMessages(input: $input) {\n room {\n id\n unreadMessagesCount\n ...RoomFragment\n }\n errors {\n field\n messages\n }\n }\n}\n\nfragment ChatRoomHeaderFragment on ChatRoom {\n image(width: 100, height: 100) {\n url\n }\n title\n participants {\n edges {\n node {\n profile {\n id\n name\n image(width: 100, height: 100) {\n url\n }\n }\n id\n }\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n lastMessageTime\n lastMessage {\n id\n content\n }\n ...ChatRoomHeaderFragment\n ...MessagesListFragment\n}\n', }, } })() diff --git a/packages/components/__generated__/RoomFragment.graphql.ts b/packages/components/__generated__/RoomFragment.graphql.ts index fde4ccf0..60d9549c 100644 --- a/packages/components/__generated__/RoomFragment.graphql.ts +++ b/packages/components/__generated__/RoomFragment.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<94f429c180be507431ab05033c8e28fa>> + * @generated SignedSource<<3ff677fac515b53b8e1eeddd770cf81d>> * @lightSyntaxTransform * @nogrep */ @@ -13,12 +13,6 @@ import { FragmentRefs } from 'relay-runtime' export type RoomFragment$data = { readonly id: string - readonly image: - | { - readonly url: string - } - | null - | undefined readonly lastMessage: | { readonly content: string | null | undefined @@ -27,41 +21,8 @@ export type RoomFragment$data = { | null | undefined readonly lastMessageTime: any | null | undefined - readonly participants: - | { - readonly edges: ReadonlyArray< - | { - readonly node: - | { - readonly id: string - readonly profile: - | { - readonly __typename: 'Profile' - readonly id: string - readonly image: - | { - readonly url: string - } - | null - | undefined - readonly name: string | null | undefined - } - | null - | undefined - } - | null - | undefined - } - | null - | undefined - > - readonly totalCount: number | null | undefined - } - | null - | undefined - readonly title: string | null | undefined readonly unreadMessagesCount: number | null | undefined - readonly ' $fragmentSpreads': FragmentRefs<'MessagesListFragment'> + readonly ' $fragmentSpreads': FragmentRefs<'ChatRoomHeaderFragment' | 'MessagesListFragment'> readonly ' $fragmentType': 'RoomFragment' } export type RoomFragment$key = { @@ -71,41 +32,12 @@ export type RoomFragment$key = { const node: ReaderFragment = (function () { var v0 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'id', - storageKey: null, - }, - v1 = { - alias: null, - args: [ - { - kind: 'Literal', - name: 'height', - value: 100, - }, - { - kind: 'Literal', - name: 'width', - value: 100, - }, - ], - concreteType: 'File', - kind: 'LinkedField', - name: 'image', - plural: false, - selections: [ - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'url', - storageKey: null, - }, - ], - storageKey: 'image(height:100,width:100)', - } + alias: null, + args: null, + kind: 'ScalarField', + name: 'id', + storageKey: null, + } return { argumentDefinitions: [], kind: 'Fragment', @@ -120,7 +52,6 @@ const node: ReaderFragment = (function () { name: 'unreadMessagesCount', storageKey: null, }, - v1 /*: any*/, { alias: null, args: null, @@ -148,79 +79,9 @@ const node: ReaderFragment = (function () { storageKey: null, }, { - alias: null, - args: null, - kind: 'ScalarField', - name: 'title', - storageKey: null, - }, - { - alias: null, args: null, - concreteType: 'ChatRoomParticipantConnection', - kind: 'LinkedField', - name: 'participants', - plural: false, - selections: [ - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'totalCount', - storageKey: null, - }, - { - alias: null, - args: null, - concreteType: 'ChatRoomParticipantEdge', - kind: 'LinkedField', - name: 'edges', - plural: true, - selections: [ - { - alias: null, - args: null, - concreteType: 'ChatRoomParticipant', - kind: 'LinkedField', - name: 'node', - plural: false, - selections: [ - v0 /*: any*/, - { - alias: null, - args: null, - concreteType: 'Profile', - kind: 'LinkedField', - name: 'profile', - plural: false, - selections: [ - v0 /*: any*/, - { - alias: null, - args: null, - kind: 'ScalarField', - name: '__typename', - storageKey: null, - }, - { - alias: null, - args: null, - kind: 'ScalarField', - name: 'name', - storageKey: null, - }, - v1 /*: any*/, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, - }, - ], - storageKey: null, + kind: 'FragmentSpread', + name: 'ChatRoomHeaderFragment', }, { args: null, @@ -233,6 +94,6 @@ const node: ReaderFragment = (function () { } })() -;(node as any).hash = '7a8fa70089ead1942520892d561382ef' +;(node as any).hash = '9d4bfcdfca9ea94693b2ebb241c58e9f' export default node diff --git a/packages/components/__generated__/chatRoomsPaginationQuery.graphql.ts b/packages/components/__generated__/chatRoomsPaginationQuery.graphql.ts index 8aa1870d..8f71b65c 100644 --- a/packages/components/__generated__/chatRoomsPaginationQuery.graphql.ts +++ b/packages/components/__generated__/chatRoomsPaginationQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<9b43b3a39cbb4c8c92d5209a5a7c8242>> + * @generated SignedSource<<9fd5124757fb10a53e1f327d1d2797a3>> * @lightSyntaxTransform * @nogrep */ @@ -114,7 +114,14 @@ const node: ConcreteRequest = (function () { v8 /*: any*/, v9 /*: any*/, ], - v13 = [ + v13 = { + alias: null, + args: null, + kind: 'ScalarField', + name: 'content', + storageKey: null, + }, + v14 = [ { alias: null, args: null, @@ -123,7 +130,7 @@ const node: ConcreteRequest = (function () { storageKey: null, }, ], - v14 = { + v15 = { alias: null, args: [ { @@ -141,28 +148,21 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'image', plural: false, - selections: v13 /*: any*/, + selections: v14 /*: any*/, storageKey: 'image(height:100,width:100)', }, - v15 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'content', - storageKey: null, - }, v16 = { alias: null, args: null, kind: 'ScalarField', - name: 'totalCount', + name: 'name', storageKey: null, }, v17 = { alias: null, args: null, kind: 'ScalarField', - name: 'name', + name: 'totalCount', storageKey: null, }, v18 = [ @@ -310,7 +310,6 @@ const node: ConcreteRequest = (function () { name: 'unreadMessagesCount', storageKey: null, }, - v14 /*: any*/, { alias: null, args: null, @@ -325,9 +324,10 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'lastMessage', plural: false, - selections: [v11 /*: any*/, v15 /*: any*/], + selections: [v11 /*: any*/, v13 /*: any*/], storageKey: null, }, + v15 /*: any*/, { alias: null, args: null, @@ -343,7 +343,6 @@ const node: ConcreteRequest = (function () { name: 'participants', plural: false, selections: [ - v16 /*: any*/, { alias: null, args: null, @@ -360,7 +359,6 @@ const node: ConcreteRequest = (function () { name: 'node', plural: false, selections: [ - v11 /*: any*/, { alias: null, args: null, @@ -368,20 +366,17 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'profile', plural: false, - selections: [ - v11 /*: any*/, - v10 /*: any*/, - v17 /*: any*/, - v14 /*: any*/, - ], + selections: [v11 /*: any*/, v16 /*: any*/, v15 /*: any*/], storageKey: null, }, + v11 /*: any*/, ], storageKey: null, }, ], storageKey: null, }, + v17 /*: any*/, ], storageKey: null, }, @@ -393,7 +388,7 @@ const node: ConcreteRequest = (function () { name: 'allMessages', plural: false, selections: [ - v16 /*: any*/, + v17 /*: any*/, { alias: null, args: null, @@ -427,7 +422,7 @@ const node: ConcreteRequest = (function () { plural: false, selections: [ v11 /*: any*/, - v17 /*: any*/, + v16 /*: any*/, { alias: null, args: [ @@ -446,7 +441,7 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'image', plural: false, - selections: v13 /*: any*/, + selections: v14 /*: any*/, storageKey: 'image(height:32,width:32)', }, ], @@ -459,7 +454,7 @@ const node: ConcreteRequest = (function () { name: 'isRead', storageKey: null, }, - v15 /*: any*/, + v13 /*: any*/, { alias: null, args: null, @@ -543,12 +538,12 @@ const node: ConcreteRequest = (function () { ], }, params: { - cacheID: '9d5821f21109199a09d4de0b3aab46a7', + cacheID: '3eee045038f7ec74c5ae76014a54399b', id: null, metadata: {}, name: 'chatRoomsPaginationQuery', operationKind: 'query', - text: 'query chatRoomsPaginationQuery(\n $archived: Boolean = false\n $count: Int = 5\n $cursor: String\n $q: String = null\n $unreadMessages: Boolean = false\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...RoomsListFragment_3I5PKK\n id\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n image(width: 100, height: 100) {\n url\n }\n lastMessageTime\n lastMessage {\n id\n content\n }\n title\n participants {\n totalCount\n edges {\n node {\n id\n profile {\n id\n __typename\n name\n image(width: 100, height: 100) {\n url\n }\n }\n }\n }\n }\n ...MessagesListFragment\n}\n\nfragment RoomsListFragment_3I5PKK on ChatRoomsInterface {\n __isChatRoomsInterface: __typename\n chatRooms(first: $count, after: $cursor, q: $q, unreadMessages: $unreadMessages, archived: $archived) {\n edges {\n node {\n id\n ...RoomFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n id\n}\n', + text: 'query chatRoomsPaginationQuery(\n $archived: Boolean = false\n $count: Int = 5\n $cursor: String\n $q: String = null\n $unreadMessages: Boolean = false\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...RoomsListFragment_3I5PKK\n id\n }\n}\n\nfragment ChatRoomHeaderFragment on ChatRoom {\n image(width: 100, height: 100) {\n url\n }\n title\n participants {\n edges {\n node {\n profile {\n id\n name\n image(width: 100, height: 100) {\n url\n }\n }\n id\n }\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n lastMessageTime\n lastMessage {\n id\n content\n }\n ...ChatRoomHeaderFragment\n ...MessagesListFragment\n}\n\nfragment RoomsListFragment_3I5PKK on ChatRoomsInterface {\n __isChatRoomsInterface: __typename\n chatRooms(first: $count, after: $cursor, q: $q, unreadMessages: $unreadMessages, archived: $archived) {\n edges {\n node {\n id\n ...RoomFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n id\n}\n', }, } })() diff --git a/packages/components/__generated__/useRoomListSubscription.graphql.ts b/packages/components/__generated__/useRoomListSubscription.graphql.ts index 50389199..82d347f3 100644 --- a/packages/components/__generated__/useRoomListSubscription.graphql.ts +++ b/packages/components/__generated__/useRoomListSubscription.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<9e50394181061b00b8ed07f0387f8602>> + * @generated SignedSource<> * @lightSyntaxTransform * @nogrep */ @@ -64,7 +64,14 @@ const node: ConcreteRequest = (function () { name: 'id', storageKey: null, }, - v4 = [ + v4 = { + alias: null, + args: null, + kind: 'ScalarField', + name: 'content', + storageKey: null, + }, + v5 = [ { alias: null, args: null, @@ -73,7 +80,7 @@ const node: ConcreteRequest = (function () { storageKey: null, }, ], - v5 = { + v6 = { alias: null, args: [ { @@ -91,38 +98,24 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'image', plural: false, - selections: v4 /*: any*/, + selections: v5 /*: any*/, storageKey: 'image(height:100,width:100)', }, - v6 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'content', - storageKey: null, - }, v7 = { alias: null, args: null, kind: 'ScalarField', - name: 'totalCount', + name: 'name', storageKey: null, }, v8 = { alias: null, args: null, kind: 'ScalarField', - name: '__typename', - storageKey: null, - }, - v9 = { - alias: null, - args: null, - kind: 'ScalarField', - name: 'name', + name: 'totalCount', storageKey: null, }, - v10 = [ + v9 = [ { kind: 'Literal', name: 'first', @@ -217,7 +210,6 @@ const node: ConcreteRequest = (function () { name: 'unreadMessagesCount', storageKey: null, }, - v5 /*: any*/, { alias: null, args: null, @@ -232,9 +224,10 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'lastMessage', plural: false, - selections: [v3 /*: any*/, v6 /*: any*/], + selections: [v3 /*: any*/, v4 /*: any*/], storageKey: null, }, + v6 /*: any*/, { alias: null, args: null, @@ -250,7 +243,6 @@ const node: ConcreteRequest = (function () { name: 'participants', plural: false, selections: [ - v7 /*: any*/, { alias: null, args: null, @@ -267,7 +259,6 @@ const node: ConcreteRequest = (function () { name: 'node', plural: false, selections: [ - v3 /*: any*/, { alias: null, args: null, @@ -275,32 +266,29 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'profile', plural: false, - selections: [ - v3 /*: any*/, - v8 /*: any*/, - v9 /*: any*/, - v5 /*: any*/, - ], + selections: [v3 /*: any*/, v7 /*: any*/, v6 /*: any*/], storageKey: null, }, + v3 /*: any*/, ], storageKey: null, }, ], storageKey: null, }, + v8 /*: any*/, ], storageKey: null, }, { alias: null, - args: v10 /*: any*/, + args: v9 /*: any*/, concreteType: 'MessageConnection', kind: 'LinkedField', name: 'allMessages', plural: false, selections: [ - v7 /*: any*/, + v8 /*: any*/, { alias: null, args: null, @@ -334,7 +322,7 @@ const node: ConcreteRequest = (function () { plural: false, selections: [ v3 /*: any*/, - v9 /*: any*/, + v7 /*: any*/, { alias: null, args: [ @@ -353,7 +341,7 @@ const node: ConcreteRequest = (function () { kind: 'LinkedField', name: 'image', plural: false, - selections: v4 /*: any*/, + selections: v5 /*: any*/, storageKey: 'image(height:32,width:32)', }, ], @@ -366,7 +354,7 @@ const node: ConcreteRequest = (function () { name: 'isRead', storageKey: null, }, - v6 /*: any*/, + v4 /*: any*/, { alias: null, args: null, @@ -398,7 +386,13 @@ const node: ConcreteRequest = (function () { name: 'verb', storageKey: null, }, - v8 /*: any*/, + { + alias: null, + args: null, + kind: 'ScalarField', + name: '__typename', + storageKey: null, + }, ], storageKey: null, }, @@ -442,7 +436,7 @@ const node: ConcreteRequest = (function () { }, { alias: null, - args: v10 /*: any*/, + args: v9 /*: any*/, filters: null, handle: 'connection', key: 'chatRoom_allMessages', @@ -477,12 +471,12 @@ const node: ConcreteRequest = (function () { ], }, params: { - cacheID: '36f90bda90181b649a4bd7a49f852624', + cacheID: '6395f674791d79158f0e5c8c66608337', id: null, metadata: {}, name: 'useRoomListSubscription', operationKind: 'subscription', - text: 'subscription useRoomListSubscription(\n $profileId: ID!\n) {\n chatRoomOnRoomUpdate(profileId: $profileId) {\n room {\n node {\n id\n ...RoomFragment\n }\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n image(width: 100, height: 100) {\n url\n }\n lastMessageTime\n lastMessage {\n id\n content\n }\n title\n participants {\n totalCount\n edges {\n node {\n id\n profile {\n id\n __typename\n name\n image(width: 100, height: 100) {\n url\n }\n }\n }\n }\n }\n ...MessagesListFragment\n}\n', + text: 'subscription useRoomListSubscription(\n $profileId: ID!\n) {\n chatRoomOnRoomUpdate(profileId: $profileId) {\n room {\n node {\n id\n ...RoomFragment\n }\n }\n }\n}\n\nfragment ChatRoomHeaderFragment on ChatRoom {\n image(width: 100, height: 100) {\n url\n }\n title\n participants {\n edges {\n node {\n profile {\n id\n name\n image(width: 100, height: 100) {\n url\n }\n }\n id\n }\n }\n }\n}\n\nfragment MessageItemFragment on Message {\n id\n content\n created\n extraData\n inReplyTo {\n id\n }\n isRead\n pk\n profile {\n id\n }\n verb\n}\n\nfragment MessagesListFragment on ChatRoom {\n id\n participants {\n totalCount\n }\n unreadMessagesCount\n allMessages(first: 20) {\n totalCount\n edges {\n node {\n id\n created\n profile {\n id\n name\n image(height: 32, width: 32) {\n url\n }\n }\n isRead\n ...MessageItemFragment\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n\nfragment RoomFragment on ChatRoom {\n id\n unreadMessagesCount\n lastMessageTime\n lastMessage {\n id\n content\n }\n ...ChatRoomHeaderFragment\n ...MessagesListFragment\n}\n', }, } })() diff --git a/packages/components/modules/messages/ChatRoom/ChatRoomHeader/index.tsx b/packages/components/modules/messages/ChatRoom/ChatRoomHeader/index.tsx new file mode 100644 index 00000000..2fe2b2ff --- /dev/null +++ b/packages/components/modules/messages/ChatRoom/ChatRoomHeader/index.tsx @@ -0,0 +1,62 @@ +import { FC } from 'react' + +import { + AvatarWithPlaceholder, + IconButton, + Iconify, + useResponsive, +} from '@baseapp-frontend/design-system' + +import { Box, Typography } from '@mui/material' +import { useFragment } from 'react-relay' + +import { useChatRoom } from '../../context' +import { ChatRoomHeaderFragment } from '../../graphql/queries/ChatRoomHeaderFragment' +import { useNameAndAvatar } from '../../utils' +import { ChatHeaderContainer } from './styled' +import { ChatRoomHeaderProps } from './types' +import { getSubtitle } from './utils' + +const ChatRoomHeader: FC = ({ roomHeaderRef }) => { + const roomHeader = useFragment(ChatRoomHeaderFragment, roomHeaderRef) + + const isUpToMd = useResponsive('up', 'md') + const { resetChatRoom } = useChatRoom() + + const { title, avatar } = useNameAndAvatar(roomHeader) + const subtitle = getSubtitle(roomHeader) + return ( + + {isUpToMd ? ( +
+ ) : ( + + + + )} + + + + {title} + + {subtitle && ( + + {subtitle} + + )} + + + ) +} + +export default ChatRoomHeader diff --git a/packages/components/modules/messages/ChatRoom/ChatRoomHeader/styled.tsx b/packages/components/modules/messages/ChatRoom/ChatRoomHeader/styled.tsx new file mode 100644 index 00000000..44ec1816 --- /dev/null +++ b/packages/components/modules/messages/ChatRoom/ChatRoomHeader/styled.tsx @@ -0,0 +1,16 @@ +import { Box } from '@mui/material' +import { styled } from '@mui/material/styles' + +export const ChatHeaderContainer = styled(Box)(({ theme }) => ({ + alignItems: 'center', + borderRadius: 0, + display: 'grid', + gap: theme.spacing(1.5), + gridTemplateColumns: 'min-content min-content 1fr', + height: '56px', + padding: `0 ${theme.spacing(2)}`, + width: '100%', + [theme.breakpoints.down('md')]: { + borderTop: `1px ${theme.palette.divider} solid`, + }, +})) diff --git a/packages/components/modules/messages/ChatRoom/ChatRoomHeader/types.ts b/packages/components/modules/messages/ChatRoom/ChatRoomHeader/types.ts new file mode 100644 index 00000000..783bad34 --- /dev/null +++ b/packages/components/modules/messages/ChatRoom/ChatRoomHeader/types.ts @@ -0,0 +1,5 @@ +import { ChatRoomHeaderFragment$key } from '../../../../__generated__/ChatRoomHeaderFragment.graphql' + +export interface ChatRoomHeaderProps { + roomHeaderRef: ChatRoomHeaderFragment$key +} diff --git a/packages/components/modules/messages/ChatRoom/ChatRoomHeader/utils.ts b/packages/components/modules/messages/ChatRoom/ChatRoomHeader/utils.ts new file mode 100644 index 00000000..648508c4 --- /dev/null +++ b/packages/components/modules/messages/ChatRoom/ChatRoomHeader/utils.ts @@ -0,0 +1,12 @@ +import { ChatRoomHeaderFragment$data } from '../../../../__generated__/ChatRoomHeaderFragment.graphql' +import { getParticipantCount, isGroupChat } from '../../utils' + +export const getSubtitle = (roomHeader: ChatRoomHeaderFragment$data) => { + if (isGroupChat(roomHeader)) { + const participantCount = getParticipantCount(roomHeader) + if (participantCount !== undefined) { + return `${participantCount} member${participantCount !== 1 ? 's' : ''}` + } + } + return null +} diff --git a/packages/components/modules/messages/ChatRoom/index.tsx b/packages/components/modules/messages/ChatRoom/index.tsx index 3969bbba..10790295 100644 --- a/packages/components/modules/messages/ChatRoom/index.tsx +++ b/packages/components/modules/messages/ChatRoom/index.tsx @@ -13,7 +13,8 @@ import DefaultMessagesList from '../MessagesList' import DefaultSendMessage from '../SendMessage' import { useReadMessageMutation } from '../graphql/mutations/ReadMessages' import { ChatRoomQuery } from '../graphql/queries/ChatRoomQuery' -import { ChatRoomContainer } from './styled' +import ChatRoomHeader from './ChatRoomHeader' +import { ChatBodyContainer, ChatRoomContainer } from './styled' import { ChatRoomProps } from './types' const ChatRoom: FC = ({ @@ -71,10 +72,13 @@ const ChatRoom: FC = ({ return ( - - - - + + + + + + + ) } diff --git a/packages/components/modules/messages/ChatRoom/styled.tsx b/packages/components/modules/messages/ChatRoom/styled.tsx index 038125db..607802d1 100644 --- a/packages/components/modules/messages/ChatRoom/styled.tsx +++ b/packages/components/modules/messages/ChatRoom/styled.tsx @@ -1,12 +1,17 @@ import { Box } from '@mui/material' import { alpha, styled } from '@mui/material/styles' -export const ChatRoomContainer = styled(Box)(({ theme }) => ({ +export const ChatRoomContainer = styled(Box)(() => ({ + display: 'grid', + gridTemplateRows: 'min-content 1fr', + height: '100%', + width: '100%', +})) + +export const ChatBodyContainer = styled(Box)(({ theme }) => ({ backgroundColor: alpha(theme.palette.grey[500], 0.12), - border: `1px solid ${theme.palette.grey[200]}`, - borderTopLeftRadius: 0, - borderTopRightRadius: theme.spacing(2), - borderBottomLeftRadius: 0, + borderTop: `1px ${theme.palette.divider} solid`, + borderRadius: 0, borderBottomRightRadius: theme.spacing(2), display: 'grid', gap: theme.spacing(2), @@ -15,7 +20,6 @@ export const ChatRoomContainer = styled(Box)(({ theme }) => ({ paddingLeft: theme.spacing(2), width: '100%', [theme.breakpoints.down('md')]: { - borderTopRightRadius: 0, borderBottomRightRadius: 0, }, })) diff --git a/packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx b/packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx index 0e53a768..07dcdb08 100644 --- a/packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx +++ b/packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx @@ -12,11 +12,13 @@ import { Box, Badge as DefaultBadge, Typography } from '@mui/material' import { ConnectionHandler, useFragment } from 'react-relay' import { RecordSourceSelectorProxy } from 'relay-runtime' +import { ChatRoomHeaderFragment$key } from '../../../../__generated__/ChatRoomHeaderFragment.graphql' import { RoomFragment$key } from '../../../../__generated__/RoomFragment.graphql' import ActionsOverlay from '../../../__shared__/ActionsOverlay' -import { MINIMUM_AMOUNT_OF_PARTICIPANTS_TO_SHOW_ROOM_TITLE } from '../../constants' import { useArchiveChatRoomMutation } from '../../graphql/mutations/ArchiveChatRoom' +import { ChatRoomHeaderFragment } from '../../graphql/queries/ChatRoomHeaderFragment' import { RoomFragment } from '../../graphql/queries/Room' +import { useNameAndAvatar } from '../../utils' import { StyledChatCard } from './styled' import { ChatRoomItemProps } from './types' import { formatDate } from './utils' @@ -41,21 +43,8 @@ const ChatRoomItem: FC = ({ const { currentProfile } = useCurrentProfile() - const roomData = { - title: room.title, - avatarUrl: room.image?.url, - } - - if ( - room.participants?.totalCount && - room.participants?.totalCount < MINIMUM_AMOUNT_OF_PARTICIPANTS_TO_SHOW_ROOM_TITLE - ) { - const otherParticipant = room.participants.edges.find( - (edge) => edge?.node?.profile?.id && edge?.node?.profile?.id !== currentProfile?.id, - ) - roomData.title = otherParticipant?.node?.profile?.name - roomData.avatarUrl = otherParticipant?.node?.profile?.image?.url - } + const header = useFragment(ChatRoomHeaderFragment, room) + const { title, avatar } = useNameAndAvatar(header) const lastMessage = room.lastMessage?.content const { lastMessageTime } = room @@ -126,10 +115,10 @@ const ChatRoomItem: FC = ({ sx={{ alignSelf: 'center', justifySelf: 'center' }} width={48} height={48} - src={roomData.avatarUrl} + src={avatar} /> - {roomData.title} + {title} {lastMessage && lastMessageTime ? ( chatRoom.title !== null + +export const getParticipantCount = (chatRoom: ChatRoomHeaderFragment$data) => + chatRoom.participants?.edges.length + +export const useNameAndAvatar = (roomHeader: ChatRoomHeaderFragment$data) => { + const { currentProfile } = useCurrentProfile() + if (isGroupChat(roomHeader)) { + return { + title: roomHeader.title, + avatar: roomHeader.image?.url, + } + } + const participantCount = getParticipantCount(roomHeader) + if (participantCount !== 2) { + return { + title: 'Error. Cannot generate title', + } + } + if (!roomHeader.participants) { + return { + title: 'Error. Chat room has no participants', + } + } + + const otherParticipant = roomHeader.participants.edges.find( + (edge) => edge?.node?.profile?.id && edge?.node?.profile?.id !== currentProfile?.id, + ) + return { + title: otherParticipant?.node?.profile?.name, + avatar: otherParticipant?.node?.profile?.image?.url, + } +} diff --git a/packages/components/package.json b/packages/components/package.json index a04f67f6..9be357ff 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": "0.0.32", + "version": "0.0.33", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false,