|
|
|
@ -6,6 +6,7 @@ import moment from 'moment-timezone'; |
|
|
|
|
import { apiUrl, isAdmin, isInstructor, getInstructor, BasicTable, requester } from './utils.js'; |
|
|
|
|
import { NotFound, PleaseLogin } from './Misc.js'; |
|
|
|
|
import { InstructorClassDetail, InstructorClassAttendance } from './InstructorClasses.js'; |
|
|
|
|
import { courseCache } from './Courses.js'; |
|
|
|
|
import { PayPalPayNow } from './PayPal.js'; |
|
|
|
|
import { tags } from './Courses.js'; |
|
|
|
|
|
|
|
|
@ -61,9 +62,10 @@ function ClassTable(props) { |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function NewClassTable(props) { |
|
|
|
|
const { classes } = props; |
|
|
|
|
const { classes, courses } = props; |
|
|
|
|
|
|
|
|
|
let sortedClasses = []; |
|
|
|
|
let seenCourseIds = []; |
|
|
|
|
if (classes.length) { |
|
|
|
|
for (const clazz of classes) { |
|
|
|
|
const course_data = clazz.course_data; |
|
|
|
@ -76,6 +78,9 @@ function NewClassTable(props) { |
|
|
|
|
course: course_data, |
|
|
|
|
classes: [clazz], |
|
|
|
|
}); |
|
|
|
|
seenCourseIds.push( |
|
|
|
|
course_data.id |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
@ -84,17 +89,17 @@ function NewClassTable(props) { |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
<div style={{ margin: '0 -1.5rem 0 -0.5rem', display: 'flex', flexWrap: 'wrap' }}> |
|
|
|
|
<div className='newclasstable'> |
|
|
|
|
{sortedClasses.map(x => |
|
|
|
|
<Segment style={{ margin: '1rem 1rem 0 0', width: '22rem' }}> |
|
|
|
|
<Header size='medium'> |
|
|
|
|
<Header size='small'> |
|
|
|
|
<Link to={'/courses/'+x.course.id}> |
|
|
|
|
{x.course.name} |
|
|
|
|
</Link> |
|
|
|
|
</Header> |
|
|
|
|
|
|
|
|
|
{!!x.course.tags && x.course.tags.split(',').map(name => |
|
|
|
|
<Label color={tags[name]} tag> |
|
|
|
|
<Label color={tags[name]} tag size='small'> |
|
|
|
|
{name} |
|
|
|
|
</Label> |
|
|
|
|
)} |
|
|
|
@ -136,6 +141,22 @@ function NewClassTable(props) { |
|
|
|
|
</Table> |
|
|
|
|
</Segment> |
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
{courses.filter(x => !seenCourseIds.includes(x.id)).map(x => |
|
|
|
|
<Segment style={{ margin: '1rem 1rem 0 0', width: '22rem' }}> |
|
|
|
|
<Header size='small'> |
|
|
|
|
<Link to={'/courses/'+x.id}> |
|
|
|
|
{x.name} |
|
|
|
|
</Link> |
|
|
|
|
</Header> |
|
|
|
|
|
|
|
|
|
{!!x.tags && x.tags.split(',').map(name => |
|
|
|
|
<Label color={tags[name]} tag> |
|
|
|
|
{name} |
|
|
|
|
</Label> |
|
|
|
|
)} |
|
|
|
|
</Segment> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
@ -184,10 +205,22 @@ export function ClassFeed(props) { |
|
|
|
|
|
|
|
|
|
export function Classes(props) { |
|
|
|
|
const [classes, setClasses] = useState(classesCache); |
|
|
|
|
const [courses, setCourses] = useState(courseCache); |
|
|
|
|
const [sortByCourse, setSortByCourse] = useState(sortCache); |
|
|
|
|
const [tagFilter, setTagFilter] = useState(tagFilterCache); |
|
|
|
|
const { token, user } = props; |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
requester('/courses/', 'GET', token) |
|
|
|
|
.then(res => { |
|
|
|
|
setCourses(res.results); |
|
|
|
|
courseCache = res.results; |
|
|
|
|
}) |
|
|
|
|
.catch(err => { |
|
|
|
|
console.log(err); |
|
|
|
|
}); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
requester('/sessions/', 'GET', token) |
|
|
|
|
.then(res => { |
|
|
|
@ -201,7 +234,8 @@ export function Classes(props) { |
|
|
|
|
|
|
|
|
|
const byTeaching = (x) => x.instructor_id === user.member.id; |
|
|
|
|
const byDate = (a, b) => a.datetime > b.datetime ? 1 : -1; |
|
|
|
|
const byTag = (x) => tagFilter ? x.course_data.tags.includes(tagFilter) : true; |
|
|
|
|
const classesByTag = (x) => tagFilter ? x.course_data.tags.includes(tagFilter) : true; |
|
|
|
|
const coursesByTag = (x) => tagFilter ? x.tags.includes(tagFilter) : true; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<Container> |
|
|
|
@ -268,11 +302,14 @@ export function Classes(props) { |
|
|
|
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{classes.length ? |
|
|
|
|
{classes.length && courses.length ? |
|
|
|
|
sortByCourse ? |
|
|
|
|
<NewClassTable classes={classes.filter(byTag)} /> |
|
|
|
|
<NewClassTable |
|
|
|
|
classes={classes.filter(classesByTag)} |
|
|
|
|
courses={courses.filter(coursesByTag)} |
|
|
|
|
/> |
|
|
|
|
: |
|
|
|
|
<ClassTable classes={classes.slice().filter(byTag).sort(byDate)} /> |
|
|
|
|
<ClassTable classes={classes.slice().filter(classesByTag).sort(byDate)} /> |
|
|
|
|
: |
|
|
|
|
<p>Loading...</p> |
|
|
|
|
} |
|
|
|
|