♻️ 불필요한 loading 로직 제거

boostcampwm2023 · Dec 10, 2023 · 4803c91 · 4803c91
1 parent 0b26c87
commit 4803c91
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 36 deletions.
diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/ChatList.tsx
@@ -13,7 +13,7 @@ type ChatListProps = {
   chatItems: ChatMessage[];
   userId: string;
   participants: ResponseParticipant[];
-  fetchPrevMessages: (callback: () => void) => void;
+  fetchPrevMessages: () => void;
 };
 
 export function ChatList({
@@ -26,7 +26,6 @@ export function ChatList({
   const listElemRef = useRef<HTMLUListElement>(null);
   const observableRef = useRef<HTMLDivElement | null>(null);
   const exposed = useObserver(observableRef);
-  const loading = useRef(false);
 
   useEffect(() => {
     if (!listElemRef.current) {
@@ -60,11 +59,8 @@ export function ChatList({
   }, [chatItems, exposed]);
 
   useEffect(() => {
-    if (exposed && !loading.current) {
-      loading.current = true;
-      fetchPrevMessages(() => {
-        loading.current = false;
-      });
+    if (exposed) {
+      fetchPrevMessages();
     }
   }, [exposed, fetchPrevMessages]);
 

diff --git a/app/frontend/src/hooks/useChatting.ts b/app/frontend/src/hooks/useChatting.ts
@@ -50,37 +50,33 @@ export function useChatting(postId: string) {
     [postId],
   );
 
-  const fetchPrevMessages = useCallback(
-    (callback: () => void) => {
-      if (lastDateRef.current === null) {
-        return;
-      }
-
-      if (lastDateRef.current === undefined) {
-        lastDateRef.current = new Date();
-      }
-
-      socketClient.requestPrevMessage(
-        postId,
-        lastDateRef.current,
-        (status, messages) => {
-          if (status !== 200) {
-            return;
-          }
+  const fetchPrevMessages = useCallback(() => {
+    if (lastDateRef.current === null) {
+      return;
+    }
 
-          if (messages.length === 0) {
-            lastDateRef.current = null;
-            return;
-          }
+    if (lastDateRef.current === undefined) {
+      lastDateRef.current = new Date();
+    }
 
-          lastDateRef.current = messages[messages.length - 1].date;
-          setChatItems((items) => [...messages.reverse(), ...items]);
-          callback();
-        },
-      );
-    },
-    [postId],
-  );
+    socketClient.requestPrevMessage(
+      postId,
+      lastDateRef.current,
+      (status, messages) => {
+        if (status !== 200) {
+          return;
+        }
+
+        if (messages.length === 0) {
+          lastDateRef.current = null;
+          return;
+        }
+
+        lastDateRef.current = messages[messages.length - 1].date;
+        setChatItems((items) => [...messages.reverse(), ...items]);
+      },
+    );
+  }, [postId]);
 
   const subscribeToChat = useCallback(
     () =>