누군가 수정하거나 지운 댓글이 실시간으로 나타나는건 보고 싶지 않다.
모든 페이지나 요소가 실시간일 필요는 없다.

트윗을 수정하고 지우는 기능을 넣어 보자.

---

✅ 먼저 Tweet 컴포넌트 만들기

---

📍 /components/Tweet.js

앞으로 트윗에 들어가는 내용이 많아질 예정이니 트윗 자체를 컴포넌트로 만들어 버리자.

1. tweetObj 오브젝트를 props으로 받아 tweetObj 오브젝트의 text를 h4로 렌더한다.
2. export default로 내보낸다.

import React from "react";

const Tweet = ({ tweetObj }) => (
  <div>
    <h4>{tweetObj.text}</h4>
  </div>
);

export default Tweet;

📍 /routes/Home.js

트윗에 렌더되는 Home 페이지에 Tweet 컴포넌트를 작성하자.

1. import로 Tweet 컴포넌트를 가져온다.
2. 트윗 컴포넌트가 들어갈 위치에 코드를 작성한다.
   기존에 작성한 map() 활용하여 작성하면 된다.
   • 이 때, tweetObj 프롭에 tweets 어레이에서 받아온 각각의 tweet을 보내준다.
     • 그래야 Tweet 컴포넌트에서 이 프롭의 값을 사용할 수 있다.
       따지자면 순서상 이게 먼저인 셈ㅇㅇ!

//생략
import Tweet from "components/Tweet";
//생략
{/*DB에서 가져온 트위터 나열*/}
      <div>
        {tweets.map((tweet) => (
          //Tweet을 컴포넌트로 만고 props으로 가져온다.
          //tweetObj 만들 때 각각의 tweet에 할당한 id 값을 div의 key에 넣어주자
          <Tweet key={tweet.id} tweetObj={tweet} />
        ))}
      </div>

✅ 트윗 삭제/수정 버튼 만들기

---

1. 삭제/수정 버튼 만들기

import React from "react";

const Tweet = ({ tweetObj }) => (
  <div>
    <h4>{tweetObj.text}</h4>
    <button>삭제</button>
    <button>수정</button>
  </div>
);

export default Tweet;

2. 트윗 누가 작성했는지 파악하기

트윗을 작성한 사람만 해당하는 트윗을 삭제/수정할 수 있게 해야 한다.
Home.js에서 userObj를 받아오고 있기 때문에 이를 이용하여 누가 작성한 트윗인지 파악하고 그에 따라 삭제/수정 버튼이 보이게 하면 된다.

📍 /routes/Home.js

해당하는 트윗의 creatorId와 userObj의 uid가 같으면 true, 다르면 false가 되도록 코드를 작성한다.
isOwner={tweet.creatorId === userObj.uid}

{/*DB에서 가져온 트위터 나열*/}
<div>
  {tweets.map((tweet) => (
    //Tweet을 컴포넌트로 만고 props으로 가져온다.
    //tweetObj 만들 때 각각의 tweet에 할당한 id 값을 div의 key에 넣어주자
    <Tweet
      key={tweet.id}
      tweetObj={tweet}
      //해당하는 트윗의 creatorId와 userObj의 uid가 같으면 true, 다르면 false가 됨
      isOwner={tweet.creatorId === userObj.uid}
      />
  ))}
</div>

📍 /components/Tweet.js

1. isOwner 프롭 받아오기
2. 트윗 주인인 경우만 삭제/수정 버튼 보이게하기

import React from "react";

//isOwner 프롭 받아오기
const Tweet = ({ tweetObj }, isOwner) => (
  <div>
    <h4>{tweetObj.text}</h4>
    {/*트윗 주인인 경우만 삭제/수정 버튼 보이게*/}
    {isOwner && (
      <>
        <button>삭제</button>
        <button>수정</button>
      </>
    )}
  </div>
);

export default Tweet;

✅ 트윗 삭제 코드

---

1. 삭제버튼 클릭시, 발생하는 이벤트를 onDeleteClick 리스너가 듣게 하자.
   <button onClick={onDeleteClick}>삭제</button>

