Как сделать последнюю задачу на freecodecamp.org

import accurateInterval from "https://cdn.skypack.dev/accurate-interval@1.0.9";
 
const decrement_timer = 'DECREMENT_TIMER';
const break_increment = 'BREAK_INCREMENT';
const break_decrement = 'BREAK_DECREMENT';
const session_increment = 'SESSION_INCREMENT';
const session_decrement = 'SESSION_DECREMENT';
const change_timer = 'CHANGE_TIMER';
const change_mode = 'CHANGE_MODE';
const change_timerID = 'CHANGE_TIMER_ID';
const change_active = 'CHANGE_ACTIVE';
const reset_timer = 'RESET_TIMER'; 
 
const reduser = (state, action) => {
  switch(action.type){
    case decrement_timer:
      return {...state, timer: state.timer - 1}
    case break_increment:
      return {...state, breakLength: state.breakLength + 1}
    case break_decrement:
      return {...state, breakLength: state.breakLength - 1}
    case session_increment:
      return {...state, sessionLength: state.sessionLength + 1}
    case session_decrement:
      return {...state, sessionLength: state.sessionLength - 1}
    case change_timer:
      return {...state, timer: action.payload}
    case change_mode:
      return {...state, timerMode: action.payload}
    case change_timerID:
      return {...state, timerID: action.payload}
    case change_active:
      return {...state, activeTimer: action.payload}
    case reset_timer:
      return {
        breakLength: 5,
        sessionLength: 25,
        timer: 1500,
        activeTimer: false,
        timerMode: 'Session',
        timerID: ''
      }
    default:
      return state
  }
}
 
const default_state = {
  breakLength: 5,
  sessionLength: 25,
  timer: 1500,
  activeTimer: false,
  timerMode: 'Session',
  timerID: ''
}
 
const BreakLength = ({breakLength, breakUp, breakDown}) => {
  
  return (
    <div className="break__body">
      <h2 id="break-label">Break Length</h2>
      <div className="break-control">
        <button onClick={() => breakDown()} id="break-decrement" className="break-down" ></button>
        <div className="break-length" id="break-length">{breakLength}</div>
        <button onClick={() => breakUp()} className="break-up" id="break-increment"></button>
      </div>
    </div>
  );
}
 
