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') && (