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

Force refresh of states instead of modifying objects

Browse Source
master
Tanner Collin 4 years ago
parent 6c8f6f7baa
commit cb8ac3cf63
5 changed files with 44 additions and 44 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. 10
      webclient/src/Account.js
  2. 29
      webclient/src/Admin.js
  3. 11
      webclient/src/App.js
  4. 27
      webclient/src/Classes.js
  5. 11
      webclient/src/Members.js

10
webclient/src/Account.js
Unescape View File

@ -6,6 +6,7 @@ import { BasicTable, staticUrl, requester } from './utils.js';
import { LoginForm, SignupForm } from './LoginSignup.js';
function ChangePasswordForm(props) {
const { token } = props;
const [input, setInput] = useState({});
const [error, setError] = useState({});
const [loading, setLoading] = useState(false);
@ -17,7 +18,7 @@ function ChangePasswordForm(props) {
const handleSubmit = (e) => {
setLoading(true);
requester('/password/change/', 'POST', props.token, input)
requester('/password/change/', 'POST', token, input)
.then(res => {
setError({});
history.push('/');
@ -67,7 +68,8 @@ function ChangePasswordForm(props) {
};
export function AccountForm(props) {
const member = props.user.member;
const { token, user, refreshUser } = props;
const member = user.member;
const [input, setInput] = useState({ ...member, set_details: true });
const [error, setError] = useState({});
const [loading, setLoading] = useState(false);
@ -80,10 +82,10 @@ export function AccountForm(props) {
const handleSubmit = (e) => {
setLoading(true);
requester('/members/' + member.id + '/', 'PATCH', props.token, input)
requester('/members/' + member.id + '/', 'PATCH', token, input)
.then(res => {
setError({});
props.setUserCache({...props.user, member: res});
refreshUser();
history.push('/');
})
.catch(err => {

29
webclient/src/Admin.js
Unescape View File

@ -5,11 +5,12 @@ import { Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image
import { BasicTable, staticUrl, requester } from './utils.js';
function AdminCardDetail(props) {
const [input, setInput] = useState({ ...props.card });
const { token, result, card } = props;
const [input, setInput] = useState({ ...card });
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const id = props.card.id;
const id = card.id;
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
@ -19,8 +20,8 @@ function AdminCardDetail(props) {
const handleSubmit = (e) => {
setLoading(true);
setSuccess(false);
const data = { ...input, member_id: props.result.member.id };
requester('/cards/'+id+'/', 'PUT', props.token, data)
const data = { ...input, member_id: result.member.id };
requester('/cards/'+id+'/', 'PUT', token, data)
.then(res => {
setLoading(false);
setSuccess(true);
@ -37,7 +38,7 @@ function AdminCardDetail(props) {
const handleDelete = (e) => {
e.preventDefault();
requester('/cards/'+id+'/', 'DELETE', props.token)
requester('/cards/'+id+'/', 'DELETE', token)
.then(res => {
setInput(false);
})
@ -98,13 +99,14 @@ function AdminCardDetail(props) {
</Segment>
:
<Segment raised color='black'>
Deleted card: {props.card.card_number}
Deleted card: {card.card_number}
</Segment>
);
};
export function AdminMemberCards(props) {
const cards = props.result.cards;
const { token, result, refreshResult } = props;
const cards = result.cards;
const [input, setInput] = useState({ active_status: 'card_active' });
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
@ -119,13 +121,13 @@ export function AdminMemberCards(props) {
const handleSubmit = (e) => {
setLoading(true);
setSuccess(false);
const data = { ...input, member_id: props.result.member.id };
requester('/cards/', 'POST', props.token, data)
const data = { ...input, member_id: result.member.id };
requester('/cards/', 'POST', token, data)
.then(res => {
setLoading(false);
setSuccess(true);
setError(false);
props.setResult({ ...props.result, cards: [...cards, res] });
refreshResult();
})
.catch(err => {
setLoading(false);
@ -194,7 +196,8 @@ export function AdminMemberCards(props) {
};
export function AdminMemberForm(props) {
const [input, setInput] = useState(props.result.member);
const { token, result, refreshResult } = props;
const [input, setInput] = useState(result.member);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
@ -208,12 +211,12 @@ export function AdminMemberForm(props) {
const handleSubmit = (e) => {
setLoading(true);
setSuccess(false);
requester('/members/' + id + '/', 'PATCH', props.token, input)
requester('/members/' + id + '/', 'PATCH', token, input)
.then(res => {
setLoading(false);
setSuccess(true);
setError(false);
props.setResult({ ...props.result, member: res });
refreshResult();
})
.catch(err => {
setLoading(false);

11
webclient/src/App.js
Unescape View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useReducer } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css'; import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { requester } from './utils.js';
@ -16,6 +16,7 @@ import { Footer } from './Footer.js';
function App() {
const [token, setToken] = useState(localStorage.getItem('token', ''));
const [user, setUser] = useState(JSON.parse(localStorage.getItem('user', 'false')));
const [refreshCount, refreshUser] = useReducer(x => x + 1, 0);
function setTokenCache(x) {
setToken(x);
@ -36,7 +37,7 @@ function App() {
console.log(err);
setUser(false);
});
}, [token]);
}, [token, refreshCount]);
function logout() {
setTokenCache('');
@ -121,14 +122,14 @@ function App() {
</Menu>
<Route exact path='/'>
<Home token={token} setTokenCache={setTokenCache} user={user} setUserCache={setUserCache} />
<Home token={token} setTokenCache={setTokenCache} user={user} refreshUser={refreshUser} />
</Route>
<div className='topPadding'>
{user && user.member.set_details ?
<Switch>
<Route path='/account'>
<Account token={token} user={user} setUserCache={setUserCache} />
<Account token={token} user={user} refreshUser={refreshUser} />
</Route>
<Route path='/transactions/:id'>
@ -154,7 +155,7 @@ function App() {
</Route>
<Route path='/classes/:id'>
<ClassDetail token={token} user={user} setUserCache={setUserCache} />
<ClassDetail token={token} user={user} refreshUser={refreshUser} />
</Route>
<Route path='/classes'>
<Classes token={token} />

27
webclient/src/Classes.js
Unescape View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useReducer } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
@ -66,7 +66,8 @@ export function Classes(props) {
return (
<Container>
<Header size='large'>Class List</Header>
<Header size='medium'>Upcoming</Header>
<Header size='medium'>Upcoming</Header>
{classes ?
<ClassTable classes={classes.filter(x => x.datetime > now)} />
:
@ -85,8 +86,9 @@ export function Classes(props) {
export function ClassDetail(props) {
const [clazz, setClass] = useState(false);
const [refreshCount, refreshClass] = useReducer(x => x + 1, 0);
const [error, setError] = useState(false);
const { token, user, setUserCache } = props;
const { token, user, refreshUser } = props;
const { id } = useParams();
const userTraining = user.training.find(x => x.session.id == id);
@ -99,20 +101,17 @@ export function ClassDetail(props) {
console.log(err);
setError(true);
});
}, []);
}, [refreshCount]);
const handleSignup = () => {
const data = { attendance_status: 'waiting for payment', session: id };
requester('/training/', 'POST', token, data)
.then(res => {
// bad code:
const newClass = { ...clazz, student_count: clazz.student_count+1 };
setUserCache({ ...user, training: [...user.training, {...res, session: newClass }] });
setClass(newClass);
refreshClass();
refreshUser();
})
.catch(err => {
console.log(err);
setError(true);
});
};
@ -120,14 +119,8 @@ export function ClassDetail(props) {
const data = { attendance_status: newStatus, session: id };
requester('/training/'+userTraining.id+'/', 'PUT', token, data)
.then(res => {
// bad code:
const studentChange = newStatus === 'withdrawn' ? -1 : 1
const newClass = { ...clazz, student_count: clazz.student_count + studentChange };
const trainingIndex = user.training.indexOf(userTraining);
const newTraining = user.training;
newTraining[trainingIndex] = {...res, session: newClass };
setUserCache({ ...user, training: newTraining });
setClass(newClass);
refreshClass();
refreshUser();
})
.catch(err => {
console.log(err);

11
webclient/src/Members.js
Unescape View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useReducer } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Item, Menu, Message, Segment, Table } from 'semantic-ui-react';
@ -74,6 +74,7 @@ export function Members(props) {
export function MemberDetail(props) {
const [result, setResult] = useState(false);
const [refreshCount, refreshResult] = useReducer(x => x + 1, 0);
const [error, setError] = useState(false);
const { token, user } = props;
const { id } = useParams();
@ -87,7 +88,7 @@ export function MemberDetail(props) {
console.log(err);
setError(true);
});
}, []);
}, [refreshCount]);
const member = result.member || false;
@ -105,7 +106,7 @@ export function MemberDetail(props) {
</p>
{isAdmin(user) ?
<AdminMemberInfo result={result} setResult={setResult} {...props} />
<AdminMemberInfo result={result} refreshResult={refreshResult} {...props} />
:
<BasicTable>
<Table.Body>
@ -124,13 +125,13 @@ export function MemberDetail(props) {
<Grid.Column>
{isAdmin(user) && <Segment padded>
<AdminMemberForm result={result} setResult={setResult} {...props} />
<AdminMemberForm result={result} refreshResult={refreshResult} {...props} />
</Segment>}
</Grid.Column>
</Grid>
{isAdmin(user) && <Segment padded>
<AdminMemberCards result={result} setResult={setResult} {...props} />
<AdminMemberCards result={result} refreshResult={refreshResult} {...props} />
</Segment>}
</div>

Write Preview
Loading…
Cancel
Save