granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added the last bit of client validation

Browse source
This commit is contained in:
Justin Edmund 2022-03-03 16:12:28 -08:00
parent e9546293dc
commit 8fe270adb5
1 changed files with 49 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
components/AxSelect/index.tsx
View file

@ -67,6 +67,10 @@ const AXSelect = (props: Props) => {
props.sendValues(primaryAxModifier, primaryAxValue, secondaryAxModifier, secondaryAxValue) props.sendValues(primaryAxModifier, primaryAxValue, secondaryAxModifier, secondaryAxValue)
}, [primaryAxModifier, primaryAxValue, secondaryAxModifier, secondaryAxValue]) }, [primaryAxModifier, primaryAxValue, secondaryAxModifier, secondaryAxValue])
useEffect(() => {
props.sendValidity(primaryAxValue > 0 && errors.axValue1 === '' && errors.axValue2 === '')
}, [primaryAxValue, errors])
// Classes // Classes
const secondarySetClasses = classNames({ const secondarySetClasses = classNames({
'AXSet': true, 'AXSet': true,
@ -135,44 +139,62 @@ const AXSelect = (props: Props) => {
} }
function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) { function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
const value = parseFloat(event.target.value)
let newErrors = {...errors} let newErrors = {...errors}
if (primaryAxValueInput.current == event.target) { if (primaryAxValueInput.current == event.target) {
const primaryAxSkill = axData[props.axType - 1][primaryAxModifier] if (handlePrimaryErrors(value))
const value = parseFloat(event.target.value) setPrimaryAxValue(value)
if (value < primaryAxSkill.minValue) {
newErrors.axValue1 = `${primaryAxSkill.name.en} must be at least ${primaryAxSkill.minValue}${ (primaryAxSkill.suffix) ? primaryAxSkill.suffix : ''}`
} else if (value > primaryAxSkill.maxValue) {
newErrors.axValue1 = `${primaryAxSkill.name.en} cannot be greater than ${primaryAxSkill.maxValue}${ (primaryAxSkill.suffix) ? primaryAxSkill.suffix : ''}`
} else {
newErrors.axValue1 = ''
setPrimaryAxValue(parseFloat(event.target.value))
}
} else { } else {
const primaryAxSkill = axData[props.axType - 1][primaryAxModifier] if (handleSecondaryErrors(value))
const value = parseFloat(event.target.value) setSecondaryAxValue(value)
}
}
if (primaryAxSkill.secondary) { function handlePrimaryErrors(value: number) {
const secondaryAxSkill = primaryAxSkill.secondary.find(skill => skill.id == secondaryAxModifier) const primaryAxSkill = axData[props.axType - 1][primaryAxModifier]
let newErrors = {...errors}
if (secondaryAxSkill) { if (value < primaryAxSkill.minValue) {
if (value < secondaryAxSkill.minValue) { newErrors.axValue1 = `${primaryAxSkill.name.en} must be at least ${primaryAxSkill.minValue}${ (primaryAxSkill.suffix) ? primaryAxSkill.suffix : ''}`
newErrors.axValue2 = `${secondaryAxSkill.name.en} must be at least ${secondaryAxSkill.minValue}${ (secondaryAxSkill.suffix) ? secondaryAxSkill.suffix : ''}` } else if (value > primaryAxSkill.maxValue) {
} else if (value > secondaryAxSkill.maxValue) { newErrors.axValue1 = `${primaryAxSkill.name.en} cannot be greater than ${primaryAxSkill.maxValue}${ (primaryAxSkill.suffix) ? primaryAxSkill.suffix : ''}`
newErrors.axValue2 = `${secondaryAxSkill.name.en} cannot be greater than ${secondaryAxSkill.maxValue}${ (secondaryAxSkill.suffix) ? secondaryAxSkill.suffix : ''}` } else if (!value || value <= 0) {
} else if (!secondaryAxSkill.suffix && value % 1 !== 0) { newErrors.axValue1 = `${primaryAxSkill.name.en} must have a value`
newErrors.axValue2 = `${secondaryAxSkill.name.en} must be a whole number` } else {
} else { newErrors.axValue1 = ''
newErrors.axValue2 = '' }
setSecondaryAxValue(parseFloat(event.target.value))
} setErrors(newErrors)
return newErrors.axValue1.length === 0
}
function handleSecondaryErrors(value: number) {
const primaryAxSkill = axData[props.axType - 1][primaryAxModifier]
let newErrors = {...errors}
if (primaryAxSkill.secondary) {
const secondaryAxSkill = primaryAxSkill.secondary.find(skill => skill.id == secondaryAxModifier)
if (secondaryAxSkill) {
if (value < secondaryAxSkill.minValue) {
newErrors.axValue2 = `${secondaryAxSkill.name.en} must be at least ${secondaryAxSkill.minValue}${ (secondaryAxSkill.suffix) ? secondaryAxSkill.suffix : ''}`
} else if (value > secondaryAxSkill.maxValue) {
newErrors.axValue2 = `${secondaryAxSkill.name.en} cannot be greater than ${secondaryAxSkill.maxValue}${ (secondaryAxSkill.suffix) ? secondaryAxSkill.suffix : ''}`
} else if (!secondaryAxSkill.suffix && value % 1 !== 0) {
newErrors.axValue2 = `${secondaryAxSkill.name.en} must be a whole number`
} else if (primaryAxValue <= 0) {
newErrors.axValue1 = `${primaryAxSkill.name.en} must have a value`
} else {
newErrors.axValue2 = ''
} }
} }
} }
props.sendValidity(newErrors.axValue1 === '' && newErrors.axValue2 === '')
setErrors(newErrors) setErrors(newErrors)
return newErrors.axValue2.length === 0
} }
function setupInput(ax: AxSkill | undefined, element: HTMLInputElement) { function setupInput(ax: AxSkill | undefined, element: HTMLInputElement) {