tanner
/
spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add UI for paste (Transporter)

Browse Source
master
Tanner Collin 4 years ago
parent 613369d9e9
commit 50497b83b0
2 changed files with 160 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 116
      webclient/src/App.js
  2. 96
      webclient/src/Paste.js

116
webclient/src/App.js
Unescape View File

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

96
webclient/src/Paste.js
Unescape View File

@ -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>
);
};
Write Preview
Loading…
Cancel
Save