import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
import * as Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';
import moment from 'moment';
import './light.css';
import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Label, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { BasicTable, staticUrl, requester } from './utils.js';
function AttendanceRow(props) {
const { student, token, refreshClass } = props;
const [training, setTraining] = useState(student);
const [error, setError] = useState(false);
const handleMark = (newStatus) => {
const data = { attendance_status: newStatus };
requester('/training/'+training.id+'/', 'PATCH', token, data)
.then(res => {
setTraining(res);
refreshClass();
setError(false);
})
.catch(err => {
console.log(err);
setError(true);
});
};
// 'withdrawn', 'rescheduled', 'no-show', 'attended', 'confirmed'
const makeProps = (name) => ({
onClick: () => handleMark(name),
toggle: true,
active: training.attendance_status === name,
});
return (
{training.student_name}:
{error &&
Error: something went wrong!
}
);
}
export function InstructorClassAttendance(props) {
const { clazz, token } = props;
const [error, setError] = useState(false);
return (
{clazz.students.length ?
clazz.students.map(x =>
)
:
No students yet.
}
);
};
function InstructorClassEditor(props) {
const { input, setInput, error, editing } = props;
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
const handleDatetime = (v) => setInput({ ...input, datetime: v.utc().format() });
const makeProps = (name) => ({
name: name,
onChange: handleChange,
value: input[name] || '',
error: error[name],
});
return (
{error.datetime &&
}
{editing &&
}
);
}
export function InstructorClassDetail(props) {
const { clazz, setClass, token } = props;
const [open, setOpen] = useState(false);
const [input, setInput] = useState(clazz);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const { id } = useParams();
const handleSubmit = (e) => {
setLoading(true);
setSuccess(false);
requester('/sessions/'+id+'/', 'PUT', token, input)
.then(res => {
setSuccess(true);
setLoading(false);
setError(false);
setOpen(false);
setClass(res);
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
{!open && success &&
Saved!
}
{open ?
Submit
:
}
);
};
export function InstructorClassList(props) {
const { course, setCourse, token } = props;
const [open, setOpen] = useState(false);
const [input, setInput] = useState({});
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const handleSubmit = (e) => {
setLoading(true);
setSuccess(false);
const data = { ...input, course: course.id };
requester('/sessions/', 'POST', token, data)
.then(res => {
setSuccess(res.id);
setInput({});
setLoading(false);
setError(false);
setOpen(false);
setCourse({ ...course, sessions: [ res, ...course.sessions ] });
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
{!open && success &&
Added! View the class.
}
{open ?
Submit
:
}
);
};