Format all files with no breaking changes
Lint all files using `npm run lint -- --fix`.
Format all files using `prettier --write "**/*.{ts,tsx,js,jsx,json}"`
No breaking change, only code style is modified.
Gitlab: #29
Change-Id: I4f034a7fb4d3eea10bcd3e38b44a65a1046de62f
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index a6084a7..0dc4975 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,30 +1,31 @@
-import dayjs from "dayjs"
-import { useMemo } from 'react'
-import dayOfYear from 'dayjs/plugin/dayOfYear'
-import isBetween from 'dayjs/plugin/isBetween'
-import { Stack } from "@mui/system"
-import { MessageCall, MessageDate, MessageInitial, MessageMember, MessageBubblesGroup, MessageTime, MessageMerge } from "./Message"
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import dayOfYear from 'dayjs/plugin/dayOfYear';
+import isBetween from 'dayjs/plugin/isBetween';
+import { Stack } from '@mui/system';
+import {
+ MessageCall,
+ MessageDate,
+ MessageInitial,
+ MessageMember,
+ MessageBubblesGroup,
+ MessageTime,
+ MessageMerge,
+} from './Message';
-dayjs.extend(dayOfYear)
-dayjs.extend(isBetween)
+dayjs.extend(dayOfYear);
+dayjs.extend(isBetween);
export default function MessageList(props) {
- const messagesComponents = useMemo(
- () => buildMessagesList(props.messages),
- [props.messages]
- )
+ const messagesComponents = useMemo(() => buildMessagesList(props.messages), [props.messages]);
return (
- <Stack
- marginLeft="16px"
- marginRight="16px"
- direction="column-reverse"
- >
- {messagesComponents?.map(
- ({Component, id, props}) => <Component key={id} {...props}/>
- )}
+ <Stack marginLeft="16px" marginRight="16px" direction="column-reverse">
+ {messagesComponents?.map(({ Component, id, props }) => (
+ <Component key={id} {...props} />
+ ))}
</Stack>
- )
+ );
}
const buildMessagesList = (messages) => {
@@ -32,124 +33,125 @@
return null;
}
- const components = []
- let lastTime = dayjs.unix(messages[0].timestamp)
- let lastAuthor = messages[0].author
- let messageBubblesGroup = []
+ const components = [];
+ let lastTime = dayjs.unix(messages[0].timestamp);
+ let lastAuthor = messages[0].author;
+ let messageBubblesGroup = [];
const pushMessageBubblesGroup = () => {
if (messageBubblesGroup.length == 0) {
- return
+ return;
}
components.push({
id: `group-${messageBubblesGroup[0].id}`,
Component: MessageBubblesGroup,
props: { messages: messageBubblesGroup },
- })
- messageBubblesGroup = []
- }
+ });
+ messageBubblesGroup = [];
+ };
const pushMessageCall = (message) => {
components.push({
id: `call-${message.id}`,
Component: MessageCall,
props: { message },
- })
- }
+ });
+ };
const pushMessageMember = (message) => {
components.push({
id: `member-${message.id}`,
Component: MessageMember,
props: { message },
- })
- }
+ });
+ };
const pushMessageMerge = (message) => {
components.push({
id: `merge-${message.id}`,
Component: MessageMerge,
props: { message },
- })
- }
+ });
+ };
- const pushMessageTime = (message, time, hasDateOnTop=false) => {
+ const pushMessageTime = (message, time, hasDateOnTop = false) => {
components.push({
id: `time-${message.id}`,
Component: MessageTime,
props: { time, hasDateOnTop },
- })
- }
+ });
+ };
const pushMessageDate = (message, time) => {
components.push({
id: `date-${message.id}`,
Component: MessageDate,
- props: { time }
- })
- }
+ props: { time },
+ });
+ };
const pushMessageInitial = (message) => {
components.push({
id: `initial-${message.id}`,
Component: MessageInitial,
- props: { message }
- })
- }
+ props: { message },
+ });
+ };
- messages.forEach(message => { // most recent messages first
+ messages.forEach((message) => {
+ // most recent messages first
switch (message.type) {
- case "text/plain":
- case "application/data-transfer+json":
+ case 'text/plain':
+ case 'application/data-transfer+json':
if (lastAuthor != message.author) {
- pushMessageBubblesGroup()
+ pushMessageBubblesGroup();
}
- messageBubblesGroup.push(message)
- break
- case "application/call-history+json":
- pushMessageBubblesGroup()
- pushMessageCall(message)
- break
- case "member":
- pushMessageBubblesGroup()
- pushMessageMember(message)
- break
- case "merge":
- pushMessageBubblesGroup()
- pushMessageMerge(message)
- break
- case "initial":
+ messageBubblesGroup.push(message);
+ break;
+ case 'application/call-history+json':
+ pushMessageBubblesGroup();
+ pushMessageCall(message);
+ break;
+ case 'member':
+ pushMessageBubblesGroup();
+ pushMessageMember(message);
+ break;
+ case 'merge':
+ pushMessageBubblesGroup();
+ pushMessageMerge(message);
+ break;
+ case 'initial':
default:
- break
+ break;
}
- const time = dayjs.unix(message.timestamp)
- if (message.type == "initial") {
- pushMessageBubblesGroup()
- pushMessageTime(message, time, true)
- pushMessageDate(message, time)
- pushMessageInitial(message)
- }
- else {
- if ( // If the date is different
- lastTime?.year() != time.year()
- || lastTime?.dayOfYear() != time.dayOfYear()
- ) {
- pushMessageBubblesGroup()
- pushMessageTime(message, time, true)
- pushMessageDate(message, time)
- }
- else if ( // If more than 5 minutes have passed since the last message
- !lastTime.isBetween(time, time?.add(5, "minute"))
+ const time = dayjs.unix(message.timestamp);
+ if (message.type == 'initial') {
+ pushMessageBubblesGroup();
+ pushMessageTime(message, time, true);
+ pushMessageDate(message, time);
+ pushMessageInitial(message);
+ } else {
+ if (
+ // If the date is different
+ lastTime?.year() != time.year() ||
+ lastTime?.dayOfYear() != time.dayOfYear()
) {
- pushMessageBubblesGroup()
- pushMessageTime(message, time)
+ pushMessageBubblesGroup();
+ pushMessageTime(message, time, true);
+ pushMessageDate(message, time);
+ } else if (
+ // If more than 5 minutes have passed since the last message
+ !lastTime.isBetween(time, time?.add(5, 'minute'))
+ ) {
+ pushMessageBubblesGroup();
+ pushMessageTime(message, time);
}
- lastTime = time
- lastAuthor = message.author
+ lastTime = time;
+ lastAuthor = message.author;
}
- })
+ });
- return components
-}
+ return components;
+};