Add UI for paste (Transporter)

webclient/src/App.js

@@ -12,6 +12,7 @@ import { Cards } from './Cards.js';
 import { Training } from './Training.js';
 import { AdminReportedTransactions } from './AdminTransactions.js';
 import { Admin } from './Admin.js';
+import { Paste } from './Paste.js';
 import { Courses, CourseDetail } from './Courses.js';
 import { Classes, ClassDetail } from './Classes.js';
 import { Members, MemberDetail } from './Members.js';
@@ -135,6 +136,11 @@ function App() {
 								as={Link}
 								to='/classes'
 							/>
+							<Dropdown.Item
+								content='Transporter'
+								as={Link}
+								to='/paste'
+							/>
 
 							{user && isAdmin(user) && <Dropdown.Item
 								content='Admin'
@@ -143,7 +149,7 @@ function App() {
 							/>}
 
 							{user && isAdmin(user) && <Dropdown.Item
-								content='Admin Trans.'
+								content='Admin Txs'
 								as={Link}
 								to='/admintrans'
 							/>}
@@ -166,6 +172,11 @@ function App() {
 			</Route>
 
 			<div className='topPadding'>
+				<Switch>
+					<Route path='/paste'>
+						<Paste token={token} />
+					</Route>
+
 					{user && user.member.set_details ?
 						<Switch>
 							<Route path='/account'>
@@ -229,6 +240,7 @@ function App() {
 							<PleaseLogin />
 						</Route>
 					}
+				</Switch>
 			</div>
 
 			</div>

webclient/src/Paste.js

@@ -0,0 +1,96 @@
+import React, { useState, useEffect, useReducer, useContext } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
+import { NotFound } from './Misc.js';
+
+function PasteForm(props) {
+	const { token, input, setInput } = props;
+	const [error, setError] = useState({});
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+
+	const handleSubmit = (e) => {
+		if (loading) return;
+		setLoading(true);
+		requester('/paste/', 'POST', token, input)
+		.then(res => {
+			setLoading(false);
+			setSuccess(true);
+			setError({});
+			setInput(res);
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	const makeProps = (name) => ({
+		name: name,
+		onChange: handleChange,
+		value: input[name] || '',
+		error: error[name],
+	});
+
+	return (
+		<Form onSubmit={handleSubmit}>
+			<Form.TextArea
+				rows={20}
+				{...makeProps('paste')}
+			/>
+
+			{!!token &&<Form.Button loading={loading} error={error.non_field_errors}>
+				Submit
+			</Form.Button>}
+			{success && <div>Success!</div>}
+		</Form>
+	);
+};
+
+let pasteCache = 'Loading...';
+
+export function Paste(props) {
+	const { token } = props;
+	const [input, setInput] = useState({ paste: pasteCache });
+	const [refreshCount, refreshPaste] = useReducer(x => x + 1, 0);
+
+	useEffect(() => {
+		requester('/paste/', 'GET', token)
+		.then(res => {
+			setInput({ paste: res.paste });
+			pasteCache = res.paste;
+		})
+		.catch(err => {
+			console.log(err);
+		});
+	}, [refreshCount]);
+
+	return (
+		<Container>
+			<Header size='large'>Transporter</Header>
+
+			<p>
+				Use this to quickly share info with people across devices.
+				For example: your LAN party server IP address, a config file,
+				a public key, an Arduino sketch, or a URL.
+			</p>
+
+			<p>
+				Members can write, anyone can read. Everyone shares what's below.
+			</p>
+
+			<p>
+				<Button onClick={refreshPaste}>
+					Refresh
+				</Button>
+			</p>
+
+			<PasteForm {...props} input={input} setInput={setInput} />
+		</Container>
+	);
+};