Есть четыре функции с запросами, которые передаются в один компонент и отвечают за удаление определенного типа вопросов.
const handleBuyerQuestionDelete = questionId => {
dispatch(OrganizationsActions.deleteEventCustomQuestionRequest(organizationId, eventId, questionId));
};
const handleAllAttendeesQuestionDelete = questionId => {
dispatch(EventsActions.deleteAllAttendeesCustomQuestionRequest(organizationId, eventId, questionId));
};
const handleTicketQuestionDelete = (ticketId, questionId) => {
dispatch(EventsActions.deleteTicketCustomQuestionRequest(organizationId, eventId, ticketId, questionId));
};
const handleAddonQuestionDelete = (addonId, questionId) => {
dispatch(EventsActions.deleteAddonCustomQuestionRequest(organizationId, eventId, addonId, questionId));
};
<QuestionList
label={t('screens.createEventQuestions.misc.questionList')}
questions={questions}
onAddQuestions={handleAddEventQuestions}
onQuestionRequiredChange={onEventQuestionRequiredChange}
onQuestionDelete={handleBuyerQuestionDelete}
/>
Они получают общие данные, но два последних запроса получают дополнительные параметры - addonId и ticketId, которые передаются функциям уже в children компоненте.
В конечном компоненте есть условие на выполнение одной из четырех фукнции, в зависимости от данных, которые приходят в компонент. И хорошо бы элегантно записать условие, потому что пока это выглядит так:
const handleDeleteQuestion = () => {
if (addonId) {
onQuestionDelete(addonId, id);
} else if (ticketId) {
onQuestionDelete(ticketId, id);
} else {
onQuestionDelete(id);
}
};
<IconButton className={classes.deleteButton} color="secondary" onClick={handleDeleteQuestion}>
<DeleteIcon fontSize="small" />
</IconButton>
Подобное условие работает, но имеет плохой вид. Как переписать условие так, чтобы оно и работало, и при этом выглядело элегантно?