How to delete from Firebase with React? - reactjs

Question

I'm trying to add a delete button to a post so that I can delete individual posts from a channel. I'm using Firebase as my database and the posts collections are nested within channels collection. I added a button to each post, created an onClick event called handleDel, I've tried finding the post inside the channel collection and deleting it but I can't delete my post.
const db = firebaseApp.firestore()
Post.js
function Post({ user, post, timestamp }) {
const channelId = useSelector(selectChannelId)
const handleDel = () => {
db.collection('channels')
.doc(channelId)
.collection('posts')
.doc(post).delete().then(() => {
console.log("Document successfully deleted!");
}).catch((error) => {
console.error("Error removing document: ", error);
});
}
return (
<div className='post'>
<Avatar src={user.photo}
/>
<div className="post__content">
<h4>{user.displayName}
<span className='post__timestamp'>
<ClearIcon
className='clearIcon'
onClick={handleDel}
id={post.id}
/>
{new Date(timestamp?.toDate()).toUTCString()}
</span>
</h4>
<p className='post__text'>
{post}
</p>
</div>
</div>
)
}
Posts.js for more context
function Posts() {
const user = useSelector(selectUser)
const channelId = useSelector(selectChannelId)
const channelName = useSelector(selectChannelName)
const [input, setInput] = useState('')
const [posts, setPosts] = useState([])
useEffect(() => {
if (channelId) {
db.collection('channels')
.doc(channelId)
.collection('posts')
.orderBy('timestamp', 'asc')
.onSnapshot((snapshot) =>
setPosts(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})))
)
}
}, [channelId])
const sendPost = e => {
e.preventDefault()
db.collection('channels')
.doc(channelId)
.collection('posts')
.add({
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
post: input,
user: user,
})
setInput('')
}
return (
<div className='posts__container'>
<ChannelTitle channelName={channelName} />
<div className="posts">
{posts.map((post) => (
<Post
timestamp={post.timestamp}
post={post.post}
user={post.user}
id={post.id}
key={post.id}
/>
))}
</div>
<div className="post__input">
<AddCircleIcon />
<form>
<input
type="text"
placeholder={`Post to #${channelName}`}
value={input}
disabled={!channelId}
onChange={e => setInput(e.target.value)}/>
<button
type='submit'
className='post__inputButton'
onClick={sendPost}>
Send</button>
</form>
<div className="post__inputIcons">
<GifIcon />
<EmojiEmotionsIcon />
</div>
</div>
</div>
)
}
I've also tried
const handleDel = () => {
db.collection('posts')
.doc(post).delete().then(() => {
console.log("Document successfully deleted!");
}).catch((error) => {
console.error("Error removing document: ", error);
});
}
and
const handleDel = () => {
db.collection('channels')
.doc(channelId)
.collection('posts')
.doc(post.id).delete().then(() => {
console.log("Document successfully deleted!");
}).catch((error) => {
console.error("Error removing document: ", error);
});
}
My console says "Document successfully deleted!" but the post is still in the database and still shows. Any insight would be appreciated.

Answer 1

Take a look at these lines:
(<Post
timestamp={post.timestamp}
post={post.post}
user={post.user}
id={post.id}
key={post.id}
/>)
function Post({ user, post, timestamp }) {
Here, you pass in the properties id, post, timestamp, and user into your component but only pull out post, timestamp, and user. In addition, post here is not the post object (that has id, timestamp, etc inside it) but is the text content of the post, originally the value of input when posted, as a string. This means that your Post component doesn't know it's own ID as post.id in this case would be undefined. Plus, because you are deleting the document using .doc(post), the delete operation succeeds because you end up deleting a document that is named with the content of your message like /channels/${channelId}/posts/"This is my message!" instead of what you are trying to delete, which is /channels/${channelId}/posts/${postId}.
To correct this, you would change it to:
function Post({ id: postId, user, post, timestamp }) {
const channelId = useSelector(selectChannelId)
const handleDel = () => {
return db.collection('channels') // note return of promise chain
.doc(channelId)
.collection('posts')
.doc(postId)
.delete()
.then(
() => {
console.log("Document successfully deleted!");
},
(error) => {
console.error("Error removing document: ", error);
}
);
}
/* ... rest of component ... */
}
Other things of concern:
Rename your document's post field to content or similar to disambiguate between your post as a whole and its content
Use postData instead of just post and postDataList/postDataArray instead of just posts to disambiguate them or make use of TypeScript to help catch these typos
For each post, you are calling useSelector to obtain the channelId. Which is fine, but as there is a clear parent-child relationship here, you could pass in the channelId along with the post's data from your Posts component for improved performance.
The channel listener (useEffect(/* ... */, [channelId])) doesn't clean up after itself
The posts in the channel are not paginated. (Imagine a month-old conversation chain of hundreds of messages with at least 10 users listening to the channel - do all of those users need all of those messages at once? - that's 1000+ document reads when you might only need 10 per user)
The sendPost click handler doesn't wait for confirmation that the message was send before clearing it's input
The sendPost click handler doesn't show an error when channelId is falsy
The sendPost click handler doesn't show an error on failure to add the message to the database
The sendPost click handler allows posting empty messages
The Send button is not disabled when channelId is falsy
The value of user isn't error-checked, it is also unclear if this is a User object, their name or their UID.

Answer 2

Try this.
You need to pass unique id of post/list in API call to delete specific database entry
improved
<ClearIcon
className='clearIcon'
onClick={() => handleDel(post.id)}
id={post.id}
/>
function
const handleDel = (id) => {
db.collection('channels')
.doc(channelId)
.collection('posts')
.doc(id).delete().then(() => {
console.log("Document successfully deleted!");
}).catch((error) => {
console.error("Error removing document: ", error);
});
}