2. onDeleteClick 리스너에는 트윗을 삭제하는 코드를 작성하면 된다.

   다큐먼트, 즉 트윗을 삭제하기 위해서는 firestore의 reference인 delete()메서드를 사용하면 된다.

   • 예시

     import { doc, deleteDoc } from "firebase/firestore";
     
      await deleteDoc(doc(db, "cities", "DC"));

     
     

3. 먼저 doc() 메서드를 사용하여 디비 > 트윗컬렉션 > 해당하는 id 가진 다큐먼트를 콕 찝어오자.
   const tweetTextRef = doc(dbService, "tweets", `${tweetObj.id}`);

4. 그러고 나서 deleteDoc()메서드를 사용하여 해당하는 다큐먼트를 삭제하면 된다.
   await deleteDoc(tweetTextRef);

📍 /components/Tweet.js

import React from "react";
import { dbService } from "fbase";
import { doc, deleteDoc } from "firebase/firestore";

const Tweet = ({ tweetObj }, isOwner) => {
  //디비 > 트윗컬렉션 > 해당하는 id 가진 다큐먼트 찝어오기
  const tweetTextRef = doc(dbService, "tweets", `${tweetObj.id}`);

  //삭제
  const onDeleteClick = async () => {
    const ok = window.confirm("정말 이 트윗을 삭제하시겠습니까?");
    //console.log(ok);  //treu/false 반환함
    if (ok) {
      //해당하는 트윗 삭제
      await deleteDoc(tweetTextRef);
    } else {
      console.log("삭제하는데 실패!");
    }
  };

  //수정

  return (
    <div>
      <h4>{tweetObj.text}</h4>
      {/*트윗 주인인 경우만 삭제/수정 버튼 보이게*/}
      {isOwner && (
        <>
          <button onClick={onDeleteClick}>삭제</button>
          <button>수정</button>
        </>
      )}
    </div>
  );
};

export default Tweet;

✅ 트윗 수정 코드

---

다큐먼트, 즉 트윗을 수정하기 위해서는 update()메서드를 사용하면 된다.

• 예시

  import { doc, updateDoc } from "firebase/firestore";
  
   const washingtonRef = doc(db, "cities", "DC");
  
   // Set the "capital" field of the city 'DC'
   await updateDoc(washingtonRef, {
     capital: true
   });

1. 수정 버튼 클릭시 수정모드 화면에 출력될 수 있도록 기본 값 false인 state를 하나 만든다.
   const [editing, setEditing] = useState(false);

