← All changes | assets/src/apps/js/frontend/quiz/index.js +112 -112 4.3.9.1 → 4.4.10 View file →

		@@ -1,112 +1,112 @@
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 );
	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 );