import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import moment from 'moment';
import { isAdmin, isInstructor, BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
import { InstructorClassDetail, InstructorClassAttendance } from './InstructorClasses.js';
function ClassTable(props) {
const { classes } = props;
return (
Name
Date
Time
Instructor
Cost
Students
{classes.length ?
classes.map((x, i) =>
{x.course_name}
{moment.utc(x.datetime).local().format('ll')}
{x.is_cancelled ? 'Cancelled' : moment.utc(x.datetime).local().format('LT')}
{x.instructor_name}
{x.cost === '0.00' ? 'Free' : '$'+x.cost}
{x.student_count} {x.max_students && '/ '+x.max_students}
)
:
None
}
);
};
export function Classes(props) {
const [classes, setClasses] = useState(false);
const { token } = props;
useEffect(() => {
requester('/sessions/', 'GET', token)
.then(res => {
setClasses(res.results);
})
.catch(err => {
console.log(err);
});
}, []);
const now = new Date().toISOString();
return (
{classes ?
x.datetime > now)} />
:
Loading...
}
{classes ?
x.datetime < now)} />
:
Loading...
}
);
};
export function ClassDetail(props) {
const [clazz, setClass] = useState(false);
const [error, setError] = useState(false);
const { token, user, setUserCache } = props;
const { id } = useParams();
const userTraining = user.training.find(x => x.session.id == id);
useEffect(() => {
requester('/sessions/'+id+'/', 'GET', token)
.then(res => {
setClass(res);
})
.catch(err => {
console.log(err);
setError(true);
});
}, []);
const handleSignup = () => {
const data = { attendance_status: 'waiting for payment', session: id };
requester('/training/', 'POST', token, data)
.then(res => {
// bad code:
const newClass = { ...clazz, student_count: clazz.student_count+1 };
setUserCache({ ...user, training: [...user.training, {...res, session: newClass }] });
setClass(newClass);
})
.catch(err => {
console.log(err);
setError(true);
});
};
const handleToggle = (newStatus) => {
const data = { attendance_status: newStatus, session: id };
requester('/training/'+userTraining.id+'/', 'PUT', token, data)
.then(res => {
// bad code:
const studentChange = newStatus === 'withdrawn' ? -1 : 1
const newClass = { ...clazz, student_count: clazz.student_count + studentChange };
const trainingIndex = user.training.indexOf(userTraining);
const newTraining = user.training;
newTraining[trainingIndex] = {...res, session: newClass };
setUserCache({ ...user, training: newTraining });
setClass(newClass);
})
.catch(err => {
console.log(err);
setError(true);
});
};
// TODO: calculate yesterday and lock signups
return (
{!error ?
clazz ?
{isInstructor(user) &&
}
Name:
{clazz.course_name}
Date:
{moment.utc(clazz.datetime).local().format('ll')}
Time:
{clazz.is_cancelled ? 'Cancelled' : moment.utc(clazz.datetime).local().format('LT')}
Instructor:
{clazz.instructor_name}
Cost:
{clazz.cost === '0.00' ? 'Free' : '$'+clazz.cost}
Students:
{clazz.student_count} {clazz.max_students && '/ '+clazz.max_students}
{(isAdmin(user) || clazz.instructor === user.id) &&
}
{clazz.instructor != user.id &&
(userTraining ?
Status: {userTraining.attendance_status}
{userTraining.attendance_status === 'withdrawn' ?
:
}
:
((clazz.max_students && clazz.student_count >= clazz.max_students) ?
The course is full.
:
)
)
}
:
Loading...
:
}
);
};