[#46] Feat: Letter 신청 가능 여부 필드 값 response에서 받아오도록 적용

playthesong · Apr 8, 2021 · 5066f26 · 5066f26
1 parent c7cdb69
commit 5066f26
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 14 deletions.
diff --git a/src/api/letters.js b/src/api/letters.js
@@ -16,9 +16,9 @@ export const getLetters = async (status, direction) => {
     params
   });
   const {
-    data: { letters }
+    data: { letters, readyToLetter }
   } = response;
-  return letters;
+  return { letters, readyToLetter };
 };
 
 export const getLetterById = async id => {

diff --git a/src/components/LetterList/ActionButtons.jsx b/src/components/LetterList/ActionButtons.jsx
@@ -5,7 +5,7 @@ import { useDispatch } from "react-redux";
 import { changeModalType, openModal } from "../../modules/letterModal";
 import { LETTER_MODAL } from "../../constants/types";
 
-const ActionButtons = ({ currentUser }) => {
+const ActionButtons = ({ currentUser, data }) => {
   const dispatch = useDispatch();
   const openCreateModal = () => {
     dispatch(openModal());
@@ -14,7 +14,7 @@ const ActionButtons = ({ currentUser }) => {
 
   return (
     <ActionsButtonsBlock>
-      {currentUser && (
+      {data && data.readyToLetter && currentUser && (
         <CreateButton onClick={openCreateModal}>
           <CreateButtonIcon />
           <CreateButtonText>신청곡 등록</CreateButtonText>

diff --git a/src/components/LetterList/LetterList.jsx b/src/components/LetterList/LetterList.jsx
@@ -6,7 +6,7 @@ import Loading from "../Loading/Loading";
 import EmptyResult from "../EmptyResult/EmptyResult";
 
 const LetterList = ({
-  letters,
+  data,
   jwtToken,
   currentUser,
   loading,
@@ -17,14 +17,14 @@ const LetterList = ({
     <LetterListBlock>
       {loading && <Loading position={50} />}
       {error && <GlobalErrorHandler error={error} />}
-      {letters && letters.length === 0 && (
+      {data && data.letters.length === 0 && (
         <EmptyResult
           message={"리얼피아노는 신청곡과 여러분의 이야기를 기다립니다."}
           opacity={0.3}
         />
       )}
-      {letters &&
-        letters.map(letter => (
+      {data &&
+        data.letters.map(letter => (
           <Letter
             key={letter.id}
             id={letter.id}

diff --git a/src/pages/Letters.jsx b/src/pages/Letters.jsx
@@ -14,11 +14,8 @@ import ReactHelmet from "../common/ReactHelmet";
 import { DIRECTION } from "../modules/pagination";
 
 const Letters = () => {
-  const { data: letters, status, loading, error } = useSelector(
-    state => state.letters
-  );
+  const { data, status, loading, error } = useSelector(state => state.letters);
   const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
-
   const { currentUser, jwtToken } = useSelector(state => state.auth);
   const dispatch = useDispatch();
 
@@ -38,10 +35,10 @@ const Letters = () => {
         <LettersButtonBlock>
           <ListTitle status={status} />
           <StatusButtons status={status} />
-          <ActionButtons currentUser={currentUser} />
+          <ActionButtons currentUser={currentUser} data={data} />
         </LettersButtonBlock>
         <LetterList
-          letters={letters}
+          data={data}
           jwtToken={jwtToken}
           currentUser={currentUser}
           loading={loading}