Add dedicated Sign page

This commit is contained in:
Tanner Collin 2021-12-08 22:02:30 +00:00
parent 2b6aebc399
commit fd83d171e9
3 changed files with 70 additions and 47 deletions

View File

@ -16,6 +16,7 @@ import { Training } from './Training.js';
import { AdminTransactions } from './AdminTransactions.js'; import { AdminTransactions } from './AdminTransactions.js';
import { Admin } from './Admin.js'; import { Admin } from './Admin.js';
import { Paste } from './Paste.js'; import { Paste } from './Paste.js';
import { Sign } from './Sign.js';
import { Courses, CourseDetail } from './Courses.js'; import { Courses, CourseDetail } from './Courses.js';
import { Classes, ClassDetail } from './Classes.js'; import { Classes, ClassDetail } from './Classes.js';
import { Members, MemberDetail } from './Members.js'; import { Members, MemberDetail } from './Members.js';
@ -219,6 +220,10 @@ function App() {
<Paste token={token} /> <Paste token={token} />
</Route> </Route>
<Route path='/sign'>
<Sign token={token} />
</Route>
<Route path='/charts'> <Route path='/charts'>
<Charts /> <Charts />
</Route> </Route>

View File

@ -7,6 +7,7 @@ import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Me
import { statusColor, BasicTable, siteUrl, staticUrl, requester, isAdmin } from './utils.js'; import { statusColor, BasicTable, siteUrl, staticUrl, requester, isAdmin } from './utils.js';
import { LoginForm, SignupForm } from './LoginSignup.js'; import { LoginForm, SignupForm } from './LoginSignup.js';
import { AccountForm } from './Account.js'; import { AccountForm } from './Account.js';
import { SignForm } from './Sign.js';
import { PayPalSubscribeDeal } from './PayPal.js'; import { PayPalSubscribeDeal } from './PayPal.js';
function MemberInfo(props) { function MemberInfo(props) {
@ -138,53 +139,6 @@ function MemberInfo(props) {
); );
}; };
function SignForm(props) {
const { token } = props;
const [error, setError] = useState({});
const [sign, setSign] = useState('');
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const handleValues = (e, v) => setSign(v.value);
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleSubmit = (e) => {
if (loading) return;
setLoading(true);
const data = {sign: sign};
requester('/stats/sign/', 'POST', token, data)
.then(res => {
setLoading(false);
setSuccess(true);
setError({});
setSign('');
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
<Form onSubmit={handleSubmit}>
<p>Send a message to the sign:</p>
<Form.Input
name='sign'
onChange={handleChange}
value={sign}
error={error.sign}
/>
<Form.Button loading={loading} error={error.non_field_errors}>
Submit
</Form.Button>
{success && <div>Success!</div>}
</Form>
);
};
export function Home(props) { export function Home(props) {
const { user, token } = props; const { user, token } = props;
const [stats, setStats] = useState(JSON.parse(localStorage.getItem('stats', 'false'))); const [stats, setStats] = useState(JSON.parse(localStorage.getItem('stats', 'false')));

64
webclient/src/Sign.js Normal file
View File

@ -0,0 +1,64 @@
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';
export function SignForm(props) {
const { token } = props;
const [error, setError] = useState({});
const [sign, setSign] = useState('');
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const handleValues = (e, v) => setSign(v.value);
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleSubmit = (e) => {
if (loading) return;
setLoading(true);
const data = {sign: sign};
requester('/stats/sign/', 'POST', token, data)
.then(res => {
setLoading(false);
setSuccess(true);
setError({});
setSign('');
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
<Form onSubmit={handleSubmit}>
<p>Send a message to the sign:</p>
<Form.Input
name='sign'
onChange={handleChange}
value={sign}
error={error.sign}
/>
<Form.Button loading={loading} error={error.non_field_errors}>
Submit
</Form.Button>
{success && <div>Success!</div>}
</Form>
);
};
export function Sign(props) {
const { token } = props;
return (
<Container>
<Header size='large'>Protospace Sign</Header>
<SignForm token={token} />
</Container>
);
};