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,69 +172,75 @@ function App() {
 			</Route>
 
 			<div className='topPadding'>
-				{user && user.member.set_details ?
+				<Switch>
-					<Switch>
+					<Route path='/paste'>
-						<Route path='/account'>
+						<Paste token={token} />
-							<Account token={token} user={user} refreshUser={refreshUser} />
-						</Route>
-
-						<Route path='/transactions/:id'>
-							<TransactionDetail token={token} user={user} refreshUser={refreshUser} />
-						</Route>
-						<Route path='/transactions'>
-							<Transactions user={user} />
-						</Route>
-
-						<Route path='/cards'>
-							<Cards user={user} />
-						</Route>
-
-						<Route path='/training'>
-							<Training user={user} />
-						</Route>
-
-						<Route path='/courses/:id'>
-							<CourseDetail token={token} user={user} />
-						</Route>
-						<Route path='/courses'>
-							<Courses token={token} user={user} />
-						</Route>
-
-						<Route path='/classes/:id'>
-							<ClassDetail token={token} user={user} refreshUser={refreshUser} />
-						</Route>
-						<Route path='/classes'>
-							<Classes token={token} />
-						</Route>
-
-						<Route path='/members/:id'>
-							<MemberDetail token={token} user={user} />
-						</Route>
-						<Route path='/members'>
-							<Members token={token} />
-						</Route>
-
-						{user && isAdmin(user) &&
-							<Route path='/admin'>
-								<Admin token={token} user={user} />
-							</Route>
-						}
-
-						{user && isAdmin(user) &&
-							<Route path='/admintrans'>
-								<AdminReportedTransactions token={token} user={user} />
-							</Route>
-						}
-
-						<Route path='/:page'>
-							<NotFound />
-						</Route>
-					</Switch>
-				:
-					<Route path='/:page'>
-						<PleaseLogin />
 					</Route>
-				}
+
+					{user && user.member.set_details ?
+						<Switch>
+							<Route path='/account'>
+								<Account token={token} user={user} refreshUser={refreshUser} />
+							</Route>
+
+							<Route path='/transactions/:id'>
+								<TransactionDetail token={token} user={user} refreshUser={refreshUser} />
+							</Route>
+							<Route path='/transactions'>
+								<Transactions user={user} />
+							</Route>
+
+							<Route path='/cards'>
+								<Cards user={user} />
+							</Route>
+
+							<Route path='/training'>
+								<Training user={user} />
+							</Route>
+
+							<Route path='/courses/:id'>
+								<CourseDetail token={token} user={user} />
+							</Route>
+							<Route path='/courses'>
+								<Courses token={token} user={user} />
+							</Route>
+
+							<Route path='/classes/:id'>
+								<ClassDetail token={token} user={user} refreshUser={refreshUser} />
+							</Route>
+							<Route path='/classes'>
+								<Classes token={token} />
+							</Route>
+
+							<Route path='/members/:id'>
+								<MemberDetail token={token} user={user} />
+							</Route>
+							<Route path='/members'>
+								<Members token={token} />
+							</Route>
+
+							{user && isAdmin(user) &&
+								<Route path='/admin'>
+									<Admin token={token} user={user} />
+								</Route>
+							}
+
+							{user && isAdmin(user) &&
+								<Route path='/admintrans'>
+									<AdminReportedTransactions token={token} user={user} />
+								</Route>
+							}
+
+							<Route path='/:page'>
+								<NotFound />
+							</Route>
+						</Switch>
+					:
+						<Route path='/:page'>
+							<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>
+	);
+};