added validation to ensure seconds are between 0 and 59, and that end…

… timestamp is after start timestamp - MR
thoughtworksarts · Mar 21, 2018 · 629dd23 · 629dd23
1 parent e0db3e6
commit 629dd23
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 7 deletions.
diff --git a/app/components/timeRange.js b/app/components/timeRange.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
 
-import { isValidInput } from '../utilities/validators.js';
+import { isValidInput, endIsLaterThanStart } from '../utilities/validators.js';
 
 import styles from '../style/index.css';
 
@@ -13,6 +13,7 @@ export default class TimeRange extends React.Component {
 
 		// VALIDATION
 		this.validateInput = this.validateInput.bind(this);
+		this.validateEndAndStart = this.validateEndAndStart.bind(this);
 	}
 
 	handleInputChange(event) {
@@ -26,8 +27,14 @@ export default class TimeRange extends React.Component {
 	}
 
 	validateInput() {
-		return (isValidInput(this.props.range, this.props.numFrames)) ? ({display: "none"})
-																	  : ({display: "inline", color:"red"});
+		return (isValidInput(this.props.range, this.props.numFrames))	? ({display: "none"})
+																		: ({display: "inline", color:"red"});
+	}
+
+	validateEndAndStart() {
+		return (!isValidInput(this.props.range, this.props.numFrames) 
+			|| endIsLaterThanStart(this.props.range))   ? ({display: "none"})
+														: ({display: "inline", color:"red"});
 	}
 
 	render() {
@@ -42,7 +49,10 @@ export default class TimeRange extends React.Component {
                        onChange={this.handleInputChange}/>
 
                 <span id="formatvalidFormatator" style={this.validateInput()}>  
-                	&nbsp; Input must be in this valid format: MM:SS.FF, and frame must between 1 and {this.props.numFrames} 
+                	&nbsp; valid format is MM:SS.FF (with seconds between 0 and 59 and frames between 0 and {this.props.numFrames})
+                </span>
+                <span id="endAndStartValidator" style={this.validateEndAndStart()}>
+                    &nbsp; end time stamp must be after or equal to the start time
                 </span>
 			</div>
 		);

diff --git a/app/utilities/validators.js b/app/utilities/validators.js
@@ -1,5 +1,7 @@
 const isValid = (value, numFrames) => {
-	return (validFormat(value) && validNumFrames(value, numFrames));
+	return (validFormat(value) 
+		&& validNumFrames(value, numFrames)
+		&& validSeconds(value));
 }
 
 const validFormat = (value) => {
@@ -8,16 +10,36 @@ const validFormat = (value) => {
 }
 
 const validNumFrames = (value, numFrames) => {
-	const frames = Number(value.split(".")[1]);
+	let [,,frames] = value.split(/[:.]/);
 	return (frames >=1  && frames <= numFrames);
 }
 
+const validSeconds = (value) => {
+	let [,seconds,] = value.split(/[:.]/);
+	return (seconds >=0  && seconds < 60);
+}
+
+export const endIsLaterThanStart = (range) => {
+	const [startMins, startSeconds, startFrames] = range[0].split(/[:.]/).map((el) => Number(el));
+	const [endMins, endSeconds, endFrames] = range[1].split(/[:.]/).map((el) => Number(el));
+
+	return (startMins === endMins 
+			? (startSeconds === endSeconds 
+				? (startFrames === endFrames
+					? true // if they're the same, then return true
+					: endFrames > startFrames)
+				: endSeconds > startSeconds)
+			: endMins > startMins);
+}
+
 export const isValidInput = (range, numFrames) => {
-	return isValid(range[0], numFrames) && isValid(range[1], numFrames);
+	return isValid(range[0], numFrames) 
+		&& isValid(range[1], numFrames);
 }
 
 export const validateAllInputs = (state, numFrames) => {
 	let valid = true;
+
 	let traverser = (obj) => {
 	  if (typeof obj == "object") {
         Object.entries(obj).forEach(([key, value]) => {
@@ -28,6 +50,7 @@ export const validateAllInputs = (state, numFrames) => {
         });
 	  }
 	};
+
 	traverser(state);
 	return valid;
 };