reple 모달 수정 및 삭제 기능 추가

state를 새로 만들어서 

 

 const [edit, setEdit] = useState(false);

 

 

 

edit이 true일때는 수정할 수 있는 폼을 보여주고 false일때는 기존 댓글 내용 보여줍니다.

   

  {edit ? (

        <RepleUploadDiv>

          <form>

            <input

              type="text"

              value={reple}

              onChange={(e) => {

                setReple(e.currentTarget.value);

              }}

            />

            <button>완료</button>

          </form>

          <div className="cancel">

            <button>취소</button>

          </div>

        </RepleUploadDiv>

      ) : (

        <p style={{ fontFamily: "Nanum Pen Script" }}>{props.list.reple}</p>

      )}

 

 

 

수정을 누르면 setEdit(true)로 댓글 수정 폼을 보여줌과 동시에 setModal(false)로 모달창 닫아 줍니다.

 

 const editHandler = () => {

    setEdit(true);

    setModal(false);

   };

 

 

  <p onClick={editHandler}>수정</p>

 

 

 

 

취소 버튼을 추가하여 취소 클릭시 setEdit(false)로 기존 댓글 데이터를 보여줍니다.

 

 const editCancelHandler = (e) => {

    e.preventDefault();

    setEdit(false);

   };

 

 

     {edit ? (

          <RepleUploadDiv>

              ---form(완료버튼)생략---

            <div className="cancel">

              <button onClick={editCancelHandler}>취소</button>

            </div>

          </RepleUploadDiv>

          ) : (

          <p style={{ fontFamily: "Nanum Pen Script" }}>{props.list.reple}</p>

        )}

 

 

 

 

reple 수정기능 

reple에 기존 댓글 정보를 넣어서 수정 클릭시에 input창에 기존 reple 정보 출력 아래 img 참조

 

    const [reple, setReple] = useState(props.list.reple);

 

 

        <RepleUploadDiv>

          <form>

            <input

              type="text"

              value={reple}

              onChange={(e) => {

                setReple(e.currentTarget.value);

              }}

            />

            <button onClick={submitHandler}>완료</button>

          </form>

          <div className="cancel">

            <button onClick={editCancelHandler}>취소</button>

          </div>

        </RepleUploadDiv>

 

 

기존 reple 수정 클릭시

기존 reple 출력

 

 

 

이후에 submitHandler 함수를 만들어 body에 정보를 담아 axios통신으로 server에 보내줍니다.

 

  const submitHandler = (e) => {

    e.preventDefault();

    let body = {

      uid: user.uid,

      reple: reple,

      postId: props.list.postId,

      //reple 추적하려고 repleId 추가

      repleId: props.list._id,

    };

    axios.post("/api/reple/edit", body).then((res) => {

      if (res.data.success) {

        alert("댓글 수정 완료되었습니다.");

      } else {

        alert("댓글 수정 오류..");

      }

      return window.location.reload();

    });

  };

 

 

 

 

server 코드

client에서 받은 repleId를 찾아서 client에서 보내온 body값으로 업데이트 시켜서 결과값을

다시 res로 client에 보내줍니다.

 

   router.post("/edit", (req, res) => {

     let temp = {

       postId: req.body.postId,

       reple: req.body.reple,

       uid: req.body.uid,

     };

     Reple.findOneAndUpdate(

       {

         _id: req.body.repleId,

       },

       { $set: temp }

     )

       .exec()

       .then(() => {

         return res.status(200).json({ success: true });

       })

       .catch(() => {

         return res.status(400).json({ success: false });

       });

   });

 

reple 업데이트 기능 완료.

 

 

 

 

client 코드

reple 삭제 기능 추가

 

  const deleteHandler = () => {

    if (window.confirm("정말로 삭제하시겠습니까?")) {

      let body = {

        repleId: props.list._id,

        postId: props.list.postId,

      };

      axios

        .post("/api/reple/delete", body)

        .then((res) => {

          if (res.data.success) {

            alert("댓글이 삭제되었습니다.");

            window.location.reload();

          }

        })

        .catch((err) => {

          alert("댓글이 삭제 실패되었습니다.");

        });

    }

  };

 

 

 

 

server 코드

 

  router.post("/delete", (req, res) => {

    Reple.deleteOne({ _id: req.body.repleId })

      .exec()

      .then(() => {

        Post.findOneAndUpdate(

          {

            _id: req.body.postId,

          },

          { $inc: { repleNum: -1 } }

        )

          .exec()

          .then(() => {

            return res.status(200).json({ success: true });

          });

      })

      .catch(() => {

        return res.status(400).json({ success: false });

      });

  });