125 lines
4.0 KiB
JavaScript
125 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import { connect } from "react-redux";
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faArrowCircleDown } from "@fortawesome/free-solid-svg-icons";
|
|
import { faArrowCircleUp } from "@fortawesome/free-solid-svg-icons";
|
|
import { colors,makeClock } from './globals'
|
|
|
|
import { sessionLengthAction } from "./actions/sessionLengthAction";
|
|
import { clockAction } from "./actions/clockAction";
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
sessionLengthAction: (sessionLength) => dispatch(sessionLengthAction(sessionLength)),
|
|
clockAction: (time) => dispatch(clockAction(time)),
|
|
});
|
|
|
|
const mapStateToProps = (state) => ({ ...state });
|
|
|
|
class SessionControls extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.handleDownArrowMouseEvent = this.handleDownArrowMouseEvent.bind(this);
|
|
this.handleUpArrowMouseEvent = this.handleUpArrowMouseEvent.bind(this);
|
|
this.incrementSession = this.incrementSession.bind(this);
|
|
this.decrementSession = this.decrementSession.bind(this);
|
|
this.state = {
|
|
downColor: colors.ivoryBlack,
|
|
upColor: colors.ivoryBlack,
|
|
};
|
|
};
|
|
|
|
incrementSession() {
|
|
if (this.props.sessionLength < 60) {
|
|
const newSessionLength = this.props.sessionLength + 1;
|
|
if (!this.props.clockIsRunning) {
|
|
this.props.sessionLengthAction(newSessionLength);
|
|
if (this.props.timer === 'Session') {
|
|
this.props.clockAction(makeClock(newSessionLength * 60));
|
|
}
|
|
} else {
|
|
if (this.props.timer === 'Break') {
|
|
this.props.sessionLengthAction(newSessionLength);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
decrementSession() {
|
|
if (this.props.sessionLength > 1) {
|
|
const newSessionLength = this.props.sessionLength - 1;
|
|
if (!this.props.clockIsRunning) {
|
|
this.props.sessionLengthAction(newSessionLength);
|
|
if (this.props.timer === 'Session') {
|
|
this.props.clockAction(makeClock(newSessionLength * 60));
|
|
}
|
|
} else {
|
|
if (this.props.timer === 'Break') {
|
|
this.props.sessionLengthAction(newSessionLength);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
handleDownArrowMouseEvent(e) {
|
|
if (e.type === 'mousedown' || e.type === 'touchstart') {
|
|
this.setState({downColor: colors.goldLeaf});
|
|
} else if (e.type === 'mouseup' || e.type === 'touchend') {
|
|
this.setState({downColor: colors.ivoryBlack});
|
|
}
|
|
};
|
|
|
|
handleUpArrowMouseEvent(e) {
|
|
if (e.type === 'mousedown' || e.type === 'touchstart') {
|
|
this.setState({upColor: colors.goldLeaf});
|
|
} else if (e.type === 'mouseup' || e.type === 'touchend') {
|
|
this.setState({upColor: colors.ivoryBlack});
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const style = {
|
|
height: '50%',
|
|
width: '75%',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-start',
|
|
marginLeft: '25%',
|
|
fontSize: 32,
|
|
};
|
|
|
|
const breakStyle = {
|
|
width: 50,
|
|
}
|
|
|
|
const downArrowStyle = {
|
|
color: this.state.downColor,
|
|
}
|
|
|
|
const upArrowStyle = {
|
|
color: this.state.upColor,
|
|
}
|
|
|
|
return(
|
|
<div style={style}>
|
|
<div id='session-decrement' style={downArrowStyle} onClick={this.decrementSession}
|
|
onTouchStart={this.handleDownArrowMouseEvent} onTouchEnd={this.handleDownArrowMouseEvent}
|
|
onMouseDown={this.handleDownArrowMouseEvent} onMouseUp={this.handleDownArrowMouseEvent}>
|
|
<FontAwesomeIcon icon={faArrowCircleDown}/>
|
|
</div>
|
|
|
|
<p id='session-length' style={breakStyle}>{this.props.sessionLength}</p>
|
|
|
|
<div id='session-increment' style={upArrowStyle} onClick={this.incrementSession}
|
|
onTouchStart={this.handleUpArrowMouseEvent} onTouchEnd={this.handleUpArrowMouseEvent}
|
|
onMouseDown={this.handleUpArrowMouseEvent} onMouseUp={this.handleUpArrowMouseEvent}>
|
|
<FontAwesomeIcon icon={faArrowCircleUp}/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(SessionControls);
|