balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

index.js (4784B)

      1 const {compose} = wp.compose;
      2 const {withDispatch, withSelect} = wp.data;
      3 const { useState, useEffect} = wp.element;
      4 import '../stores';
      5 
      6 import {Modal, ModalManager} from '../modal-manager'
      7 import TabHeader from '../components/tab-header';
      8 import WithSidebarLayout from './layout-with-sidebar';
      9 import CollectionView from './view-collection';
     10 import SavedView from './view-saved';
     11 import ImportWizard from '../modal-import-wizard';
     12 import PromotorScoreModal from '../modal-promotor-score';
     13 import ErrorNotice from '../components/error-notice';
     14 import ChallengeFinalTemplate from '~redux-templates/challenge/final-templates';
     15 import FabWrapper from '../components/fab-wrapper';
     16 import {processImportHelper} from '~redux-templates/stores/actionHelper';
     17 import './style.scss'
     18 
     19 
     20 function LibraryModal(props) {
     21     const {
     22         fetchLibraryFromAPI, activeCollection, activeItemType, errorMessages, importingTemplate, challengeFinalStatus, isChallengeOpen,
     23         setLoading, setImportingTemplate, clearSearch, clearState
     24     } = props;
     25     const [loaded, setLoaded] = useState(false);
     26     const [escKeyPressed, setEscKeyPressed] = useState(false);
     27     const [isPSModalVisible, setPSModalVisible] = useState(false);
     28 
     29     let stateLibrary = null;
     30     useEffect(() => {
     31 		clearState();
     32         stateLibrary = fetchLibraryFromAPI();
     33         if (stateLibrary === null && loaded === false) { // One to be called at first.
     34             setLoading(true);
     35             setLoaded(true);
     36         }
     37         setPSModalVisible(!!redux_templates.nps);
     38         const handleKeyUp = ({keyCode}) => {
     39             if (keyCode === 27) {
     40                 setEscKeyPressed(true);
     41             }
     42         }
     43         document.addEventListener('keyup', handleKeyUp);
     44         return () => {
     45             document.removeEventListener('keyup', handleKeyUp);
     46         }
     47     }, []);
     48 
     49     useEffect(() => {
     50         if (escKeyPressed) {
     51             setEscKeyPressed(false);
     52             if (ModalManager.isCustomizerOpened()) {
     53                 ModalManager.closeCustomizer();
     54             } else {
     55                 if (importingTemplate)
     56                     setImportingTemplate(null);
     57                 else {
     58                     ModalManager.close();
     59                 }
     60             }
     61         }
     62     }, [escKeyPressed])
     63 
     64     const hasSidebar = () => {
     65         return ((activeItemType !== 'collection' || activeCollection === null) && activeItemType !== 'saved');
     66     }
     67 
     68     // read block data to import and give the control to actual import
     69     const processImport = () => {
     70         if (importingTemplate) processImportHelper();
     71     }
     72 
     73 
     74     return (
     75         <Modal className="redux-templates-builder-modal-pages-list"
     76                customClass="redux-templates-builder-modal-template-list"
     77                openTimeoutMS={0} closeTimeoutMS={0}>
     78             <TabHeader/>
     79             {
     80                 errorMessages && errorMessages.length > 0 &&
     81                 <ErrorNotice errorMessages={errorMessages}/>
     82             }
     83             <div className="redux-templates-collections-modal-body">
     84                 {hasSidebar() && <WithSidebarLayout/>}
     85                 {(hasSidebar() === false && activeItemType === 'collection') && <CollectionView/>}
     86                 {(hasSidebar() === false && activeItemType !== 'collection') && <SavedView/>}
     87             </div>
     88             {
     89                 importingTemplate && <ImportWizard startImportTemplate={processImport} />
     90             }
     91             {
     92                 isPSModalVisible && <PromotorScoreModal propOnClose={() => setPSModalVisible(false)}/>
     93             }
     94             { (challengeFinalStatus !== '') && <ChallengeFinalTemplate finalStatus={challengeFinalStatus} /> }
     95             { !isChallengeOpen && <FabWrapper /> }
     96         </Modal>
     97     );
     98 }
     99 
    100 
    101 export default compose([
    102     withDispatch((dispatch) => {
    103         const {
    104             setLoading,
    105             setLibrary,
    106             setImportingTemplate,
    107             clearSearch,
    108 			clearState
    109         } = dispatch('redux-templates/sectionslist');
    110 
    111         return {
    112             setLoading,
    113             setLibrary,
    114             setImportingTemplate,
    115             clearSearch,
    116 			clearState
    117         };
    118     }),
    119 
    120     withSelect((select) => {
    121         const {fetchLibraryFromAPI, getActiveCollection, getActiveItemType, getErrorMessages, getImportingTemplate, getChallengeOpen, getChallengeFinalStatus} = select('redux-templates/sectionslist');
    122         return {
    123             fetchLibraryFromAPI,
    124             activeCollection: getActiveCollection(),
    125             activeItemType: getActiveItemType(),
    126             errorMessages: getErrorMessages(),
    127             importingTemplate: getImportingTemplate(),
    128             challengeFinalStatus: getChallengeFinalStatus(),
    129             isChallengeOpen: getChallengeOpen()
    130         };
    131     })
    132 ])(LibraryModal);