diff --git a/example/scripts/generateMessages.js b/example/scripts/generateMessages.js index 21f87d1..406d70e 100755 --- a/example/scripts/generateMessages.js +++ b/example/scripts/generateMessages.js @@ -25,6 +25,7 @@ const messages = [...Array(numberOfMessages)].map((_, index) => { const data = { authorId, id: uuidv4(), + status: 'read', text, timestamp, type: 'text', diff --git a/jest/fixtures.ts b/jest/fixtures.ts index 2f01b98..273d3f5 100644 --- a/jest/fixtures.ts +++ b/jest/fixtures.ts @@ -33,7 +33,6 @@ export const size: Size = { export const textMessage: MessageType.Text = { authorId: 'userId', id: 'uuidv4', - status: 'sending', text: 'text', timestamp: 0, type: 'text', diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx index 2c53645..2a88b2e 100644 --- a/src/components/Chat/Chat.tsx +++ b/src/components/Chat/Chat.tsx @@ -94,15 +94,15 @@ export const Chat = ({ // TODO: Update the logic after pagination is introduced const isFirst = index === 0 const isLast = index === messages.length - 1 - const previousMessage = messages[index - 1] - const nextMessage = messages[index + 1] + const previousMessage = isFirst ? undefined : messages[index - 1] + const nextMessage = isLast ? undefined : messages[index + 1] let nextMessageDifferentDay = false let nextMessageSameAuthor = false let previousMessageSameAuthor = false let shouldRenderTime = !!message.timestamp - if (!isLast) { + if (nextMessage) { nextMessageDifferentDay = !!message.timestamp && !dayjs @@ -111,7 +111,7 @@ export const Chat = ({ nextMessageSameAuthor = nextMessage.authorId === message.authorId } - if (!isFirst) { + if (previousMessage) { previousMessageSameAuthor = previousMessage.authorId === message.authorId shouldRenderTime = diff --git a/src/components/FileMessage/styles.ts b/src/components/FileMessage/styles.ts index d221686..52184f2 100644 --- a/src/components/FileMessage/styles.ts +++ b/src/components/FileMessage/styles.ts @@ -12,6 +12,8 @@ const styles = ({ container: { alignItems: 'center', flexDirection: 'row', + padding: 16, + paddingRight: 24, }, iconContainer: { alignItems: 'center', @@ -20,7 +22,6 @@ const styles = ({ borderRadius: 21, height: 42, justifyContent: 'center', - margin: 16, width: 42, }, name: { @@ -38,8 +39,7 @@ const styles = ({ }, textContainer: { flexShrink: 1, - marginRight: 24, - marginVertical: 16, + marginLeft: 16, }, }) diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 2c9e6ae..c3f7403 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -62,7 +62,6 @@ export const Input = ({ /* type-coverage:ignore-next-line */ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion authorId: user!.id, id: uuidv4(), - status: 'sending' as const, timestamp: Math.floor(Date.now() / 1000), } diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx index 770a776..765b92c 100644 --- a/src/components/Message/Message.tsx +++ b/src/components/Message/Message.tsx @@ -101,7 +101,7 @@ export const Message = ({ {message.status === 'sending' && ( )} - {['read', 'sent'].includes(message.status) && ( + {(message.status === 'read' || message.status === 'sent') && (