From 954425d6d38ed779838d5ea7141188ee2320ba28 Mon Sep 17 00:00:00 2001 From: Kimkyungmin123 Date: Mon, 23 May 2022 12:33:47 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EB=8C=80=ED=99=94=20=EC=8B=9C=EA=B0=84=EC=88=9C=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/chat.tsx | 36 +++++++++++++++++++++--------------- src/types.ts | 18 ++++++++++++++++++ src/utils/SortChatDate.ts | 38 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 77 insertions(+), 15 deletions(-) create mode 100644 src/utils/SortChatDate.ts diff --git a/src/pages/chat.tsx b/src/pages/chat.tsx index 2032a52..1cd14da 100644 --- a/src/pages/chat.tsx +++ b/src/pages/chat.tsx @@ -20,8 +20,9 @@ import { initUser, useUser } from 'slices/userSlice'; import SockJS from 'sockjs-client'; import styles from 'styles/Chat.module.scss'; import useSWR, { mutate } from 'swr'; -import { Message } from 'types'; +import { ChatList, Message } from 'types'; import wsInstance, { fetcher } from 'utils/wsInstance'; +import SortChatDate from 'utils/SortChatDate'; const Chat: NextPage = () => { const user = useUser(); @@ -32,8 +33,7 @@ const Chat: NextPage = () => { const [currentChatRoomId, setCurrentChatRoomId] = useState(''); const client = useRef(null); const scrollRef = useRef(null); - const [chatList, setChatList] = useState([]); - + const [chatList, setChatList] = useState([]); const { data: chatData } = useSWR( user ? `/chat/${user.nickname}/chatrooms` : null, fetcher @@ -41,21 +41,16 @@ const Chat: NextPage = () => { useEffect(() => { if (!user || !currChatUser) return; - - setChatList(chatData); - console.log(chatData); - if (currentChatRoomId) { wsInstance .get<{ messages: Message[] }>( `/chat/${user?.nickname}/chatrooms/${currentChatRoomId}` ) .then(({ data }) => { - console.log(data); setMessages(data.messages); }); } - }, [user, currChatUser, currentChatRoomId, chatList, chatData]); + }, [user, currChatUser, currentChatRoomId]); useEffect(() => { client.current = new Client({ @@ -79,13 +74,22 @@ const Chat: NextPage = () => { }); }, }); + + chatData?.sort(function (a: any, b: any) { + const firstMessageData = + a?.messages[a?.messages.length - 1]?.createdDate?.split(/[년월일:]/); + const secondMessageData = + b?.messages[b?.messages.length - 1]?.createdDate?.split(/[년월일:]/); + return SortChatDate(firstMessageData, secondMessageData); + }); + + setChatList(chatData); client.current.activate(); - console.log(messages); return () => { client.current?.deactivate(); }; - }, [user, currChatUser, currentChatRoomId, messages]); + }, [user, currChatUser, currentChatRoomId, messages, chatData, chatList]); useEffect(() => { scrollRef.current?.scrollIntoView({ behavior: 'smooth' }); @@ -118,7 +122,9 @@ const Chat: NextPage = () => { new Date().getMonth() + 1 }월 ${new Date().getDate()}일 ${('0' + new Date().getHours()).slice( -2 - )}:${('0' + new Date().getMinutes()).slice(-2)} `, + )}:${('0' + new Date().getMinutes()).slice( + -2 + )}:${new Date().getSeconds()} `, }; setMessages((prev) => [...prev, messageInfo]); @@ -134,7 +140,7 @@ const Chat: NextPage = () => {
- {chatData?.map((data: any, i: number) => ( + {chatList?.map((data: any, i: number) => ( { lastMessage={data.messages[data.messages.length - 1]?.message} sentDate={data.messages[ data.messages.length - 1 - ]?.createdDate.slice(13)} + ]?.createdDate.slice(13, 18)} senderProfileImg={data.users[1]?.image.imgUrl} /> ))} @@ -179,7 +185,7 @@ const Chat: NextPage = () => { key={i} interlocutorName={data.sender} content={data.message} - time={data.createdDate.slice(13)} + time={data.createdDate.slice(13, 18)} isMe={data.receiver === currChatUser ? true : false} isManager={ data.receiver === 'CHAT_MANAGER' ? true : false diff --git a/src/types.ts b/src/types.ts index 48a204a..ce5d045 100644 --- a/src/types.ts +++ b/src/types.ts @@ -52,6 +52,24 @@ export type Message = { createdDate: string; }; +export type ChatList = { + id: string; + leftUsers: [] | null; + messages: { + chatRoomId: string; + createdDate: string; + message: string; + receiver: string; + sender: string; + } | null; + target: string; + users: { + image: { imgName: null | string; imgUrl: null | string }; + introduction: null | string; + nickname: string; + }; +}; + export type Follower = { email: string; imgName: string | null; diff --git a/src/utils/SortChatDate.ts b/src/utils/SortChatDate.ts new file mode 100644 index 0000000..fbd5637 --- /dev/null +++ b/src/utils/SortChatDate.ts @@ -0,0 +1,38 @@ +const SortChatDate = ( + firstMessageData: string | undefined, + secondMessageData: string | undefined +) => { + if (firstMessageData && secondMessageData) { + const firstDateYear = parseInt(firstMessageData?.[0]); + const secondDateYear = parseInt(secondMessageData?.[0]); + const firstDateMonth = parseInt(firstMessageData?.[1]); + const secondDateMonth = parseInt(secondMessageData?.[1]); + const firstDateDay = parseInt(firstMessageData?.[2]); + const secondDateDay = parseInt(secondMessageData?.[2]); + const firstDateHour = parseInt(firstMessageData?.[3]); + const secondDateHour = parseInt(secondMessageData?.[3]); + const firstDateMinute = parseInt(firstMessageData?.[4]); + const secondDateMinute = parseInt(secondMessageData?.[4]); + const firstDateSecond = parseInt(firstMessageData?.[5]); + const secondDateSecond = parseInt(secondMessageData?.[5]); + + if (firstDateYear === secondDateYear) { + if (firstDateMonth === secondDateMonth) { + if (firstDateDay === secondDateDay) { + if (firstDateHour === secondDateHour) { + if (firstDateSecond === secondDateSecond) { + return secondDateSecond - firstDateSecond; + } + return secondDateMinute - firstDateMinute; + } + return secondDateHour - firstDateHour; + } + return secondDateDay - firstDateDay; + } + return secondDateMonth - firstDateMonth; + } + return secondDateYear - firstDateYear; + } +}; + +export default SortChatDate;