Add loading spinners to buttons

This commit is contained in:
Tanner Collin 2020-09-15 19:40:29 +00:00
parent faf6969f7e
commit 3b8e0097a1
2 changed files with 17 additions and 3 deletions

View File

@ -92,6 +92,7 @@ export function ClassDetail(props) {
const [clazz, setClass] = useState(false);
const [refreshCount, refreshClass] = useReducer(x => x + 1, 0);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const { token, user, refreshUser } = props;
const { id } = useParams();
const userTraining = clazz && clazz.students.find(x => x.user == user.id);
@ -108,6 +109,7 @@ export function ClassDetail(props) {
}, [refreshCount]);
const handleSignup = () => {
setLoading(true);
const data = { attendance_status: 'Waiting for payment', session: id };
requester('/training/', 'POST', token, data)
.then(res => {
@ -120,6 +122,7 @@ export function ClassDetail(props) {
};
const handleToggle = (newStatus) => {
setLoading(true);
const data = { attendance_status: newStatus, session: id };
requester('/training/'+userTraining.id+'/', 'PUT', token, data)
.then(res => {
@ -132,6 +135,10 @@ export function ClassDetail(props) {
});
};
useEffect(() => {
setLoading(false);
}, [userTraining]);
// TODO: calculate yesterday and lock signups
return (
@ -198,11 +205,11 @@ export function ClassDetail(props) {
<p>Status: {userTraining.attendance_status}</p>
<p>
{userTraining.attendance_status === 'Withdrawn' ?
<Button onClick={() => handleToggle('Waiting for payment')}>
<Button loading={loading} onClick={() => handleToggle('Waiting for payment')}>
Sign back up
</Button>
:
<Button onClick={() => handleToggle('Withdrawn')}>
<Button loading={loading} onClick={() => handleToggle('Withdrawn')}>
Withdraw from Class
</Button>
}
@ -226,7 +233,7 @@ export function ClassDetail(props) {
((clazz.max_students && clazz.student_count >= clazz.max_students) ?
<p>The class is full.</p>
:
<Button onClick={handleSignup}>
<Button loading={loading} onClick={handleSignup}>
Sign me up!
</Button>
)

View File

@ -68,8 +68,10 @@ class AttendanceSheet extends React.Component {
function AttendanceRow(props) {
const { student, token, refreshClass } = props;
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const handleMark = (newStatus) => {
setLoading(newStatus);
const data = { ...student, attendance_status: newStatus };
requester('/training/'+student.id+'/', 'PATCH', token, data)
.then(res => {
@ -86,8 +88,13 @@ function AttendanceRow(props) {
onClick: () => handleMark(name),
toggle: true,
active: student.attendance_status === name,
loading: loading === name,
});
useEffect(() => {
setLoading(false);
}, [student.attendance_status]);
return (
<div className='attendance-row'>
<p>{student.student_name}{student.attendance_status === 'Waiting for payment' && ' (Waiting for payment)'}:</p>