index.js (1794B)
1 /** 2 * WordPress dependencies 3 */ 4 import {__} from '@wordpress/i18n' 5 import './style.scss' 6 import helper from './helper'; 7 import CONFIG from './config'; 8 import ChallengeListBlock from './challenge-list-block'; 9 import ChallengeTimer from './challenge-timer'; 10 11 const {compose} = wp.compose; 12 const {withDispatch, withSelect} = wp.data; 13 const {useState, useEffect} = wp.element; 14 15 function ReduxChallenge(props) { 16 const {autoChallengeStart} = props; 17 const {isOpen, challengeStep, setChallengeStep, listExpanded} = props; 18 const [challengeClassname, setChallengeClassname] = useState('redux-templates-challenge'); 19 const [started, setStarted] = useState(false); 20 21 useEffect(() => { 22 if (challengeStep !== CONFIG.beginningStep && isOpen) { 23 setChallengeClassname('redux-templates-challenge started') 24 setStarted(true); 25 } 26 }, [challengeStep, isOpen]); 27 28 const onStarted = () => { 29 setChallengeStep(0); 30 setStarted(true); 31 } 32 33 return ( 34 <div className={challengeClassname} style={{display: isOpen ? 'block' : 'none'}}> 35 { listExpanded && <ChallengeListBlock onStarted={onStarted} /> } 36 <ChallengeTimer started={started} /> 37 </div> 38 ); 39 40 } 41 42 43 export default compose([ 44 withDispatch((dispatch) => { 45 const {setChallengeStep} = dispatch('redux-templates/sectionslist'); 46 return { 47 setChallengeStep 48 }; 49 }), 50 51 withSelect((select) => { 52 const {getChallengeStep, getChallengeOpen, getChallengeListExpanded} = select('redux-templates/sectionslist'); 53 return { 54 challengeStep: getChallengeStep(), 55 isOpen: getChallengeOpen(), 56 listExpanded: getChallengeListExpanded() 57 }; 58 }) 59 ])(ReduxChallenge);