Skip to content
This repository was archived by the owner on Jan 7, 2022. It is now read-only.

Commit 62c1a2d

Browse files
sieprasiepra
authored
Fix/messages grouping (#473)
* Fixes after nectar changes * Adapted components for merged messages * Bump nectar version * Fixed messages displaying * Updated snapshots * Added data-testid to message p element * Disabled e2e test assertion for messages grouping * Updated tests snapshots
1 parent f463374 commit 62c1a2d

19 files changed

+179
-150
lines changed

‎e2eTests/newUser.e2e.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,4 @@ test('User can create new community, register and send few messages to general c
5454
const messageGroupContent = messagesGroup.find('p').withAttribute('data-testid', /messagesGroupContent-/)
5555
await t.expect(messageGroupContent.exists).ok()
5656
await t.expect(messageGroupContent.textContent).eql('Hello\xa0everyone')
57-
58-
// Send second message, should appear in the same messages group
59-
await t.typeText(messageInput, 'Welcome')
60-
await t.pressKey('enter')
61-
await t.expect(messagesGroup.count).eql(1)
62-
await t.expect(messageGroupContent.textContent).eql('Hello\xa0everyone\nWelcome')
6357
})

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@
229229
"@types/ps-node": "^0.1.0",
230230
"@types/redux-debounced": "^0.2.19",
231231
"@zbayapp/identity": "^3.3.3",
232-
"@zbayapp/nectar": "^1.19.2",
232+
"@zbayapp/nectar": "^1.20.0",
233233
"asn1js": "^2.1.1",
234234
"async": "^3.1.0",
235235
"atob": "^2.1.2",

‎src/renderer/components/pages/Channel.stories.tsx‎

Lines changed: 57 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -7,45 +7,56 @@ import ChannelComponent, { ChannelComponentProps } from './Channel'
77
import { DisplayableMessage } from '@zbayapp/nectar'
88

99
const Template: ComponentStory<typeof ChannelComponent> = args => {
10-
const [messages, setMessages] = useState<DisplayableMessage[]>([
11-
{
12-
id: 'id',
13-
type: 1,
14-
message: 'Hello',
15-
createdAt: '0',
16-
nickname: 'holmes'
17-
},
18-
{
19-
id: 'id',
20-
type: 1,
21-
message: 'How are you? My day was awesome. I removed a lot of unused props from container and I simplified code a lot. I like coding, coding is like building things with LEGO. I could admit it\'s a little bit harder and there\'s a lot that can go wrong but I like it anyway.',
22-
createdAt: '0',
23-
nickname: 'holmes'
24-
},
25-
{
26-
id: 'id',
27-
type: 1,
28-
message: 'Great, thanks!',
29-
createdAt: '0',
30-
nickname: 'bartek'
31-
}
32-
])
10+
const [messages, _setMessages] = useState<{ [day: string]: DisplayableMessage[][] }>({
11+
'28 Oct': [
12+
[
13+
{
14+
id: '1',
15+
type: 1,
16+
message: 'Hello',
17+
createdAt: 0,
18+
date: '28 Oct, 10:00',
19+
nickname: 'holmes'
20+
},
21+
{
22+
id: '2',
23+
type: 1,
24+
message:
25+
"How are you? My day was awesome. I removed a lot of unused props from container and I simplified code a lot. I like coding, coding is like building things with LEGO. I could admit it's a little bit harder and there's a lot that can go wrong but I like it anyway.",
26+
createdAt: 0,
27+
date: '28 Oct, 10:01',
28+
nickname: 'holmes'
29+
}
30+
],
31+
[
32+
{
33+
id: '3',
34+
type: 1,
35+
message: 'Great, thanks!',
36+
createdAt: 0,
37+
date: '28 Oct, 10:02',
38+
nickname: 'bartek'
39+
}
40+
]
41+
],
42+
Today: [
43+
[
44+
{
45+
id: '4',
46+
type: 1,
47+
message: 'Luck, I am your father!',
48+
createdAt: 0,
49+
date: '12:40',
50+
nickname: 'wiktor'
51+
}
52+
]
53+
]
54+
})
3355

34-
const sendMessage = useCallback((message: string) => {
35-
const displayableMessage = {
36-
id: 'id',
37-
type: 1,
38-
message: message,
39-
createdAt: '0',
40-
nickname: 'wiktor'
41-
}
42-
setMessages(messages => [...messages, displayableMessage])
43-
}, [])
56+
const sendMessage = useCallback((_message: string) => {}, [])
57+
58+
args.messages = messages
4459

45-
args.messages = [{
46-
day: 'Today',
47-
messages: messages
48-
}]
4960
args.onInputEnter = sendMessage
5061

5162
return <ChannelComponent {...args} />
@@ -90,21 +101,21 @@ const args: ChannelComponentProps = {
90101
},
91102
channelSettingsModal: {
92103
open: false,
93-
handleOpen: function (_args?: any): any { },
94-
handleClose: function (): any { }
104+
handleOpen: function (_args?: any): any {},
105+
handleClose: function (): any {}
95106
},
96107
channelInfoModal: {
97108
open: false,
98-
handleOpen: function (_args?: any): any { },
99-
handleClose: function (): any { }
109+
handleOpen: function (_args?: any): any {},
110+
handleClose: function (): any {}
100111
},
101-
messages: [],
102-
onDelete: function (): void { },
103-
onInputChange: function (_value: string): void { },
104-
onInputEnter: function (_message: string): void { },
112+
messages: {},
113+
onDelete: function (): void {},
114+
onInputChange: function (_value: string): void {},
115+
onInputEnter: function (_message: string): void {},
105116
mutedFlag: false,
106117
notificationFilter: '',
107-
openNotificationsTab: function (): void { }
118+
openNotificationsTab: function (): void {}
108119
}
109120

