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

e2eTests/newUser.e2e.ts

@@ -54,10 +54,4 @@ test('User can create new community, register and send few messages to general c
   const messageGroupContent = messagesGroup.find('p').withAttribute('data-testid', /messagesGroupContent-/)
   await t.expect(messageGroupContent.exists).ok()
   await t.expect(messageGroupContent.textContent).eql('Hello\xa0everyone')
-
-  // Send second message, should appear in the same messages group
-  await t.typeText(messageInput, 'Welcome')
-  await t.pressKey('enter')
-  await t.expect(messagesGroup.count).eql(1)
-  await t.expect(messageGroupContent.textContent).eql('Hello\xa0everyone\nWelcome')
 })

package.json

@@ -229,7 +229,7 @@
     "@types/ps-node": "^0.1.0",
     "@types/redux-debounced": "^0.2.19",
     "@zbayapp/identity": "^3.3.3",
-    "@zbayapp/nectar": "^1.19.2",
+    "@zbayapp/nectar": "^1.20.0",
     "asn1js": "^2.1.1",
     "async": "^3.1.0",
     "atob": "^2.1.2",

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

@@ -7,45 +7,56 @@ import ChannelComponent, { ChannelComponentProps } from './Channel'
 import { DisplayableMessage } from '@zbayapp/nectar'
 
 const Template: ComponentStory<typeof ChannelComponent> = args => {
-  const [messages, setMessages] = useState<DisplayableMessage[]>([
-    {
-      id: 'id',
-      type: 1,
-      message: 'Hello',
-      createdAt: '0',
-      nickname: 'holmes'
-    },
-    {
-      id: 'id',
-      type: 1,
-      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.',
-      createdAt: '0',
-      nickname: 'holmes'
-    },
-    {
-      id: 'id',
-      type: 1,
-      message: 'Great, thanks!',
-      createdAt: '0',
-      nickname: 'bartek'
-    }
-  ])
+  const [messages, _setMessages] = useState<{ [day: string]: DisplayableMessage[][] }>({
+    '28 Oct': [
+      [
+        {
+          id: '1',
+          type: 1,
+          message: 'Hello',
+          createdAt: 0,
+          date: '28 Oct, 10:00',
+          nickname: 'holmes'
+        },
+        {
+          id: '2',
+          type: 1,
+          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.",
+          createdAt: 0,
+          date: '28 Oct, 10:01',
+          nickname: 'holmes'
+        }
+      ],
+      [
+        {
+          id: '3',
+          type: 1,
+          message: 'Great, thanks!',
+          createdAt: 0,
+          date: '28 Oct, 10:02',
+          nickname: 'bartek'
+        }
+      ]
+    ],
+    Today: [
+      [
+        {
+          id: '4',
+          type: 1,
+          message: 'Luck, I am your father!',
+          createdAt: 0,
+          date: '12:40',
+          nickname: 'wiktor'
+        }
+      ]
+    ]
+  })
 
-  const sendMessage = useCallback((message: string) => {
-    const displayableMessage = {
-      id: 'id',
-      type: 1,
-      message: message,
-      createdAt: '0',
-      nickname: 'wiktor'
-    }
-    setMessages(messages => [...messages, displayableMessage])
-  }, [])
+  const sendMessage = useCallback((_message: string) => {}, [])
+
+  args.messages = messages
 
-  args.messages = [{
-    day: 'Today',
-    messages: messages
-  }]
   args.onInputEnter = sendMessage
 
   return <ChannelComponent {...args} />
@@ -90,21 +101,21 @@ const args: ChannelComponentProps = {
   },
   channelSettingsModal: {
     open: false,
-    handleOpen: function (_args?: any): any { },
-    handleClose: function (): any { }
+    handleOpen: function (_args?: any): any {},
+    handleClose: function (): any {}
   },
   channelInfoModal: {
     open: false,
-    handleOpen: function (_args?: any): any { },
-    handleClose: function (): any { }
+    handleOpen: function (_args?: any): any {},
+    handleClose: function (): any {}
   },
-  messages: [],
-  onDelete: function (): void { },
-  onInputChange: function (_value: string): void { },
-  onInputEnter: function (_message: string): void { },
+  messages: {},
+  onDelete: function (): void {},
+  onInputChange: function (_value: string): void {},
+  onInputEnter: function (_message: string): void {},
   mutedFlag: false,
   notificationFilter: '',
-  openNotificationsTab: function (): void { }
+  openNotificationsTab: function (): void {}
 }
 
 Component.args = args

