balmet.com

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

index.js (2739B)

      1 /**
      2  * WordPress dependencies
      3  */
      4 import {__} from '@wordpress/i18n'
      5 import ChallengeStepItem from './ChallengeStepItem';
      6 import ProgressBar from './ProgressBar';
      7 import CONFIG from '../config';
      8 import './style.scss'
      9 
     10 const {compose} = wp.compose;
     11 const {withDispatch, withSelect} = wp.data;
     12 const {useState, useEffect} = wp.element;
     13 
     14 function ChallengeListBlock(props) {
     15     const {started, onStarted} = props;
     16     const {challengeStep, finalStatus, setChallengeOpen, setChallengeStep} = props;
     17     const [buttonRowClassname, setButtonRowClassname] = useState('challenge-button-row');
     18     useEffect(() => {
     19         setButtonRowClassname(challengeStep !== CONFIG.beginningStep  ? 'challenge-button-row started' : 'challenge-button-row');
     20     }, [challengeStep])
     21     
     22     const onCancelChallenge = () => {
     23         setChallengeOpen(false);
     24         setChallengeStep(-1);
     25     }
     26 
     27     return (
     28         <div className='challenge-list-block'>
     29             <p>{__('Complete the challenge and get up and running within 5 minutes', redux_templates.i18n)}</p>
     30             <ProgressBar currentStep={finalStatus === 'success' ?  CONFIG.totalStep : challengeStep} />
     31             <ul className='challenge-list'>
     32                 {
     33                     CONFIG.list.map((item, i) => {
     34                         return (<ChallengeStepItem key={i} step={i} currentStep={challengeStep} finalStatus={finalStatus} caption={item.caption} />);
     35                     })
     36                 }
     37             </ul>
     38             { finalStatus === '' &&
     39                 <div className={buttonRowClassname}>
     40                     {challengeStep === CONFIG.beginningStep && 
     41                         <button className='btn-challenge-start' onClick={onStarted}>{__('Start Challenge', redux_templates.i18n)}</button>}
     42                     {challengeStep === CONFIG.beginningStep && <button className='btn-challenge-skip' onClick={onCancelChallenge}>{__('Skip Challenge', redux_templates.i18n)}</button>}
     43                     {challengeStep !== CONFIG.beginningStep && <button className='btn-challenge-cancel' onClick={onCancelChallenge}>{__('Cancel Challenge', redux_templates.i18n)}</button>}
     44                 </div>
     45             }
     46         </div>
     47     );
     48 
     49 }
     50 
     51 
     52 export default compose([
     53     withDispatch((dispatch) => {
     54         const {setChallengeOpen, setChallengeStep} = dispatch('redux-templates/sectionslist');
     55         return {
     56             setChallengeOpen,
     57             setChallengeStep
     58         };
     59     }),
     60 
     61     withSelect((select) => {
     62         const {getChallengeStep, getChallengeFinalStatus} = select('redux-templates/sectionslist');
     63         return {
     64             challengeStep: getChallengeStep(),
     65             finalStatus: getChallengeFinalStatus()
     66         };
     67     })
     68 ])(ChallengeListBlock);