I'm making a note app, now i'm okey with fetch data and add data but when i try to remove data, it work so weird, if i have 5 item, after first time remove, it will not apply, after remove the next item, it will remove the previous, example i have 5 item, then i press delete one item,it did'nt remove anything, but if i press delete another item, it remove the last one, i don't know why it not work, here is the code
Here is the redux reducer code:
const noteReducer = createSlice({
name: "note",
initialState: NoteList,
reducers: {
removeNote: (state, action: PayloadAction<NoteI>) => {
return state.filter((item) => item.id !== action.payload.id);
}
}
});
Here the note structure on firestore will be like this, it contain
{
userName:"blabla"
email:"blabla@gmail.com"
note:[] <== an array of object note
}
Here is the function i use to delete note:
export default function NoteList(props: noteListI) {
const { title, note, id, date } = props;
const dispatch = useDispatch();
const userInfo: user = useSelector(
(state: RootState) => state.persistedReducer.firebase.userInfomation
);
const data = useSelector((state: RootState) => state.persistedReducer.note);
const updateDeletedNoteFirebase = async () => { // deleteFuntion
await firestore()
.collection("Users")
.doc(userInfo.email)
.update({
note: data
})
.then(() => {
console.log("delete success");
});
};
const removeSelectedNote = () => {. //delete LocalItem
dispatch(removeNote({ id: id }));
};
return (
<View>
<TouchableOpacity
onLongPress={() => {
removeSelectedNote();
updateDeletedNoteFirebase();
console.log("data",data); //console the same
}}
>
<Note />
</TouchableOpacity>
</View>
);
}
But problem is when i log the data it remain the same
Here is the gif to show what going on here
It still work but i don't know why it only work when i press delete again, if refesh it will remain the same, but if i delete twice, refresh it will delete the previous, not two item
Please help, thank you a lots
Note that i remove all unrelated code and keep the relate one