diff --git a/webclient/src/InstructorClasses.js b/webclient/src/InstructorClasses.js
new file mode 100644
index 0000000..9f5d10d
--- /dev/null
+++ b/webclient/src/InstructorClasses.js
@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import * as Datetime from 'react-datetime';
+import 'react-datetime/css/react-datetime.css';
+import moment from 'moment';
+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 InstructorClassEditor(props) {
+ const { input, setInput, error, editing } = 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 handleDatetime = (v) => setInput({ ...input, datetime: v.utc().format() });
+
+ const makeProps = (name) => ({
+ name: name,
+ onChange: handleChange,
+ value: input[name] || '',
+ error: error[name],
+ });
+
+ return (
+
+
+
+
+ {error.datetime &&
+
+ }
+
+
+
+
+
+
+ {editing &&
+
+
+ }
+
+
+ );
+}
+
+export function InstructorClassDetail(props) {
+ const { clazz, setClass, token } = props;
+ const [open, setOpen] = useState(false);
+ const [input, setInput] = useState(clazz);
+ const [error, setError] = useState(false);
+ const [loading, setLoading] = useState(false);
+ const [success, setSuccess] = useState(false);
+ const { id } = useParams();
+
+ const handleSubmit = (e) => {
+ setLoading(true);
+ setSuccess(false);
+ requester('/sessions/'+id+'/', 'PUT', token, input)
+ .then(res => {
+ setSuccess(true);
+ setLoading(false);
+ setError(false);
+ setOpen(false);
+ setClass(res);
+ })
+ .catch(err => {
+ setLoading(false);
+ console.log(err);
+ setError(err.data);
+ });
+ };
+
+ return (
+
+
+
+ {!open && success &&
Saved!
}
+
+ {open ?
+
+ :
+
+ }
+
+
+
+ {!open && success &&
Added! View the class.
}
+
+ {open ?
+
+ :
+
+ }
+