Диалоговые окна на Promise

[ua9msn]

Я делал так что бы вызов модального диалога не отличался от вызова нативного алерта.

onSomethingClicked = async () => {
        const ok = await AsyncConfirm({
            text: Localizer.get('app.something.confirm'),
            okButtonText:Localizer.get('dialog.yes'),
            noButtonText: Localizer.get('dialog.no'),
        });

        if(ok){
            TransportController.get('/api/user/something')
                .then(data => {
                   doAnything(data)
                })
                .catch(error => {
                    feedback.error(STATUS.FAILURE, error);
                });
        }
        
    };

Если б я только мог подумать что эта тема стоит отдельной статьи…

[merrick_krg]

Иногда бывают случаи, когда закрытие окна и отмена действия имею разное значение.
Выбор пал на подход с хуками, потому что, вариант, когда мы можем вызвать модальное окно откуда угодно, сложно поддерживать, а в этом варианте, работает только как задумано.
Ваш вариант похож на частный случай, не могу сказать точно, но из примера такой вывод, тут же описывается более общий подход.

[ua9msn]

Да я не спорю с хуками, с редаксом, с провайдерами, с контекстами…
Может помните такой PHP фреймворк — Zend? Очень много народу его использовало, все вроде хорошо. Однако, мне лично(подчеркнуто), он сразу казался overengeneered. Всё правильно, всё по инструкции, не докопаться. Но и сходу не разобраться. Класс на наследовании инкапсуляцией полиморфизм погоняет. Ваш подход, на мой личный(подчеркнуто) взгляд — overengeenered.

[merrick_krg]

Ну это ведь хабр. Решили проблему, поделитесь. Возможно кому нибудь пригодиться.

[Golovanoff]

Ненавижу модальные окна. Открылось модальное окно, из него — следующее, а для того, чтобы понять, что мне вбить в него, мне нужно посмотреть то, что закрыто первым окном.
Разве нельзя обойтись без модальных окон?

[merrick_krg]

Тут уже зависит от дизайна и подхода к ux. В целом обойтись можно, чаще всего, но просто заменить это на страницы, это не решить проблему. Перешёл на другую страницу надо посмотреть, что было на предыдущей, возвращаемся, сморим, вперёд.

[ua9msn]

О да. Модалка из модалки — плохой подход, в принципе. Но мы живем в реальном мире и заказчики — они зверьки загадочные, требуют странного. Не всегда хватает терпения переубедить или мозгов что бы предложить другой подход. Ну и из реальной жизни — есть здоровенная форма, попап, модалка. При попытке поменять/удалить критическое поле нужен конфирм диалог. Вот вам модалка из из модалки. Но я все равно не вижу причин делать для этого целый стэк.

[bodqhrohro]

Спасибо за статью, в очередной раз напомнила, что в современном React я разбираюсь, как свинья (то есть я!) в апельсинах. Контексты, порталы, useState какой-то — чего несут? o_O

Подход напоминает Java'овский, где в тонне фабрик, интерфейсов, паттернов и прочих абстракций тонет действительно полезный код. А на TypeScript бы и того печальнее выглядело, пожалуй. Уж не бывшие Java'исты ли и испортили вебдев?

[JustDont]

Это вы голимую функциональщину-то пытаетесь на явистов переложить? Очень смешно.

[merrick_krg]

На самом деле исходный код написан на typescript и не выглядит сложнее, но позволяет создать контракт для интерфейсов, которые передаются в модальное окно и получаются из него.

[JustDont]

Автор заглавного комментария просто наехал на реакт на хуках, но почему-то приписал к этому бывших явистов, в то время как бывшие явисты едва ли будут писать на хуках — зачем, у них есть старые-добрые классы, которые им глазу приятнее (лично мне вот приятнее, по крайней мере).

[reforms]

Может я избалован vue, но мне приведенные примеры кажутся непосильно сложными, возможно из-за субъективного восприятия react. Приведу пример, как мы работает с модальными диалогами в vue и ts:

// Класс, отвечающий за логику сохранения документа
class SaveDocumentEngine {

    async saveDocument(doc: Document): Promise<void> {
        const docCount = 1; // константа введена для наглядности
        const userAnswer = await new SaveDocsConfirmDialog().show(docCount);
        // Если пользователь передумал
        if (userAnswer !== UserChoice.SAVE) {
            return;
        }
        // логика сохранения и проверки документа
    }
}

Явное создание диалога, вызов с параметрами и обработка результата — ничего лишнего. А вся специфика спрятана в самом диалоге.

/** Диалог подтверждения сохранения документа/документов */
@Component({
    // language=Vue
    template: `
<dialog-form title="Предупреждение" :width="500">
    <template slot="content">
        Вы действительно хотите сохранить {{data > 1 ? "документы" : "документ"}}?
    </template>
    <template slot="footer">
        <button class="btn btn-primary" @click="onSave">Сохранить</button>
        <button class="btn" @click="onCancel">Отмена</button>
    </template>
</dialog-form>
`
})
export class SaveDocsConfirmDialog extends CustomDialog<DocCount, UserChoice> {
    /** Желание сохранить */
    private onSave() {
        this.close(UserChoice.SAVE);
    }
    /** Желание отменить */
    private onCancel() {
        this.close(UserChoice.CANCEL);
    }
}

// Тип - Количество документов
type DocCount = number;

// Тип - Выбор пользователя
export enum UserChoice {
    SAVE, CANCEL
}

[merrick_krg]

Вы работаете, но как устроен CustomDialog знаете? Использование выглядит похожим. Только в моем случае, все модальные окна могут быть загружены асинхронно.