Refactoring the Pomodoro Timer: Components

Nat Ravenhill — Thu, 03 Jun 2021 10:52:04 +0000

Previously I wrote a Pomodoro timer app. The code is contained in a single React component. This is generally bad practice - we want components to each be responsible for a single bit of functionality and be reusable, so we will we split out functionality into smaller components.

First I made a folder called "components", which will house the sub components and their styles.

There are 3 elements we can immediately split out:

The main timer and button ("Tomato" element)
The Break length controls
The Session length controls

Break Length

This section has a breakLength value contained in the state and two button handler methods to increase/decrease this value.

First, we create a new component called BreakLength and paste the JSX into the render method. As we are now in a child component, and React has unidirectional data flow, we cannot update the breakLength value in the parent component from the BreakLength component.

Therefore, we pass a reference to the method into the BreakLength component as a property and call this in a new onClick handler. This will call the parent method and update its state.

The breakLength value is passed to the new component as a child property. When the state is changed in the parent, this will change the property value and re-render the BreakLength component.

Session Length

This is refactored in the same way:

Tomato

The Tomato has 2 functions - handleStartStop and handleReset. Again, we pass references to these as properties and call them in the onClick handlers in the child Tomato component. The minutes and second properties are passed as props to the Tomato component.

Now our main component is much smaller and we have a better separation of concerns. We can also extract some of the styles in Session.css that only apply to the Tomato into a new CSS file and include it just in this component.

Project: A Pomodoro Timer In React

Nat Ravenhill — Fri, 28 May 2021 13:38:10 +0000

Intro

I recently created a Pomodoro timer in React, as part of the Free Code Camp front end course. The task involved creating a Pomodoro timer, which counts down from a predefined number of session minutes, then switches to a break timer, which counts down a specified break length. The session and break lengths can be altered, and the timer can be stopped and reset:

What I learned

I picked up some new things while working on this project.

padStart

I found this string method useful when I was counting down to single seconds, but wanted them to display with a leading zero.

It takes a number and a string as parameters, then adds copies of that string to the start until the entire string length is equal to the first parameter.

Therefore my usage was second.padStirng(2, '0'), which adds zeroes to the seconds output to ensure it is always a 2 digit number.

See more here

setState callbacks

I had a situation where I wanted to start the timer after setting isRunning to true. I initially started the timer after setting the state. This did not work because the setState changes are asynchronous, so the tick method was acting as though isRunning was false.

To combat this, the setState method has a callback parameter. Here we can add behaviour that will happen immediately after isRunning is set to true. Calling the tick method from the callback made the timer start ticking as expected.

See more here

setTimeout

I wanted a way to get the timer to update every second. I was able to do this using the setTimeout Javascript method. This method takes a method as a parameter and a time in milliseconds. It then calls the method after the specified time. I could put this in a loop to do it the number of times defined in the session length.

There is also a setInterval method which works similarly, but happens an infinite number of times or until clearInterval is called.

See more here

Audio element (HMTL5)

I needed to play a beep sound when the time runs out. A new HTML element was added in HTML5 that does what I need. The <audio> tag allows the user to specify a source, then there are DOM methods, that allow playing, stopping and restarting the source audio .

See more here

React refs

I couldn't directly access the audio element in my React component to use its methods. To get around this we can use refs. We create a ref variable in the component:

this.beepRef = React.createRef();

and attach this to the audio element:

<audio ... ref={this.beepRef} .../>

Now we can call the audio methods on this reference within the component's lifecycle:

this.beepRef.current.play();

See more here

Importing a script into a React component

I wanted to test my solution using a script file that FreeCodeCamp had provided. I did not know how to directly add a script file in. I initially tried adding a script tag to the render method, but this did not run the script. I then discovered that I needed to add it into the document during the componentWIllMount stage of the life cycle:

componentWillMount() {
    const scriptTag = document.createElement("script");
    scriptTag.src =
      "https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js";
    scriptTag.async = true;
    document.body.appendChild(scriptTag);
  }

See more here

Conclusion

This was a great project to get some more practice with creating custom components and I also learnt quite a bit about how to implement timers.

You can see the app running here

DEV Community: Nat Ravenhill

Refactoring the Pomodoro Timer: Components

Break Length

Session Length

Tomato

Project: A Pomodoro Timer In React

Intro

What I learned

padStart

setState callbacks

setTimeout

Audio element (HMTL5)

React refs

Importing a script into a React component

Conclusion