<DeleteButton>Delete</DeleteButton>
const DeleteButton = styled.button`
background-color: tomato;
`;
글을 삭제 할 수 있게 버튼을 생성한다.
export default function Tweet({ username, photo, tweet }: ITweet) {
const user = auth.currentUser;
auth 인스턴스를 사용해서 현재 로그인된 유저를 받는다.
{user?.uid === userId ? <DeleteButton>Delete</DeleteButton> : null}
ITweet에서 userId를 가져온다
userId가 일치할 경우에 삭제버튼을 보여주고 일치하지 않을경우 null값을 반환한다.
const onDelete = async() => {
if(user?.uid !== userId) return;
};
onDelete 비동기함수 만들기
로그인된 유저의 id와 글 작성자의 id가 같지 않다면 함수를 종료시킨다.
const onDelete = async() => {
if(user?.uid !== userId) return;
try{
await deleteDoc(doc(db, ""))
} catch(e) {
console.log(e);
} finally {
}
firestore에서 deleteDoc이라는 함수를 사용해서 문서를 삭제해준다.
doc() 함수를 사용하여 삭제할 문서에대한 참조를 불러온다.
await deleteDoc(doc(db, "tweets", id));
저장된 컬렉션의 이름을 작성한다 ( firebase에 작성된 폴더 )
위에서 선언된 id 를 참조하여 아이디 값을 사용한다.
export const db = getFirestore(app);
이전에 만들어둔 db 를 사용한다.
try{
await deleteDoc(doc(db, "tweets", id));
if(photo){
const photoRef = ref(storage, `tweets/${user.uid}/${id}`);
}
}
글의 id값과 동일한 이름을 가진 이미지를 삭제
storage를 선택하고 경로를 잡아준다.
await deleteObject(photoRef);
await을 통해 firebase/strorage에서 불러온 deleteObject를 사용하여 photoRef 삭제
<DeleteButton onClick={onDelete}>
삭제버튼에 온클릭이벤트 작성
const onDelete = async() => {
const ok = confirm("Are you sure you want to delete this tweet?");
if(!ok || user?.uid !== userId) return;
삭제버튼 클릭시 삭제여부를 묻고 확인을 누르지 않으면 return 시킨다
challenge
로그인한 유저가 작성한 글만 수정/사진추가/사진수정 가능하게 하기
const [editing, setEditing] = useState(false);
const [newNweet, setNewNweet] = useState(tweet);
const onUpdate = () => {
setEditing((prev) => !prev);
};
return (
<Wrapper>
<Column>
<Username>{username}</Username>
</Column>
<Column>
<Createat></Createat>
</Column>
{editing ?
<>
<UpdateForm>
<Column>
<UpdateTweet value={newNweet} />
</Column>
<Column>
<UpdateButton>Cancel</UpdateButton>
</Column>
</UpdateForm>
</> :
<>
<Column>
<Payload>{tweet}</Payload>
{user?.uid === userId ? (
<DeleteButton onClick={onDelete}>Delete</DeleteButton>
) : null}
{user?.uid === userId ? (
<UpdateButton onClick={onUpdate}>Update</UpdateButton>
) : null}
</Column>
{photo ? (
<Column>
<Photo src={photo} />
</Column>
) : null}
</>}
</Wrapper>
);
}
editing을 통해서 업데이트 버튼을 누른경우에 해당 트윗을 수정할수 있게끔 input 태그에 value값으로 기존값을 넣어 출력
위의 코드까지 작성하면 input에 글 내용이 출력되지만 수정은 할 수 없는상태이다.
const onChange = (event) => {
const {
target : {value},
} = event ;
}
위와같이 input의 value값을 잡아주는데 TS 환경에서는 해당 방식으로 작성시에
parameter 'event' implicitly has an 'any' type 에러가 나타난다
const onChange = (event : ChangeEvent<HTMLInputElement>) => {
해당 방식으로 작성해 이벤트 대상을 명시해준다.
<UpdateTweet onChange={onChange} value={newNweet} />
onChange 속성을 사용해서 해당함수를 부여해주면
input태그 안에서 텍스트 수정이 가능해진다.
<UpdateForm onSubmit={onSubmit}>
Form태그에 onSubmit속성을 부여하고
const onSubmit = async(event : React.FormEvent) => {
event.preventDefault();
await updateDoc(doc(db, 'tweets', id), {tweet : newNweet});
setEditing(false);
}
db에서 업데이트할 부분을 찾아서 업데이트해준다.
