[Fix] paging error 수정(#183)

my-trash-bin · Dec 16, 2023 · 09664c4 · 09664c4
1 parent cfed3a2
commit 09664c4
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 241 deletions.
diff --git a/project/frontend/src/components/dm/message/MessageBox.tsx b/project/frontend/src/components/dm/message/MessageBox.tsx
@@ -1,6 +1,4 @@
-import { ApiContext } from '@/app/_internal/provider/ApiContext';
 import useDirectMessage from '@/hooks/chat/useDirectMessage';
-import { useContext } from 'react';
 import { MessageContent, messageType } from './MessageContent';
 import { MessageSendBox } from './MessageSendBox';
 import { UserInfo } from './UserInfo';
@@ -21,6 +19,7 @@ export function MessageBox({
 
   const localMe = localStorage.getItem('me');
   const me = localMe ? JSON.parse(localMe) : null;
+  console.log(channelMessage);
   return (
     <>
       <UserInfo

diff --git a/project/frontend/src/components/dm/message/MessageContent.tsx b/project/frontend/src/components/dm/message/MessageContent.tsx
@@ -76,11 +76,13 @@ export function MessageContent({
   );
   useEffect(() => {
     setMessages(initData);
-  }, [initData]);
+  }, [initData, channelId]);
   useEffect(() => {
     scrollTargetRef.current?.scrollIntoView({ behavior: 'auto' });
   }, [messages]);
   render.isSocketRender = false;
+  console.log('messages : ', messages);
+  console.log('initmessage : ', initData);
   return (
     <div className="w-[95%] h-[610px] pt-[20px] bg-chat-color2 rounded-[10px] flex flex-col overflow-y-scroll mt-sm">
       <div ref={messageStartRef} />

diff --git a/project/frontend/src/hooks/chat/useChannel.ts b/project/frontend/src/hooks/chat/useChannel.ts
@@ -2,18 +2,22 @@ import { unwrap } from '@/api/unwrap';
 import { ApiContext } from '@/app/_internal/provider/ApiContext';
 import { useCallback, useContext } from 'react';
 import { useQueries } from 'react-query';
+import { DEFAULT_PAGE_SIZE } from './useInfScroll';
 
 export default function useChannelMessage(channelId: string) {
   const { api } = useContext(ApiContext);
   const channelInfoFn = useCallback(
     async () => unwrap(await api.channelControllerFindChannelInfo(channelId)),
     [api, channelId],
   );
-  const initialData = useCallback(
-    async () =>
-      unwrap(await api.channelControllerGetChannelMessages(channelId)),
-    [api, channelId],
-  );
+  const initialData = useCallback(async () => {
+    const query = {
+      pageSize: DEFAULT_PAGE_SIZE,
+    };
+    return unwrap(
+      await api.channelControllerGetChannelMessages(channelId, query),
+    );
+  }, [api, channelId]);
   const data = useQueries([
     { queryKey: 'channelInfo', queryFn: channelInfoFn },
     { queryKey: 'channelMessage', queryFn: initialData },
@@ -22,7 +26,10 @@ export default function useChannelMessage(channelId: string) {
   if (isLoading) return { isLoading: true };
 
   const channelMessage: any = data[1].data;
-  if (channelMessage.length > 0) {
+  if (
+    channelMessage.length > 0 &&
+    channelMessage[channelMessage.length - 1].type !== 'scroll-target'
+  ) {
     channelMessage.push({
       type: 'scroll-target',
     });

diff --git a/project/frontend/src/hooks/chat/useDirectMessage.ts b/project/frontend/src/hooks/chat/useDirectMessage.ts
@@ -2,6 +2,7 @@ import { unwrap } from '@/api/unwrap';
 import { ApiContext } from '@/app/_internal/provider/ApiContext';
 import { useCallback, useContext } from 'react';
 import { useQueries } from 'react-query';
+import { DEFAULT_PAGE_SIZE } from './useInfScroll';
 
 export default function useDirectMessage(
   channelId: string,
@@ -12,18 +13,26 @@ export default function useDirectMessage(
     async () => unwrap(await api.usersControllerGetUsetByNickname(targetName)),
     [api, targetName],
   );
-  const initialData = useCallback(
-    async () => unwrap(await api.dmControllerGetDmChannelMessages(targetName)),
-    [api, targetName],
-  );
+  const initialData = useCallback(async () => {
+    const query = {
+      pageSize: DEFAULT_PAGE_SIZE,
+    };
+    return unwrap(
+      await api.dmControllerGetDmChannelMessages(targetName, query),
+    );
+  }, [api, targetName]);
   const data = useQueries([
-    { queryKey: 'userByNickanme', queryFn: dmInfoFn },
-    { queryKey: 'channelMessage', queryFn: initialData },
+    { queryKey: 'userByNickanme', queryFn: dmInfoFn, cacheTime: 0 },
+    { queryKey: 'channelMessage', queryFn: initialData, cacheTime: 0 },
   ]);
   const isLoading = data.some((d: any) => d.isLoading);
   if (isLoading) return { isLoading: true };
   const channelMessage: any = data[1].data;
-  if (channelMessage.length > 0) {
+
+  if (
+    channelMessage.length > 0 &&
+    channelMessage[channelMessage.length - 1].type !== 'scroll-target'
+  ) {
     channelMessage.push({
       type: 'scroll-target',
     });

diff --git a/project/frontend/src/hooks/chat/useInfScroll.ts b/project/frontend/src/hooks/chat/useInfScroll.ts
@@ -6,7 +6,7 @@ import {
 } from '@/components/dm/message/MessageContent';
 import { useCallback, useContext, useEffect } from 'react';
 
-const DEFAULT_PAGE_SIZE = 10;
+export const DEFAULT_PAGE_SIZE = 10;
 export default function useInfScroll(
   messageStartRef: any,
   setMessages: (arg: any) => void,
@@ -23,6 +23,8 @@ export default function useInfScroll(
   const loadMoreMessages = useCallback(async () => {
     if (messages.length === 0) return;
     const lastCursor = messages[0].data.sentAt;
+    console.log('loadMoreMessages');
+    console.log('lastCursor', lastCursor);
     const queryRequest: QueryParamsType = {
       pageSize: DEFAULT_PAGE_SIZE,
       cursorTimestamp: lastCursor,

diff --git a/project/frontend/src/hooks/chat/useSocket.ts b/project/frontend/src/hooks/chat/useSocket.ts
@@ -1,49 +1,10 @@
-import useToast from '@/components/common/useToast';
 import {
   MessageContentInterface,
   messageType,
 } from '@/components/dm/message/MessageContent';
 import { getSocket } from '@/lib/Socket';
 import { useRouter } from 'next/navigation';
-import { useCallback, useEffect } from 'react';
-
-const setMessageWithScrollTarget = (
-  render: any,
-  setMessages: any,
-  res: any,
-) => {
-  render.isSocketRender = true;
-  setMessages((prevState: MessageContentInterface[]) => {
-    const prevData = prevState.filter((data) => data.type !== 'scroll-target');
-    return [...prevData, res, { type: 'scroll-target' }];
-  });
-};
-
-const handleDirectMessage = (
-  socket: any,
-  setMessages: any,
-  channelId: string,
-  render: any,
-) => {
-  socket.on(`directMessage`, (res: any) => {
-    if (res.data.channelId === channelId) {
-      setMessageWithScrollTarget(render, setMessages, res);
-    }
-  });
-};
-
-const handleChannelMessage = (
-  socket: any,
-  setMessages: any,
-  channelId: string | undefined,
-  render: any,
-) => {
-  socket.on(`channelMessage`, (res: any) => {
-    if (res.data.channelId === channelId) {
-      setMessageWithScrollTarget(render, setMessages, res);
-    }
-  });
-};
+import { useEffect } from 'react';
 
 export const useSocket = (
   type: any,
@@ -53,34 +14,72 @@ export const useSocket = (
   render: object,
 ) => {
   const router = useRouter();
-  const { openIsOut, openIsKick, openIsBan, openIsMute, openIsPromote } =
-    useToast();
+  // const { openMessage } = useToast();
+  useEffect(() => {
+    const socket = getSocket();
+    const localMe = localStorage.getItem('me');
+    const me = localMe ? JSON.parse(localMe) : null;
+
+    const setMessageWithScrollTarget = (
+      render: any,
+      setMessages: any,
+      res: any,
+    ) => {
+      render.isSocketRender = true;
+      setMessages((prevState: MessageContentInterface[]) => {
+        const prevData = prevState.filter(
+          (data) => data.type !== 'scroll-target',
+        );
+        return [...prevData, res, { type: 'scroll-target' }];
+      });
+    };
+
+    const handleDirectMessage = (
+      socket: any,
+      setMessages: any,
+      channelId: string,
+    ) => {
+      socket.on(`directMessage`, (res: any) => {
+        if (res.data.channelId === channelId)
+          setMessageWithScrollTarget(render, setMessages, res);
+      });
+    };
 
-  const handleLeave = useCallback(
-    (socket: any, setMessages: any, meId: string | undefined, router: any) => {
+    const handleChannelMessage = (
+      socket: any,
+      setMessages: any,
+      channelId: string | undefined,
+    ) => {
+      socket.on(`channelMessage`, (res: any) => {
+        if (res.data.channelId === channelId) {
+          setMessageWithScrollTarget(render, setMessages, res);
+        }
+      });
+    };
+
+    const handleLeave = (
+      socket: any,
+      setMessages: any,
+      meId: string | undefined,
+      router: any,
+    ) => {
       socket.on('leave', (res: any) => {
         if (res.data.member.id === meId) {
-          openIsOut();
+          // openMessage('채널에서 나갔습니다!');
           router.replace('/channel');
         } else {
           setMessageWithScrollTarget(render, setMessages, res);
         }
       });
-    },
-    [render, openIsOut],
-  );
+    };
 
-  const handleJoin = useCallback(
-    (socket: any, setMessages: any) => {
+    const handleJoin = (socket: any, setMessages: any) => {
       socket.on('join', (res: any) => {
         setMessageWithScrollTarget(render, setMessages, res);
       });
-    },
-    [render],
-  );
+    };
 
-  const handleKickBanPromote = useCallback(
-    (
+    const handleKickBanPromote = (
       socket: any,
       meId: string | undefined,
       channelId: string | undefined,
@@ -95,9 +94,9 @@ export const useSocket = (
         ) {
           if (targetUserId === meId && channelId === res.data.channelId) {
             if (res.data.actionType === 'KICK') {
-              openIsKick();
+              // openMessage('방장이 나가라고 합니다!');
             } else {
-              openIsBan();
+              // openMessage('방장이 채널에서 차단했습니다!');
             }
             router.replace('/channel');
           }
@@ -106,51 +105,30 @@ export const useSocket = (
           channelId === res.data.channelId &&
           targetUserId === meId
         ) {
-          openIsPromote();
+          // openMessage('관리자가 되었습니다!');
         } else if (
           res.data.actionType === 'MUTE' &&
           targetUserId === meId &&
           channelId === res.data.channelId
         ) {
-          openIsMute();
+          // openMessage('방장이 1분간 조용히 하래요 ㅠ');
         }
       });
-    },
-    [openIsBan, openIsKick, openIsMute, openIsPromote],
-  );
-
-  useEffect(() => {
-    const socket = getSocket();
-    const localMe = localStorage.getItem('me');
-    const me = localMe ? JSON.parse(localMe) : null;
+    };
     if (type === messageType.DM) {
-      handleDirectMessage(socket, setMessages, channelId, render);
+      handleDirectMessage(socket, setMessages, channelId);
     } else {
-      handleChannelMessage(socket, setMessages, channelId, render);
+      handleChannelMessage(socket, setMessages, channelId);
       handleLeave(socket, setMessages, me?.id, router);
       handleJoin(socket, setMessages);
       handleKickBanPromote(socket, me?.id, channelId, router);
     }
-
     return () => {
-      if (type === messageType.DM) {
-        socket.off(`directMessage`);
-      } else {
-        socket.off(`channelMessage`);
-        socket.off('leave');
-        socket.off('join');
-        socket.off('kickBanPromote');
-      }
+      socket.off('directMessage');
+      socket.off('channelMessage');
+      socket.off('leave');
+      socket.off('join');
+      socket.off('kickBanPromote');
     };
-  }, [
-    type,
-    setMessages,
-    channelId,
-    targetName,
-    router,
-    handleKickBanPromote,
-    handleLeave,
-    render,
-    handleJoin,
-  ]);
+  }, [type, setMessages, channelId, router, targetName, render]);
 };