import React, { useState, useEffect } from 'react';
import './light.css';
import Logo from './logo.svg';
import { Container, Divider, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { requester } from './utils.js';
function LoginForm(props) {
const [input, setInput] = useState({});
const [error, setError] = useState({});
const [loading, setLoading] = useState(false);
const handleValues = (e, v) => setInput({
...input,
[v.name]: v.value
});
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleSubmit = (e) => {
setLoading(true);
requester('/rest-auth/login/', 'POST', '', input)
.then(res => {
console.log(res);
setError({});
props.setTokenCache(res.key);
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
Login
);
}
function SignupForm(props) {
const [input, setInput] = useState({});
const [error, setError] = useState({});
const [loading, setLoading] = useState(false);
const handleValues = (e, v) => setInput({
...input,
[v.name]: v.value
});
const handleChange = (e) => handleValues(e, e.currentTarget);
const genUsername = () => (
input.first_name && input.last_name ?
(input.first_name + '.' + input.last_name).toLowerCase()
:
''
);
const handleSubmit = (e) => {
setLoading(true);
input.username = genUsername();
requester('/registration/', 'POST', '', input)
.then(res => {
console.log(res);
setError({});
props.setTokenCache(res.key);
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
Sign Up
);
}
function DetailsForm(props) {
const member = props.user.member;
const [input, setInput] = useState({
preferred_name: member.preferred_name,
phone: member.phone,
emergency_contact_name: member.emergency_contact_name,
emergency_contact_phone: member.emergency_contact_phone,
set_details: true,
});
const [error, setError] = useState({});
const [loading, setLoading] = useState(false);
const handleValues = (e, v) => setInput({
...input,
[v.name]: v.value
});
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleSubmit = (e) => {
setLoading(true);
requester('/members/' + member.id + '/', 'PATCH', props.token, input)
.then(res => {
console.log(res);
setError({});
props.setUserCache({...props.user, member: res});
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
Submit
);
}
function MemberInfo(props) {
const user = props.user;
const member = user.member;
const lastTrans = user.transactions.slice(-3);
return (
{member.first_name} {member.last_name}
Preferred Name: {member.preferred_name || '???'}
Email: {user.email}
Status: Current
Expiry:
2099-01-01
Application:
{member.application_date || '???'}
Start:
{member.current_start_date || '???'}
Vetted:
{member.vetted_date || 'Not vetted'}
Monthly
${member.monthly_fees || '???'}
{lastTrans.length ?
lastTrans.map((x, i) =>
{x.date}
{x.account_type}
${x.amount}
)
:
None
}
);
}
function App() {
const [token, setToken] = useState(localStorage.getItem('token', ''));
const [user, setUser] = useState(JSON.parse(localStorage.getItem('user', 'false')));
const setTokenCache = (x) => {
setToken(x);
localStorage.setItem('token', x);
}
const setUserCache = (x) => {
setUser(x);
localStorage.setItem('user', JSON.stringify(x));
}
useEffect(() => {
requester('/me/', 'GET', token)
.then(res => {
console.log(res);
setUserCache(res);
})
.catch(err => {
console.log(err);
setUser(false);
});
}, [token]);
const logout = () => {
setTokenCache('');
setUserCache(false);
}
const menuName = user && user.member && user.member.preferred_name || 'Me';
return (
{user ?
user.member.set_details ?
:
:
}
Welcome to the Protospace member portal! Here you can view member info, join classes, and manage your membership.
Main Website
Protospace Wiki
Discussion Google Group
Google Drive
Next member meeting: Jan 01, 2099
Next monthly clean: Jan 01, 2099
Current member count: 200
Due members: 20
Expired members: 100
Bay 108 temperature: 21 C
Bay 110 temperature: 22 C
);
}
export default App;