const SessionLength = ({sessionLength, sessionUp, sessionDown}) => {
  
  return (
    <div className="session__body">
      <h2 id="session-label">Session Length</h2>
      <div className="session-control">
        <button onClick={() => sessionDown()} className="session-down" id="session-decrement"></button>
        <div className="session-length" id="session-length">{sessionLength}</div>
        <button onClick={() => sessionUp()} className="session-up" id="session-increment"></button>
      </div>
    </div>
  );
}
 
 
const Clock = () => {
  
  // const [breakLength, setBreakLength] = React.useState(5);
  // const [sessionLength, setSessionLength] = React.useState(25);
  // const [timer, setTimer] = React.useState(1500);
  // const [activeTimer, setActiveTimer] = React.useState(false);
  // const [clockMode, setclockMode] = React.useState('Session');
  // const [timerID, setTimerID] = React.useState('');
  
  const [state, dispatch] = React.useReducer(reduser, default_state)
  
  const audio = React.useRef(null);
  
  
  
  const breakUp = () => {
    if(!state.activeTimer && state.breakLength < 60){
      dispatch({type: break_increment});
      if(state.timerMode === 'Break'){
        dispatch({type: change_timer, payload: (state.breakLength + 1) * 60})
      }
    }
  }
  
  const breakDown = () => {
    if(!state.activeTimer && state.breakLength > 1){
      dispatch({type: break_decrement});
      if(state.timerMode === 'Break'){
        dispatch({type: change_timer, payload: (state.breakLength - 1) * 60})
      }
    }
  }
  
  const sessionUp = () => {
    if(!state.activeTimer && state.sessionLength < 60){
      dispatch({type: session_increment});
      if(state.timerMode === 'Session'){
        dispatch({type: change_timer, payload: (state.sessionLength + 1) * 60})
      }
    }
    
  }
  
  const sessionDown = () => {
    if(!state.activeTimer && state.sessionLength > 1){
      dispatch({type: session_decrement});
      if(state.timerMode === 'Session'){
        dispatch({type: change_timer, payload: (state.sessionLength - 1) * 60})
      }
    }
  }
  
  function lengthControl(stateToChange, sign, currentLength, mode){
    if (state.activeTimer) {
      return;
    }
    if (state.timerMode === mode) {
      if (sign === '-' && currentLength <= 1) {
       stateToChange;
      } else if (sign === '+' && currentLength >= 60) {
        stateToChange;
      }
    } else if (sign === '-' && currentLength >= 1) {
        stateToChange;
        // setTimer(currentLength * 60 - 60);
        dispatch({type: change_timer, payload: currentLength * 60 - 60});
    } else if (sign === '+' && currentLength <= 60) {
        stateToChange;
        // setTimer(currentLength * 60 + 60);
        dispatch({type: change_timer, payload: currentLength * 60 + 60});
    }
  }
  
  const decrementTimer = () => {
    dispatch({type: decrement_timer});
  }
  
  const swicthTimer = (time, mode) => {
    // setTimer(time);
    dispatch({type: change_timer, payload: time})
    dispatch({type: change_mode, payload: mode})
  }
  
  const startTimer = () => {
      const ID = accurateInterval(() => {
        decrementTimer();
      }, 1000);
      dispatch({type: change_timerID, payload: ID})
  } 
  
 const timerControl = () => {
    if(!state.activeTimer){
      startTimer();
      dispatch({type: change_active, payload: true})
    } else{
      dispatch({type: change_active, payload: false})
      if(state.timerID){
        state.timerID.clear();
      }
    }
}
 
 
 
 const formatTime = (time) => {
    let minutes = Math.floor(time / 60);
    let seconds = time - minutes * 60;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    return minutes + ':' + seconds;
  }
  
  const reset = () => {
    
    // setSessionLength(25);
    // setBreakLength(5);
    // setActiveTimer(false);
    // setclockMode('Session');
    // setTimer(1500);
    // setTimerID('');
    // if(timerID){
    //   timerID.clear();
    // }
    if(state.timerID){
      state.timerID.clear();
    }
    dispatch({type: reset_timer})
    
    audio.current.pause();
    audio.current.currentTime = 0;
  }
  
  
  // React.useEffect(() => {
  //   dispatch({type: change_timer, payload: state.timer / 60})
  // }, [state.sessionLength])
  
  React.useEffect(() => {
      if(state.activeTimer){
        console.log(state.timer);
        if(state.timer < 0){
        if(state.timerID){
          state.timerID.clear();
        }
        if(state.timerMode === 'Session'){
          startTimer();
          swicthTimer(state.breakLength * 60, 'Break')
        } else{
          startTimer();
          swicthTimer(state.sessionLength * 60, 'Session')
        }
      }
    }
  }, [state.timer])
  
  // React.useEffect(() => {
  //   if(!state.activeTimer){
  //     dispatch({type: change_timer, payload: state.timer});
  //   }
  // }, [state.sessionLength])
  
  React.useEffect(() => {
    if(state.activeTimer){
      if(state.timer == 0){
        audio.current.play();
      }
    }
  }, [state.timer, state.activeTimer])
  
  return(
    <>
    <h1>25 + 5 Clock</h1>
      <div className="clock">
        <div className="clock__header">
          <BreakLength breakLength={state.breakLength} breakUp={breakUp} breakDown={breakDown}   />
          <SessionLength sessionLength={state.sessionLength} sessionUp={sessionUp} sessionDown={sessionDown} />
        </div>
        <div className="timer">
          <h2 id="timer-label">{state.timerMode}</h2>
          <div id="time-left">{formatTime(state.timer)}</div>
          <div className="controls">
            <button onClick={() => timerControl()} id="start_stop">
              {state.activeTimer ? <i className="fa fa-pause"></i>
              : <i className="fa fa-play"></i>}
            </button>
            <button id="reset" onClick={() => reset()}>
              <i className="fa fa-rotate"></i>
            </button>
          </div>
          <audio id="beep" preload="auto" ref={audio} src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/audio/BeepSound.wav"/>
        </div>
      </div>
    </>
  )
}
 
const root = ReactDOM.createRoot(document.getElementById('root'));
 
root.render(<Clock/>);