Pasted

import React from 'react';
import Modal from './Modal';
 
export interface ModalManagerProps {
 
}
 
export interface ModalManagerState {
    modals: ModalDescriptor[];
}
 
interface ModalDescriptor {
    id: number;
    url: string;
}
 
class ModalManager extends React.Component<ModalManagerProps, ModalManagerState> {
    private isInitialized = false;
    private readyCallback: () => void = () => {};
 
    state: ModalManagerState = {
        modals: [], // move to redux state
    };
 
    componentDidMount() {
        this.isInitialized = true;
        this.readyCallback();
    }
 
    public navigateTo = (url: string, data: object, type: 'GET' | 'POST') => {
        if (this.count() === 0) {
            // open new modal with given parameters
        } else {
            // change props of the last opened modal
        }
    };
 
    public navigateInBase = (url: string, data: object, type: 'GET' | 'POST') => {
        this.closeAllModals();
        this.navigateTo(url, data, type);
    };
 
    public openModal = (url: string, data: object, type: 'GET' | 'POST') => {
        // add parameters to the modals array in state
        // dispatch correct windowManager actions
    };
 
    public closeModal = (id: number) => {
        // remove modal with this id
        // dispatch correct windowManager actions
    };
 
    public closeTop = () => this.closeModal(this.state.modals[this.state.modals.length - 1].id);
 
    public closeAllModals = () => {
        this.state.modals.forEach(({ id }) => {
            this.closeModal(id);
        });
    };
 
    public count = () => this.state.modals.length;
 
    public onReady = (callback: () => void) => {
        if (this.isInitialized) {
            callback();
        } else {
            this.readyCallback = callback;
        }
    };
 
    public onEvent = (eventName: string, eventData?: string) => {
        // use modal middleware for events ???
    };
 
    handleModalClosed = (id: number) => (eventData: string) => {
        this.closeModal(id);
    };
 
    render() {
        const { modals } = this.state;
 
        return modals.map(({ id, url }, i) => (
            <Modal
                url={url}
                isActive={i === this.count() - 1}
                onModalClosed={this.handleModalClosed(id)}
                events={{ 'xhr-end': () => {}, 'navigation-finished': () => {} }}
            />
        ));
    }
}