import React, { useState, useEffect } from 'react'; import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom'; import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; 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 InstructorCourseEditor(props) { const { input, setInput, error } = 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 handleQuill = (v, d, s, e) => s === 'user' && setInput({ ...input, description: v === '


' ? '' : v, }); const makeProps = (name) => ({ name: name, onChange: handleChange, value: input[name] || '', error: error[name], }); const modules = { toolbar: [ [{ 'header': [3, false] }], ['bold', 'italic', 'underline', 'code'], [{'list': 'ordered'}, {'list': 'bullet'}], ['link'], ['clean'] ], }; return (
{error.description && }
); } export function InstructorCourseDetail(props) { const { course, setCourse, token } = props; const [open, setOpen] = useState(false); const convertNewlineToPara = (t) => t.split('\n').map(x => '

'+x+'

').join('') const [input, setInput] = useState({ ...course, description: course.is_old ? convertNewlineToPara(course.description) : course.description, }); const [error, setError] = useState(false); const [loading, setLoading] = useState(false); const [success, setSuccess] = useState(false); const { id } = useParams(); const handleSubmit = (e) => { if (loading) return; setLoading(true); setSuccess(false); const data = { ...input, is_old: false }; requester('/courses/'+id+'/', 'PUT', token, data) .then(res => { setSuccess(true); setLoading(false); setError(false); setOpen(false); setCourse({...course, ...res}); }) .catch(err => { setLoading(false); console.log(err); setError(err.data); }); }; return (
Instructor Panel
{!open && success &&

Saved!

} {open ?
Edit Course
Submit : }
); }; export function InstructorCourseList(props) { const { courses, setCourses, 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) => { if (loading) return; setLoading(true); setSuccess(false); const data = { ...input, is_old: false }; requester('/courses/', 'POST', token, data) .then(res => { setSuccess(res.id); setInput({}); setLoading(false); setError(false); setOpen(false); setCourses([ ...courses, res ]); }) .catch(err => { setLoading(false); console.log(err); setError(err.data); }); }; return (
Instructor Panel
{!open && success &&

Added to bottom of course list! View the course.

} {open ?
Add a Course
Submit : }
); };