jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Add spinner

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-02-28 00:00:18 -08:00
parent 644fea6ba8
commit 091d20e53d
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/Table.js
View File

@ -17,6 +17,8 @@ import Resource from './Resource.js';
import ViewCard from './ViewCard.js';
import Winner from './Winner.js';
import ChooseCard from './ChooseCard.js';
import { CircularProgress } from "@material-ui/core";
import 'moment-timezone';
/* Start of withRouter polyfill */
// https://reactrouter.com/docs/en/v6/faq#what-happened-to-withrouter-i-need-it
@ -218,7 +220,7 @@ const Chat = ({ table }) => {
}
const name = table.game ? table.game.name : "Why no game?";
const startTime = table.game ? table.game.startTime : Date.now();
const elapsed = table.game ? (table.game.timestamp - table.game.startTime) : undefined;
return (
<Paper className="Chat">
<List className="ChatList" id="ChatList" onScroll={chatScroll}>
@ -228,7 +230,7 @@ const Chat = ({ table }) => {
disabled={!name}
onChange={chatInput}
onKeyPress={chatKeyPress}
label={(<Moment format="h:mm:ss">{Date.now()-startTime}</Moment>)} variant="outlined"/>
label={elapsed && <Moment tz={"Etc/GMT"} format="h:mm:ss" durationFromNow interval={1000} date={table.game.startTime}></Moment>} variant="outlined"/>
</Paper>
);
}
@ -523,7 +525,8 @@ class Table extends React.Component {
error: "",
signature: "",
buildActive: false,
cardActive: undefined
cardActive: undefined,
loading: 0
};
this.componentDidMount = this.componentDidMount.bind(this);
this.updateDimensions = this.updateDimensions.bind(this);
@ -585,6 +588,8 @@ class Table extends React.Component {
value = '';
}
this.setState({ loading: this.state.loading + 1 });
return window.fetch(`${base}/api/v1/games/${this.state.game.id}/${action}/${value}`, {
method: "PUT",
cache: 'no-cache',
@ -607,6 +612,7 @@ class Table extends React.Component {
console.error(error);
this.setState({error: error.message});
}).then(() => {
this.setState({ loading: this.state.loading - 1 });
this.resetGameLoad();
});
}
@ -685,6 +691,7 @@ class Table extends React.Component {
return;
}
this.setState({ loading: this.state.loading + 1 });
return window.fetch(`${base}/api/v1/games/${this.state.game.id}`, {
method: "GET",
cache: 'no-cache',
@ -707,6 +714,7 @@ class Table extends React.Component {
console.error(error);
this.setState({error: error.message});
}).then(() => {
this.setState({ loading: this.state.loading - 1 });
this.resetGameLoad();
});
}
@ -725,6 +733,7 @@ class Table extends React.Component {
this.loadTimer = null;
}
this.setState({ loading: this.state.loading + 1 });
return window.fetch(`${base}/api/v1/games/${this.state.game.id}/state/${state}`, {
method: "PUT",
cache: 'no-cache',
@ -746,6 +755,7 @@ class Table extends React.Component {
console.error(error);
this.setState({error: error.message});
}).then(() => {
this.setState({ loading: this.state.loading + 1 });
this.resetGameLoad();
return this.game.state;
});
@ -952,6 +962,7 @@ class Table extends React.Component {
params.method = "POST";
}
this.setState({ loading: this.state.loading + 1 });
window.fetch(params.url, {
method: params.method,
cache: 'no-cache',
@ -1000,6 +1011,7 @@ class Table extends React.Component {
console.error(error);
this.setState({error: error.message});
}).then(() => {
this.setState({ loading: this.state.loading - 1 });
this.resetGameLoad();
});
@ -1060,6 +1072,9 @@ class Table extends React.Component {
return (
<div className="Table">
{ this.state.loading > 0 &&
<CircularProgress className='Loading'/>
}
<div style={{display: "inline-flex", flex: 1, flexDirection: "column"}}>
<Board table={this} game={game}/>