Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'

import React, { useEffect, useState } from 'react';

import { Box } from '@mui/material'

import { Box } from '@mui/material';

function QuizTimer({ time, onStop }) {

function QuizTimer({ time, onStop }) {

  const [minutes, setMinutes] = useState(time)

  const [minutes, setMinutes] = useState(time);

  const [seconds, setSeconds] = useState(0)

  const [seconds, setSeconds] = useState(0);

  useEffect(() => {

  useEffect(() => {

    const countDown = setInterval(() => {

    const countDown = setInterval(() => {

      if (minutes === 0 && seconds === 0) {

      if (minutes === 0 && seconds === 0) {

        clearInterval(countDown)

        clearInterval(countDown);

        onStop()

        onStop();

      }

      }

      setSeconds((prevSeconds) => (prevSeconds === 0 ? 0 : prevSeconds - 1))

      setSeconds((prevSeconds) => (prevSeconds === 0 ? 0 : prevSeconds - 1));

      if (seconds === 0) {

      if (seconds === 0) {

        setMinutes((prevMinutes) => (prevMinutes === 0 ? 0 : prevMinutes - 1))

        setMinutes((prevMinutes) => (prevMinutes === 0 ? 0 : prevMinutes - 1));

        setSeconds(59)

        setSeconds(59);

      }

      }

    }, 1000)

    }, 1000);

    return () => clearInterval(countDown)

    return () => clearInterval(countDown);

  }, [minutes, seconds])

  }, [minutes, seconds]);

  return (

  return (

    <Box component='span'>

    <Box component='span'>

      {minutes < 10 ? `0${minutes}` : minutes}:

      {minutes < 10 ? `0${minutes}` : minutes}:{seconds < 10 ? `0${seconds}` : seconds}

    </Box>

    </Box>

  )

  );

}

}

export default QuizTimer

export default QuizTimer;