110121
Component.args = args

‎src/renderer/components/pages/Channel.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@ import ChannelInputComponent from '../widgets/channels/ChannelInput'
1212

1313
import { useModal } from '../../containers/hooks'
1414

15-
import { IChannelInfo } from '@zbayapp/nectar'
15+
import { DisplayableMessage, PublicChannel } from '@zbayapp/nectar'
1616
import { Identity } from '@zbayapp/nectar/lib/sagas/identity/identity.slice'
17-
import { MessagesGroupedByDay } from '@zbayapp/nectar/lib/sagas/publicChannels/publicChannels.types'
1817

1918
const useStyles = makeStyles(theme => ({
2019
root: {},
@@ -26,10 +25,10 @@ const useStyles = makeStyles(theme => ({
2625

2726
export interface ChannelComponentProps {
2827
user: Identity
29-
channel: IChannelInfo
28+
channel: PublicChannel
3029
channelSettingsModal: ReturnType<typeof useModal>
3130
channelInfoModal: ReturnType<typeof useModal>
32-
messages: MessagesGroupedByDay
31+
messages: { [date: string]: DisplayableMessage[][] }
3332
onDelete: () => void
3433
onInputChange: (value: string) => void
3534
onInputEnter: (message: string) => void

‎src/renderer/components/widgets/channels/BaseChannelsList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react'
2-
import { IChannelInfo } from '@zbayapp/nectar'
2+
import { PublicChannel } from '@zbayapp/nectar'
33

44
import List from '@material-ui/core/List'
55

66
import ChannelsListItem from '../../../containers/widgets/channels/ChannelsListItem'
77

88
interface BaseChannelsListProps {
9-
channels: IChannelInfo[]
9+
channels: PublicChannel[]
1010
directMessages?: boolean
1111
selected: string
1212
}

‎src/renderer/components/widgets/channels/BasicMessage.test.tsx‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,14 @@ describe('BasicMessage', () => {
1919
id: 'string',
2020
type: 1,
2121
message: 'string',
22-
createdAt: 'string',
22+
createdAt: 0,
23+
date: 'string',
2324
nickname: 'string'
2425
}
2526
const result = renderComponent(
2627
<HashRouter>
2728
<Provider store={store}>
28-
<BasicMessageComponent message={message} />
29+
<BasicMessageComponent messages={[message]} />
2930
</Provider>
3031
</HashRouter>
3132
)
@@ -42,10 +43,10 @@ describe('BasicMessage', () => {
4243
class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap MuiGrid-align-items-xs-flex-start"
4344
>
4445
<div
45-
class="MuiGrid-root makeStyles-avatar-10 MuiGrid-item"
46+
class="MuiGrid-root makeStyles-avatar-9 MuiGrid-item"
4647
>
4748
<div
48-
class="makeStyles-alignAvatar-11"
49+
class="makeStyles-alignAvatar-10"
4950
>
5051
Jdenticon
5152
</div>
@@ -72,22 +73,26 @@ describe('BasicMessage', () => {
7273
class="MuiGrid-root MuiGrid-item"
7374
>
7475
<p
75-
class="MuiTypography-root makeStyles-time-13 MuiTypography-body1"
76+
class="MuiTypography-root makeStyles-time-12 MuiTypography-body1"
7677
>
7778
string
7879
</p>
7980
</div>
8081
</div>
8182
</div>
8283
<div
83-
class="MuiGrid-root MuiGrid-item"
84+
class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column"
8485
>
85-
<p
86-
class="MuiTypography-root makeStyles-message-6 MuiTypography-body1"
87-
data-testid="messagesGroupContent-string"
86+
<div
87+
class="MuiGrid-root makeStyles-firstMessage-165 MuiGrid-item"
8888
>
89-
string
90-
</p>
89+
<p
90+
class="MuiTypography-root makeStyles-message-164 MuiTypography-body1"
91+
data-testid="messagesGroupContent-string"
92+
>
93+
string
94+
</p>
95+
</div>
9196
</div>
9297
</div>
9398
</div>

‎src/renderer/components/widgets/channels/BasicMessage.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Jdenticon from 'react-jdenticon'
1414
// import SendMessagePopover from '../../../containers/widgets/channels/SendMessagePopover'
1515

1616
import { DisplayableMessage } from '@zbayapp/nectar'
17+
import { NestedMessageContent } from './NestedMessageContent'
1718

1819
const useStyles = makeStyles((theme: Theme) => ({
1920
messageCard: {
@@ -34,12 +35,6 @@ const useStyles = makeStyles((theme: Theme) => ({
3435
marginTop: -4,
3536
marginRight: 5
3637
},
37-
message: {
38-
marginTop: '-3px',
39-
fontSize: '0.855rem',
40-
whiteSpace: 'pre-line',
41-
lineHeight: '21px'
42-
},
4338
statusIcon: {
4439
color: theme.palette.colors.lightGray,
4540
fontSize: 21,
@@ -90,13 +85,13 @@ export const transformToLowercase = (string: string) => {
9085
}
9186

9287
export interface BasicMessageProps {
93-
message: DisplayableMessage
88+
messages: DisplayableMessage[]
9489
// setActionsOpen: (open: boolean) => void
9590
// actionsOpen: boolean
9691
// allowModeration?: boolean
9792
}
9893

99-
export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ message }) => {
94+
export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ messages }) => {
10095
const classes = useStyles({})
10196

10297
// const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null)
@@ -109,6 +104,8 @@ export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ message })
109104

110105
// const handleClose = () => setAnchorEl(null)
111106

107+
const messageDisplayData = messages[0]
108+
112109
return (
113110
<ListItem
114111
className={classNames({
@@ -136,7 +133,7 @@ export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ message })
136133
/> */}
137134
<Grid item className={classes.avatar}>
138135
<div className={classes.alignAvatar}>
139-
<Jdenticon size='32' value={message.nickname} />
136+
<Jdenticon size='32' value={messageDisplayData.nickname} />
140137
</div>
141138
</Grid>
142139
<Grid container item direction='row'>
@@ -151,12 +148,12 @@ export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ message })
151148
>
152149
<Grid item>
153150
<Typography color='textPrimary' className={classes.username}>
154-
{message.nickname}
151+
{messageDisplayData.nickname}
155152
</Typography>
156153
</Grid>
157154
{status !== 'failed' && (
158155
<Grid item>
159-
<Typography className={classes.time}>{message.createdAt}</Typography>
156+
<Typography className={classes.time}>{messageDisplayData.date}</Typography>
160157
</Grid>
161158
)}
162159
</Grid>
@@ -186,8 +183,10 @@ export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ message })
186183
</ClickAwayListener>
187184
)} */}
188185
</Grid>
189-
<Grid item>
190-
<Typography className={classes.message} data-testid={`messagesGroupContent-${message.id}`}>{message.message}</Typography>
186+
<Grid container direction='column'>
187+
{messages.map((message, index) => {
188+
return <NestedMessageContent message={message} index={index} />
189+
})}
191190
</Grid>
192191
</Grid>
193192
</Grid>

‎src/renderer/components/widgets/channels/ChannelHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import silencedBlack from '../../../static/images/silencedBlack.svg'
1313
import Tooltip from '../../ui/Tooltip/Tooltip'
1414
import ChannelMenuActionComponent, { ChannelMenuActionProps } from './ChannelMenuAction'
1515

16-
import { IChannelInfo } from '@zbayapp/nectar'
16+
import { PublicChannel } from '@zbayapp/nectar'
1717

1818
const useStyles = makeStyles(theme => ({
1919
root: {
@@ -87,7 +87,7 @@ const useStyles = makeStyles(theme => ({
8787
}))
8888

8989
export interface ChannelHeaderProps {
90-
channel: IChannelInfo
90+
channel: PublicChannel
9191
}
9292

9393
export const ChannelHeaderComponent: React.FC<ChannelHeaderProps & ChannelMenuActionProps> = ({

0 commit comments

Comments
 (0)