# extendify/0.10.0/src/Library/middleware/hasRequiredPlugins/InstallingModal.js

Extendify, version 0.10.0. 58 lines.

- Page: https://pluginprobe.com/plugins/extendify/0.10.0/code/src/Library/middleware/hasRequiredPlugins/InstallingModal.js
- Raw: https://pluginprobe.com/plugins/extendify/0.10.0/raw/src/Library/middleware/hasRequiredPlugins/InstallingModal.js
- Modified: 2022-05-27T00:51:26+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/extendify/0.10.0/code/src/Library/middleware/hasRequiredPlugins/InstallingModal.js#L10-L20`.

```javascript
import { Modal, Button } from '@wordpress/components'
import { useState, render } from '@wordpress/element'
import { __ } from '@wordpress/i18n'
import { Plugins } from '@library/api/Plugins'
import { useWantedTemplateStore } from '@library/state/Importing'
import ReloadRequiredModal from '../ReloadRequiredModal'
import ErrorInstalling from './ErrorInstalling'

export default function InstallingModal({ requiredPlugins }) {
    const [errorMessage, setErrorMessage] = useState('')
    const wantedTemplate = useWantedTemplateStore(
        (store) => store.wantedTemplate,
    )

    // Hardcoded temporarily to not force EP install
    // const required = wantedTemplate?.fields?.required_plugins
    const required =
        requiredPlugins ??
        wantedTemplate?.fields?.required_plugins.filter(
            (p) => p !== 'editorplus',
        )

    Plugins.installAndActivate(required)
        .then(() => {
            useWantedTemplateStore.setState({
                importOnLoad: true,
            })
            render(
                <ReloadRequiredModal />,
                document.getElementById('extendify-root'),
            )
        })
        .catch(({ message }) => {
            setErrorMessage(message)
        })

    if (errorMessage) {
        return <ErrorInstalling msg={errorMessage} />
    }

    return (
        <Modal
            title={__('Installing plugins', 'extendify')}
            isDismissible={false}>
            <Button
                style={{
                    width: '100%',
                }}
                disabled
                isPrimary
                isBusy
                onClick={() => {}}>
                {__('Installing...', 'extendify')}
            </Button>
        </Modal>
    )
}

```