Comunic/comunicconsole
1
0
Fork 0
mirror of https://gitlab.com/comunic/comunicconsole synced 2025-07-07 18:42:49 +00:00
Code Issues Projects Releases Wiki Activity

Ready to present user settings

Browse Source
This commit is contained in:
Pierre HUBERT
2021-05-13 15:09:23 +02:00
parent e820c28648
commit d02d025418
2 changed files with 90 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/ui/widgets/AsyncWidget.tsx
View File

@ -1,6 +1,6 @@
/**
* Asynchronous loading widget
*
*
* @author Pierre Hubert
*/
@ -9,73 +9,85 @@ import React, { ReactNode } from "react";
import { CenterCircularProgress } from "./CenterCircularProgress";
enum Status {
LOADING,
ERROR,
SUCCESS
LOADING,
ERROR,
SUCCESS,
}
export interface AsyncWidgetProperties {
load: () => Promise<void>,
errorMessage: string,
onBuild: () => ReactNode
key?: number;
load: () => Promise<void>;
errorMessage: string;
onBuild: () => ReactNode;
}
interface AsyncWidgetState {
status: Status,
status: Status;
key?: number;
}
export class AsyncWidget extends React.Component<AsyncWidgetProperties, AsyncWidgetState> {
export class AsyncWidget extends React.Component<
AsyncWidgetProperties,
AsyncWidgetState
> {
constructor(props: any) {
super(props);
constructor(props: any) {
super(props);
this.state = {
status: Status.LOADING,
key: this.props.key,
};
this.state = {
status: Status.LOADING
}
this.reload = this.reload.bind(this);
}
this.reload = this.reload.bind(this);
}
async reload() {
try {
this.setState({ status: Status.LOADING });
async reload() {
try {
this.setState({status: Status.LOADING});
await this.props.load();
await this.props.load();
this.setState({ status: Status.SUCCESS });
} catch (e) {
console.error(e);
this.setState({ status: Status.ERROR });
}
}
this.setState({status: Status.SUCCESS});
} catch(e) {
console.error(e);
this.setState({status: Status.ERROR});
}
}
componentDidMount() {
this.reload();
}
componentDidMount() {
this.reload()
}
componentDidUpdate() {
if (this.state.key != this.props.key) {
this.setState({ key: this.props.key });
this.reload();
}
}
render() {
render() {
if (this.state.status === Status.ERROR)
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
}}
>
<Paper>
<div style={{ padding: "5px 10px" }}>
{this.props.errorMessage}
&nbsp;
<Button onClick={this.reload}>Try again</Button>
</div>
</Paper>
</div>
);
if (this.state.status === Status.ERROR)
return (<div style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
}}>
<Paper>
<div style={{padding: "5px 10px"}}>
{this.props.errorMessage}
&nbsp;
<Button onClick={this.reload}>Try again</Button>
</div>
</Paper>
</div>);
if (this.state.status === Status.SUCCESS) return this.props.onBuild();
if(this.state.status === Status.SUCCESS)
return this.props.onBuild();
return (<CenterCircularProgress></CenterCircularProgress>)
}
}
return <CenterCircularProgress></CenterCircularProgress>;
}
}