diff --git a/src/App.css b/src/App.css index f13b3c8..cc27349 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,8 @@ body { background-color: #212121; +} + +html, body, #root, .App { + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 72d8bc8..1e67068 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,9 @@ import React from 'react'; import './App.css'; -import { Button, createMuiTheme, ThemeProvider } from '@material-ui/core'; -import { ApplicationDialogsProvider, input, matAlert, matConfirm } from './ui/widgets/DialogsProvider'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core'; +import { ApplicationDialogsProvider } from './ui/widgets/DialogsProvider'; import { lightBlue, pink } from '@material-ui/core/colors'; +import { InitWidget } from './ui/widgets/InitWidget'; function App() { const darkTheme = createMuiTheme({ @@ -19,17 +20,8 @@ function App() { {/* Holder of dialogs */} - {/* TODO : holder of login state */} - - matAlert("heloo!!")}>alert - matConfirm("heloo!!").then((r) => matAlert("response: " + r))}>confirm - input({ - label: "Your best joke", - message: "Please share your best joke:", - initialValue: "initial", - minLength: 2, - maxLength: 10, - }).then((r) => matAlert("you wrote: " + r))}>input + {/* Initialization widget */} + ); diff --git a/src/ui/widgets/AsyncWidget.tsx b/src/ui/widgets/AsyncWidget.tsx new file mode 100644 index 0000000..e6c776f --- /dev/null +++ b/src/ui/widgets/AsyncWidget.tsx @@ -0,0 +1,81 @@ +/** + * Asynchronous loading widget + * + * @author Pierre Hubert + */ + +import { Button, Paper } from "@material-ui/core"; +import React, { ReactNode } from "react"; +import { CenterCircularProgress } from "./CenterCircularProgress"; + +enum Status { + LOADING, + ERROR, + SUCCESS +} + +export interface AsyncWidgetProperties { + load: () => Promise, + errorMessage: string, + onBuild: () => ReactNode +} + +interface AsyncWidgetState { + status: Status, +} + +export class AsyncWidget extends React.Component { + + constructor(props: any) { + super(props); + + this.state = { + status: Status.LOADING + } + + this.reload = this.reload.bind(this); + } + + async reload() { + try { + this.setState({status: Status.LOADING}); + + await this.props.load(); + + this.setState({status: Status.SUCCESS}); + } catch(e) { + console.error(e); + this.setState({status: Status.ERROR}); + } + } + + componentDidMount() { + this.reload() + } + + render() { + + if (this.state.status == Status.ERROR) + return ( + + + {this.props.errorMessage} + + + + Try again + + + ); + + if(this.state.status == Status.SUCCESS) + return this.props.onBuild(); + + return () + } +} \ No newline at end of file diff --git a/src/ui/widgets/CenterCircularProgress.tsx b/src/ui/widgets/CenterCircularProgress.tsx new file mode 100644 index 0000000..6b2c9d2 --- /dev/null +++ b/src/ui/widgets/CenterCircularProgress.tsx @@ -0,0 +1,12 @@ +import { CircularProgress } from "@material-ui/core"; + +export function CenterCircularProgress() { + return + + +} \ No newline at end of file diff --git a/src/ui/widgets/InitWidget.tsx b/src/ui/widgets/InitWidget.tsx new file mode 100644 index 0000000..43a1862 --- /dev/null +++ b/src/ui/widgets/InitWidget.tsx @@ -0,0 +1,39 @@ +/** + * Initialization widget + * + * @author Pierre Hubert + */ + +import React from "react"; +import { AsyncWidget } from "./AsyncWidget"; + + +export class InitWidget extends React.Component { + + constructor(props: any) { + super(props); + + this.init = this.init.bind(this); + this.build = this.build.bind(this); + } + + async init() { + await new Promise((res, rej) => { + setTimeout(() => { + rej(null); + }, 500) + }) + } + + render() { + return (); + } + + build() { + return (yes !!! done !!!); + } +} \ No newline at end of file