Tell us what’s happening:
I am trying to do the project PROMODORO CLICK in the Front end library Curriculum with React and Redux. With the progress so far, I could not understand why I failed the following tests in the #Timer part: 2-5, 7
Details:
Timer#2:
expected ‘1’ to equal ‘4’
AssertionError: expected ‘1’ to equal ‘4’
Timer#3:
expected ‘5’ to equal ‘9’
AssertionError: expected ‘5’ to equal ‘9’
Timer#4
expected ‘1’ to equal ‘21’
AssertionError: expected ‘1’ to equal ‘21’
Timer#5:
expected ‘5’ to equal ‘29’
AssertionError: expected ‘5’ to equal ‘29’
Timer#7
Value in element with id of “session-length” is greater than 60.: expected ‘41’ to equal ‘60’
AssertionError: Value in element with id of “session-length” is greater than 60.: expected ‘41’ to equal ‘60’
Your code so far
JS (Babel Processor)
// Redux
// Break
const BREAK_DECREMENT = “BREAK DECREMENT”
const BREAK_INCREMENT = “BREAK INCREMENT”function breakDecrement() {
return {
type: BREAK_DECREMENT,}
}function breakIncrement() {
return {
type: BREAK_INCREMENT,}
}const breakReducer = (state={break: 5}, action) => {
switch (action.type) {
case BREAK_DECREMENT:
return {
break: state.break - 1 }
case BREAK_INCREMENT:
return {
break: state.break + 1 }
default:
return state
}
}function Break(props) {
const onDecrementClick = () => {
if (props.break === 1) {return}
props.breakDecrease()
}const onIncrementClick = () => {
if (props.break === 60) {return}
props.breakIncrease()
}return (
-
{props.break}
+
)
}const breakMapStateWithProps = state => {
return {
break: state.break.break
}
}const breakMapDispatchWithProps = dispatch => {
return {
breakDecrease: () => dispatch(breakDecrement()),
breakIncrease: () => dispatch(breakIncrement()),
}
}const BreakWrapper = ReactRedux.connect(breakMapStateWithProps, breakMapDispatchWithProps)(Break)
// Session
const SESSION_DECREMENT = “SESSION DECREMENT”
const SESSION_INCREMENT = “SESSION INCREMENT”function sessionDecrement() {
return {
type: SESSION_DECREMENT,}
}function sessionIncrement() {
return {
type: SESSION_INCREMENT,}
}const sessionReducer = (state={session: 25}, action) => {
switch (action.type) {
case SESSION_DECREMENT:
return {
session: state.session - 1}
case SESSION_INCREMENT:
return {
session: state.session + 1 }
default:
return state
}
}function Session(props) {
const onDecrementClick = () => {
if (props.session === 1) {return}
props.sessionDecrease()
}
const onIncrementClick = () => {
if (props.session === 60) {return}
props.sessionIncrease()
}return (
<button
id=“session-decrement”
className={‘decrease’}
onClick={onDecrementClick}>-
{props.session}
<button
id=“session-increment”
className={‘increment’}
onClick={onIncrementClick}>+
)
}const sessionMapStateWithProps = state => {
return {
session: state.session.session}
}const sessionMapDispatchWithProps = dispatch => {
return {
sessionDecrease: () => dispatch(sessionDecrement()),
sessionIncrease: () => dispatch(sessionIncrement())
}
}const SessionWrapper = ReactRedux.connect(sessionMapStateWithProps, sessionMapDispatchWithProps)(Session)
// Timer
const SWITCH_TIMER_STATE = “SWITCH TIMER STATE”
const SWITCH_TIMER_MODE = “SWITCH TIMER MODE”
const SET_TIMER = “SET TIMER”
const RESET_TIMER = “RESET TIMER”
const UPDATE_TIMER = “UPDATE TIMER”
const SWITCH_UPDATE_STATE = “SWITCH_UPDATE_STATE”
const TIMER_MODE = {
BREAK: ‘break’,
SESSION: ‘session’,
}
const TIMER_STATE = {
RUN: ‘run’,
PAUSE: ‘pause’,
}function switchTimerState(newState) {
return {
type: SWITCH_TIMER_STATE,
payload: newState,
}
}function switchTimerMode(newMode) {
return {
type: SWITCH_TIMER_MODE,
payload: newMode,
}
}function updateTimer() {
return {
type: UPDATE_TIMER,
}
}function setTimer(timeLeft) {
return {
type: SET_TIMER,
payload: timerLeft,
}
}function switchTimerUpdateState() {
return {
type: SWITCH_UPDATE_STATE,
}
}function resetTimer() {
return {
type: RESET_TIMER,
}
}const timerInitialState = {
timeLeft: 25,
timerState: TIMER_STATE.PAUSE,
timerMode: TIMER_MODE.SESSION,
isUpdating: false,
}const timerReducer = (state=timerInitialState, action) => {
switch (action.type) {
case SWITCH_TIMER_STATE:
return {
…state,
timerState: state.timerState === TIMER_STATE.PAUSE ? TIMER_STATE.RUN : TIMER_STATE.PAUSE
}
case SWITCH_TIMER_MODE:
return {
…state,
timerMode: state.timerMode === TIMER_MODE.SESSION ? TIMER_MODE.BREAK : TIMER_MODE.SESSION
}
case SET_TIMER:
return {
…state,
timeLeft: action.payload,
}
case UPDATE_TIMER:
return {
…state,
timeLeft: state.timeLeft - 1,
}
case SWITCH_UPDATE_STATE:
return {
…state,
isUpdating: !state.isUpdating
}
case RESET_TIMER:
return timerInitialState
default:
return state
}
}function updateTimerAsync(isUpdating) {
return dispatch => {
if (isUpdating) return
dispatch(switchTimerUpdateState(isUpdating))
setTimeout(() => {
dispatch(updateTimer())
dispatch(switchTimerUpdateState(isUpdating))
}, 1000)
}
}// Setup redux app
const reducers = Redux.combineReducers({
session: sessionReducer,
break: breakReducer,
timer: timerReducer,
})const store = Redux.createStore(reducers,
Redux.applyMiddleware(ReduxThunk.default))// App setup
function App(props) {
return (
Hello World
)
}const Provider = ReactRedux.Provider
function AppWrapper() {
return (
)
}ReactDOM.render(, document.getElementById(‘root’))
Dependencies:
- React
*React-dom
*Redux
*React Redux
*Redux thunk
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36.
Challenge: Build a Pomodoro Clock
Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock