import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
import Logo from './logo.svg';
import { Container, Divider, Dropdown, 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 && user.transactions.slice(-3).slice().reverse();
const lastCard = user.cards && user.cards.sort((a, b) => a.last_seen_at < b.last_seen_at)[0];
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 || '???'}
Card Number:
{lastCard && lastCard.card_number || 'None'}
{lastTrans.length ?
lastTrans.map((x, i) =>
{x.date}
{x.account_type}
${x.amount}
)
:
None
}
);
};
function Home(props) {
const { token, setTokenCache, user, setUserCache } = props;
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
);
};
function Transactions(props) {
const { user } = props;
return (
Date
ID
Amount
Account
Memo
{user.transactions.length ?
user.transactions.slice().reverse().map((x, i) =>
{x.date}
{x.id}
${x.amount}
{x.account_type}
{x.memo}
)
:
None
}
);
}
function TransactionDetail(props) {
const { user } = props;
const { id } = useParams();
const t = user.transactions.find(x => x.id == id);
return (
t ?
Date:
{t.date}
ID:
{t.id}
Amount:
${t.amount}
Category:
{t.category}
Account:
{t.account}
Info Source:
{t.info_source}
Reference:
{t.reference_number}
Memo:
{t.memo}
:
);
}
function PleaseLogin() {
return (
You must login before you can do that!
Visit our login page, then try again.
);
};
function NotFound() {
return (
The page you requested can't be found!
Visit our home page if you are lost.
);
};
function App() {
const [token, setToken] = useState(localStorage.getItem('token', ''));
const [user, setUser] = useState(JSON.parse(localStorage.getItem('user', 'false')));
function setTokenCache(x) {
setToken(x);
localStorage.setItem('token', x);
}
function 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]);
function logout() {
window.location = '/';
setTokenCache('');
setUserCache(false);
}
let menuName = user && user.member && user.member.preferred_name || 'Profile';
menuName = menuName.length > 7 ? 'Profile' : menuName;
return (
{user ?
:
}
)
};
export default App;