import React, { useState, useEffect } from 'react'; import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom'; import './light.css'; import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; import moment from 'moment'; import { requester } from './utils.js'; import { NotFound, PleaseLogin } from './Misc.js'; export function Courses(props) { const [courses, setCourses] = useState(false); const { token } = props; useEffect(() => { requester('/courses/', 'GET', token) .then(res => { setCourses(res.results); }) .catch(err => { console.log(err); }); }, []); return (
Courses
{courses ? Name {courses.length ? courses.map((x, i) => {x.name} ) :

None

}
:

Loading...

}
); }; export function CourseDetail(props) { const [course, setCourse] = useState(false); const [error, setError] = useState(false); const { token } = props; const { id } = useParams(); useEffect(() => { requester('/courses/'+id+'/', 'GET', token) .then(res => { setCourse(res); }) .catch(err => { console.log(err); setError(true); }); }, []); const getInstructor = (session) => session.instructor ? session.instructor.first_name : session.old_instructor; return ( {!error ? course ?
{course.name}
Course Description
{course.description.split('\n').map((x, i) =>

{x}

)}
Classes
Date Time Instructor Cost {course.sessions.length ? course.sessions.sort((a, b) => a.datetime < b.datetime).map((x, i) => {moment.utc(x.datetime).format('ll')} {moment.utc(x.datetime).format('LT')} {getInstructor(x)} {x.cost === '0.00' ? 'Free' : '$'+x.cost} ) :

None

}
:

Loading...

: }
); };