← All changes | assets/src/apps/js/frontend/quiz/components/timer/index.js +76 -76 4.3.8 → 4.4.9 View file →

		@@ -1,76 +1,76 @@
1		-/**
2		- * Edit: React hook.
3		- *
4		- * @author Nhamdv - ThimPress
5		- */
6		-import { useEffect, useState } from '@wordpress/element';
7		-import { select, dispatch } from '@wordpress/data';
8		-
9		-const Timer = () => {
10		- const { getData } = select( 'learnpress/quiz' );
11		- const { submitQuiz } = dispatch( 'learnpress/quiz' );
12		- let totalTime = getData( 'totalTime' );
13		- const durationTime = getData( 'duration' );
14		- const timeSpendG = getData( 'timeSpend' );
15		- const [ seconds, setSeconds ] = useState( totalTime );
16		- let [ timeSpend, setTimeSpend ] = useState( timeSpendG );
17		-
18		- useEffect( () => {
19		- const myInterval = setInterval( () => {
20		- if ( durationTime > 0 ) {
21		- let remainSeconds = seconds;
22		- remainSeconds -= 1;
23		-
24		- remainSeconds = wp.hooks.applyFilters( 'js-lp-quiz-remaining_time', remainSeconds, durationTime );
25		-
26		- if ( remainSeconds > 0 ) {
27		- setSeconds( remainSeconds );
28		- timeSpend++;
29		- setTimeSpend( durationTime - remainSeconds );
30		- } else {
31		- clearInterval( myInterval );
32		- submitQuiz();
33		- }
34		- } else { // Apply when set duration = 0
35		- timeSpend++;
36		- setTimeSpend( timeSpend );
37		- setSeconds( timeSpend );
38		- }
39		- }, 1000 );
40		-
41		- return () => clearInterval( myInterval );
42		- }, [ seconds, timeSpend ] );
43		-
44		- const formatTime = ( separator = ':' ) => {
45		- const t = [];
46		- let m;
47		-
48		- if ( timeSpendG ) {
49		- totalTime = timeSpendG;
50		- }
51		-
52		- if ( totalTime < 3600 ) {
53		- t.push( ( seconds - ( seconds % 60 ) ) / 60 );
54		- t.push( seconds % 60 );
55		- } else if ( totalTime ) {
56		- t.push( ( seconds - ( seconds % 3600 ) ) / 3600 );
57		- m = seconds % 3600;
58		- t.push( ( m - ( m % 60 ) ) / 60 );
59		- t.push( m % 60 );
60		- }
61		-
62		- return t.map( ( a ) => {
63		- return a < 10 ? `0${ a }` : a;
64		- } ).join( separator );
65		- };
66		-
67		- return (
68		- <div className="countdown">
69		- <i className="lp-icon-stopwatch"></i>
70		- <span>{ formatTime() }</span>
71		- <input type="hidden" name="lp-quiz-time-spend" value={ timeSpend } />
72		- </div>
73		- );
74		-};
75		-
76		-export default Timer;
	1	+/**
	2	+ * Edit: React hook.
	3	+ *
	4	+ * @author Nhamdv - ThimPress
	5	+ */
	6	+import { useEffect, useState } from '@wordpress/element';
	7	+import { select, dispatch } from '@wordpress/data';
	8	+
	9	+const Timer = () => {
	10	+ const { getData } = select( 'learnpress/quiz' );
	11	+ const { submitQuiz } = dispatch( 'learnpress/quiz' );
	12	+ let totalTime = getData( 'totalTime' );
	13	+ const durationTime = getData( 'duration' );
	14	+ const timeSpendG = getData( 'timeSpend' );
	15	+ const [ seconds, setSeconds ] = useState( totalTime );
	16	+ let [ timeSpend, setTimeSpend ] = useState( timeSpendG );
	17	+
	18	+ useEffect( () => {
	19	+ const myInterval = setInterval( () => {
	20	+ if ( durationTime > 0 ) {
	21	+ let remainSeconds = seconds;
	22	+ remainSeconds -= 1;
	23	+
	24	+ remainSeconds = wp.hooks.applyFilters( 'js-lp-quiz-remaining_time', remainSeconds, durationTime );
	25	+
	26	+ if ( remainSeconds > 0 ) {
	27	+ setSeconds( remainSeconds );
	28	+ timeSpend++;
	29	+ setTimeSpend( durationTime - remainSeconds );
	30	+ } else {
	31	+ clearInterval( myInterval );
	32	+ submitQuiz();
	33	+ }
	34	+ } else { // Apply when set duration = 0
	35	+ timeSpend++;
	36	+ setTimeSpend( timeSpend );
	37	+ setSeconds( timeSpend );
	38	+ }
	39	+ }, 1000 );
	40	+
	41	+ return () => clearInterval( myInterval );
	42	+ }, [ seconds, timeSpend ] );
	43	+
	44	+ const formatTime = ( separator = ':' ) => {
	45	+ const t = [];
	46	+ let m;
	47	+
	48	+ if ( timeSpendG ) {
	49	+ totalTime = timeSpendG;
	50	+ }
	51	+
	52	+ if ( totalTime < 3600 ) {
	53	+ t.push( ( seconds - ( seconds % 60 ) ) / 60 );
	54	+ t.push( seconds % 60 );
	55	+ } else if ( totalTime ) {
	56	+ t.push( ( seconds - ( seconds % 3600 ) ) / 3600 );
	57	+ m = seconds % 3600;
	58	+ t.push( ( m - ( m % 60 ) ) / 60 );
	59	+ t.push( m % 60 );
	60	+ }
	61	+
	62	+ return t.map( ( a ) => {
	63	+ return a < 10 ? `0${ a }` : a;
	64	+ } ).join( separator );
	65	+ };
	66	+
	67	+ return (
	68	+ <div className="countdown">
	69	+ <i className="lp-icon-stopwatch"></i>
	70	+ <span>{ formatTime() }</span>
	71	+ <input type="hidden" name="lp-quiz-time-spend" value={ timeSpend } />
	72	+ </div>
	73	+ );
	74	+};
	75	+
	76	+export default Timer;