React-clock

import './App.css';
import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';
import React, { useState, useEffect } from 'react';


  

function App() {
  
  const [timeRemaining, setTimeRemaining] = React.useState({ minutes: 25, seconds: 0 });
  const [active, setActive] = React.useState(false);
  const [breakTime, setBreakTime] = React.useState(5);
  const [isCountingDown, setIsCountingDown] = React.useState(false);
  const [isBreakActive, setIsBreakActive] = React.useState(false);
  const [defaultMinutes, setDefaultMinutes] = React.useState({ default: 25, break: 5 });
  const [timerStatus, setStatus] = React.useState("Status: inactive")
  
  
  //displays the clock time on the component
  var clockTime = ('0' + timeRemaining.minutes).slice(-2)+':'+ ('0' + timeRemaining.seconds).slice(-2);

  


    useEffect(() => {


    let interval = setInterval(() => {

      if(isCountingDown === true){
      //case for seconds being 0. Change the minutes
      if (timeRemaining.seconds == 0) {
        //if minutes isnt 0, subtract minutes
        if (timeRemaining.minutes !== 0) {
          //decrement minutes
          setTimeRemaining({ minutes: timeRemaining.minutes - 1, seconds: 59 });
          
        } else {
          //case for minutes and seconds being 0
          
          setTimeout(function () {
            setIsBreakActive(!isBreakActive);
            setTimeRemaining({ minutes: defaultMinutes[isBreakActive ? 'default' : 'break'], seconds: 0 });
          }, 1000)
        }
      }
      //case seconds is not zero
     else {
        if(isCountingDown=== true){
        //decrement seconds
        setTimeRemaining({ minutes: timeRemaining.minutes, seconds: timeRemaining.seconds - 1 })
        }
      }
      }
      
     //run interval every second
    }, 1000);
    return () => clearInterval(interval);
    });


  function addMinutes(){
    if(isCountingDown === false && defaultMinutes.default<60){
      if(isBreakActive === false){
      setTimeRemaining({minutes: defaultMinutes.default+1, seconds: 0});
      }
    setDefaultMinutes({default: defaultMinutes.default+1, break: defaultMinutes.break });
    }
  }
  
  function subMinutes(){
    if(defaultMinutes.default !== 1 && isCountingDown === false){
      if(isBreakActive === false){
        setTimeRemaining({minutes: defaultMinutes.default-1, seconds: 0});
      }
    setDefaultMinutes({default:defaultMinutes.default-1, break: defaultMinutes.break});
    
    }
  }
  
  function addBreakMinutes(){
    if(isCountingDown === false && defaultMinutes.break <60){
    if(isBreakActive === true){
      setTimeRemaining({minutes: defaultMinutes.break+1, seconds: 0});
    }
    setDefaultMinutes({default: defaultMinutes.default, break: defaultMinutes.break +1});
    }
  }
  
  function subBreakMinutes(){
    if(isCountingDown === false && defaultMinutes.break > 1){
    
    if(isBreakActive === true){
      setTimeRemaining({minutes:defaultMinutes.break -1, seconds: 0});
    }
    setDefaultMinutes({default: defaultMinutes.default, break: defaultMinutes.break-1});
    }
  }
  
  
  function playTimer(){
    if(isCountingDown === false){
      setIsCountingDown(true);
      isBreakActive ? setStatus("Status: Break Time!") : setStatus("Status: Session Time")
    }
  }

  function activity(){
    
    if(isCountingDown === true){
      isBreakActive ? setStatus("Status: Break Time!") : setStatus("Status: Session Time")
    }

    return timerStatus;
    
  }

  function reset(){
    
    setIsCountingDown(false);
    setTimeRemaining({minutes: 25, seconds: 0});
    setDefaultMinutes({default: 25, break: 5});
    setStatus("Status: inactive");
  }
  
  function pause(){
    setStatus("Status: inactive");
    setIsCountingDown(false);
    
  }
  
  let totalSeconds =  defaultMinutes.default * 60;
  let CurrentSeconds = timeRemaining.minutes * 60 +
  timeRemaining.seconds;

  
  
  let percent = Math.floor(CurrentSeconds / totalSeconds * 100);
  
  return (
    <div className="main-wrapper">
      <div id="title">Pomodoro Clock</div>
      <div id="time-left">
        <CircularProgressbar 
        value= {percent}
        text={clockTime}
        ></CircularProgressbar>
      </div>
      <div id="start_stop">
        <button onClick={playTimer}  id="start"> <i className="fa-solid fa-circle-play"></i></button>
        <button onClick={pause} id="pause"> <i className="fa-solid fa-circle-pause"></i></button>
        <button onClick={reset} id="reset"><i className="fa-solid fa-rotate"></i></button>
      </div>
      <div id="timer-label">{timerStatus}</div>
      <div className="controls">
        <div className="session-controls">
          <div id="session-label">Session Length</div>
          <div onClick={addMinutes} id="session-increment"><i class="fa-solid fa-square-plus"></i></div>
          <div id="session-length">{defaultMinutes.default}</div>
          <div onClick={subMinutes} id="session-decrement"><i class="fa-solid fa-square-minus"></i></div>
          
        </div>
        <div className="break-controls">
          <div id="break-label">Break Length</div>
          <div onClick={subBreakMinutes} id="break-decrement"><i class="fa-solid fa-square-minus"></i></div>
          <div id="break-length">{defaultMinutes.break}</div>
          <div onClick={addBreakMinutes} id="break-increment"><i class="fa-solid fa-square-plus"></i></div>
        </div>
      </div>
      
      
  </div>  
  
  );
}
export default App;