InstallPluginStep.js (5916B)
1 import {pluginInfo} from '~redux-templates/stores/dependencyHelper'; 2 3 const {apiFetch} = wp; 4 const {compose} = wp.compose; 5 const {withDispatch} = wp.data; 6 const {Fragment, useState} = wp.element; 7 const {__} = wp.i18n; 8 9 function InstallPluginStep(props) { 10 11 const {missingPlugins, toNextStep, onCloseWizard} = props; 12 const {setInstalledDependencies} = props; 13 const [installingPlugin, setInstallingPlugin] = useState(null); 14 const [installedList, setInstalledList] = useState([]); 15 const [failedList, setFailedList] = useState([]); 16 const [waitingList, setWaitingList] = useState(missingPlugins); 17 18 const preInstallInit = () => { 19 setInstalledList([]); 20 setFailedList([]); 21 setWaitingList(missingPlugins); 22 setInstallingPlugin(null); 23 setInstalledDependencies(false); 24 } 25 26 const onInstallPlugins = async () => { 27 preInstallInit(); 28 let localInstalledList = []; 29 let localFailedList = []; 30 let localWaitingList = [...waitingList]; 31 for (let pluginKey of missingPlugins) { 32 const pluginInstance = redux_templates.supported_plugins[pluginKey]; 33 localWaitingList = localWaitingList.filter(key => key !== pluginKey) 34 setWaitingList(localWaitingList); 35 if (!pluginKey || !pluginInstance) { 36 setInstallingPlugin(null); 37 break; 38 } 39 setInstallingPlugin({...pluginInstance, pluginKey}); 40 const reduxProSurfix = (pluginInstance.redux_pro) ? '&redux_pro=1' : ''; 41 await apiFetch({ 42 path: 'redux/v1/templates/plugin-install?slug=' + pluginKey + reduxProSurfix, 43 }).then(res => { 44 if (res.success) { 45 setInstalledDependencies(true); 46 localInstalledList = [...localInstalledList, pluginKey]; 47 setInstalledList(localInstalledList); 48 if (localWaitingList.length === 0) setInstallingPlugin(null); 49 } else { 50 localFailedList = [...localFailedList, pluginKey] 51 setFailedList(localFailedList); 52 if (localWaitingList.length === 0) setInstallingPlugin(null); 53 } 54 }) 55 .catch(res => { 56 localFailedList = [...localFailedList, pluginKey] 57 setFailedList(localFailedList); 58 if (localWaitingList.length === 0) setInstallingPlugin(null); 59 }); 60 } 61 } 62 if (waitingList.length === 0 && failedList.length === 0 && installingPlugin === null) 63 toNextStep(); 64 return ( 65 66 <Fragment> 67 <div className="redux-templates-modal-body"> 68 <h5>{__('Install Required Plugins', redux_templates.i18n)}</h5> 69 <p>{__('Plugins needed to import this template are missing. Required plugins will be installed and activated automatically.', redux_templates.i18n)}</p> 70 { 71 (installingPlugin === null && failedList.length > 0) && 72 (<p className='error installError'> 73 {__('The following plugin(s) failed to install properly. Please manually install them yourself before attempting another import.', redux_templates.i18n)} 74 </p>) 75 } 76 77 <ul className="redux-templates-import-progress"> 78 { 79 missingPlugins && 80 missingPlugins.map(pluginKey => { 81 82 let plugin = pluginInfo(pluginKey) 83 84 if (installingPlugin && installingPlugin.pluginKey === pluginKey) 85 return ( 86 <li className="installing" key={installingPlugin.pluginKey}>{installingPlugin.name} 87 <i className="fas fa-spinner fa-pulse"/></li>); 88 if (failedList.includes(pluginKey)) 89 return (<li className="failure" key={pluginKey}>{plugin.name} <a href={plugin.url} target="_blank"><i className="fas fa-external-link-alt"/></a></li>); 90 if (waitingList.includes(pluginKey)) 91 return (<li className="todo" key={pluginKey}>{plugin.name} {plugin.url && 92 <a href={plugin.url} target="_blank"><i className="fas fa-external-link-alt"/></a> 93 }</li>); 94 if (installedList.includes(pluginKey)) 95 return (<li className="success" key={pluginKey}>{plugin.name} <i 96 className="fas fa-check-square"/></li>); 97 }) 98 } 99 </ul> 100 </div> 101 <div className="redux-templates-modal-footer"> 102 {waitingList.length !== 0 && 103 <button className="button button-primary" disabled={installingPlugin !== null} 104 onClick={() => onInstallPlugins()}> 105 {installingPlugin !== null && <i className="fas fa-spinner fa-pulse"/>} 106 <span>{__('Install', redux_templates.i18n)}</span> 107 </button> 108 } 109 <button className="button button-secondary" disabled={installingPlugin !== null} 110 onClick={onCloseWizard}> 111 {__('Cancel', redux_templates.i18n)} 112 </button> 113 </div> 114 </Fragment> 115 ); 116 } 117 118 119 export default compose([ 120 withDispatch((dispatch) => { 121 const { 122 setInstalledDependencies 123 } = dispatch('redux-templates/sectionslist'); 124 return { 125 setInstalledDependencies 126 }; 127 }) 128 ])(InstallPluginStep);