tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add loading spinners to buttons

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
webclient/src/Classes.js
View File

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

7
webclient/src/InstructorClasses.js
View File

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