Twitt에 onDeleteClick함수를 만들고 Delete Twitt버튼을 만들어 클릭하면 함수가 실행되도록 만들어줍니다.
confirm은 선택창입니다. 정말 해당 Twitt을 삭제할 것인지 한 번더 선택하게 해줄 것 입니다. 그리고 사용자가 확인을 누르면 ok는 true, 취소를 누르면 false가 됩니다.
Delete Twitt 버튼을 누르면 true, Edit Twitt버튼을 누르면 false가 반환됩니다.
우리는 true가 반환될 때 트윗을 삭제하고자 합니다.
Firebase CollectionReference 의 Doc의 DocumentReference 부분을 보면delete가 있습니다.
이제 위에 선언한 ok 부분에 dbService.doc()을 해주면됩니다. 이 경우에는 documentPath는 위치가 됩니다.
그리고 documentPath를 보면 Twitt 안에 있습니다. 그리고 우리는 id를 가지고 있습니다.
Home.js를 보면 id를 가지고 있습니다. 그리고 아래에는 map을 id를 가지고있는 twittObj을 보내고 있는 겁니다.
따라서 이 경우에는 twittObj.id입니다. 그리고 간단하게 뒤에 delete만 붙혀주면 끝입니다.
Twitt/twittObj.id라는 건 doc의 documentPath가 Twitt 안에 있기 때문에 twittObj.id로 접근합니다.
그리고 이제 삭제를 하면
이제 수정을 해야 합니다. 새로운 state를 두 개 만들어 주겠습니다.
editing의 기본값은 false, newTwitt의 default(기본 값)으로는 twittObj.text값을 줍니다.
이제 toggleEditing 함수를 만들고 setEditing을 사용합니다. 이전값(prev)을 가져오고 이전값을 리턴하는데 서로 반대되는 것을 리턴한다고 이해하면 됩니다.
그리고 Edit Twitt버튼에 onClick 함수로 추가해줍니다. 이 이후에 editing이 true이면 (기본값은 false)이면 form을 보여주는지 확인하면 됩니다. 다음과 같이 입력하면 됩니다.
이제 Edit 버튼을 누르면
다음과 같이 input 창이 나오게 됩니다. 이제 우리는 수정을 할 수 있습니다. 버튼을 넣습니다.
button을 넣고 onClick으로 toggleEditing을 넣습니다. editing이 기본적으로 false로 되어있기 때문에 input창은 보이지 않습니다.
그리고 Edit Twitt버튼을 누르면
setEditing의 이전 상태(=반대)를 반환합니다. 즉 false에서 true가 됩니다. 그러므로 EditTwitt버튼을 누르면 iuput이 출력되고 Cancel 버튼도 나옵니다. 그리고 Cancel버튼을 누르면 editing이 반대 상태인 true로 다시 바뀌어서 나오지 않게 되는겁니다.
input창에 위 처럼 속성을 추가해줍니다. 그리고 onChange를 만들어 주면 됩니다. form에 대한 onSubmit도 만들어 줍니다.
그리고 form에 onSubmit을, input에 onChange를 넣어줍니다. 그리고 수정을 했으면 수정을 하겠다라는 버튼도 만들어야 합니다.
그리고 동작 확인을 위해 콘솔을 한번 찍어 보겠습니다.
TwittObj은 수정하기전의 Twitt, newTwitt은 우리가 수정한 트윗을 표시하고 있습니다. 이제 수정을 해야하니 delete를 했던 거랑 똑같이 하면 됩니다. 그리고 setEditing을 false로 설정하면 됩니다.
이제 테스트를 해보면 정상적으로 수정됩니다.
