dvbsknd / fcc-frontendprojects Goto Github PK

https://github.com/dvbsknd/freeCodeCamp-frontEndProjects/blob/eec107c94008e5eee81b0eb59be6cf9b43098b22/challenges/pomodoro-clock/app.js#L207

There's no need to encapsulate all the logic in one function. It can be separated into multiple handlers. For example:

const handleDecrement = () => ({state , breakLength}) => {
  let newTime = breakLength <= 60 ? 60 : breakLength - 60;
  if (state === STATE.stopped) changeBreak(newTime);
}

<button type='button' id='break-decrement' onClick={handleDecrement({state, breakLength})}>
  <i className="fas fa-arrow-alt-circle-left"></i>
</button>

BTW

const handleDecrement = () => ({state , breakLength}) => {

// is equivalent to 
function handleDecrement({state , breakLength}) {

// if
<button type='button' id='break-decrement' onClick={() => handleDecrement({state, breakLength})}>

// we just 'curry' the first function invocation.

https://github.com/dvbsknd/freeCodeCamp-frontEndProjects/blob/eec107c94008e5eee81b0eb59be6cf9b43098b22/challenges/pomodoro-clock/app.js#L108

Between lines 108 - 140 there are a lot of references to 60. Best to create a constant variable, something like ONE_SEC = 60 and replace all instances. Better readability and easier to change, if you decide to change the duration for whatever reason.

https://github.com/dvbsknd/freeCodeCamp-frontEndProjects/blob/eec107c94008e5eee81b0eb59be6cf9b43098b22/challenges/pomodoro-clock/app.js#L63

The term DEFAULTS is confusing here. DEFAULTS usually refers to a constant, unchanging value. I think what you're after here is an initial value. Again, probably best to namespace it to the clock.

https://github.com/dvbsknd/freeCodeCamp-frontEndProjects/blob/eec107c94008e5eee81b0eb59be6cf9b43098b22/challenges/pomodoro-clock/app.js#L181

When passing in props to a component, it's good to think of them as being as benign to a component as possible. The reason for this is that any special logic should be handled prior to send it down the wire. The component's responsibility should be to to just render the output.

In lines 181-185 it's best to just pass in the variables and let the components deal with how they get rendered (in this case, they use a formatTime utility function). Make sense?

https://github.com/dvbsknd/freeCodeCamp-frontEndProjects/blob/eec107c94008e5eee81b0eb59be6cf9b43098b22/challenges/pomodoro-clock/app.js#L210

You're already pulling out the handler on line 203. You can update all instances of props.handler. Might as well destructuring any other keys from props while you're at it.

There are only two hard things in Computer Science: cache invalidation and naming things.
-- Martin Fowler quoting Phil Karlton

In this case, a worthy fix is to namespace the concepts:

https://github.com/dvbsknd/freeCodeCamp-frontEndProjects/blob/eec107c94008e5eee81b0eb59be6cf9b43098b22/challenges/pomodoro-clock/app.js#L38

STATE can become CLOCK_STATE

https://github.com/dvbsknd/freeCodeCamp-frontEndProjects/blob/eec107c94008e5eee81b0eb59be6cf9b43098b22/challenges/pomodoro-clock/app.js#L46

MODE can become CLOCK_MODE