Merge pull request #82 from cskime/feature/#52

[#52] API 연동 (3)

Author: cskime

src/features/message/api/messages.js

@@ -1,5 +1,8 @@
+import axios from "axios";
 import { apiClient } from "../../../api/client";
 
+let nextPage;
+
 async function getMessages({ recipientId, limit, page = 1 }) {
   const searchParams = new URLSearchParams();
   searchParams.append("page", page);
@@ -15,7 +18,30 @@ async function getMessages({ recipientId, limit, page = 1 }) {
   }
 
   const data = response.data;
+  nextPage = data.next;
+
   return data.results;
 }
 
-export { getMessages };
+async function getNextPageMessages() {
+  if (!nextPage) return;
+
+  const response = await axios.get(nextPage);
+  if (response.status !== 200) {
+    throw new Error("Message data를 가져오는데 실패했습니다.");
+  }
+
+  const data = response.data;
+  nextPage = data.next;
+
+  return data.results;
+}
+
+async function deleteMessage({ id }) {
+  const response = await apiClient.delete(`messages/${id}/`);
+  if (response.status !== 204) {
+    throw new Error("Message를 삭제하는데 실패했습니다.");
+  }
+}
+
+export { deleteMessage, getMessages, getNextPageMessages };

src/features/rolling-paper/components/messages/rolling-paper-messages-grid.jsx renamed to src/features/message/components/messages-grid.jsx

@@ -1,10 +1,12 @@
+import { useRef } from "react";
 import { useNavigate, useParams } from "react-router";
 import styled from "styled-components";
-import Modal from "../../../../components/modal/modal.jsx";
-import { media } from "../../../../utils/media.js";
-import MessageCardAdd from "../../../message/components/message-card-add.jsx";
-import MessageCardDetail from "../../../message/components/message-card-detail.jsx";
-import MessageCard from "../../../message/components/message-card.jsx";
+import Modal from "../../../components/modal/modal.jsx";
+import { useIntersectionObserver } from "../../../hooks/use-intersection-observer.jsx";
+import { media } from "../../../utils/media.js";
+import MessageCardAdd from "./message-card-add.jsx";
+import MessageCardDetail from "./message-card-detail.jsx";
+import MessageCard from "./message-card.jsx";
 
 const StyledRollingPaperMessagesGrid = styled.div`
   display: grid;
@@ -22,9 +24,16 @@ const StyledRollingPaperMessagesGrid = styled.div`
   }
 `;
 
-function RollingPaperMessagesGrid({ isEditing, messages, onDelete }) {
+function MessagesGrid({ isEditing, messages, onDelete, onInfiniteScroll }) {
   const navigate = useNavigate();
   const { id } = useParams();
+  const infiniteScrollTargetRef = useRef();
+
+  const observerCallback = (entry) => {
+    if (!entry.isIntersecting) return;
+    onInfiniteScroll();
+  };
+  useIntersectionObserver(infiniteScrollTargetRef, observerCallback);
 
   const handleAddClick = () => {
     navigate(`/post/${id}/message`);
@@ -39,7 +48,7 @@ function RollingPaperMessagesGrid({ isEditing, messages, onDelete }) {
       key={message.id}
       isEditing={isEditing}
       message={message}
-      onDelete={(event) => handleDeleteClick(event, message.id)}
+      onDelete={() => handleDeleteClick(message.id)}
     />
   );
 
@@ -55,8 +64,9 @@ function RollingPaperMessagesGrid({ isEditing, messages, onDelete }) {
           </Modal>
         )
       )}
+      <div ref={infiniteScrollTargetRef}></div>
     </StyledRollingPaperMessagesGrid>
   );
 }
 
-export default RollingPaperMessagesGrid;
+export default MessagesGrid;

src/features/rolling-paper/api/recipients.js

@@ -9,4 +9,11 @@ async function getRecipient({ id }) {
   return response.data;
 }
 
-export { getRecipient };
+async function deleteRecipient({ id }) {
+  const response = await apiClient.delete(`recipients/${id}/`);
+  if (response.status !== 204) {
+    throw new Error("Recipient를 삭제하는데 실패했습니다.");
+  }
+}
+
+export { deleteRecipient, getRecipient };

src/hooks/use-intersection-observer.jsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+function useIntersectionObserver(targetRef, callback) {
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(callback);
+    });
+
+    if (targetRef) {
+      observer.observe(targetRef.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [targetRef, callback]);
+}
+
+export { useIntersectionObserver };

src/pages/messages-page.jsx

@@ -4,10 +4,17 @@ import styled from "styled-components";
 import { OutlinedButton, PrimaryButton } from "../components/button/button";
 import BUTTON_SIZE from "../components/button/button-size";
 import BACKGROUND_COLOR from "../components/color/background-color";
-import { getMessages } from "../features/message/api/messages";
-import { getRecipient } from "../features/rolling-paper/api/recipients";
+import {
+  deleteMessage,
+  getMessages,
+  getNextPageMessages,
+} from "../features/message/api/messages";
+import MessagesGrid from "../features/message/components/messages-grid";
+import {
+  deleteRecipient,
+  getRecipient,
+} from "../features/rolling-paper/api/recipients";
 import RollingPaperHeader from "../features/rolling-paper/components/header/rolling-paper-header";
-import RollingPaperMessagesGrid from "../features/rolling-paper/components/messages/rolling-paper-messages-grid";
 import { useMedia } from "../hooks/use-media";
 import ContentLayout from "../layouts/content-layout";
 import { media } from "../utils/media";
@@ -74,7 +81,7 @@ function EditingButtons({ onDelete, onCancel }) {
       />
       <OutlinedButton
         size={BUTTON_SIZE.medium}
-        title="취소하기"
+        title="완료하기"
         onClick={onCancel}
       />
     </ButtonContainer>
@@ -98,19 +105,44 @@ function MessagesPage() {
     navigate("edit");
   };
 
-  const handleRollingPaperDelete = () => {
-    // TODO: Rolling Paper 삭제
-    console.log(`Delete Rolling Paper ${recipient.id}`);
-    navigate(-1);
+  const handleRollingPaperDelete = async () => {
+    try {
+      await deleteRecipient({ id: recipient.id });
+      navigate(`/list`);
+    } catch (error) {
+      // TODO: Error 처리
+      console.log(error);
+    }
   };
 
   const handleEditCancel = () => {
     navigate(-1);
   };
 
-  const handleMessageDelete = (messageId) => {
-    // TODO: Message 삭제
-    console.log(`Delete Message ${messageId}`);
+  const handleMessageDelete = async (messageId) => {
+    try {
+      await deleteMessage({ id: messageId });
+      setMessages((prev) => prev.filter((message) => message.id !== messageId));
+    } catch (error) {
+      // TODO: Error 처리
+      console.log(error);
+    }
+  };
+
+  const handleInfiniteScroll = async () => {
+    const messages = await getNextPageMessages();
+    if (!messages) return;
+
+    setMessages((prev) => {
+      const newMessages = [...prev];
+
+      for (const message of messages) {
+        if (newMessages.find((value) => value.id === message.id)) continue;
+        newMessages.push(message);
+      }
+
+      return newMessages;
+    });
   };
 
   useEffect(() => {
@@ -155,10 +187,11 @@ function MessagesPage() {
               ) : (
                 <ViewerButtons onEdit={handleEditClick} />
               )}
-              <RollingPaperMessagesGrid
+              <MessagesGrid
                 isEditing={isEditing}
                 messages={messages}
                 onDelete={handleMessageDelete}
+                onInfiniteScroll={handleInfiniteScroll}
               />
             </div>
           </Content>