is it possible to programmatically remove a row when editing a column value? I have two tables where a user can update "Status" and if they update to a certain value, I'd like to remove the row and add it to the other table.
I can update the state of the other table to add the row, but when removing the row from the current table I get the error:
Can't perform a React state update on an unmounted component.
Ok, figured out at least a work-around. Resolve() the editable first then update the row in a setTimeout. This will cause a potential timing issue if the table isnt updated for the timeout.
cellEditable={{
onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
return new Promise<void>((resolve, reject) => {
resolve();
setTimeout(() => {
//
// REMOVE LOGIC HERE
//
}
}, 50);
});
},
}}
Related
I am implementing the "favorites" logic in a project where there are some cards showing some info about songs, and a heart icon shows red if that song is in the user favorites or empty if it is not.
I am using Supabase as a backend (SQL) and I already have a "profiles" table, a "songs" table and a "favorites" table with two foreign keys: profile_id and song_id.
In the project I am using RTKQuery and I have already configured the endpoint to obtain the data for the favorites which is like:
endpoints: (builder) => ({
getFavorites: builder.query({
queryFn: async (id) => {
const {data, error} = await supabase
.from('favorites')
.select(`users_id,songs_id (*)`)
.eq('users_id',id)
return { data, error }
},
providesTags: ["Favorites"]
}),
Then I get the data with:
const { data, isSuccess } = useGetFavoritesQuery( id );
I am calling this hook from the component mad for each card, which already have the props. So I can check if the prop "song.id" is in some of the ids inside the "favorites" object.
But the problem I am facing is because the data that I really need is the nested object inside data, and each one of the nested objects have the id that I would use to check if it is === to song.id of the component I am calling from.
I have tried several things but I don't know if I am doing fine. This is one solution that I have tried. First I iterate over data to obtain the object "favorites":
let favorites;
if (isSuccess){
data.forEach(element => {
favorites = element.songs_id;
})
}
And then the boolean for the heart red or empty:
const favoriteIconColor = useMemo(() => {
if (Object.values(favorites).some(item=> item.id === song.id)){
return true
}
} , [favorites, song]);
But that is not working. I am thinking about creating just an array with all of the ids in the first iteration, but I am not sure if I am overcomplicating the issue.
I have also considered that maybe there is a way to obtain the data as I need with the query itself, but not sure about it. Any advice?
I have an issue with the states not updating properly (stale closure). I am first setting index 0 of activeCards and console logging it (the first entry in the log provided). This log returns the result of the state as it was prior to it being updated. Then I am setting index 1 of the same and console logging it (second entry in the log provided). The second log returns the result as it was prior to the second update (ie as it should've been logged after the previous update). How can I update a state immediately or else wait for it to be updated before I proceed?
useEffect(() => {
console.log(activeCards)
}, [activeCards])
if(condition){
temp = [...activeCards];
temp[0] = {index: index, url: cards[index]};
setActiveCards([...temp])
console.log(activeCards)
}
else{
temp = [...activeCards];
temp[1] = {index: index, url: cards[index]};
setActiveCards([...temp])
console.log(activeCards)
}
let temp = [activeCards];
This makes temp a 2d array since activeCards itself is an array. Maybe what youre intending to do is,
let temp = [...activeCards];
state not update immediately for performance. if you use functional component you can use the useEffect(()=>{//code run after state updated},[your state]) and it call every time your state update to new value. and if you are using class component you can use this.setState({someState:''}, () => {
//code run after state updated
});
You can do like this.
useEffect(() => {
console.log(activeCards);
}, [activeCards]);
let temp = [...activeCards];
temp[0] = { index: index, url: cards[index] };
if (!condition) {
temp[1] = { index: index, url: cards[index] };
}
setActiveCards([...temp]);
The best way to solve stale closures is to use useRef() instead of useState() for values which one requires to be updated frequently. Hence one will avoid having a large number of states being updated sequentially causing a stale closure.
I have a chain of computed values like this:
var lt = reactive({
scrollTop: shallowRef(0),
row: computed(() => Math.floor(lt.scrollTop / lt.rowHeight)),
records: computed(() => props.collection.filter((x, i) => {
console.log(lt.row);
return i > row && i < row + 30;
}))
})
scrollTop is tied to a scroll listener. This setup works, but I notice that the records computed is getting recalculated even though row hasn't actually changed. I understand this happens because scrollTop changes, and triggers the proxies all the way down the chain.
Is there a way to ensure a computed doesn't change unless there's an actual value change in a direct contributor var? If not, is there a better pattern for the data here that would solve this?
I am learning Vue, and I have a list of todo items that has a checkbox that I am able to mark as complete. Everything in my application is working.
When I check the checkbox, I am adding items to the completedItems array. When unchecked, I am removing items. I am able to check the array length and it is also correct.
I have a button that I can click that will remove all items marked as complete from my list.
The overarching logic is working fine. The status of being marked as complete is working, and the actual record is getting deleted as expected.
However, I am unable to remove the item from the actual view. I am not sure what I am doing wrong -- incorrectly updating my completedItems array or something. The items that I delete will only disappear after a full page refresh.
Here is what I am doing:
<task v-for="item in list.items">...</task>
...
data() {
return {
completedItems: [],
}
},
props: ['list'],
...
axios.delete(...)
.then((response) => {
if (response.status === 204) {
this.completedItems = this.completedItems.filter(i => i !== item);
} else {
console.error('Error: could not remove item(s).', response);
}).catch((error) => {
alert(error);
});
Thank you for any suggestions!
EDIT
Here is how I am checking for a match now, and it is coming across correctly, the element in the array still isn't getting removed from the page.
this.completedItems = this.completedItems.filter(i => i.id !== item.data.id);
// i.id = 123
// item.data.id = 123
You should avoid manipulating props directly, since props are supplied by the parent component and can be changed without notice. I would do something like this:
data(){
return{
completedItems[],
localList: this.list
}
}
Then, manipulate and bind the localList array instead of the prop, this should give you what you are looking for.
I am using Datatables to list some data into a table. I figured out how to make the delete row work in the Datatables but I can not figure out how to make delete at the same time from the MySQL database. Not being deleted from there, on refresh will get the JSON file again that will populate my table. This is my code so far: (I am trying to get the ID of the row I am pressing the delete from, match the id with the one in the database and delete the one from the database)
This function executes when the delete button is pressed:
// Add an action delete record
$('#example tbody').on( 'click', 'button.delete', function () {
table.row( $(this).parents('tr') ).remove().draw();
// AJAX Request
$.ajax({
url: 'app/getcv.php',
type: 'POST',
data: { "data": "id" },
success: function(data){
alert("jjjjj");
// table.row($(this).parents('tr')).remove().draw();
}
})
} );
on Click Call your Delete Methods as soon as it clicked Delete the record from the database then romove the list