2. 수정모드면 트윗 내용을 수정하는 form이 보이고, 아니면 그냥 트윗 내용이 보이면 된다.

   {editing ? (
     <>
       <form onSubmit={onSubmit}>
         <input
           value={newTweet}
           required
           type="text"
           placeholder="수정할 내용을 입력하세요."
           onChange={onChange}
           ></input>
         <input type="submit" value="수정" />
       </form>
       <button onClick={toggleEditing}>취소</button>
       </>
   ) : (
     <>
       <h4>{tweetObj.text}</h4>
       {/*트윗 주인인 경우만 삭제/수정 버튼 보이게*/}
       {isOwner && (
         <>
           <button onClick={onDeleteClick}>삭제</button>
           <button onClick={toggleEditing}>수정</button>
           </>
       )}

3. 수정모드에서 취소 버튼 누르면 다시 원래 화면으로 돌아가도록 onClick 이벤트를 만들고, 트윗 수정하기 버튼 클릭시 이벤트를 리슨하는 toggleEditing를 다시 한번 호출한다.
   toggleEditing는 setEditing을 현재 값의 반대 값으로 바꿔주도록 작성하여 토글처럼 사용하면 된다.

   //수정모드 토글 (토글 버튼 누르면 현재 상태(기본 false) 반대로 바뀜
   const toggleEditing = () => setEditing((prev) => !prev);

4. 트윗 내용을 수정할 수 있도록 form을 작성한다.

5. 수정모드에서 사용자가 input에 입력한 트윗 내용을 업데이트 할 수 있도록 onChange 이벤트를 듣는 onChange 리스너를 작성한다.
   event.target.value를 받아서 setNewTweet(value) 모디파이어로 보내어 state를 업데이트하면 된다.

   const onChange = (event) => {
     const {
       target: { value },
     } = event;
     //🔥 수정모드에서 사용자가 입력하는 input 값을 newTweet state에 넣기
     setNewTweet(value);
   };

6. 수정모드 input에서 입력된 트윗 내용 업데이트하는 state를 만들어 주자.
   기본 값은 tweetObj의 text, 즉 db에 저장된 다큐먼트(트윗)의 내용이다.
   5번에서 업데이트한 내용을 받아서 이 state에 넣어주는 거다.

   //🔥 수정모드 input에서 입력된 트윗 내용 업데이트
   const [newTweet, setNewTweet] = useState(tweetObj.text);

7. 또한 수정모드에서 수정한 후 input을 submit하면 onSubmit 리스너는 updateDoc()으로 트윗 내용을 업데이트한다.
   그러고 나서 setEditing() 모디파이어로 false를 보내어 수정모드를 종료한다.

   await updateDoc(tweetTextRef, { text: newTweet });
   //🔥 업뎃하고 나서 수정모드 false로 만들어 주기
   setEditing(false);

📍 /components/Tweet.js

import React, { useState } from "react";
import { dbService } from "fbase";
//🔥 updateDoc 임포트
import { doc, deleteDoc, updateDoc } from "firebase/firestore";

const Tweet = ({ tweetObj }, isOwner) => {
  //🔥 수정모드인지 아닌지 false/true
  const [editing, setEditing] = useState(false);

  //🔥 수정모드 input에서 입력된 트윗 내용 업데이트
  const [newTweet, setNewTweet] = useState(tweetObj.text);

  //디비 > 트윗컬렉션 > 해당하는 id 가진 다큐먼트 찝어오기
  const tweetTextRef = doc(dbService, "tweets", `${tweetObj.id}`);

  //삭제
  const onDeleteClick = async () => {
    const ok = window.confirm("정말 이 트윗을 삭제하시겠습니까?");
    //console.log(ok);  //treu/false 반환함
    if (ok) {
      //해당하는 트윗 삭제
      await deleteDoc(tweetTextRef);
    } else {
      console.log("삭제하는데 실패!");
    }
  };

  //🔥 수정모드 토글 (토글 버튼 누르면 현재 상태(기본 false) 반대로 바뀜
  const toggleEditing = () => setEditing((prev) => !prev);

  //🔥 수정모드에서 트윗 수정 후 폼 서밋해서 트윗 내용 업데이트하기
  const onSubmit = async (event) => {
    event.preventDefault();
    const ok = window.confirm("정말 이 트윗을 수정하시겠습니까?");
    if (ok) {
      await updateDoc(tweetTextRef, { text: newTweet });
      //🔥 업뎃하고 나서 수정모드 false로 만들어 주기
      setEditing(false);
    }
  };

  const onChange = (event) => {
    const {
      target: { value },
    } = event;
    //🔥 수정모드에서 사용자가 입력하는 input 값을 newTweet state에 넣기
    setNewTweet(value);
  };

  return (
    <div>
      {/*수정모드 버튼 클릭된 거면(true) 수정할 폼 보여주고 : 아니면(false) 트윗 내용 보여주기*/}
      {editing ? (
        <>
          <form onSubmit={onSubmit}>
            <input
              value={newTweet}
              required
              type="text"
              placeholder="수정할 내용을 입력하세요."
              onChange={onChange}
            ></input>
            <input type="submit" value="수정" />
          </form>
          <button onClick={toggleEditing}>취소</button>
        </>
      ) : (
        <>
          <h4>{tweetObj.text}</h4>
          {/*트윗 주인인 경우만 삭제/수정 버튼 보이게*/}
          {isOwner && (
            <>
              <button onClick={onDeleteClick}>삭제</button>
              <button onClick={toggleEditing}>수정</button>
            </>
          )}
        </>
      )}
    </div>
  );
};

export default Tweet;