src/renderer/components/pages/Channel.tsx

@@ -12,9 +12,8 @@ import ChannelInputComponent from '../widgets/channels/ChannelInput'
 
 import { useModal } from '../../containers/hooks'
 
-import { IChannelInfo } from '@zbayapp/nectar'
+import { DisplayableMessage, PublicChannel } from '@zbayapp/nectar'
 import { Identity } from '@zbayapp/nectar/lib/sagas/identity/identity.slice'
-import { MessagesGroupedByDay } from '@zbayapp/nectar/lib/sagas/publicChannels/publicChannels.types'
 
 const useStyles = makeStyles(theme => ({
   root: {},
@@ -26,10 +25,10 @@ const useStyles = makeStyles(theme => ({
 
 export interface ChannelComponentProps {
   user: Identity
-  channel: IChannelInfo
+  channel: PublicChannel
   channelSettingsModal: ReturnType<typeof useModal>
   channelInfoModal: ReturnType<typeof useModal>
-  messages: MessagesGroupedByDay
+  messages: { [date: string]: DisplayableMessage[][] }
   onDelete: () => void
   onInputChange: (value: string) => void
   onInputEnter: (message: string) => void

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

@@ -1,12 +1,12 @@
 import React from 'react'
-import { IChannelInfo } from '@zbayapp/nectar'
+import { PublicChannel } from '@zbayapp/nectar'
 
 import List from '@material-ui/core/List'
 
 import ChannelsListItem from '../../../containers/widgets/channels/ChannelsListItem'
 
 interface BaseChannelsListProps {
-  channels: IChannelInfo[]
+  channels: PublicChannel[]
   directMessages?: boolean
   selected: string
 }

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

@@ -19,13 +19,14 @@ describe('BasicMessage', () => {
       id: 'string',
       type: 1,
       message: 'string',
-      createdAt: 'string',
+      createdAt: 0,
+      date: 'string',
       nickname: 'string'
     }
     const result = renderComponent(
       <HashRouter>
         <Provider store={store}>
-          <BasicMessageComponent message={message} />
+          <BasicMessageComponent messages={[message]} />
         </Provider>
       </HashRouter>
     )
@@ -42,10 +43,10 @@ describe('BasicMessage', () => {
                 class="MuiGrid-root MuiGrid-container MuiGrid-wrap-xs-nowrap MuiGrid-align-items-xs-flex-start"
               >
                 <div
-                  class="MuiGrid-root makeStyles-avatar-10 MuiGrid-item"
+                  class="MuiGrid-root makeStyles-avatar-9 MuiGrid-item"
                 >
                   <div
-                    class="makeStyles-alignAvatar-11"
+                    class="makeStyles-alignAvatar-10"
                   >
                     Jdenticon
                   </div>
@@ -72,22 +73,26 @@ describe('BasicMessage', () => {
                         class="MuiGrid-root MuiGrid-item"
                       >
                         <p
-                          class="MuiTypography-root makeStyles-time-13 MuiTypography-body1"
+                          class="MuiTypography-root makeStyles-time-12 MuiTypography-body1"
                         >
                           string
                         </p>
                       </div>
                     </div>
                   </div>
                   <div
-                    class="MuiGrid-root MuiGrid-item"
+                    class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column"
                   >
-                    <p
-                      class="MuiTypography-root makeStyles-message-6 MuiTypography-body1"
-                      data-testid="messagesGroupContent-string"
+                    <div
+                      class="MuiGrid-root makeStyles-firstMessage-165 MuiGrid-item"
                     >
-                      string
-                    </p>
+                      <p
+                        class="MuiTypography-root makeStyles-message-164 MuiTypography-body1"
+                        data-testid="messagesGroupContent-string"
+                      >
+                        string
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>

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

@@ -14,6 +14,7 @@ import Jdenticon from 'react-jdenticon'
 // import SendMessagePopover from '../../../containers/widgets/channels/SendMessagePopover'
 
 import { DisplayableMessage } from '@zbayapp/nectar'
+import { NestedMessageContent } from './NestedMessageContent'
 
 const useStyles = makeStyles((theme: Theme) => ({
   messageCard: {
@@ -34,12 +35,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginTop: -4,
     marginRight: 5
   },
-  message: {
-    marginTop: '-3px',
-    fontSize: '0.855rem',
-    whiteSpace: 'pre-line',
-    lineHeight: '21px'
-  },
   statusIcon: {
     color: theme.palette.colors.lightGray,
     fontSize: 21,
@@ -90,13 +85,13 @@ export const transformToLowercase = (string: string) => {
 }
 
 export interface BasicMessageProps {
-  message: DisplayableMessage
+  messages: DisplayableMessage[]
   // setActionsOpen: (open: boolean) => void
   // actionsOpen: boolean
   // allowModeration?: boolean
 }
 
-export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ message }) => {
+export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ messages }) => {
   const classes = useStyles({})
 
   // const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null)
@@ -109,6 +104,8 @@ export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ message })
 
   // const handleClose = () => setAnchorEl(null)
 
+  const messageDisplayData = messages[0]
+
   return (
     <ListItem
       className={classNames({
@@ -136,7 +133,7 @@ export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ message })
             /> */}
             <Grid item className={classes.avatar}>
               <div className={classes.alignAvatar}>
-                <Jdenticon size='32' value={message.nickname} />
+                <Jdenticon size='32' value={messageDisplayData.nickname} />
               </div>
             </Grid>
             <Grid container item direction='row'>
@@ -151,12 +148,12 @@ export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ message })
                 >
                   <Grid item>
                     <Typography color='textPrimary' className={classes.username}>
-                      {message.nickname}
+                      {messageDisplayData.nickname}
                     </Typography>
                   </Grid>
                   {status !== 'failed' && (
                     <Grid item>
-                      <Typography className={classes.time}>{message.createdAt}</Typography>
+                      <Typography className={classes.time}>{messageDisplayData.date}</Typography>
                     </Grid>
                   )}
                 </Grid>
@@ -186,8 +183,10 @@ export const BasicMessageComponent: React.FC<BasicMessageProps> = ({ message })
                 </ClickAwayListener>
               )} */}
               </Grid>
-              <Grid item>
-                <Typography className={classes.message} data-testid={`messagesGroupContent-${message.id}`}>{message.message}</Typography>
+              <Grid container direction='column'>
+                {messages.map((message, index) => {
+                  return <NestedMessageContent message={message} index={index} />
+                })}
               </Grid>
             </Grid>
           </Grid>

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

@@ -13,7 +13,7 @@ import silencedBlack from '../../../static/images/silencedBlack.svg'
 import Tooltip from '../../ui/Tooltip/Tooltip'
 import ChannelMenuActionComponent, { ChannelMenuActionProps } from './ChannelMenuAction'
 
-import { IChannelInfo } from '@zbayapp/nectar'
+import { PublicChannel } from '@zbayapp/nectar'
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -87,7 +87,7 @@ const useStyles = makeStyles(theme => ({
 }))
 
 export interface ChannelHeaderProps {
-  channel: IChannelInfo
+  channel: PublicChannel
 }
 
 export const ChannelHeaderComponent: React.FC<ChannelHeaderProps & ChannelMenuActionProps> = ({