-
Notifications
You must be signed in to change notification settings - Fork 38
/
AssignmentGoalInput.js
96 lines (88 loc) · 2.61 KB
/
AssignmentGoalInput.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import React, { useEffect, useState, useRef } from 'react'
import { styled } from '@mui/material/styles'
import Grid from '@mui/material/Grid'
import Button from '@mui/material/Button'
import StyledTextField from './StyledTextField'
import debounce from 'lodash.debounce'
import { eventLogExtra } from '../util/object'
const PREFIX = 'AssignmentGoalInput'
const classes = {
goalGradeInput: `${PREFIX}-goalGradeInput`
}
const StyledGrid = styled(Grid)({
[`& .${classes.goalGradeInput}`]: {
marginTop: 0,
width: 150
}
})
function AssignmentGoalInput (props) {
const {
currentGrade,
maxPossibleGrade,
goalGrade,
setGoalGrade,
setEventLog,
eventLog,
handleClearGoalGrades,
mathWarning
} = props
const [goalGradeInternal, setGoalGradeInternal] = useState(goalGrade)
const debouncedGoalGrade = useRef(debounce(q => setGoalGrade(q), 500)).current
const updateGoalGradeInternal = (grade) => {
const v = { courseGoalGrade: grade }
if (goalGrade !== '') {
// only send prev grade object when there is previous value
v.prevCourseGoalGrade = goalGrade
}
setEventLog(eventLogExtra(v, eventLog, currentGrade, maxPossibleGrade))
debouncedGoalGrade(grade)
setGoalGradeInternal(grade)
}
useEffect(() => {
setGoalGradeInternal(goalGrade)
}, [goalGrade])
return (
<StyledGrid item>
<StyledTextField
error={goalGradeInternal > 100 || mathWarning || goalGradeInternal > maxPossibleGrade}
id='standard-number'
value={goalGradeInternal}
label={
mathWarning
? 'Scores no longer match goal'
: goalGrade > 100
? 'Over 100%'
: goalGrade > maxPossibleGrade
? 'Greater than max possible grade'
: 'Set Minimum Goal'
}
onChange={event => {
const goalGrade = event.target.value
if (goalGrade === '') {
updateGoalGradeInternal('')
} else if (goalGrade <= 0) {
updateGoalGradeInternal(0)
} else if (goalGrade > 125) {
updateGoalGradeInternal(125)
} else {
updateGoalGradeInternal(goalGrade)
}
}}
type='number'
className={classes.goalGradeInput}
margin='normal'
variant='outlined'
style={{ marginRight: '10px', width: '25ch' }}
/>
<Button
variant='contained'
className={classes.clearButton}
onClick={handleClearGoalGrades}
aria-label='clear'
>
Clear
</Button>
</StyledGrid>
)
}
export default (AssignmentGoalInput)