I make an api call
report.tsx
if (buttonClick === 'pdf') {
getReportPDF(params, sort);
}
report-reducer.ts
export const getReportPDF = (search, sort) => {
const params = new URLSearchParams(search) ? new URLSearchParams(search).toString() : null;
const sorting = new URLSearchParams(sort) ? new URLSearchParams(sort).toString() : null;
const requestUrl = `${apiUrlPDF}?${params}${Object.keys(sort).length > 0 ? '&' + sorting : ''}`;
fetch(requestUrl).then(response => {
response
.blob()
.then(blob => {
if (blob.type === 'application/problem+json') {
alert('Nothing');
} else {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'report.pdf';
a.click();
}
})
.catch(error => console.log('error is ', error));
});
};
Now my problem is: at the moment I'm using an alert directly in the reducer, but if I would show a different alert
( for example usign bootstrap:
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
)
in the report.tsx, how can I do? I should return something in if (blob.type === 'application/problem+json') ??
thank you
You can create a state in report.tsx that controls showing of alert:
const [isAlertShowing,setAlertShowing]=useState(false)
Now make getReportPDF take an extra callback parameter in case of success:
export const getReportPDF = (search, sort, callback) => {
const params = new URLSearchParams(search) ? new URLSearchParams(search).toString() : null;
const sorting = new URLSearchParams(sort) ? new URLSearchParams(sort).toString() : null;
const requestUrl = `${apiUrlPDF}?${params}${Object.keys(sort).length > 0 ? '&' + sorting : ''}`;
fetch(requestUrl).then(response => {
response
.blob()
.then(blob => {
if (blob.type === 'application/problem+json') {
callback() // invoke the callback here or anywhere else you that you want
} else {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'report.pdf';
a.click();
}
})
.catch(error => console.log('error is ', error));
});
};
Then pass a function as callback, that sets isAlertShowing to true
const activateAlert=()=>setAlertShowing(true)
if (buttonClick === 'pdf') {
getReportPDF(params, sort, activateAlert);
}
Finally, in render of the component, show the alert whenever isAlertShowing is true:
For example:
return (
{isAlertShowing && <div class="alert alert-primary" role="alert" ....