Hello all! I’m having issues with the 25 + 5 clock, as the clock’s functionality is complete, however i’m only passing 14/26 of my tests. The error messages seem redundant and I would assume that it’s some issue with timing between my app and the test, but if anyone has any suggestions as to how I should refactor my code to be more optimized, I would be very happy to listen. Thank you!
Side note, Audio has not been implemented yet, as i’d like to resolve this first.
Failed tests are as follows:
#content 8
#timer 1, 3, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15
To Demonstrate:
#timer errors 9 thru 11 have the error
25 + 5 clock has started but time displayed is not changing: expected ‘58’ to not equal ‘58’
#timer errors 12 thru 15 contain
Timer has not reached 00:00.
import * as React from "https://esm.sh/react";
import * as ReactDOM from "https://esm.sh/react-dom";
import * as Redux from "https://esm.sh/redux";
import * as ReactRedux from "https://esm.sh/react-redux";
var defaultState = {
workTime: 1500,
breakTime: 300,
currentTime: 1500,
workSwitch: true
}
const CHGW = "CHANGEWORK"
const CHGB = "CHANGEBREAK"
const CHGC = "CHANGECURRENT"
const SWIT = "SWITCHTIMER"
const REST = "RESETTIMER"
const changeTime = (time, dir) => {
return {
type: time,
direction: dir
}
}
const reducer = (state = defaultState, action) => {
//write whatever logic i fuckin want
switch (action.type){
case CHGW:
return {
...state,
workTime: (((state.workTime + action.direction) < 3660 && (state.workTime + action.direction) > 0) ? (state.workTime + action.direction) : state.workTime),
currentTime: ((state.currentTime == state.workTime && state.workSwitch && !([0, 3660].includes(state.currentTime + action.direction))) ? state.workTime + action.direction : state.currentTime)
}
case CHGB:
return {
...state,
breakTime: (((state.breakTime + action.direction) < 3600 && (state.breakTime + action.direction) > 0) ? (state.breakTime + action.direction) : state.breakTime),
currentTime: ((state.currentTime == state.breakTime && !state.workSwitch) ? state.breakTime + action.direction : state.currentTime)
}
case CHGC:
return{
...state,
currentTime: action.direction
}
case SWIT:
return{
...state,
workSwitch: !state.workSwitch,
currentTime: !state.workSwitch ? state.workTime : state.breakTime
}
case REST:
return{
...state,
breakTime: 300,
workTime: 1500,
currentTime: 1500
}
}
return defaultState
}
const Store = Redux.createStore(reducer)
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;
class Clock extends React.Component {
constructor(props){
super(props);
this.convertToTime = this.convertToTime.bind(this)
this.toggleTimer = this.toggleTimer.bind(this)
this.manageCurrent = this.manageCurrent.bind(this)
//this.pauseTimer = this.pauseTimer.bind(this)
}
convertToTime(time){
/*
var date = new Date(0);
date.setSeconds(this.props.currentTime); // specify value for SECONDS here
var timeString = date.toISOString().substring(14, 19);
return timeString*/
var minutes = Math.floor(time/60)
var secs = String(time%60)
if (String(secs).length == 1){
secs = '0' + secs
}
if (String(minutes).length == 1){
minutes = '0' + minutes
}
var string = minutes+":"+secs
return string
}
manageCurrent(){
if (this.props.currentTime > 0){
this.props.modifyCurrentTime(this.props.currentTime - 1)
} else {
this.toggleTimer()
this.props.switchCurrent()
}
}
toggleTimer(){
if (this.functura == null){
const myInterval = setInterval(() => {this.manageCurrent()}, 100)
this.functura = myInterval
} else{
clearInterval(this.functura);
this.functura = null
}
}
resetTimer(){
this.toggleTimer()
this.props.modifyCurrentTime(this.props.workSwitch ? this.props.workTime : this.props.breakTime)
this.props.resetTimer()
}
render(){
return(
<>
<h1>25 + 5 Clock</h1>
<div className='selectors'>
<div id='breaktime'>
<h2 id="break-label">Break Length</h2>
<div class='timesetters'>
<i onClick={() => {this.props.changeBreakTime(-60)}} id="break-decrement" class="bi bi-caret-down-fill"></i>
<h1 id="break-length">{this.props.breakTime / 60}</h1>
<i onClick={() => {this.props.changeBreakTime(60)}} id="session-increment" class="bi bi-caret-up-fill"></i>
</div>
</div>
<div id='worktime'>
<h2 id="session-label">Session Length</h2>
<div class='timesetters'>
<i onClick={() => {this.props.changeWorkTime(-60)}} id="session-decrement" class="bi bi-caret-down-fill"></i>
<h1 id="session-length">{this.props.workTime / 60}</h1>
<i onClick={() => {this.props.changeWorkTime(60)}} id="break-increment" class="bi bi-caret-up-fill"></i>
</div>
</div>
</div>
<h1 id="timer-label">{(this.props.workSwitch ? "Session" : "Break")}</h1>
<h1 id="time-left">{this.convertToTime(this.props.currentTime)}</h1>
<div className='selectors'>
<div onClick={this.toggleTimer} id="start_stop">
<i class="bi bi-play-fill"></i>
<i class="bi bi-pause-fill"></i>
</div>
<i onClick={() => {this.resetTimer()}} id="reset" class="bi bi-arrow-repeat"></i>
</div>
</>
)
}
}
const mapStateToProps = (state) => {
return {
//name of reduxthing: actual prop in elem
workTime: state.workTime,
breakTime: state.breakTime,
currentTime: state.currentTime,
workSwitch: state.workSwitch,
timerFunc: state.timerFuncs
}
}
const mapDispatchToProps = (dispatch) => {
return {
//submitNewMessage: (message) => {dispatch(addMessage(message))}
changeWorkTime: (dir) => {dispatch(changeTime(CHGW, dir))},
changeBreakTime: (dir) => {dispatch(changeTime(CHGB, dir))},
modifyCurrentTime: (dir) => {dispatch(changeTime(CHGC, dir))},
switchCurrent: () => {dispatch(changeTime(SWIT))},
resetTimer: () => {dispatch(changeTime(REST))}
//pauseTimer: () => {dispatch(changeTime(PAUS))}
}
}
// change code below this line
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps) (Clock);
class AppWrapper extends React.Component {
render() {
return (
<Provider store={Store}>
<ConnectedComponent />
</Provider>
);
}
};
ReactDOM.render(<AppWrapper />, document.getElementById('Clock'))