import React, { useState, useEffect } from 'react'; import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom'; import './light.css'; import { Button, Label, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; import moment from 'moment-timezone'; import { isInstructor, getInstructor, requester } from './utils.js'; import { NotFound, PleaseLogin } from './Misc.js'; import { InstructorCourseList, InstructorCourseDetail } from './InstructorCourses.js'; import { InstructorClassList } from './InstructorClasses.js'; export const tags = { Protospace: 'black', Laser: 'red', Wood: 'brown', CNC: 'orange', Crafts: 'yellow', //name: 'olive', Electronics: 'green', Computers: 'teal', Metal: 'blue', //name: 'violet', Event: 'purple', Outing: 'pink', Misc: 'grey', }; let courseCache = false; let tagFilterCache = false; export function Courses(props) { const [courses, setCourses] = useState(courseCache); 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); }); }, []); const byTag = (x) => tagFilter ? x.tags.includes(tagFilter) : true; return (
Courses
{isInstructor(user) && }

Filter by tag:

{Object.entries(tags).map(([name, color]) =>
)}
{courses ? Name Interest {courses.length ? courses.filter(byTag).map(x => {x.name} {!!x.num_interested && <>{x.num_interested} member{x.num_interested !== 1 && 's'} } {!!x.tags && x.tags.split(',').map(name => )} ) : None }
:

Loading...

}
); }; export function CourseDetail(props) { const [course, setCourse] = useState(false); const [error, setError] = useState(false); const { token, user } = props; const { id } = useParams(); useEffect(() => { requester('/courses/'+id+'/', 'GET', token) .then(res => { setCourse(res); }) .catch(err => { console.log(err); setError(true); }); }, []); const now = new Date().toISOString(); return ( {!error ? course ?
{course.name}
{isInstructor(user) && }
Course Description
{course.is_old ? course.description.split('\n').map((x, i) =>

{x}

) :
}
Classes
{isInstructor(user) && } Date Time Instructor Cost Students {course.sessions.length ? course.sessions.sort((a, b) => a.datetime < b.datetime ? 1 : -1).slice(0,10).map(x =>  {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 }
:

Loading...

: } ); };