React custom hook for different API task with unique state and handling management in each? - async-await

Question

I had already written custom API fetch hooks before, but now I have complex API call functions with different features and couldn't wrap my head around how to create a single custom hook and use all of them.
Each of them got different states, methods, wrappers etc some with a single promise some with promise.all()
1st call:
const handleGetReportsList = async () => {
setIsLoading(true);
try {
const response = await axios(reportURL, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token
}
});
setReportsList(response.data);
} catch (err) {
if (axios.isAxiosError(err)) {
console.log(err.response);
notify(
{
width: "auto",
message: `Rapor verileri listelenemiyor.
${err.response?.data.message}
Hata kodu: ${err.response?.status}`,
position: {}
},
"error",
6000
);
console.error(
(err instanceof Error && err.message) || "Something's Wrong"
);
} else {
notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
}
}
setIsLoading(false);
};
2nd call:
const handleGetReportData = async (e: ClickEvent) => {
const validationResult = e.validationGroup.validate();
if (validationResult.isValid) {
setIsLoading(true);
setIsDataGridVisible(false);
try {
const response = await axios(reportURL, {
method: "POST",
data: JSON.stringify(reportParams),
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token
}
});
setReportData(response.data);
setIsDataGridVisible(true);
} catch (err) {
setIsLoading(false);
if (axios.isAxiosError(err)) {
notify(
{
width: "auto",
message: `Rapor verileri listelenemiyor.
Lütfen tekrar deneyin.
Hata kodu: ${err.response?.status}`
},
"error",
6000
);
console.error(
(err instanceof Error && err.message) || "Something's Wrong"
);
} else {
notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
}
}
}
};
3rd call:
const handleGetFilterData = async () => {
setIsLoading(true);
setIsFilterButtonVisible(false);
try {
const response = await axios(filterURL, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token
}
});
// eslint-disable-next-line #typescript-eslint/no-explicit-any
dispatchFilterData(response.data);
setIsFilterButtonVisible(true);
} catch (err) {
if (axios.isAxiosError(err)) {
notify(
{
width: "auto",
message: `Rapor verileri listelenemiyor.
Lütfen tekrar deneyin.
Hata kodu: ${err.response?.data.message}`
},
"error",
6000
);
console.error(
(err instanceof Error && err.message) || "Something's Wrong"
);
} else {
notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
}
}
setIsLoading(false);
};
4th call:
const getDashboardData = async () => {
const apiSettings: AxiosRequestConfig<IApiSettings> = {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token
}
};
setIsLoading(true);
try {
const response = await Promise.all([
axios(`${dashboardURL}TOPLAM/${period}/`, apiSettings),
axios(`${dashboardURL}ADET/${period}/`, apiSettings)
]);
const responseData = response.map(item => {
return item.data;
});
setDashboardData(responseData);
} catch (err) {
if (axios.isAxiosError(err)) {
console.log(err.response);
notify(
{
width: "auto",
message: `Özet verileri listelenemiyor.
${err.response?.data.message}
Hata kodu: ${err.response?.status}`,
position: {
offset: "0 -100"
}
},
"error",
6000
);
console.error(
(err instanceof Error && err.message) || "Something's Wrong"
);
} else {
notify("Hata! Çıkış yapıp tekrar deneyin", "error", 6000);
}
}
setIsLoading(false);
};
As the calls are pretty similar I want to create and use hooks.
Cheers