I am working on an application and in the upload portion we have a toast message, using react-toastify, that displays the file is being uploaded. It should be updating with a progress bar, and I put render just to see if it changed at all, but it's not updating. updateNotificationProgress is being called, but the toast isn't updating. Below is the two toast functions as well as where it is being called in another file. I would love another pair of eyes on this because I just cannot get it to update.
Edit: Also the update function is being called inside of a ContextProvider file. It works everywhere else in our app, but for some reason it doesn't work when being called in the ContextProvider.
const createNotification = useCallback(() => {
toastId.current = toast.warn('Upload(s) in Progress', {
progress: 0,
autoClose: false,
hideProgressBar: false,
});
}, []);
const updateNotificationProgress = useCallback(
(progress) => {
// At this stage we want progress started, but not complete 0 < progress < 1
const cappedProgress = Math.min(Math.max(progress, 0.01), 0.99);
toast.update(toastId.current, {
progress: cappedProgress,
render: 'Updated',
type: toast.TYPE.INFO,
});
},
[toastId]
);
const waitForUploadsCompletedOverallAsync = useCallback(async () => {
return new Promise((resolve, reject) => {
const intervalId = setInterval(() => {
const status = summaryRef?.current;
if (status === LOADING_OVERALL) {
const progress = getUploadProgressRatio(detailedStatusRef);
updateNotificationProgress(progress);
}
if (status === ERROR_OVERALL) {
clearInterval(intervalId);
reject(new Error(UPLOAD_FAILED));
} else if (status === FINISHED_OVERALL) {
reset();
} else if (status === IDLE_OVERALL) {
clearInterval(intervalId);
resolve();
}
}, 1000);
});
}, [updateNotificationProgress, reset]);
const uploadAttachmentsAsync = useCallback(
async (attachments) => {
try {
const uploadingAttachments = upload(attachments);
await waitForUploadsCompletedOverallAsync();
const uploadedAttachments = _.chain(uploadingAttachments)
.values()
.flatten()
.groupBy(ATTACHMENT_FIELD_NAME)
.value();
return uploadedAttachments;
} catch (error) {
throw new Error(UPLOAD_FAILED);
}
},
[upload, waitForUploadsCompletedOverallAsync]
);