| 1 |
import { Component } from '@wordpress/element'; |
| 2 |
import { compose } from '@wordpress/compose'; |
| 3 |
import { withDispatch, withSelect } from '@wordpress/data'; |
| 4 |
import { Content, Meta, Buttons, Questions, Attempts, Result, Status } from './components'; |
| 5 |
|
| 6 |
import store from './store'; |
| 7 |
|
| 8 |
const { chunk } = lodash; |
| 9 |
class Quiz extends Component { |
| 10 |
constructor( props ) { |
| 11 |
super( ...arguments ); |
| 12 |
|
| 13 |
this.state = { |
| 14 |
currentPage: 1, |
| 15 |
numPages: 0, |
| 16 |
pages: [], |
| 17 |
}; |
| 18 |
} |
| 19 |
|
| 20 |
componentDidMount() { |
| 21 |
const { settings, setQuizData } = this.props; |
| 22 |
|
| 23 |
const { question_ids, questions_per_page } = settings; |
| 24 |
|
| 25 |
const chunks = chunk( question_ids, questions_per_page ); |
| 26 |
|
| 27 |
settings.currentPage = 1; |
| 28 |
settings.numPages = chunks.length; |
| 29 |
settings.pages = chunks; |
| 30 |
|
| 31 |
const answered = settings.id ? localStorage.getItem( `LP_Quiz_${ settings.id }_Answered` ) : false; |
| 32 |
|
| 33 |
if ( answered ) { |
| 34 |
settings.answered = JSON.parse( answered ); |
| 35 |
} |
| 36 |
|
| 37 |
setQuizData( settings ); |
| 38 |
} |
| 39 |
|
| 40 |
componentDidUpdate( prevProps, prevState, snapshot ) { |
| 41 |
const { status } = prevProps; |
| 42 |
const elQuizContent = document.querySelector( '.quiz-content' ); |
| 43 |
|
| 44 |
if ( status !== undefined && elQuizContent ) { |
| 45 |
elQuizContent.style.display = 'none'; |
| 46 |
} |
| 47 |
} |
| 48 |
|
| 49 |
startQuiz = ( event ) => { |
| 50 |
this.props.startQuiz(); |
| 51 |
}; |
| 52 |
|
| 53 |
render() { |
| 54 |
const { status, isReviewing, answered } = this.props; |
| 55 |
|
| 56 |
wp.hooks.doAction( 'lp-js-quiz-answer', answered, status ); |
| 57 |
|
| 58 |
const isA = |
| 59 |
-1 !== [ '', 'completed', 'viewed' ].indexOf( status ) || ! status; |
| 60 |
const notStarted = |
| 61 |
-1 !== [ '', 'viewed', undefined ].indexOf( status ) || ! status; |
| 62 |
|
| 63 |
// Just render content if status !== undefined (meant all data loaded) |
| 64 |
return ( |
| 65 |
undefined !== status && ( |
| 66 |
<> |
| 67 |
<div> |
| 68 |
{ ! isReviewing && 'completed' === status && ( |
| 69 |
<Result /> |
| 70 |
) } |
| 71 |
|
| 72 |
{ ! isReviewing && notStarted && <Meta /> } |
| 73 |
|
| 74 |
{ 'started' === status && <Status /> } |
| 75 |
|
| 76 |
{ ( -1 !== [ 'completed', 'started' ].indexOf( status ) || |
| 77 |
isReviewing ) && <Questions /> } |
| 78 |
|
| 79 |
<Buttons /> |
| 80 |
|
| 81 |
{ isA && ! isReviewing && <Attempts /> } |
| 82 |
</div> |
| 83 |
</> |
| 84 |
) |
| 85 |
); |
| 86 |
} |
| 87 |
} |
| 88 |
|
| 89 |
export default compose( [ |
| 90 |
withSelect( ( select ) => { |
| 91 |
const { getQuestions, getData } = select( 'learnpress/quiz' ); |
| 92 |
|
| 93 |
return { |
| 94 |
questions: getQuestions(), |
| 95 |
status: getData( 'status' ), |
| 96 |
store: getData(), |
| 97 |
answered: getData( 'answered' ), |
| 98 |
isReviewing: getData( 'mode' ) === 'reviewing', |
| 99 |
questionIds: getData( 'questionIds' ), |
| 100 |
checkCount: getData( 'instantCheck' ), |
| 101 |
questionsPerPage: getData( 'questionsPerPage' ) || 1, |
| 102 |
}; |
| 103 |
} ), |
| 104 |
withDispatch( ( dispatch ) => { |
| 105 |
const { setQuizData, startQuiz } = dispatch( 'learnpress/quiz' ); |
| 106 |
|
| 107 |
return { |
| 108 |
setQuizData, |
| 109 |
startQuiz, |
| 110 |
}; |
| 111 |
} ), |
| 112 |
] )( Quiz ); |
| 113 |
|
