Pomodoro Clock Project Test Fail on User Story #8

3

impressed from the answer of Pomodoro Clock using React Hooks / ContextAPI

The reason of the test #8 fail is that the time hasn’t change immediately when session length / break length change. I use state (sessionLength) to store the change first and then use useEffect in Timer component to monitor the state in order to modify the time. It is the root cause that makes the test fail.

const onClickIncrement = () => {
    if(props.sessionLength < 60 && !props.isStart) {
       props.setSessionLength(props.sessionLength + 1)
    }
  }
  
  const onClickDecrement = () => {
    if(props.sessionLength > 1 && !props.isStart) {
      props.setSessionLength(props.sessionLength - 1)
    }
  }

useEffect(() => {
    if (!props.isStart) {
      props.setType("Session")
      setTime(props.sessionLength * 60)
    }
  }, [props.sessionLength])

To prevent this case, I put the state (time) to the parent component and it can modify it immedicately when the session change is triggered.

const onClickIncrement = () => {
    if (props.sessionLength < 60 && !props.isStart) {
      props.setTime((props.sessionLength + 1) * 60);
      props.setSessionLength(props.sessionLength + 1);
    }
  };

  const onClickDecrement = () => {
    if (props.sessionLength > 1 && !props.isStart) {
      props.setTime((props.sessionLength - 1) * 60);
      props.setSessionLength(props.sessionLength - 1);
    }
  };

This challenge takes me a lot of time…