Menu
I just want to hide Undo Button in UI after 5 seconds. Here is my code:
Saga.js
function* updateActionListingsSaga({ payload }) {
try {
const res = yield call(updateUnpublishedListingsById, payload);
let unpublishedListings = yield select(UnpublishedListings);
if (res) {
const row = unpublishedListings.listingsData.results.find(data => data.id === res.ids[0])
if (row) {
row.review_status = payload.review_status
row.isUndoEnabled = true;
yield setTimeout(() => {row.isUndoEnabled = false}, 5000)
}
}
yield put(updateActionListingSuccess());
} catch (error) {
yield put(apiError(error.error || error.message || error));
}
}
Index.js
item?.isUndoEnabled && (
<ConfirmDialogBtn
button={{
color: 'primary',
title: 'Undo',
icon: 'bx bx-undo',
}}
msg="Set this Listing as Undo"
onConfirm={() => handleUpdateListing(item?.id, 'pending')}
/>
)
I am retrieving a particular row set an Undo Button by appending row.isUndoEnabled= true property and After 5 seconds delay I just set it to row.isUndoEnabled= false.
Actual Output: Property is set to True but doesn't hide the Button
Expected Output: Hide the Button
Hope for the best Answer. Thank you
326
setTimeout(function timeoutFn(){ sagaMiddleware. run(function*() { yield put({type: ANOTHER_WATCHER }); setTimeout(timeoutFn, 5000); }) }, 5000); Note that doing this is like using the spawn effect meaning the new generator is detached and won't be e.g. cancelled when the above generator is cancelled.
Using setTimeout in React Components We'll call setTimeout inside of the useEffect Hook, which is the equivalent of the componentDidMount lifecycle method in Class components. import React, { useEffect } from 'react'; const App = () => { useEffect(() => { const timer = setTimeout(() => { setCount('Timeout called!'
setTimeout() The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires.
Introduction to JavaScript setTimeout()cb is a callback function to be executed after the timer expires. delay is the time in milliseconds that the timer should wait before executing the callback function.
The button is not hiding because updateActionListingSuccess function is called before timeout callback is executed. I recommend you:
timeout function inside a Promise and wait until it finished.updateActionListingSuccess just after the promise is resolved. function* updateActionListingsSaga({ payload }) {
try {
const res = yield call(updateUnpublishedListingsById, payload);
let unpublishedListings = yield select(UnpublishedListings);
let row = null;
if (res) {
row = unpublishedListings.listingsData.results.find(
data => data.id === res.ids[0]
);
if (row) {
row.review_status = payload.review_status;
row.isUndoEnabled = true;
}
}
yield put(updateActionListingSuccess());
if (row) {
yield new Promise(resolve =>
setTimeout(() => {
row.isUndoEnabled = false;
resolve();
}, 5000)
);
}
yield put(updateActionListingSuccess()); // update again
} catch (error) {
yield put(apiError(error.error || error.message || error));
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
