Как оптимизировать запрос данных?
Всем привет. В написанной мной админке есть три кнопки генерации csv-отчётов (запрашиваем данные с сервера и сохраняем в формат таблицы). у меня всё происходит относительно быстро:
но вот у пользователя по какой-то причине проблемы. Периодически он заходит и кликает на одну из кнопок, и у него скачивается пустой отчёт. Как можно пофиксить это? Вот (сокращенный) код компонента:
const Reports = () => {
const accountContext = useContext(AccountContext);
const {accounts, preorders} = accountContext;
const {saveAsCsv} = useJsonToCsv();
const data = accounts;
const [users, setUsers] = useState([])
useEffect(async () => {
const res = await axios.get('/api/accounts/admin/users-with-coupons')
const data = res.data.map(elem => {
return Object.fromEntries(Object.entries(elem).map(entry => {
return (entry[0] == "couponCode") ? [entry[0], entry[1].toUpperCase()] : [entry[0], entry[1]];
}))
})
setUsers(data)
await accountContext.getAllAccounts();
await accountContext.getPreorders();
}, []);
const getAccounts = () => {
const date = new Date();
const time = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}_${
date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`;
const filename = `UP-Accounts-Report-${time}`;
saveAsCsv({data, fields, filename});
}
const getPreorders = () => {
const fields = fields0;
const data = preorders.map(elem => {
return Object.fromEntries(Object.entries(elem).map(entry => {
return (entry[1]) ? [entry[0], (entry[1] + "").replaceAll('\n', ' ').replaceAll(',', "")] : [entry[0], entry[1]];
}
))
})
// console.log(data)
const date = new Date();
const time = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}_${
date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`;
const filename = `UP-Preorders-Report-${time}`;
console.log(preorders, fields, filename)
saveAsCsv({data, fields, filename});
}
const getUsersCoupons = () => {
const fields = fields1;
const data = users;
const date = new Date();
const time = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}_${
date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`;
const filename = `UP-UsersCoupons-Report-${time}`;
saveAsCsv({data, fields, filename});
}
return (
<section className="d-flex flex-column justify-content-center align-items-start ps-5 pb-5">
<h1 className='mainWindow__header'> Unplugged Admin - Reports</h1>
<ReportItem title="Accounts report" handleClick={getAccounts}/>
<ReportItem title="Preorders" handleClick={getPreorders}/>
<ReportItem title="Users with coupons" handleClick={getUsersCoupons} isNew={true}/>
</section>
);
};
AccountState.js:
const AccountState = props => {
const getAllAccounts = async () => {
try {
const res = await axios.get('/api/accounts/admin');
dispatch({
type: GET_ALL_ACCOUNTS,
payload: res.data
});
} catch (err) {
dispatch({
type: ACCOUNT_ERROR,
payload: err.response
});
}
};
const getPreorders = async () => {
try {
const res = await axios.get('/api/accounts/admin/preorders');
dispatch({
type: GET_PREORDERS,
payload: res.data
});
} catch (err) {
dispatch({
type: PREORDER_ERROR,
payload: err.response
});
}
};
return (
<AccountContext.Provider
value={{
accounts: state.accounts,
account: state.account,
loading: state.loading,
error: state.error,
preorders: state.preorders,
getAllAccounts,
getBunchAccounts,
getPreorders,
searchAccounts
}}
>
{props.children}
</AccountContext.Provider>
);
};