Please help me with my Pomodoro Clock - Tests #12 and #13!

Code Feedback
1

Disclaimer: Please ignore the audio not being setup and the web page not being styled yet.)

– Introduction –

So, logically, my clock seems to work perfectly. And, I’ve manually watched it count down from 01:00 to 00:00 for each session and break and it seems to work just fine. However, tests #12 and #13 fail. Could anybody look into my code and perhaps provide some insight on what I may be doing wrong, or what I could do better to get the tests to not fail?

– Testing –

To test my code quickly, I recommend changing the properties for this.state.userInput.sessionLength & this.state.userInput.breakLength to 1.

If you want to speed run/view the clock, do the following. Though, be warned that it may mess up tests, so I don’t recommend having these values changed when trying to run tests. Go to line 115 and change the mins/secs values to 0 and 3 respectively. The code:

else if (state[“remainingTime”][“mins”] > 0) {
state[“remainingTime”][“mins”] = state[“remainingTime”][“mins”] - 1; // Change to 0.
state[“remainingTime”][“secs”] = 59; // Change to 3
}

– My thoughts –

Test #12 claims that my break time is being set to 24, when it should be 5. I have no idea where this 24 is even coming from. And, when I use console.log(’’) to inspect values for userInput and what the remaining time is actually being set to, they look fine. So, I feel that this is a case of ‘the test is doing something behind the scene that I don’t understand’ or me horribly abusing state. But hey! I could be wrong! Any insight would be greatly appreciated! Thanks again in advance! :smiley:

Here is a screenshot of the error I get:

dat_pomo_tho
dat_pomo_tho1928×906 135 KB

Here is the code: https://codepen.io/anon/pen/aMYXMj

I’m not sure how to get my project working on Codepen, but if you download the files and use the file structure in the following image, you should be able to open the project via index.html in any web browser just fine.

File structure:

file_structure
file_structure892×159 8.64 KB

2

This is the strangest React code I’ve seen in a while. I’m curious, what resources did you use to learn React?

1 Like
3

Lol, I literally learned everything purely from FCC lessons. I looked at the React main site for a few things every now and then, but not very often (really just lifecycle reference was the only thing I think?).

4

Why bracket notation?
Why direct mutation of state?
What’s with the boundFunction you’re using everywhere?
Why React.createElement?

1 Like
5

Why bracket notation?

I actually really don’t have a good explanation for this. I usually do use dot notation. I think I just started off by using bracket notation on this project for some reason and kept doing it.

Why direct mutation of state?

I don’t know how else to set my data other than by using state or globals in this particular case to bind data with the render() method. Do you believe I should using props or something else?.

What’s with the boundFunction you’re using everywhere?

boundFunction is the function clickStartStop being passed to it’s sub-functions. The reason that I pass it as an argument is because it is bound to state, and I need access to state in sub-functions, so I pass the entire function clickStartStop.

As I write this out, it would probably be better to just pass in the state variable and hope that it updates as expected. I honestly didn’t get to the phase of optimizing my code yet, so that’s kind of why it is the way that it is.

Why React.createElement ?

Part of React Tutorial when I was trying to get JSX setup: https://reactjs.org/docs/react-without-jsx.html

I know I can use <Pomodoro /> instead, but this shouldn’t matter too much?

6

Good to hear that you can reason about your code :+1:

Get rid of bracket notation ASAP, because right now your code is quite unreadable. Also learn about object destructuring.

By direct mutation of state I mean something like this:

state['timerState'] = 'on';

This will definitely bite you in the future. Direct mutating of state is a source of nasty bugs.

Hope Driven Development? I’ve heard about it :smirk:

I’m not sure about recursive approach inside React component (never used it myself), but I may be wrong.

Using .createElement when you already are using JSX seems unnecessary (this is JSX not HTML: <p id="timer-label">{this.state.timerType}</p>).

Instead of creating functions like setTimerStateOff, setTimerStateOn, setTimerStatePause, you can create one function setTimerState, that takes timer state and sets state:

  setTimerState = timerState => {
    this.setState({
      timerState,
    });
  };

Try to keep your state flat (and for such small project there are no reasons to have nesting in your state).

1 Like
7

You’re right about directly mutating state. I shouldn’t do that, and I’ve changed my code to use Object.assign({}, this.state); when setting up my ‘let state’ variable on line ~85. (I did try your other tips too, but sadly I could not get my tests to pass regardless :frowning:)

But anyway, from what I can tell, the logic of my code is perfectly fine and it visually works fine, so I can really only conclude that the test cannot properly evaluate my solution. A shame, but oh well, that’s life!

I really want to figure out the ‘ideal’ solution to this, where I am using non-global state and the tests pass. But alas, I’m a bit impatient. This is my last project for the Full Stack Certificate, and my code technically actually works, so I did the small ‘hack’ that I mentioned previously to get the tests to pass. I just made ‘let state’ on line 85 global and removed any assignments to it in the code. Here is my working codepen: https://codepen.io/DonTechSite/pen/QorGbL

Thanks @jenovs for the response! I really appreciate your effort and see you around. :slight_smile:

8

My tips weren’t intended to help you pass tests (I have quite reserved attitude towards fcc tests anyway), but to point out “weirdnesses” in your code :wink:

1 Like
9

Yeah I posted in the wrong forum. My bad on that. Lol, thank you though jenovs for the feedback!