import React, { useState, useEffect, useReducer } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
import { Label, Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import moment from 'moment-timezone';
import { isAdmin, isInstructor, getInstructor, BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
import { InstructorClassDetail, InstructorClassAttendance } from './InstructorClasses.js';
import { PayPalPayNow } from './PayPal.js';
import { tags } from './Courses.js';
function ClassTable(props) {
const { classes } = props;
const now = new Date().toISOString();
return (
Name
Date
Time
Instructor
Cost
Students
{classes.length ?
classes.map(x =>
{x.course_data.name}
{moment.utc(x.datetime).tz('America/Edmonton').format('ll')}
{x.is_cancelled ? 'Cancelled' : moment.utc(x.datetime).tz('America/Edmonton').format('LT')}
{getInstructor(x)}
{x.cost === '0.00' ? 'Free' : '$'+x.cost}
{!!x.max_students ?
x.max_students <= x.student_count ?
'Full'
:
x.student_count + ' / ' + x.max_students
:
x.student_count
}
)
:
None
}
);
};
function NewClassTable(props) {
const { classes } = props;
let sortedClasses = [];
if (classes.length) {
for (const clazz of classes) {
const course_data = clazz.course_data;
const course = sortedClasses.find(x => x?.course?.id === course_data?.id);
if (course) {
course.classes.push(clazz);
} else {
sortedClasses.push({
course: course_data,
classes: [clazz],
});
}
}
}
const now = new Date().toISOString();
return (
<>
{sortedClasses.map(x =>
{!!x.course.tags && x.course.tags.split(',').map(name =>
)}
Date
Time
Cost
Students
{x.classes.map(x =>
{moment.utc(x.datetime).tz('America/Edmonton').format('MMM Do')}
{x.is_cancelled ? 'Cancelled' : moment.utc(x.datetime).tz('America/Edmonton').format('LT')}
{x.cost === '0.00' ? 'Free' : '$'+x.cost}
{!!x.max_students ?
x.max_students <= x.student_count ?
'Full'
:
x.student_count + ' / ' + x.max_students
:
x.student_count
}
)}
)}
>
);
};
let classesCache = false;
let sortCache = true;
let tagFilterCache = false;
export function ClassFeed(props) {
const [classes, setClasses] = useState(classesCache);
useEffect(() => {
const get = async() => {
requester('/sessions/', 'GET', '')
.then(res => {
setClasses(res.results);
classesCache = res.results;
})
.catch(err => {
console.log(err);
});
};
get();
const interval = setInterval(get, 60000);
return () => clearInterval(interval);
}, []);
const now = new Date().toISOString();
return (
Upcoming Protospace Classes
{classes ?
x.datetime > now).sort((a, b) => a.datetime > b.datetime ? 1 : -1)} />
:
Loading...
}
);
};
export function Classes(props) {
const [classes, setClasses] = useState(classesCache);
const [sortByCourse, setSortByCourse] = useState(sortCache);
const [tagFilter, setTagFilter] = useState(tagFilterCache);
const { token, user } = props;
useEffect(() => {
requester('/sessions/', 'GET', token)
.then(res => {
setClasses(res.results);
classesCache = res.results;
})
.catch(err => {
console.log(err);
});
}, []);
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;
console.log(tagFilter);
return (
Click here to view the list of all courses.
{!!user && !!classes.length && !!classes.filter(byTeaching).length &&
<>
>
}
Filter by tag:
{Object.entries(tags).map(([name, color]) =>
)}
{tagFilter && }
{classes.length ?
sortByCourse ?
:
:
Loading...
}
);
};
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);
useEffect(() => {
requester('/sessions/'+id+'/', 'GET', token)
.then(res => {
setClass(res);
})
.catch(err => {
console.log(err);
setError(true);
});
}, [refreshCount]);
const handleSignup = () => {
if (loading) return;
setLoading(true);
const data = { attendance_status: 'Waiting for payment', session: id };
requester('/training/', 'POST', token, data)
.then(res => {
refreshClass();
refreshUser();
})
.catch(err => {
console.log(err);
});
};
const handleToggle = (newStatus) => {
if (loading) return;
setLoading(true);
const data = { attendance_status: newStatus, session: id };
requester('/training/'+userTraining.id+'/', 'PUT', token, data)
.then(res => {
refreshClass();
refreshUser();
})
.catch(err => {
console.log(err);
setError(true);
});
};
useEffect(() => {
setLoading(false);
}, [userTraining]);
// TODO: calculate yesterday and lock signups
return (
{!error ?
clazz ?
{(isAdmin(user) || clazz.instructor === user.id) &&
}
Name:
{clazz.course_data.name}
Date:
{moment.utc(clazz.datetime).tz('America/Edmonton').format('ll')}
Time:
{clazz.is_cancelled ? 'Cancelled' : moment.utc(clazz.datetime).tz('America/Edmonton').format('LT')}
Instructor:
{getInstructor(clazz)}
Cost:
{clazz.cost === '0.00' ? 'Free' : '$'+clazz.cost}
Students:
{clazz.student_count} {!!clazz.max_students && '/ '+clazz.max_students}
{clazz.course_data.is_old ?
clazz.course_data.description.split('\n').map((x, i) =>
{x}
)
:
}
{(isAdmin(user) || clazz.instructor === user.id) &&
}
{clazz.instructor != user.id &&
(userTraining ?
Status: {userTraining.attendance_status}
{userTraining.attendance_status === 'Withdrawn' ?
:
}
{userTraining.attendance_status === 'Waiting for payment' &&
Please pay the course fee of ${clazz.cost} to confirm your attendance.
}
:
(clazz.is_cancelled ?
The class is cancelled.
:
((clazz.max_students && clazz.student_count >= clazz.max_students) ?
The class is full.
:
)
)
)
}
:
Loading...
:
}
);
};