My pomodoro clock (React) project layout

My pomodoro clock (React) project layout
0

I’ve been pretty stressed out figuring out how to get my pomodoro clock project (project info page) started since it’s pretty complicated. I’d like it to look like the freeCodeCamp provided example on CodePen.

I bootstrapped an app with Create React App and currently have a container App.js and a child Timer.js. I’m thinking I’ll have a separate class property method for each of the controls and session/break length duration increment/decrement. I’ll have the sessionDuration and breakDuration set based on seconds in this.state, and as well as countingDown state set to false. I guess I’ll use setInterval to control the duration changes/the timer’s counting down (haven’t thought much about that part yet).

Here’s my starting layout–thoughts?

App.js:

import React, { Component } from 'react';
import Timer from './Timer';

class App extends Component {
  constructor() {
    super();

    this.state = {
      sessionDuration: 1500,
      breakDuration: 300,
      countingDown: false,

    };
  }

  // Using property initializer syntax to avoid need to bind, since arrow functions don't create their own this context and use value of enclosing context instead. transform-class-properties Babel plugin necessary to use this syntax (included in Create React App). Refer to https://itnext.io/property-initializers-what-why-and-how-to-use-it-5615210474a3 for more details

  // DURATION CHANGES

  decreaseBreakDuration = () => {

  }

  increaseBreakDuration = () => {

  }

  decreaseSessionDuration = () => {

  }

  increaseSessionDuration = () => {

  }

  // PLAY, PAUSE, RESTART BUTTONS

  handlePlayBtnClick = () => {

  }

  handlePauseBtnClick = () => {

  }

  handleRestartBtnClick = () => {

  }


  render() {
    return (
      <Timer
        decreaseBreakDuration={this.props.decreaseBreakDuration}
        increaseBreakDuration={this.props.increaseBreakDuration}
        decreaseSessionDuration={this.props.decreaseSessionDuration}
        increaseSessionDuration={this.props.increaseSessionDuration}

        handlePlayBtnClick={this.handlePlayBtnClick}
        handlePauseBtnClick={this.handlePauseBtnClick}
        handleRestartBtnClick={this.handleRestartBtnClick}
      />
    );
  };
}

export default App;

Timer.js:

import React from 'react';

const Timer = (props) => (

<>

  {/* BREAK LENGTH CONTROL */}
  <div></div>

  {/* SESSION LENGTH CONTROL */}
  <div></div>

  {/* TIME REMAINING */}
  <div></div>

  {/* PLAY, PAUSE, RESTART BUTTONS */}


</>

);

export default Timer;

Any feedback/tips appreciated!

There’s a lot of moving parts with this Pomodoro app and so I have found that the best way to tackle these types of problems is to break down the task into the smallest possible parts. I wouldn’t worry about break length control, session length control, time remaining etc until I have a working timer.

I think the above approach is putting the cart before the horse (is that even a saying?) where you’ve started building things before you really need to.

My recommendation would be to first build a countdown timer in React that counts down from 60 secs and then add features on top of that one by one.

1 Like

I’m with @Pagey. Start with a simple timer and build on top of it. I understand planning is vital, but you need to know what to plan for.

About your code, I would break it down into smaller pieces. I think you’re giving the App class too much functionality which is out of its scope. I mean, the App should just render the Timer and then the Timer should render its buttons and also implement their functionality. I don’t see the point on passing the button handlers through props (in the end, you’re probably going to break the timer into smaller components).

Anyways, thumbs up for the “I want to follow a plan” attitude :slight_smile:

2 Likes