modal

modal.js

import React, { Component } from 'react'
import Modal from 'react-modal'
import styles from './styles.module.sass'
import { ReactComponent as Close } from 'Images/close.svg'
import ButtonToUp from './ButtonToUp'
import Heading from './Heading'
import Loader from 'Components/Common/Loader'
import commonStyles from 'Styles/common.module.sass'
import moment from 'moment'
import API from 'Services/API'
import { invokeParams } from 'Constants/utils'
import { createToast, TOAST_TYPES } from 'Components/Common/Toast/Toast'

import { providers } from 'Constants/constants'
import { PARAMS_FROM, PARAMS_TO } from 'Components/Stats/Dynamics'

import {
    PARAMS_PLATFORM_ID,
    PARAMS_FIELD
} from 'Constants/geoservices'

Modal.setAppElement('#pointer')

function getInitialState(generateDataForSearchDone) {
    return {
        searchQuery: ''
    }
}
export default class ModalCheckResult extends Component {
    constructor(props) {
        super(props)

        this.state = getInitialState()
    }

    async componentDidMount() {
        const isOpenModal = this.isOpenModal()
        if (isOpenModal) {
            this.loadCheckResultFullData()
        }
    }

    componentDidUpdate(prevProps) {
        if (prevProps.location.search !== this.props.location.search) {
            const isOpenModal = this.isOpenModal()
            if (isOpenModal) {
                this.loadCheckResultFullData()
            }
        }
    }

    loadCheckResultFullData = async (props = this.props) => {
        const { networkId } = props
        const params = this.getCheckResultParams()

        const result = await API.request(`networks/${networkId}/check-results?${invokeParams(params)}`, 'GET')

        if (!result.error && result?.companyCheckResults?.length > 0) {
            const state = {
                isLoading: false
            }

            this.setState(state)
        } else if (result?.error?.message) {
            createToast(result.error.message, 'Ошибка', { type: TOAST_TYPES.ERROR })
        } else {
            createToast('Произошла неизвестная ошибка, попробуйте повторить позже', null, { type: TOAST_TYPES.ERROR })
        }
    }

    getCheckResultParams = () => {
        const { providerId, fromCreatedAt, toCreatedAt } = this.getActiveModalParams()

        return {
            providerIds: providerId ? `[${providerId}]` : null,
            fromCreatedAt: fromCreatedAt || null,
            toCreatedAt: toCreatedAt || null
        }
    }

    getSearchParams(props) {
        return new URLSearchParams(props.location.search)
    }

    getPlatformIdByAlias = alias => {
        const platform = providers.find(item => item.alias === alias)

        return platform ? platform.id : null
    }

    /*getMatchingFieldKeyByAlias = alias => {
        const field = matchingResultColumns.find(item => item.urlAlias === alias)

        return field ? field.key : null
    }*/

    getActiveModalParams = (props = this.props) => {
        const searchParams = this.getSearchParams(props)
        const keyField = searchParams.has(PARAMS_FIELD)
            //? this.getMatchingFieldKeyByAlias(searchParams.get(PARAMS_FIELD))
            ? searchParams.get(PARAMS_FIELD)
            : null
        const platformId = searchParams.has(PARAMS_PLATFORM_ID)
            ? this.getPlatformIdByAlias(searchParams.get(PARAMS_PLATFORM_ID))
            : null
        const fromCreatedAt = searchParams.has(PARAMS_FROM)
            ? moment(searchParams.get(PARAMS_FROM)).startOf('day').toISOString()
            : null
        const toCreatedAt = searchParams.has(PARAMS_TO)
            ? moment(searchParams.get(PARAMS_TO)).endOf('day').toISOString()
            : null

        return { platformId, keyField, fromCreatedAt, toCreatedAt }
    }

    isOpenModal = () => {
        const queryParams = this.getActiveModalParams()

        return Boolean(queryParams.platformId && queryParams.keyField)
    }

    handleModalShow = data => {
        this.setState({ ...data })
    }

    clearQueryParams = () => {
        const { history } = this.props
        const query = this.getSearchParams(this.props)

        query.delete(PARAMS_PLATFORM_ID)
        query.delete(PARAMS_FIELD)

        history.replace({ search: `${query}` })
    }

    handleModalClose = () => {
        this.clearQueryParams()
        this.setState(getInitialState(true))
    }

    renderDetailModal = () => {
        const { data, isLoading } = this.state
        const isOpenModal = this.isOpenModal()

        return (
            <Modal
                key="modal"
                className={styles.detailModal}
                isOpen={isOpenModal}
                onRequestClose={this.handleModalClose}
            >
                <div className={styles.detailModal__closeBtn} title="Закрыть" onClick={this.handleModalClose}>
                    <Close />
                </div>
                <ButtonToUp />
                <div className={styles.modalContent}>
                    {isLoading && (
                        <div key="loader" className={commonStyles.loaderMiddle}>
                            <Loader />
                        </div>
                    )}
                    {!isLoading && data && (
                        <div key="content" className={styles.checkResultContent}>
                            <Heading
                                data={data}
                            />
                            {this.renderTable()}
                        </div>
                    )}
                </div>
            </Modal>
        )
    }

    render() {
        return this.renderDetailModal()
    }
}